Cara konversi HEX ke RGB, HSL, dan OKLCH, serta mana yang ditempel di mana

Mengonversi warna adalah aritmetika. Menentukan hasil mana yang harus ditempel adalah bagian yang sering keliru, karena notasi-notasi itu tidak bisa saling menggantikan dalam hal apa yang bisa Anda lakukan dengannya sesudahnya.

Konversi warna dengan alat ini

1. Buka konverter warna lalu ketik atau tempel ke kolom berlabel Any CSS colour. Kolom ini membaca hex dengan atau tanpa tanda pagar, nama warna CSS, serta nilai rgb(), hsl(), dan oklch(). Swatch di sebelah kiri kolom membuka pemilih warna jika Anda lebih suka memilih dengan mata.
2. Periksa swatch besar di bawahnya. Swatch ini menampilkan warna dalam ukuran yang bisa Anda nilai, dengan kode hex-nya ditulis dalam hitam atau putih, mana pun yang kontrasnya terukur lebih tinggi terhadap warna itu.
3. Temukan grup sesuai tujuan nilai itu: Paste into CSS, Paste into a design tool, atau Going to print. Setiap baris memiliki catatan satu baris tentang kapan sebaiknya dipakai.
4. Klik sebuah baris untuk menyalinnya. Seluruh baris adalah tombolnya, dan labelnya berubah menjadi “copied”. Untuk mengambil semuanya sekaligus, tekan Copy all formats di bilah bawah halaman (atau tombol C), yang menyalin setiap konversi, satu per baris.
5. Sebelum memutuskan, baca Contrast as text. Bagian ini memberi rasio warna Anda sebagai teks di atas putih dan di atas hitam, berlabel “AA body”, “AA large only”, atau “fails AA”. Di sebelahnya, Colour vision menampilkan warna yang sama sebagai delapan swatch: penglihatan normal dan tujuh defisiensi yang disimulasikan.

Satu warna dalam setiap notasi

Alat ini terbuka dengan #2563EB. Berikut hasilnya untuk warna itu, dan di mana setiap nilai seharusnya dipakai.

Notasi	#2563EB ditulis sebagai	Tempelkan ke
HEX	#2563EB	Properti CSS apa pun; di mana saja nilai biasa sudah cukup
RGB	rgb(37 99 235)	CSS saat Anda butuh transparansi, sebagai rgb(37 99 235 / 50%); data canvas dan gambar
OKLCH	oklch(54.6% 0.215 262.9)	Design token, ramp, varian lebih terang dan lebih gelap
HSL	hsl(221 83% 53%)	Penyesuaian cepat dengan tangan, tidak pernah untuk sistem
HEX, tanpa pagar	2563EB	Kolom warna Figma, Sketch, dan Canva
Variabel CSS	--color: #2563eb;	File token
CMYK	cmyk(84% 58% 0% 8%)	Percakapan dengan percetakan, bukan spesifikasi

Notasi warna adalah cara menuliskan warna, bukan warna yang berbeda. Setiap baris di atas adalah biru yang sama. Yang berubah adalah apa yang bisa Anda simpulkan dari angkanya: HEX tidak memberi tahu apa pun hanya dengan dilihat, RGB adalah apa yang dilakukan layar, HSL mudah disesuaikan dengan tangan, dan OKLCH adalah satu-satunya yang sumbu kecerahannya sesuai dengan apa yang Anda lihat.

Poin terakhir itu cukup diwakili satu angka, tanpa mengulang seluruh argumennya. Pada kecerahan HSL 50%, kuning murni memiliki luminans relatif 0.928 dan biru murni 0.072, terpaut hampir tiga belas kali lipat pada kecerahan nominal yang sama. Mengapa hal itu membuat HSL tidak layak untuk apa pun yang sistematis, dan apa yang dilakukan OKLCH sebagai gantinya, dibahas di OKLCH untuk desainer.

Yang sering salah saat konversi

HSL yang dibulatkan tidak kembali ke hex yang sama

Konverter membulatkan HSL ke bilangan bulat, seperti yang dilakukan hampir semua alat dan stylesheet. Pembulatan itu menghilangkan informasi. Ubah hsl(221 83% 53%) kembali ke RGB dan kanal merahnya dihitung sebagai 255 × (0.53 − 0.83 × 0.94 ÷ 2) = 255 × 0.1399 = 35.7, yang dibulatkan menjadi 36. Nilai aslinya 37. Jadi #2563EB keluar sebagai HSL dan kembali sebagai #2463EB.

