Generator Warna Pastel

Pastel adalah warna murni yang dicampur banyak putih

Warna pastel adalah warna murni yang dicampur banyak putih sehingga tampak terang dan pucat. Merah muda pada tampilan pertama di atas, #FFCAE0, terdiri atas 21% warna murni #FF006A dan 79% putih. Kuning lemon #FDF6C5 terdiri atas 22% warna murni #FFDF00, 77% putih, dan 1% hitam. Wikipedia bahasa Indonesia juga menjelaskan bahwa warna pastel termasuk keluarga warna pucat yang, dalam ruang warna HSV, memiliki nilai tinggi dan saturasi rendah.

Setelah Anda memilih keluarga warna dan nada, generator ini mengundi kombinasi 3 sampai 8 warna pastel. Warna yang disukai bisa dikunci, lalu sisanya diundi ulang. Di peta pastel, Anda juga bisa menyeret titik untuk menyesuaikan rona dan kejernihan sendiri. Untuk setiap warna terpilih, tampil warna teks yang nyaman dibaca beserta rasio kontrasnya, kode HEX, RGB, HSL, HWB, dan OKLCH, serta takaran campuran warna murni dan putih.

Kapan Anda membutuhkan kombinasi pastel

Pastel tidak melelahkan mata meski dipakai pada bidang yang luas dan tidak menutupi teks maupun foto, sehingga sering dipakai sebagai warna latar. Namun, hal yang perlu dipertimbangkan berbeda di setiap penggunaan.

• Tampilan situs dan aplikasi: dipakai pada latar kartu, pita notifikasi, dan label, yaitu bidang yang luas tetapi tidak boleh terlalu mencolok. Yang terpenting adalah apakah teks di atasnya terbaca, jadi periksa warna teks pasangan beserta kontrasnya.
• Perlengkapan bayi dan desain bernuansa lembut: cocok untuk kartu undangan syukuran bayi, buku belajar anak-anak, atau spanduk produk baru yang perlu kesan lembut. Beberapa keluarga warna boleh dicampur, tetapi bila nadanya disamakan, banyak warna pun tetap tampak sebagai satu set.
• Presentasi dan dokumen: dipakai untuk pemisah baris tabel, kotak tiap langkah, dan area latar grafik. Satu warna aksen yang pekat dipadukan dengan beberapa pastel membuat bagian yang ingin ditonjolkan menjadi jelas.
• Jurnal, suvenir, dan ilustrasi: dipakai untuk menentukan warna stiker, hiasan planner, dan warna dasar ilustrasi. Saat warna layar dipindahkan ke cat atau cetakan, hasilnya bisa tidak sama, sehingga cetak percobaan diperlukan.

Cara memakai generator

1. Pada Keluarga warna, pilih Semua atau salah satu dari Merah, Oranye, Kuning, Hijau, Mint, Biru, Ungu, dan Merah muda. Bila Anda memilih satu keluarga, rona dan kejernihan diundi secara terbagi agar tidak saling tumpang tindih.
2. Pilih Nada di antara Pucat, Lembut, Jernih, dan Campur, lalu tentukan Jumlah dari 3 sampai 8 warna. Jika keluarga atau nada diubah, warna yang tidak dikunci langsung diundi ulang.
3. Tekan Undi ulang atau tombol Space. Warna yang disukai dikunci lewat ikon gembok pada kartunya, sehingga tetap ada meski diundi ulang.
4. Klik kartu untuk memilih warna, lalu seret titiknya di peta pastel atau klik posisi yang diinginkan. Kiri dan kanan mengubah rona, atas dan bawah mengubah kejernihan. Fokuskan titik, lalu geser satu petak dengan tombol panah, atau sepuluh petak bersama Shift.
5. Jika sudah punya warna tertentu, misalnya warna merek, tulis di Warna saya jadi pastel, seperti #2563EB, rgb(37 99 235), atau royalblue. Warna itu berubah menjadi pastel dengan rona yang sama, masuk ke kotak yang sedang dipilih, dan dikunci.
6. Kombinasi yang selesai dibawa lewat Salin semua HEX, Salin variabel CSS (termasuk warna teks pasangan), Simpan PNG (1200 × 630), dan Salin tautan. Tautan memuat warna beserta status kuncinya.

Pastel dibedakan dari banyaknya putih yang dicampurkan

Notasi warna HWB di CSS Color 4 menyatakan warna sebagai satu rona yang dicampur putih dan hitam dalam jumlah tertentu. Satu warna di layar dapat ditulis ulang dengan tepat sebagai porsi warna murni, putih, dan hitam. Putih adalah nilai RGB terkecil, hitam adalah 255 dikurangi nilai terbesar, dan sisanya adalah warna murni. Pastel ialah warna yang putihnya sangat dominan dan hampir tanpa hitam.

