Dalam CSS, warna yang sama bisa ditulis dengan setidaknya tiga cara berbeda, dan masing-masing memudahkan tugas berbeda — dari desain hingga animasi transparansi.
HEX: notasi ringkas untuk disalin
Notasi heksadesimal seperti #FF5733 mengkodekan tiga kanal — merah, hijau, biru — masing-masing dengan dua karakter. Ini format paling ringkas, memudahkan saat menyalin dari mockup desain, tapi hampir tidak terbaca bagi manusia: sulit menebak sekilas corak apa yang diwakili oleh rangkaian digit.
RGB: akses langsung ke setiap kanal
rgb(255, 87, 51) menulis tiga kanal yang sama sebagai angka desimal dari 0 sampai 255. Ini berguna saat perlu mengubah satu kanal tertentu secara terprogram, misalnya menaikkan merah secara bertahap dalam animasi JavaScript.
HSL: pemilihan corak yang intuitif
HSL menjelaskan warna melalui corak (hue, 0–360°), saturasi, dan kecerahan. Ini format paling mudah untuk memilih warna secara manual: untuk mendapatkan versi lebih gelap dari corak yang sama, cukup kurangi kecerahannya saja, tanpa perlu menghitung ulang ketiga kanal RGB dari awal.
Kanal alfa untuk transparansi
Format rgba() dan hsla() menambahkan parameter keempat — opasitas dari 0 sampai 1. CSS modern juga memungkinkan mengatur transparansi di HEX melalui dua karakter tambahan di akhir, seperti #FF573380.
Mengapa ini dibutuhkan
- Dengan cepat mengonversi warna dari mockup desain ke format CSS yang dibutuhkan.
- Memilih corak yang lebih gelap atau lebih terang dari warna yang sama menggunakan HSL.
- Menambahkan transparansi pada warna tanpa mengubah corak dasarnya.
Dari warna alam nila hingga kode HEX
Sebelum ada HEX atau RGB, pewarnaan tekstil tradisional Indonesia seperti batik sudah lama memakai sistem penamaan warnanya sendiri yang tidak numerik — misalnya biru tua dari tanaman nila (indigo) yang disebut "biru wedelan" atau "biru tarum" di sejumlah daerah, dan warna cokelat kekuningan dari pohon soga yang menjadi ciri khas batik Solo dan Yogyakarta. Warna-warna ini ditentukan oleh proses pencelupan berulang kali, bukan oleh satu nilai tetap seperti pada layar digital — dua kain yang dicelup nila dengan jumlah pencelupan berbeda akan menghasilkan "biru" yang sama sekali berbeda kepekatannya, sesuatu yang di CSS justru mudah dikendalikan lewat satu angka lightness pada HSL. Ini mengingatkan bahwa sistem warna presisi seperti HEX adalah kemewahan yang relatif baru dibanding tradisi mewarnai yang sudah berabad-abad lebih dulu ada.