Colors

Hampir setiap halaman memakai warna: warna teks, latar tombol, garis tepi, hingga bayangan. CSS menerima nilai warna dalam beberapa notasi yang berbeda-beda, dan semuanya bermuara pada warna yang sama bila nilainya setara. Memahami notasi-notasi tersebut penting karena kita akan menemukan semuanya di kode nyata — satu tim menulis hex, framework menulis rgb(), dan desain sistem modern mulai bermigrasi ke oklch(). Pada Chapter ini kita mengenal notasi yang paling umum, melihat notasi modern dengan kanal alpha, lalu membuktikannya dengan demo yang hasilnya dapat diperiksa.

Notasi Warna yang Umum #

CSS menyediakan empat kelompok notasi warna yang paling sering dipakai:

Named color praktis untuk prototipe, tetapi pilihannya terbatas dan namanya sulit dipetakan ke palet desain. Hex menawarkan keseimbangan: pendek, lazim di alat desain, dan mudah disalin. Fungsi rgb() dan hsl() menjadi pilihan ketika satu kanal perlu dihitung atau diatur lewat custom properties , misalnya menaikkan lightness sebesar 10%.

Dokumentasi lengkap setiap notasi tersedia pada MDN: color value .

Warna Modern: Alpha dan oklch() #

Sejak CSS Color Level 4, fungsi warna menerima sintaks modern: kanal dipisahkan spasi, dan tingkat transparansi ditulis setelah garis miring. Deklarasi rgb(239 68 68 / 0.5) menghasilkan warna merah dengan opacity 50% — setara dengan bentuk lama rgba(239, 68, 68, 0.5). Pola yang sama berlaku untuk hsl() dan hex delapan digit seperti #ef444480.

CSS juga menambahkan ruang warna baru yang lebih sesuai persepsi mata manusia. Fungsi oklch() menyatakan warna melalui lightness, chroma, dan hue, sehingga sekumpulan warna dengan lightness sama terlihat benar-benar seimbang. Fitur ini, bersama color-mix(), merupakan Baseline sejak 2023 dan dapat dipakai di seluruh browser utama.

Demo: Satu Warna, Banyak Notasi #

Demo berikut menampilkan enam kotak dengan warna yang ditulis dalam notasi berbeda. File CSS utuhnya dapat diunduh, dan HTML pendampingnya merujuk file tersebut:

.sw-nama {
  background-color: tomato;
}
.sw-hex {
  background-color: #0ea5e9;
}
.sw-rgb {
  background-color: rgb(14 165 233);
}
.sw-hsl {
  background-color: hsl(0 84% 60%);
}
.sw-alpha {
  background-color: rgb(239 68 68 / 0.5);
}
.sw-oklch {
  background-color: oklch(0.646 0.222 41.331);
}

Mari kita telaah baris demi baris:

1. Baris 1–3 (.sw-nama): nilai tomato adalah named color; browser menerjemahkannya menjadi kanal rgb tertentu tanpa perlu kita hitung.
2. Baris 4–6 (.sw-hex): #0ea5e9 menyatakan merah 0e, hijau a5, biru e9 dalam heksadesimal.
3. Baris 7–9 (.sw-rgb): sintaks modern rgb(14 165 233) memisahkan kanal dengan spasi; hasilnya warna biru langit yang sama persis dengan .sw-hex.
4. Baris 10–12 (.sw-hsl): hue 0 derajat dengan saturation 84% dan lightness 60% menghasilkan merah cerah.
5. Baris 13–15 (.sw-alpha): kanal keempat setelah garis miring menurunkan opacity menjadi 50%.
6. Baris 16–18 (.sw-oklch): lightness 0.646, chroma 0.222, dan hue 41.331 pada ruang warna OKLCH — nilai yang setara dengan warna merah pada .sw-hsl.

Hasil di Browser:

Enam kotak tampil berjajar: kotak pertama oranye kemerahan
(background-color: rgb(255, 99, 71)); kotak kedua dan ketiga biru
langit identik (rgb(14, 165, 233)) karena hex dan rgb() menyatakan
warna yang sama. Kotak keempat merah (rgb(239, 68, 68)), kotak kelima
merah transparan (rgba(239, 68, 68, 0.5)), dan kotak keenam merah
cerah dari notasi oklch().

Browser melaporkan warna sRGB dalam bentuk rgb() saat kita membaca nilai computed melalui DevTools — itulah sebabnya hasil demo di atas ditulis dalam format tersebut. Demo pada chapter ini membawa penanda uji data-expected untuk lima kotak pertama, sehingga klaim konversi warna di atas diperiksa langsung oleh harness Course pada headless browser.

.sw-nama {
  background-color: tomato;
}
.sw-hex {
  background-color: #0ea5e9;
}
.sw-rgb {
  background-color: rgb(14 165 233);
}
.sw-hsl {
  background-color: hsl(0 84% 60%);
}
.sw-alpha {
  background-color: rgb(239 68 68 / 0.5);
}
.sw-oklch {
  background-color: oklch(0.646 0.222 41.331);
}