Konverter warna

Apa yang dilakukan alat ini

Dua pekerjaan yang pada akhirnya selalu menjadi satu. Anda punya warna dan membutuhkannya dalam notasi berbeda — berkas desain mengatakan satu hal, lembar gaya menginginkan yang lain. Dan Anda punya dua warna dan perlu tahu apakah teks pada yang pertama terbaca di atas yang kedua. Jadi halaman ini mengambil dua warna, menampilkan masing-masing dalam setiap format sekaligus, dan mengukur kontras di antaranya.

Semuanya berjalan di peramban Anda. Tak ada bagian dari palet merek yang belum dirilis yang perlu dikirim ke server untuk dikonversi.

Kelima notasi

Mana pun dari ini bisa ditempelkan, dan semuanya dikembalikan:

• Heksadesimal — tiga, empat, enam, atau delapan digit. Bentuk pendek menggandakan tiap digit, jadi #f0a berarti #ff00aa. Empat dan delapan digit membawa alfa pada posisi terakhir.
• RGB — ketiga kanal sebagai angka atau persentase. Baik rgb(59, 130, 246) maupun rgb(59 130 246 / 50%) diterima; bentuk koma adalah yang ditulis kembali alat ini, karena itu masih yang dipakai kebanyakan kode di sekitar Anda.
• HSL — rona dalam derajat, lalu saturasi dan kecerahan sebagai persentase. Rona membungkus, jadi 480 dan -120 valid dan berarti 120 dan 240.
• OKLCH — kecerahan, kroma, dan rona dalam ruang yang seragam secara perseptual. Kecerahan boleh ditulis 62.8% atau 0.628.
• Nama CSS — seluruh 148-nya, termasuk rebeccapurple dan kedua ejaan setiap grey. Nama hanya ditampilkan dalam keluaran ketika ia cocok persis.

Satu keanehan yang layak diketahui: heksadesimal, RGB, dan OKLCH semuanya bertahan berpulang-pergi tanpa perubahan, tetapi HSL tak sepenuhnya. OKLCH dicetak pada presisi yang cukup untuk kembali menjadi warna yang sama; HSL dicetak pada presisi yang benar-benar dibaca orang — derajat bulat, satu desimal persen — dan itu tak cukup untuk menjangkau seluruh 16,7 juta warna sRGB. Konversi heksadesimal ke HSL dan kembali dan kanal bisa bergerak satu langkah, dan dua pada sebagian warna; tak pernah tiga. Alternatifnya adalah keluaran seperti hsl(217.22, 91.19%, 59.8%), yang tak ada yang mau menempelnya. Galatnya jauh di bawah yang bisa dilihat mata.

Mengapa OKLCH ada

HSL tampak seperti menjelaskan kecerahan, dan ia tidak. Angka kecerahannya adalah sifat dari angkanya, bukan dari cahayanya. Kuning murni dan biru murni keduanya 50% kecerahan dalam HSL:

yellow  #ffff00   hsl 50% lightness    oklch 96.8% lightness
blue    #0000ff   hsl 50% lightness    oklch 45.2% lightness

Siapa pun bisa melihat bahwa kuning adalah yang lebih terang dari keduanya, dan OKLCH mengatakannya. Ini bukan soal teori belaka: inilah sebabnya palet yang dibangun dengan menahan kecerahan HSL konstan dan memutar rona menghasilkan sekumpulan warna yang tampak sangat tak rata, dan mengapa trik yang sama dalam OKLCH menghasilkan sekumpulan yang tampak seperti keluarga. Ini juga sebabnya, dalam OKLCH, dua warna dengan kecerahan sama biasanya punya kontras serupa terhadap latar belakang yang sama — sesuatu yang tak bisa dijanjikan HSL sama sekali.

Kedua angka lainnya adalah kroma — kira-kira seberapa berwarna, dari 0 untuk kelabu — dan rona dalam derajat. Tak seperti saturasi HSL, kroma bukan persentase dari apa pun, itulah sebabnya nilai maksimum yang dapat dipakai bergantung pada kecerahan sekaligus rona.

Ketika warna tak bisa ditampilkan

OKLCH bisa menjelaskan lebih banyak warna daripada yang bisa dihasilkan layar biasa. Minta kecerahan 70% pada kroma 0.4 dan Anda telah menamai hijau yang ada pada prinsipnya dan tak di mana pun dalam sRGB. Alat ini menjepit warna semacam itu ke dalam rentang dan menandainya sebagai di luar sRGB, ketimbang diam-diam menyerahkan kembali sesuatu yang lain.

