Selain hex, rgb(), dan hsl(), CSS sekarang punya fungsi warna baru. oklch() menulis warna dengan cara yang cocok sama cara mata kita melihat terang dan gelap, color-mix() mencampur dua warna, dan light-dark() memilih warna buat mode terang atau mode gelap.
🧪 Tebakan cepat:
hsl(60 100% 50%)(kuning) danhsl(240 100% 50%)(biru) sama-sama punya lightness 50%. Di layar, keduanya kelihatan sama terangnya gak? Tebak dulu, jawabannya ada di bagian "Kenapa gakhsl()aja?".
Tiga angka di oklch()
.kotak {
background: oklch(70% 0.15 200);
}
Nama oklch diambil dari tiga angka yang dia simpan, L, C, dan H (OK diambil dari nama ruang warnanya, Oklab):
70%adalah L, lightness atau kecerahan. 0% hitam, 100% putih.0.15adalah C, chroma atau kepekatan warna. 0 berarti abu-abu, makin besar makin pekat. Angkanya kecil, biasanya 0 sampai sekitar 0.4.200adalah H, hue atau posisi di roda warna, dalam derajat 0 sampai 360. Kira-kira 30 merah, 110 kuning, 145 hijau, 265 biru.
Hasilnya kotak biru toska yang cerah.
Kenapa gak hsl() aja?
Lightness di hsl() itu hitungan matematika, bukan yang dirasakan mata. Jawaban tebakan: gak sama. hsl(60 100% 50%) kuning kelihatan jauh lebih terang daripada hsl(240 100% 50%) biru, padahal angkanya sama.
Di oklch(), lightness yang sama kelihatan sama terang buat warna apa pun. Jadi kamu bisa bikin satu palet dengan cuma mengganti hue, dan kecerahannya tetap seragam. Naikkan L, semua warna terasa terang dengan kadar yang sama.
Campur warna dengan color-mix()
.pucat {
background: color-mix(in oklch, blue 30%, white);
}
in oklchadalah ruang warna yang dipakai buat mencampur.oklchbiasanya kasih hasil yang paling halus.blue 30%adalah warna pertama dan porsinya.whiteadalah warna kedua, dapat sisanya (70%).
Hasilnya biru pucat. Makin kecil porsi warnanya, makin pucat. Ganti white dengan black buat versi gelap, misalnya warna tombol waktu di-hover.
Warna turunan dan light-dark()
Relative color bikin warna baru dari warna lain:
.kartu {
border-color: oklch(from var(--warna) calc(l - 0.2) c h);
}
from var(--warna) membongkar warna asalnya jadi l, c, dan h. Chroma dan hue dipakai apa adanya, lightness dikurangi 0.2 (di sini l ditulis 0 sampai 1, jadi 0.2 sama dengan 20%). Ganti --warna, border-nya ikut berubah.
light-dark() memilih satu dari dua warna sesuai mode:
:root { color-scheme: light dark; }
body { color: light-dark(black, white); }
Warna pertama buat mode terang, warna kedua buat mode gelap.
⚠️ Jebakan yang sering ketemu
- Chroma ditulis kayak persen saturasi. Tulis angka kecil seperti
0.15, bukan15. - Lupa
color-scheme. Tanpacolor-scheme: light dark,light-dark()selalu memakai warna pertama. - Browser lama. Tulis hex dulu, lalu
oklch()di baris bawahnya:background: #3b82f6; background: oklch(62% 0.21 260);. Browser yang gak paham baris kedua tetap memakai hex-nya. - Warna di luar jangkauan layar.
oklch()bisa menulis warna yang gak bisa ditampilkan layar biasa. Browser menggesernya ke warna terdekat yang bisa, jadi chroma tinggi bisa kelihatan sama saja.
TL;DR: oklch(L C H) menulis warna dari kecerahan, kepekatan, dan hue, dan lightness yang sama kelihatan sama terang di semua hue, beda dengan hsl(). color-mix(in oklch, warna 30%, white) mencampur dua warna. oklch(from ...) bikin warna turunan dari warna lain. light-dark(terang, gelap) memilih warna sesuai mode, asal ada color-scheme: light dark.