Tidak ada yang bisa melihat selisih satu di kanal merah. Audit token yang membandingkan string, atau file desain yang memeriksa hex brand secara persis, akan melihatnya setiap kali. Simpan nilai HEX atau OKLCH sebagai sumber kebenaran dan anggap HSL sebagai tampilan dari nilai itu.

Transparansi tidak bertahan

Tempelkan hex delapan digit seperti #2563EB80 dan setiap format kembali dalam keadaan opak, karena konverter bekerja pada warnanya dan membuang kanal alfa. Jika Anda butuh transparansi, tambahkan kembali dalam bentuk RGB, rgb(37 99 235 / 50%), seperti yang disarankan catatan alat ini pada baris RGB.

CMYK bukan warna cetak

Device CMYK adalah konversi langsung dari RGB layar ke persentase tinta tanpa profil ICC, sehingga tidak tahu apa pun tentang kertas, mesin cetak, atau tintanya. Aritmetikanya cukup sederhana untuk diperiksa dengan tangan. Untuk #2563EB, hitam adalah K = 1 − 235 ÷ 255 = 8%, dan cyan adalah (1 − 37 ÷ 255 − 0.078) ÷ (1 − 0.078) = 84%. Setiap konverter web melakukan perhitungan naif yang sama, jadi alat ini melabelinya sebagai titik awal. Untuk cetak, konversikan di perangkat lunak yang mengenal profil kertas dan mesin cetak Anda.

Notasi tidak mengubah kontras

Konversi tidak pernah meningkatkan keterbacaan warna. Luminans relatif adalah ukuran WCAG untuk seberapa banyak cahaya yang dipancarkan sebuah warna, dari 0 untuk hitam hingga 1 untuk putih, dan rasio kontras dihitung darinya. #2563EB memiliki luminans relatif 0.1532 bagaimanapun Anda menuliskannya. Sebagai teks di atas putih, nilainya (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17, yang ditampilkan alat ini sebagai 5.16:1 karena alat ini memotong angka alih-alih membulatkannya, sehingga rasio yang sedikit di bawah ambang tidak pernah tampil sebagai lolos. Di atas hitam nilainya (0.1532 + 0.05) ÷ 0.05 = 4.06:1: hanya untuk teks besar. Jika sebuah warna gagal, solusinya adalah perubahan kecerahan, dan itulah yang dicari pemeriksa kontras.

Cara lain melakukannya

Untuk CSS, Anda mungkin tidak perlu konversi sama sekali. HEX, rgb(), hsl(), dan oklch() semuanya nilai warna CSS yang valid, jadi nilai dari file desain biasanya bisa ditempel apa adanya.

HEX ke RGB mudah dihitung dengan tangan, karena setiap pasangan digit hex adalah bilangan basis 16. Untuk #2563EB: 25 adalah 2 × 16 + 5 = 37, 63 adalah 6 × 16 + 3 = 99, dan EB adalah 14 × 16 + 11 = 235. Hasilnya rgb(37 99 235).

OKLCH tidak praktis dihitung dengan tangan. Prosesnya melibatkan linearisasi setiap kanal, dua perkalian matriks, dan akar pangkat tiga, yang merupakan pekerjaan untuk kode. Tidak ada metode bawaan sistem operasi yang dicantumkan di sini, karena kami belum memverifikasi satu pun yang menghasilkan semua notasi ini.

Memastikan tidak ada yang keluar dari halaman

Konversi berjalan di tab, dan warna yang Anda masukkan ditulis ke bilah alamat setelah #. Bagian URL itu tidak pernah dikirim ke server, yang juga menjadi alasan tautan yang disalin membuka kembali warna yang sama. Untuk memeriksanya, buka developer tools browser Anda, pilih panel Network, dan ketik beberapa warna: Anda tidak akan melihat permintaan yang membawanya. Beacon analitik halaman ini hanya melaporkan path halaman, bukan fragmennya.

Selanjutnya

Buka konverter warna dan tempel warna yang akan Anda tetapkan. Jika warna itu akan masuk ke sebuah sistem, bukan sekadar satu aturan, generator ramp dan token mengubah satu nilai OKLCH menjadi sebelas langkah dengan peran yang ditetapkan berdasarkan kontras terukur.