Generator Palet Warna Harmonis

Dari satu warna dasar, buat palet harmoni dan gradasi kecerahan 50-900, lalu cek kontras teks dan keterbedaan bagi buta warna

Generator palet warna harmonis ini berangkat dari satu warna, misalnya warna merek atau warna yang sudah Anda sukai. Tentukan posisi warna itu di roda warna, lalu pilih salah satu aturan (monokrom, analogus, komplementer, split komplementer, triadik, atau persegi) untuk mendapatkan warna utama yang dipakai bersama. Untuk setiap warna utama, alat ini membuat sepuluh langkah gradasi kecerahan, dari 50 yang paling terang sampai 900 yang paling gelap. Warna yang benar-benar dibutuhkan di layar, seperti latar, garis tepi, tombol, dan teks, umumnya bisa diambil dari gradasi ini.

Sel yang Anda pilih langsung dinilai kontrasnya terhadap teks putih dan teks hitam menurut WCAG 2.2, dan alat ini juga mencari langkah lain pada baris yang sama yang bisa dipakai sebagai teks di atasnya. Alat ini juga menunjukkan dalam angka seberapa dekat warna-warna utama menjadi satu sama lain bila dilihat dengan penglihatan tipe 1, 2, dan 3, atau dicetak hitam putih. Semua perhitungan berjalan di browser ini, dan warna bisa disalin sebagai HEX atau variabel CSS.

Kapan alat ini berguna

• Saat baru satu warna merek yang sudah ditetapkan: tentukan warna pendamping dan warna aksen yang cocok dengan warna logo lewat aturan, lalu dapatkan sekaligus gradasi terang untuk latar dan gradasi gelap untuk teks.
• Saat butuh tingkatan untuk tombol, lencana, dan kotak notifikasi: pilih warna menurut peran, misalnya 50 untuk latar, 200 untuk garis tepi, dan 600 untuk teks dari keluarga warna yang sama, lalu salin sebagai variabel CSS. Teks putih atau hitam mana yang lebih terbaca pada tiap sel langsung terlihat dari warna tulisannya.
• Saat memilih warna legenda grafik atau peta: pakai aturan triadik atau persegi untuk mendapat warna yang berjauhan, lalu pada tampilan menurut jenis buta warna, putuskan apakah kombinasi yang ditandai "makin dekat" perlu ditambah pola atau label.
• Saat memeriksa warna komplementer atau analogus: berguna untuk tugas seni dan desain yang meminta warna komplementer atau warna tetangga. Hanya saja, hasilnya bisa berbeda dari roda warna cat (RYB) karena dasarnya lain, jadi baca juga bagian "Mengapa ada dua roda warna" di bawah.

Cara memakai

1. Masukkan warna dasar: pada kolom warna, tulis dengan format apa saja, seperti #2E6BE6, rgb(46 107 230), hsl(220 79% 54%), oklch(56% 0.2 262), atau royalblue. Kotak di sebelah kiri membuka pemilih warna, dan Anda juga bisa mulai dari warna contoh atau tombol acak.
2. Atur halus di roda warna: seret titik besar untuk mengubah hue (arah keliling) dan saturasi (jarak dari pusat), dan ubah kecerahan dengan batang di bawahnya. Setelah roda difokuskan, tombol panah kiri-kanan menggeser hue 1°, dan panah atas-bawah menggeser saturasi 1% (tekan Shift untuk 10 kali lipat).
3. Pilih aturan harmoni dan jenis roda warna: saat salah satu dari enam aturan ditekan, titik-titik kecil meluncur ke posisi baru di roda dan warna utama di bagian atas berganti. Roda warna bisa dipilih antara HSL dan OKLCH.
4. Pilih sel yang dibutuhkan dari gradasi kecerahan: tekan sel pada tabel, lalu kode, kontras, dan calon warna teks pada baris yang sama muncul di bawah "Warna terpilih". Menekan baris kode akan menyalin nilainya, dan "Jadikan warna dasar" membuat palet baru dari sel itu.
5. Periksa menurut jenis buta warna, lalu ekspor: jika ada baris yang ditandai "makin dekat" atau "tidak terbedakan", perlebar selisih kecerahannya atau pilih aturan lain. Terakhir, bawa hasilnya lewat Salin HEX, Salin variabel CSS (semua gradasi), atau Salin tautan.

Enam aturan harmoni warna

Aturan menentukan berapa derajat hue diputar dari warna dasar. Warna dasar selalu dibiarkan, dan hanya warna utama lainnya yang dihitung. Monokrom tidak memutar sudut, tetapi hanya menurunkan saturasi.

Versi lama mencampurkan variasi kecerahan pada setiap aturan sehingga selalu terisi enam kotak. Versi baru hanya menaruh warna utama hasil aturan di bagian atas, dan variasi kecerahan dipisahkan ke tabel gradasi di bawahnya. Tujuannya agar tidak tertukar mana warna yang berasal dari aturan dan mana yang hanya variasi kecerahan dari warna yang sama.

Mengapa ada dua roda warna: HSL dan OKLCH

Roda warna HSL membiarkan saturasi dan kecerahan HSL warna dasar, lalu hanya memutar sudut hue. Versi lama dan kebanyakan alat grafis memakai cara ini, sehingga sudutnya sama dengan komplementer yang Anda temukan di alat lain. Kelemahannya, angka HSL tidak sesuai dengan kecerahan yang dirasakan mata. CSS Color 4 menjelaskan bahwa pada kecerahan HSL yang sama, kuning tampak jauh lebih terang daripada biru. Selisih hue 30° juga tampak mirip antara 220° dan 250°, tetapi terlihat sangat berbeda antara 50° dan 80°.

Roda warna OKLCH menyamakan kecerahan (L) dan kroma (C) yang dirasakan mata dengan warna dasar, lalu hanya memutar sudut hue. Karena itu kecerahan warna-warna utama menjadi merata, dan kontras teksnya juga bergerak pada tingkat yang mirip. Sebagai gantinya, pada kecerahan yang sama muncul warna yang tidak bisa ditampilkan layar (sRGB). Dalam kasus itu kecerahan dan hue dipertahankan, dan hanya kroma yang diturunkan. Arahnya sama dengan pemetaan gamut di CSS Color 4 §14, yang menurunkan kroma agar masuk ke dalam rentang. Bagian berarsir pada roda adalah area yang tidak bisa ditampilkan pada kecerahan itu.

L adalah kecerahan OKLCH (0 sampai 1). Bila Anda ingin kontras yang mencolok, HSL cocok sebagai titik awal, dan bila ingin kombinasi tenang dengan kecerahan merata, OKLCH lebih baik. Roda warna cat (RYB) yang dipelajari di pelajaran seni adalah roda yang dibagi berdasarkan merah, kuning, dan biru, sedangkan kedua roda di alat ini berasal dari warna layar (RGB). Warna dasar pembagi rodanya berbeda, sehingga warna yang sama menempati posisi berbeda, dan komplementer di posisi seberangnya pun berbeda. Tidak ada yang salah; hanya dasarnya yang lain.

Cara gradasi kecerahan dibuat

Gradasi terdiri dari sepuluh posisi, dengan kecerahan OKLCH L diturunkan 0,08 demi 0,08 dari 0,97 (50) sampai 0,25 (900). Sel yang lebih terang daripada warna dasar dicampur lurus ke arah putih di Oklab, sel yang lebih gelap ke arah hitam, sampai kecerahannya sesuai target. Hue tetap, dan kroma berkurang dengan perbandingan yang sama saat mendekati putih atau hitam, sehingga sel yang sangat terang tidak berubah menjadi warna neon. Ruang campur bawaan color-mix() di CSS Color 5 adalah Oklab, jadi hitungannya sama dengan color-mix(in oklab, warna-dasar, white n%).

