Pemilih warna
Cari kode pasti untuk warna apa pun, di semua format.
Cek kontras
- AA
- AA besar
- AAA
- AA
- AA besar
- AAA
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- 5 format warna
- Cek kontras WCAG
- Dukungan opacity
Cara memilih warna
- Geser di kotak untuk atur saturasi dan kecerahan, lalu geser slider hue.
- Atau ketik kode dalam format apa pun: HEX, RGB, HSL, HSV, atau CMYK.
- Salin kode yang kamu perlukan dan cek kontrasnya di bawah.
Perbandingan format warna
Setiap baris di bawah menjelaskan warna oranye yang sama. Hanya notasinya yang berbeda.
| Format | Contoh | Dipakai di |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, tool desain |
| RGB | rgb(240, 138, 60) | CSS, image editor |
| HSL | hsl(24, 84%, 59%) | CSS, paling mudah diatur dengan mata |
| HSV/HSB | hsv(24, 75%, 94%) | Pemilih warna di aplikasi paint dan desain |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Desain cetak dan pencampuran tinta |
Pakai HEX atau RGB untuk web, HSL kalau kamu mau menggeser kecerahan atau saturasi warna tanpa mengubah hue-nya, dan CMYK sebagai titik awal untuk cetak.
Level kontras WCAG
Cek kontras di bawah membandingkan warnamu dengan putih dan hitam solid, lalu menilai keduanya berdasarkan level WCAG 2.
| Level | Teks normal | Teks besar |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Teks besar berarti sekitar 24 px, atau 19 px bold. Kebanyakan situs cuma perlu lolos AA. AAA adalah standar lebih ketat yang biasanya dipakai situs pemerintah dan situs yang fokus aksesibilitas.
Tips memilih warna yang mudah diakses
- Pertahankan hue tetap dan turunkan lightness di HSL untuk mendapat warna yang lebih gelap dari warna yang sama, buat state hover dan active.
- Warna yang lolos AA di latar putih bisa gagal di latar berwarna, jadi cek kontras dengan latar asli halaman kamu, bukan cuma putih atau hitam.
- Eyedropper hanya jalan di Chrome dan Edge versi komputer. Firefox dan Safari belum menambahkan EyeDropper API.
- Minta proof dari percetakan sebelum mempercayai nilai CMYK untuk cetakan dalam jumlah besar. Angka yang sama bisa terlihat berbeda di kertas coated dan uncoated.
FAQ Pemilih warna
Bagaimana cara mengambil kode warna sesuatu di layarku?
Di Chrome dan Edge versi komputer, klik Ambil dari layar, lalu klik di mana saja di layar kamu. Browser lain belum menyediakan fitur ini, jadi ambil screenshot dan buka di image color picker.
Apa bedanya HEX, RGB, dan HSL?
Ketiganya menjelaskan warna yang sama dengan cara berbeda. HEX dan RGB memberi jumlah merah, hijau, dan biru (HEX menulisnya dalam basis 16), sedangkan HSL memberi hue, saturasi, dan lightness, yang lebih mudah diatur secara manual.
Rasio kontras berapa yang dibutuhkan supaya teks mudah dibaca?
WCAG level AA meminta minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar, artinya sekitar 24 px, atau 19 px bold. Level AAA menaikkan teks normal jadi 7:1.
Apakah nilai CMYK-nya persis akurat?
Nilainya adalah konversi matematis langsung dari RGB. Warna cetak sebenarnya tergantung tinta, kertas, dan profil printer, jadi pakai ini sebagai titik awal dan cek proof cetakan.
Apa yang diubah slider opacity?
Slider ini mengatur transparansi dari 0 (tidak terlihat) sampai 100 (solid). Di bawah 100, kode HEX mendapat dua digit tambahan dan RGB berubah jadi rgba(). Kontras dicek untuk warna itu seperti tampilannya di tiap latar.
HSV berguna untuk apa yang tidak bisa dilakukan RGB?
HSV memisahkan hue sebuah warna dari seberapa terang dan jenuhnya warna itu terlihat, makanya paint picker dan photo editor memberimu satu slider untuk hue dan satu lagi untuk kecerahan, bukan mencampur merah, hijau, dan biru dengan mata.
Bisakah aku dapat warna Pantone dari sini?
Tidak. Pantone adalah sistem spot-color berlisensi yang terikat ke tinta tertentu, bukan sekadar konversi matematis dari RGB atau CMYK. Pakai nilai CMYK sebagai titik awal dan pastikan kecocokannya lewat percetakan kamu.