Color Syntax

Warna hadir di hampir setiap bagian halaman: warna teks, latar, garis tepi, dan bayangan. CSS menerima satu warna yang sama dalam beberapa notasi berbeda, dan semua notasi tersebut menghasilkan piksel yang identik di layar. Dalam kode nyata kita akan menemukan campuran notasi — rekan satu tim menulis hex, framework menulis rgb(), sementara design system modern mulai memakai oklch(). Pada Chapter ini kita memetakan notasi-notasi tersebut, membiasakan diri dengan kanal alpha, lalu membuktikan bahwa semua notasi bermuara pada nilai computed yang sama.

Empat Notasi Warna yang Paling Umum #

Tabel berikut merangkum notasi warna yang paling sering kita temui:

Hex enam digit menyatakan kanal merah, hijau, dan biru berpasangan: 0e untuk merah, a5 untuk hijau, e9 untuk biru. Bentuk tiga digit adalah singkatan — #fa0 dikembangkan browser menjadi #ffaa00. Fungsi rgb() menuliskan ketiga kanal secara langsung dalam angka 0–255.

File CSS berikut menyusun satu palet dari ketujuh notasi yang akan kita uji. HTML pendampingnya menempelkan setiap class ke cuplikan teks:

/* Palet warna: satu warna, banyak notasi */
.warna-nama  { color: tomato; }
.warna-hex6  { color: #0ea5e9; }
.warna-hex3  { color: #fa0; }
.warna-hex8  { color: #0ea5e980; }
.warna-rgb   { color: rgb(14 165 233 / 50%); }
.warna-hsl   { color: hsl(199 96% 48%); }
.warna-oklch { color: oklch(0.55 0.15 30); }

Mari kita telaah aturan-aturan di atas baris demi baris:

1. Baris 2 (.warna-nama): tomato adalah named color; browser menyimpan tabel nama ke nilai rgb sehingga kita tidak perlu menghitung apa pun.
2. Baris 3 (.warna-hex6): #0ea5e9 menyatakan merah 0e, hijau a5, dan biru e9 dalam heksadesimal — hasilnya biru langit.
3. Baris 4 (.warna-hex3): #fa0 adalah bentuk ringkas; browser menggandakan setiap digit menjadi #ffaa00 (oranye).
4. Baris 5 (.warna-hex8): pasangan keempat 80 adalah kanal alpha; 80 (heksadesimal) sama dengan 128 dari 255, sehingga warna tampil setengah transparan.
5. Baris 6 (.warna-rgb): sintaks modern memisahkan kanal dengan spasi dan menaruh alpha setelah garis miring; 50% setara dengan 0.5.
6. Baris 7 (.warna-hsl): hue 199 derajat (biru), saturation 96%, lightness 48% menghasilkan biru yang pekat.
7. Baris 8 (.warna-oklch): notasi ruang warna OKLCH — lightness 0.55, chroma 0.15, hue 30 derajat menghasilkan merah bata.

Hasil di Browser:

Tujuh cuplikan teks tampil berjajar dengan warna masing-masing.
Nilai computed color yang diperiksa harness: tomato → rgb(255, 99, 71);
#0ea5e9 → rgb(14, 165, 233); #fa0 → rgb(255, 170, 0);
#0ea5e980 → rgba(14, 165, 233, 0.5); rgb(14 165 233 / 50%) →
rgba(14, 165, 233, 0.5); hsl(199 96% 48%) → rgb(5, 165, 240).
Cuplikan oklch() tampil merah bata tanpa penanda uji.

Perhatikan bahwa semua notasi dilaporkan browser dalam bentuk rgb() atau rgba() pada nilai computed — hal ini dapat kita amati sendiri lewat panel Computed di DevTools. Dokumentasi seluruh notasi tersedia pada MDN: color value .

Kanal Alpha: Mengatur Transparansi #

Kanal alpha menentukan seberapa tembus pandang sebuah warna, dari 0 (sepenuhnya transparan) hingga 1 (pekat). Ada tiga cara menuliskannya: angka desimal pada rgb(14 165 233 / 0.5), persentase pada rgb(14 165 233 / 50%), atau pasangan digit keempat pada hex delapan digit seperti #0ea5e980. Ketiganya menghasilkan nilai computed yang sama persis, sebagaimana diverifikasi demo chapter ini.

Warna transparan sangat berguna untuk lapisan di atas gambar — misalnya panel gelap semi transparan di atas foto. Pola itu kita praktikkan pada Chapter Background Images .

hsl() dan oklch(): Warna yang Dapat Dihitung #

Fungsi hsl() menyatakan warna sebagai hue (posisi 0–360 derajat pada roda warna), saturation, dan lightness. Keunggulannya ada pada perhitungan: mencari versi lebih gelap dari sebuah warna cukup dengan menurunkan lightness 10%, tanpa menyentuh dua kanal lainnya.

Fungsi oklch() melangkah lebih jauh dengan ruang warna yang menyerupai persepsi mata: dua warna dengan lightness sama terlihat sama terang, apa pun hue-nya. Fitur ini merupakan Baseline sejak 2023 dan dapat dipakai di seluruh browser utama. Satu hal yang perlu dibiasakan: browser melaporkan warna oklch() tetap dalam bentuk oklch() pada nilai computed, bukan dikonversi ke rgb.

/* Palet warna: satu warna, banyak notasi */
.warna-nama  { color: tomato; }
.warna-hex6  { color: #0ea5e9; }
.warna-hex3  { color: #fa0; }
.warna-hex8  { color: #0ea5e980; }
.warna-rgb   { color: rgb(14 165 233 / 50%); }
.warna-hsl   { color: hsl(199 96% 48%); }
.warna-oklch { color: oklch(0.55 0.15 30); }