Peringatan muncul hanya ketika jepitan benar-benar mengubah warna yang Anda dapatkan. Perbedaan itu lebih penting daripada kedengarannya. Merah sRGB duduk persis pada batas gamut, jadi nilai OKLCH yang diambil dari palet untuknya, dibulatkan di sana ke empat desimal, secara teknis mendarat sehelai di luar — sekitar dua bagian dalam sepuluh ribu, yang mendarat pada bita yang sama dan tak terlihat. Memperingatkan tentang itu akan melatih Anda mengabaikan peringatan. Warna dari palet gamut-lebar meleset dengan langkah utuh: Tailwind v4 blue-500 meminta 261 dari kemungkinan 255 dalam kanal biru, dan pada layar sRGB ia benar-benar bukan warna yang diminta.

Kontras, dan ketiga ambang

Rasio kontras membandingkan luminans relatif dua warna. Ia berjalan dari 1:1 untuk dua warna identik hingga 21:1 untuk hitam di atas putih, dan tak ada yang lain bisa mengalahkan itu. WCAG 2.1 menetapkan tiga ambang, dan mereka tak dapat dipertukarkan:

• 4,5:1 untuk teks tubuh — apa pun di bawah 18pt, atau di bawah 14pt saat tebal. Ini yang orang maksudkan ketika mereka mengatakan warna "gagal kontras".
• 3:1 untuk teks besar — 18pt ke atas, atau 14pt tebal ke atas. Bentuk huruf lebih besar membawa lebih banyak sinyal itu sendiri, jadi ambangnya lebih rendah.
• 3:1 untuk kontrol dan grafik — batas masukan, panah dalam select, batang grafik. Ditambahkan dalam WCAG 2.1 dan sering terlewat, karena orang memeriksa teksnya dan tak pernah memeriksa kotak di sekitarnya.

AAA menaikkan dua yang pertama ke 7:1 dan 4,5:1. Ia layak dibidik dalam teks tubuh dan benar-benar sulit dicapai dalam palet merek; AA adalah yang diminta regulasi dan audit.

Ukuran titik dalam aturan itu adalah titik CSS, bukan piksel: 18pt adalah 24px dan 14pt sekitar 18,7px pada setelan default. Mudah mengira judul 20px dihitung sebagai teks besar. Ia tidak.

Warna tembus cahaya

Teks setengah-transparan di atas latar belakang legap punya rasio kontras yang terdefinisi dengan sempurna: peramban mencampur kedua warna sebelum melukis, dan begitu pula alat ini. Teks kelabu pada opasitas 60% hanyalah kelabu yang lebih terang begitu ia mendarat, dan ia diukur sebagai warna yang mendarat itu. Alat yang mengabaikan kanal alfa melaporkan rasio warna yang Anda tulis ketimbang warna yang dilihat siapa pun, yang selalu melebih-lebihkannya — pemeriksa aksesibilitas yang salah demi keuntungan Anda lebih buruk daripada tak ada.

Latar belakang tembus cahaya adalah situasi berbeda, dan alat ini menolaknya. Apa yang tampak melaluinya bergantung pada apa pun yang di bawahnya, yang bukan sesuatu yang bisa dijawab kedua warna pada halaman ini. Hitung dulu warna hasil komposit latar belakangnya, lalu ukurlah warna itu.

Apa yang tak diberitahukan rasio kepada Anda

Rasio yang lulus adalah lantai, bukan vonis. Tiga hal yang tak dicakupnya:

• Buta warna. Merah dan hijau berluminans identik punya rasio kontras dekat 1:1 dan tak terbedakan bagi siapa pun — tetapi dua warna bisa lulus rasio dan tetap menjadi satu-satunya hal yang memisahkan dua keadaan, yang gagal bagi siapa pun yang tak bisa membedakannya. Jangan pernah membawa makna dalam rona saja.
• Huruf tipis. Rumus tak tahu apa pun tentang berat guratan. Berat setipis-rambut pada 4,5:1 bisa lebih sulit dibaca daripada berat biasa pada 4:1.
• Rumus itu sendiri. Kontras WCAG 2 diketahui tak ramah pada teks terang di atas latar belakang gelap, melaporkan rasio yang terasa lebih tinggi daripada bacaannya. APCA, dirancang untuk WCAG 3, memodelkan ini lebih baik — tetapi ia tak normatif, belum ada audit yang menerimanya, dan menampilkan dua skor yang saling bertentangan tak akan membantu siapa pun. Itulah sebabnya ia dibahas di sini dan tak dicetak di atas.

Satu catatan implementasi untuk siapa pun yang membandingkan hasil dengan kodenya sendiri: rumus luminans memakai ambang 0.03928, yang berbeda sangat sedikit dari 0.04045 dalam definisi sRGB saat ini. WCAG mengutip nilai yang lebih lama, jadi itulah nilai yang dipakai di sini. Menyamai spesifikasi lebih penting daripada rapi secara internal, dan perbedaannya tak pernah mengubah kelulusan menjadi kegagalan.