Saat mengundi warna, generator tidak menentukan porsi ini secara langsung. Ia memilih satu titik pada garis lurus yang menghubungkan warna murni dan putih di ruang warna OKLab, yang dirancang agar selisih tampilannya mendekati persepsi mata. Putih 79% yang sama terlihat sangat terang bila warna murninya kuning, tetapi kurang terang bila ungu. Nilai kejernihan pada peta adalah posisi titik itu, sedangkan takaran campuran di kolom rincian adalah hasil pemecahan ulang titik tersebut ke HWB.

Tiga nada: Pucat, Lembut, Jernih

Kejernihan berkisar dari 0 sampai 100, dan semakin mendekati 0 semakin banyak putihnya. Nada membagi kejernihan menjadi tiga rentang, sedangkan Campur mengundi dari seluruh rentang 0-100. Persentase putih adalah rentang yang dihitung pada semua rona di peta.

Tabel warna pastel: 8 keluarga × 3 nada

Ini 24 kode yang diundi dari rona tengah tiap keluarga pada nada Pucat (kejernihan 15), Lembut (48), dan Jernih (82). Posisi dan nilainya sama dengan di peta generator, sehingga warna yang dipilih dari tabel dapat digeser sedikit demi sedikit di peta untuk mencari warna yang mirip.

Warna teks di atas pastel

WCAG 2.2 menganjurkan kontras luminans antara teks isi dan latar minimal 4,5:1 (AA), atau 7:1 (AAA) untuk standar yang lebih ketat. Pastel sangat terang, sehingga teks putih di atasnya nyaris tidak terbaca. Setelah semua 36.360 warna pastel pada peta generator dihitung, kontras teks putih pada warna yang paling tinggi pun hanya 1,8:1, yang bahkan tidak mencapai batas 3:1 untuk teks besar.

Sebaliknya, jika warna yang sangat pekat dengan rona yang sama (kecerahan OKLCH 36%) dipakai sebagai teks, semua pastel mencapai 6,1:1 atau lebih, dan 88,0% di antaranya mencapai 7:1 atau lebih. Warna inilah yang ditampilkan generator sebagai "teks pasangan". Abu-abu #767676, yang hanya sedikit melampaui 4,5:1 di atas latar putih, tidak memenuhi batas di atas pastel.

Kontras ditulis dengan pembulatan ke bawah pada satu angka di belakang koma. WCAG tidak membulatkan kontras, sehingga 4,49:1 dianggap belum mencapai 4,5:1. Teks hitam pun cukup terbaca, tetapi warna pekat dengan rona yang sama tampak serasi dengan latarnya, sehingga kesan lembut khas pastel tidak mudah rusak.

Mengapa kecerahan tiap keluarga berbeda

Bahkan pada nada Lembut yang sama, pastel kuning dan mint hampir putih, sedangkan merah muda dan ungu tampak lebih pekat. Penyebabnya adalah kecerahan warna murninya berbeda. Warna murni kuning sudah terang sejak awal, jadi sedikit putih saja sudah membuatnya sangat terang. Warna murni ungu gelap, sehingga perlu banyak putih agar sama terangnya.

Karena itu, makin gelap warna murni suatu keluarga, makin banyak putih yang dicampurkan generator agar kecerahan pastelnya tidak turun di bawah batas tertentu. Bila pastel kuning digelapkan agar lebih pekat, hasilnya kusam seperti warna mustard atau zaitun. Maka, meski kejernihan dinaikkan sampai 100, pastel keluarga kuning tetap menyisakan putih lebih dari 60%.

Mengubah warna Anda menjadi pastel

"Warna saya jadi pastel" mempertahankan sudut rona OKLCH dari warna yang Anda masukkan, lalu membuat pastel dengan kejernihan tengah dari nada yang sedang dipilih. Jika warna yang dimasukkan sudah lebih terang daripada pastel paling jernih pada rona itu, kejernihan yang dipilih adalah yang paling dekat dengan kecerahan aslinya, sehingga warna yang memang sudah pastel hampir tidak berubah. Tabel di bawah menunjukkan hasil pada nada Lembut.

Warna yang hampir tanpa kroma seperti abu-abu, putih, dan hitam (kroma OKLCH di bawah 0,006) tidak dapat ditentukan akan dijadikan pastel keluarga mana, sehingga tidak diubah dan hanya ditampilkan keterangan. Putih yang sedikit berwarna seperti aliceblue #F0F8FF memiliki kroma 0,013, jadi diubah menjadi pastel paling pucat pada ronanya, #E1F1FF.

