Konverter warna dan kontras
Ubah warna antara HEX, RGB, HSL, HSV dan CMYK, dan cek apakah dua warna punya kontras yang cukup agar teks mudah dibaca.
Berjalan sepenuhnya di browser Anda
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Nama CSS
Cek kontras
Rasio kontras –
| Penggunaan | Minimal | Hasil |
|---|---|---|
| Teks normal, AA | 4,5:1 | |
| Teks normal, AAA | 7:1 | |
| Teks besar, AA | 3:1 | |
| Teks besar, AAA | 4,5:1 | |
| Ikon dan bagian UI, AA | 3:1 |
Membaca HEX (3, 4, 6 atau 8 digit), rgb(), hsl(), hsv(), cmyk() dan nama warna CSS; sintaks warna CSS lainnya dibaca oleh browser Anda jika memungkinkan. HSL, HSV dan CMYK ditampilkan dengan satu angka desimal.
Cara mengonversi warna
- Ketik atau tempel warna dalam format umum apa pun, seperti
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)ataunavy, atau pilih dengan pemilih warna. - Salin format yang Anda butuhkan dari daftar. Nilainya diperbarui sambil Anda mengetik.
- Di Cek kontras, masukkan warna teks dan warna latar belakang untuk melihat rasio kontrasnya dan apakah lolos WCAG AA dan AAA.
Format warna dan kontras
Konversi warna HEX ke RGB dan sebaliknya mudah karena keduanya menggambarkan warna layar sebagai jumlah merah, hijau dan biru dari 0 sampai 255; HEX hanya menulis setiap jumlah sebagai dua digit heksadesimal, dengan pasangan ketiga opsional untuk opasitas. HSL dan HSV menggambarkan warna yang sama berdasarkan hue (sudut di sekeliling roda warna), saturasi, dan lightness atau value, sehingga lebih mudah memilih versi yang lebih terang atau lebih pudar dari sebuah warna. Semuanya adalah koordinat berbeda untuk warna sRGB yang sama, jadi konversi di antaranya tepat, kecuali pembulatan.
CMYK berbeda: CMYK menggambarkan tinta, dan konversi yang sebenarnya bergantung pada proses cetaknya. Angka yang ditampilkan memakai rumus sederhana (hitam adalah 1 dikurangi kanal paling terang, dan tinta lain mengisi sisanya), berguna untuk pekerjaan kasar tetapi bukan pengganti profil cetak.
Pengecek kontras menerapkan rumus kontras WCAG 2, yang dipakai dalam audit aksesibilitas dan oleh developer tools di browser. Rumus ini hanya mengukur kontras luminans, jadi tidak bisa memberi tahu Anda tentang pasangan warna yang bermasalah bagi penderita buta warna, seperti merah di atas hijau, dan font yang sangat tipis atau kecil mungkin butuh kontras lebih tinggi dari batas minimal.
Tips
- Butuh warna satu piksel di foto atau screenshot? Gunakan Ambil warna dari gambar.
- Membuat QR code dengan warna brand? Generator QR code memberi peringatan jika kontrasnya terlalu rendah untuk dipindai.
- Mengonversi angka hex yang bukan warna? Coba Konverter basis bilangan.
Pertanyaan umum
Apakah nilai CMYK-nya tepat untuk cetak?
Hanya kira-kira. CMYK di sini memakai rumus sederhana yang mengonversi RGB layar tanpa profil warna, seperti yang dipakai kebanyakan konverter online. Percetakan bekerja dengan tinta dan kertas tertentu, yang dijelaskan oleh profil ICC, jadi untuk pekerjaan cetak, konversikan di software desain dengan profil yang diberikan percetakan Anda.
Bagaimana rasio kontras dihitung?
Dengan rumus WCAG 2: luminans relatif setiap warna dihitung dari nilai sRGB-nya, dan rasionya adalah (yang lebih terang + 0,05) dibagi (yang lebih gelap + 0,05). Rentangnya dari 1:1 (tanpa kontras) hingga 21:1 (hitam di atas putih). Teks WCAG terbaru memakai ambang 0,04045 dalam rumus; salinan lama menyebut 0,03928, yang memberi hasil sama untuk setiap warna 8-bit.
Berapa rasio yang dibutuhkan AA dan AAA?
Teks normal butuh 4,5:1 untuk AA dan 7:1 untuk AAA. Teks besar, yaitu minimal 24 px reguler atau sekitar 18,7 px tebal, butuh 3:1 untuk AA dan 4,5:1 untuk AAA. Ikon, garis tepi input dan bagian antarmuka lainnya butuh 3:1 (WCAG 1.4.11). Rasio tidak dibulatkan ke atas: 4,49:1 gagal AA untuk teks normal.
Bagaimana dengan warna transparan?
Warna teks yang sebagian transparan dicampur dulu dengan latar belakang, seperti yang ditampilkan layar, lalu warna hasil campurannya yang diukur. Latar belakang yang sebagian transparan dianggap berada di atas warna putih. Setiap kanal dibulatkan ke bilangan bulat setelah dicampur, seperti yang akan ditampilkan layar.
Mengapa nilai HSL sedikit berubah setelah dikonversi balik?
Warna layar punya 256 tingkat per kanal, jadi sebagian besar nilai HSL dan HSV tidak jatuh tepat di salah satunya. Konverter menyimpan presisi penuh di dalam dan hanya membulatkan untuk tampilan: HEX dan RGB ke bilangan bulat, HSL, HSV dan CMYK ke satu angka desimal.
Apakah alat ini mengenal nama warna CSS?
Ya, semua 148 warna bernama di CSS, seperti rebeccapurple dan cornflowerblue. Ketik sebuah nama untuk mengonversinya; jika sebuah warna sama persis dengan sebuah nama, namanya juga ditampilkan. Beberapa warna punya dua nama, seperti aqua dan cyan.