Ringkas: HEX, RGB, dan HSL semuanya menggambarkan warna yang sama, tetapi dengan cara berbeda. HEX dan RGB adalah dua notasi untuk nilai merah-hijau-biru yang sama; HSL mengungkapkannya kembali sebagai rona, saturasi, dan kecerahan, yang jauh lebih mudah disetel secara manual. Mengetahui format mana yang dipakai menghemat banyak tebakan saat mencocokkan atau menyetel warna.
Sebuah warna di web pada akhirnya adalah tiga kanal — merah, hijau, dan biru — tetapi cara Anda menulis kanal itu mengubah seberapa mudah menalarnya.
HEX dan RGB: hal yang sama, ditulis dua kali
RGB mendaftar tiga kanal secara langsung: rgb(37, 99, 235). HEX mengemas nilai yang identik ke dalam string heksadesimal: #2563EB, di mana 25, 63, dan EB adalah bita merah, hijau, dan biru. Keduanya bisa dipertukarkan — HEX ringkas dan umum di alat desain, RGB nyaman dalam kode karena Anda bisa menghitung tiap kanal. Tak ada yang lebih «akurat»; keduanya dua cara menuliskan warna yang sama.
HSL: format yang dibuat untuk menyetel
HSL menggambarkan warna sebagai rona (posisinya pada roda warna, 0–360°), saturasi (seberapa pekat, 0–100%), dan kecerahan (seberapa terang, 0–100%). Inilah format saat Anda ingin menyetel alih-alih mengganti warna: turunkan kecerahan untuk keadaan hover, kurangi saturasi untuk varian redup, atau geser rona untuk menemukan warna komplementer. Melakukan penyetelan yang sama di HEX berarti menebak nilai bita.
Alfa dan HEX 8 digit
Transparansi diungkapkan dengan kanal alfa: rgba() dan hsla() menambah nilai keempat dari 0 (transparan) sampai 1 (buram). CSS modern juga mendukung HEX 8 digit, di mana dua karakter terakhir mengodekan alfa — #2563EB80 adalah biru yang sama pada sekitar 50% keburaman.
CMYK adalah dunia lain
HEX, RGB, dan HSL semuanya model warna layar (cahaya aditif). CMYK untuk cetak (tinta subtraktif). Konversi antara keduanya selalu perkiraan karena keduanya tak mereproduksi gamut yang persis sama, jadi perlakukan konversi layar-ke-cetak sebagai titik awal untuk diperiksa, bukan kecocokan persis.
Alur praktis
- Tempel warna awal — dalam format apa pun — ke Konverter Warna untuk melihat semua format sekaligus.
- Beralih ke HSL untuk membangun varian: setel kecerahan untuk keadaan, saturasi untuk nada redup.
- Tambahkan alfa dengan
rgba()/hsla()atau HEX 8 digit di mana perlu transparansi. - Gunakan pratinjau gradien untuk menghasilkan cuplikan CSS siap pakai untuk dua warna atau lebih.
Jika menggarap palet secara massal, konversikan beberapa warna sekaligus (dipisah koma atau baris baru) dan simpan hasilnya di dekat catatan Anda dengan Penghitung Karakter.
Kesalahan umum yang harus dihindari
- Menyetel warna di HEX padahal HSL membuat penyetelan jelas.
- Mengharap konversi CMYK cocok persis dengan layar.
- Lupa kanal alfa dan mendapat warna buram di tempat Anda ingin transparansi.
- Mencampur format secara tak konsisten di satu lembar gaya.