Kesalahan yang sering terjadi

• Teks putih di atas latar pastel: sering terlihat pada tombol dan spanduk, tetapi kontrasnya hanya 1-1,8:1 sehingga sulit dibaca. Pakai warna teks pasangan atau keluarga hitam, dan bila teks putih memang harus dipakai, ganti latarnya dengan warna pekat, bukan pastel.
• Teks dan latar sama-sama pastel: teks biru langit di atas latar merah muda, misalnya, sama-sama terang sehingga kontrasnya nyaris tidak ada. Serahkan bidang pada pastel dan teks pada warna pekat.
• Menilai hanya dari angka saturasi HSL: notasi HSL #FFCAE0 adalah hsl(335 100% 89.6%), dengan saturasi 100%. Itu karena saturasi HSL dihitung terpisah dari kecerahan. Untuk menilai apakah suatu warna pastel, lebih tepat melihat saturasi HSV (21% untuk warna ini) atau persentase putih di HWB (79%).
• Warna kusam karena dicampur abu-abu: jika yang dicampurkan abu-abu, bukan putih, hitam di HWB bertambah dan hasilnya menjadi warna "dusty" yang kalem. Warna ini juga banyak dipakai, tetapi keluarganya berbeda dari pastel jernih, sehingga bila dicampur dengan hasil generator ini, salah satunya bisa tampak suram.
• Nada tiap keluarga tidak seragam: kuning pucat yang dipadukan dengan ungu jernih membuat ungunya menonjol sendiri. Saat memakai beberapa keluarga, kunci satu nada saat mengundi agar tampilannya rapi.
• Mencetak warna layar apa adanya: pastel di monitor adalah warna cahaya, sehingga di atas kertas hasilnya bisa lebih kusam atau kekuningan. Untuk bahan cetak, periksa dengan contoh warna CMYK dari percetakan atau cetak percobaan.

Batasan dan catatan

• Tidak ada standar internasional baku untuk "pastel". Rentang generator ini (putih 58-93% pada warna murni) adalah nilai rancangan yang ditetapkan agar mencakup warna yang umum disebut pastel, dan bisa berbeda dari pastel pada alat lain.
• Semua warna mengacu pada layar sRGB. Pada monitor gamut lebar, mode malam ponsel, atau pengaturan koreksi warna, kode yang sama bisa tampak berbeda.
• Takaran campuran adalah nilai hasil pemecahan warna layar ke HWB. Angka ini berbeda dari jumlah sebenarnya pada cat atau pensil warna, jadi gunakan hanya sebagai acuan saat mencampur bahan lukis dan pastikan dengan sapuan percobaan.
• Kontras luminans hanya melihat selisih kecerahan antara teks dan latar. Apakah dua pastel dapat dibedakan oleh orang dengan gangguan penglihatan warna perlu diperiksa secara terpisah.
• Undi ulang memakai angka acak peramban, sehingga pengaturan yang sama pun menghasilkan kombinasi berbeda setiap kali. Simpan kombinasi yang disukai lewat Salin tautan atau Simpan PNG.

Dasar perhitungan: warna dihitung dengan definisi OKLab dan HWB pada W3C CSS Color 4 (Candidate Recommendation Draft 20 Oktober 2026), dan kontras dengan rumus luminans relatif WCAG 2.2 (Recommendation 12 Desember 2024). Kode dan kontras pada tabel adalah nilai yang dihitung dengan generator ini pada 21 Oktober 2026.

Sumber

• 01W3C — CSS Color Module Level 4, 8. HWB ColorsNotasi hwb() yang menyatakan warna sebagai jumlah putih dan hitam yang dicampur ke satu rona; bila putih + hitam mencapai 100% atau lebih, hasilnya abu-abu
• 02W3C — CSS Color Module Level 4, 9.2 Oklab and OkLChRuang warna OKLab dan OKLCH untuk peta dan pengundian, serta pemetaan gamut pada bagian 14 (kroma dikurangi hingga masuk ke sRGB)
• 03W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)4,5:1 untuk teks isi, 3:1 untuk teks besar, 7:1 pada 1.4.6, dan rumus kontras
• 04Björn Ottosson — A perceptual color space for image processingDefinisi ruang warna OKLab dan matriks konversinya
• 05Wikipedia — Pastel (warna)Penjelasan bahwa pastel termasuk keluarga warna pucat dengan nilai tinggi dan saturasi rendah pada ruang warna HSV

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama