Generator Palet Warna
Warna komplementer dari merah #ff0000 adalah #00ffff, warna di seberangnya pada roda warna. Skema triadik dari merah menambahkan #00ff00 dan #0000ff. Teks hitam di atas putih punya rasio kontras 21:1.
Cara memakai
- Pilih warna dasar dari kotak warna, atau ketik kode HEX seperti #0b7a6a. Format RGB dan HSL seperti rgb(11, 122, 106) juga bisa.
- Pilih skema: Komplementer, Analog, Triadik atau Monokromatik. Warna dasar Anda diberi garis tepi.
- Klik baris HEX, RGB atau HSL untuk menyalin nilainya, atau tekan Salin semua HEX untuk seluruh palet.
- Lihat dua baris kontras di setiap warna. Keduanya menunjukkan seberapa terbaca teks putih dan teks hitam di atas warna itu.
Cara menghitung
Warna diolah dalam HSL: hue adalah posisi di roda warna dari 0 sampai 360 derajat, saturasi adalah seberapa pekat warnanya, dan lightness adalah terang gelapnya. Skema hanya memutar hue dan mempertahankan saturasi serta lightness, sehingga semua warna di palet terasa senada.
Komplementer menambahkan warna 180 derajat di seberang roda. Analog memakai tetangga 30 derajat di kiri dan kanan. Triadik memakai tiga warna yang terpisah 120 derajat. Monokromatik mempertahankan hue dan saturasi, lalu hanya mengubah lightness per 15 poin, di antara 8 dan 92 persen agar ujungnya tidak menjadi putih atau hitam murni.
Rasio kontras mengikuti WCAG 2. Setiap kanal diubah ke cahaya linear, luminans relatif L = 0.2126 R + 0.7152 G + 0.0722 B dihitung, lalu rasionya (L terang + 0.05) / (L gelap + 0.05), dari 1:1 sampai 21:1.
WCAG meminta minimal 4.5:1 untuk teks biasa (AA) dan 7:1 untuk AAA. Teks besar, sekitar 24 px atau 19 px tebal ke atas, cukup 3:1 untuk AA. Label di bawah tiap rasio memakai batas teks biasa, dan AA besar ditampilkan kalau hanya syarat teks besar yang terpenuhi.
Batas rasio kontras
| Level | Rasio | Untuk |
|---|---|---|
| AA besar | 3:1 | Teks besar dan elemen antarmuka |
| AA | 4.5:1 | Teks isi biasa |
| AAA | 7:1 | Keterbacaan lebih tinggi |
Pertanyaan umum
Apa itu warna komplementer?
Warna yang tepat berseberangan dengan warna dasar di roda warna, berjarak 180 derajat. Pasangan ini kontrasnya kuat, cocok untuk tombol ajakan yang harus menonjol dari latar.
Skema mana yang cocok untuk website?
Monokromatik paling aman untuk tampilan yang tenang. Analog terlihat harmonis dengan sedikit variasi. Komplementer dan triadik lebih berani, jadi pakai satu warna sebagai warna utama dan sisanya sebagai aksen kecil.
Apakah rasio kontras harus selalu tinggi?
Untuk teks, ya. Teks isi sebaiknya mencapai 4.5:1 terhadap latarnya. Bentuk dekoratif dan judul besar boleh lebih rendah, tetapi teks di dalam tombol dan tautan tetap harus memenuhi aturan.
Kenapa warna hasil bisa sedikit beda dari yang saya pilih manual?
Warna dasar disimpan persis seperti yang Anda masukkan. Warna lain dihitung dalam HSL lalu dibulatkan ke nilai RGB bulat, jadi bisa selisih satu angka dari pilihan manual.
Apakah warna saya disimpan?
Tidak. Semua dihitung di browser Anda. Pakai Bagikan tautan untuk menyimpan warna dasar dan skema di URL.