Warna utama masuk apa adanya ke sel yang L-nya paling dekat, dan ditandai titik (•) pada tabel. Nomor langkah adalah posisi kecerahan, sehingga kuning terang (#F9A825, L 0,792) masuk ke sel 200, sedangkan biru dongker pekat masuk ke sel 700 sampai 800. Pada sistem desain lain "kuning 500" adalah kuning terang, tetapi pada tabel ini baris kuning pada 500 condong ke cokelat. Ini pilihan agar nomor yang sama punya kecerahan yang sama, sehingga warna berbeda lebih mudah dipadukan.

Pada baris abu-abu, teks putih melewati 4,5:1 mulai dari 600, dan teks hitam melewati 4,5:1 sampai 500. Baris berwarna juga berganti kira-kira di sekitar sini, tetapi walau L sama, luminans WCAG berbeda untuk tiap warna, sehingga batasnya bergeser sekitar satu langkah. Posisi tempat warna teks sel pada tabel berganti dari putih ke hitam adalah batas itu.

Cara membaca kontras teks

• Patokan: WCAG 2.2 meminta 4,5:1 untuk teks biasa (1.4.3, AA), 3:1 untuk teks besar (18 pt ke atas, atau 14 pt tebal ke atas), dan 7:1 untuk 1.4.6 (AAA) yang lebih ketat. "AA, AAA, Hanya teks besar, Tidak lulus" pada contoh warna mengikuti pembagian ini.
• Tidak dibulatkan: Understanding SC 1.4.3 menyatakan bahwa rasio hasil hitungan tidak dibulatkan (4,499:1 tidak mencapai 4,5:1). Karena itu alat ini memotong ke satu angka desimal dan menilai berdasarkan nilai yang tampil.
• Putih atau hitam, salah satunya selalu lulus: untuk warna apa pun, kontras yang lebih besar di antara teks putih dan teks hitam tidak turun di bawah 4,58:1. Hal ini karena pada luminans tempat kedua kontras sama (sekitar 0,179), keduanya bernilai 4,58:1. Jadi warna teks pada sel di tabel selalu yang melewati 4,5:1.
• Calon warna teks pada baris yang sama: alat ini mencari langkah terdekat ke atas dan ke bawah dari sel terpilih yang kontrasnya 4,5:1 atau lebih. Pada baris dasar di layar pertama, latar 50 (#F0F5FF) dengan teks 600 (#2558C0) menghasilkan 5,9:1, dan latar 100 dengan teks 600 menghasilkan 4,6:1. Warna dasar itu sendiri (500) tidak mencapai 4,5:1 dengan sel mana pun di barisnya, sehingga teks putih (4,8:1) adalah pilihan yang tepat.

Tampilan menurut jenis buta warna dan tanda "makin dekat"

Warna utama diubah menjadi warna seperti yang terlihat dengan penglihatan protan (buta merah), deutan (buta hijau), dan tritan (buta biru), serta saat dicetak hitam putih, lalu ditampilkan berdampingan. Protan dan deutan digambar dengan model Machado dkk. (2009), dan tritan dengan cara Brettel dkk. (1997). Intensitasnya adalah dikromat (100%), yaitu tanpa kerucut yang bersangkutan. Hitam putih adalah nilai luminans WCAG yang dialihkan ke abu-abu.

Angka di sisi kanan tiap baris adalah jarak OKLab (ΔEOK) antara dua warna utama yang paling dekat pada tampilan itu. CSS Color 4 menetapkan selisih OkLCh 0,02 sebagai selisih yang baru bisa dikenali (JND). Alat ini menandai selisih di bawah 0,02 sebagai "tidak terbedakan", dan jarak yang turun di bawah separuh jarak pada warna asli sebagai "makin dekat". Patokan separuh itu bukan standar, melainkan garis peringatan yang ditetapkan alat ini.

WCAG 2.2 1.4.1 meminta agar informasi tidak disampaikan hanya dengan warna. Walaupun tidak muncul "makin dekat", jangan membedakan status atau kategori hanya dengan warna; tambahkan teks, ikon, atau pola. Jika pada baris hitam putih dua warna menjadi dekat, cara tercepat adalah melebarkan selisih kecerahan keduanya.

Contoh pada layar pertama, langkah demi langkah

Layar pertama memakai warna dasar #2E6BE6, aturan split komplementer, dan roda warna HSL. Dari hue HSL 220°, diputar +150° (10°) dan −150° (70°) dengan saturasi 79% dan kecerahan 54% dibiarkan, sehingga muncul dua warna.

Kecerahan HSL ketiganya sama-sama 54%, tetapi kecerahan OKLCH-nya terpaut menjadi 0,560, 0,629, dan 0,873, sehingga hijau kekuningan masuk ke sel 100 dan jingga kemerahan ke sel 400. Di atas hijau kekuningan hanya teks hitam yang melewati patokan teks biasa, dan di atas biru hanya teks putih. Bila dari warna dasar yang sama dipilih roda warna OKLCH, kecerahan ketiga warna berkumpul di sekitar 0,56 dan warnanya menjadi lebih tenang.

Kesalahan yang sering terjadi

• Mengira alat yang satu dan yang lain memberi komplementer yang berbeda karena salah: roda warna cat (RYB), roda warna layar (HSL), dan roda warna berbasis persepsi (OKLCH) memberi komplementer yang berbeda untuk warna yang sama. Periksa dulu roda mana yang dipakai.
• Menganggap kecerahan HSL yang sama berarti sama terangnya: seperti contoh layar pertama, tiga warna dengan HSL 54% sebenarnya sangat berbeda kecerahannya. Untuk warna yang akan dilapisi teks, nilailah dengan angka kontras atau L pada OKLCH.
• Memakai warna utama langsung sebagai warna teks: warna utama dengan saturasi tinggi sering tidak mencapai 4,5:1 bahkan di atas latar putih. Untuk teks, sel 600 sampai 900 pada baris yang sama lebih aman.
• Menyamakan nomor langkah dengan sistem desain lain: nomor pada tabel ini adalah posisi kecerahan. Kuning 500 yang condong ke cokelat bukan kesalahan, dan kuning terang ada di sel 200.
• Memutar aturan harmoni pada warna netral: abu-abu, putih, dan hitam tidak punya sudut hue sehingga aturan apa pun menghasilkan abu-abu yang sama. Seret titik pada roda ke luar agar ada sedikit saturasi. Putih dan hitam berada di ujung kecerahan (100% dan 0%) sehingga menyeret saja tidak mengubah apa pun; geser dulu penggeser kecerahan ke arah tengah.
• Berusaha menyesuaikan dengan warna aman web: warna aman web adalah 216 warna yang hanya menggabungkan merah, hijau, dan biru dalam enam langkah (00, 33, 66, 99, CC, FF), yaitu patokan untuk lingkungan layar lama yang hanya bisa menampilkan sedikit warna. Pada layar web sekarang Anda tidak perlu menyesuaikannya, dan acuilah hanya bila menyesuaikan dengan sistem lama yang memakai palet terbatas.

Batasan dan hal yang perlu diperhatikan

• Aturan harmoni hanya merapikan hubungan sudut hue dan tidak menjamin hasilnya indah. Aturan adalah titik awal, dan memilih sesuai makna merek serta penggunaannya adalah tugas manusia.
• Warna dihitung dalam sRGB dan diekspor sebagai HEX. HEX yang sama bisa tampak berbeda di tiap monitor, dan nilai CMYK untuk cetak tidak dibuat oleh alat ini.
• Simulasi penglihatan warna adalah perkiraan yang memodelkan dikromat rata-rata. Tingkat yang sebenarnya terlihat berbeda pada tiap orang, dan pada buta warna ringan selisihnya berkurang lebih sedikit daripada yang ditunjukkan di sini.
• Penilaian kontras hanya melihat dua warna, yaitu warna teks dan warna latar. Ketebalan huruf, ukuran, pola latar, dan efek semi-transparan perlu Anda periksa sendiri.
• Transparansi (alfa) pada masukan diabaikan dan dihitung sebagai warna buram penuh. Tautan hanya memuat warna, aturan, dan jenis roda warna, dan sel yang dipilih tidak ikut tersimpan.

Dasar: CSS Color 4 (draf 18-08-2025), CSS Color 5 (draf 13-09-2026), dan WCAG 2.2 diperiksa pada 20-10-2026. Angka di tabel artikel dihitung ulang dengan kode perhitungan alat ini.

Sumber

• 01W3C: CSS Color Module Level 4 (CRD 2025-08-18)§7 HSL dan ketidakmerataan sudut hue (contoh 220°/250°, 50°/80°), §9.2 Oklab dan OkLCh (biru L 0,452 · kuning 0,968), §14 pemetaan gamut dan JND 0,02
• 02W3C: CSS Color Module Level 5 (WD 2026-09-13)§3 color-mix(), ruang campur bawaan adalah Oklab bila tidak ditentukan
• 03Björn Ottosson: A perceptual color space for image processing (2020)Matriks konversi sRGB ↔ Oklab
• 04W3C: WCAG 2.21.4.1 tidak menyampaikan informasi hanya dengan warna, 1.4.3 kontras 4,5:1 (teks besar 3:1), 1.4.6 7:1, rumus rasio kontras
• 05W3C: Understanding SC 1.4.3 Contrast (Minimum)Rasio tidak dibulatkan (4,499:1 kurang dari 4,5:1), teks besar 18 pt atau 14 pt tebal
• 06Machado GM, Oliveira MM, Fernandes LAF. A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG 2009;15(6):1291–1298Matriks simulasi protan dan deutan
• 07DaltonLens: Understanding LMS-based Color Blindness Simulations (2021)Simulasi tritan dengan cara Brettel dkk. 1997 (panjang gelombang acuan 485 dan 660 nm)
• 08Adobe Express: Color wheel explainedDua jenis roda warna: RYB dipakai pelukis saat mencampur cat, RGB dipakai di layar komputer dan TV; komplementer = dua warna di posisi berseberangan pada roda warna

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama