rgb() dan hsl() dirancang untuk CRT monitor tahun 1990. Layar modern (OLED, wide-gamut) bisa menampilkan warna jauh lebih kaya — CSS modern menambah fungsi warna yang sesuai dengan kemampuan itu dan dengan cara kerja persepsi mata manusia.

oklch() — warna "persepsi-seragam":

.brand {
  /* Lightness, Chroma, Hue */
  background: oklch(70% 0.15 200);
}

oklch() dirancang agar perubahan Lightness yang sama menghasilkan perubahan kecerahan yang sama di mata. Gradient oklch jauh lebih halus dari rgb/hsl.

color() — pilih gamut warna eksplisit:

.foto {
  /* Pakai gamut Display P3 (iPhone, Mac modern) */
  background: color(display-p3 1 0 0);  /* merah lebih jenuh dari sRGB */
}

color-mix() — mencampur dua warna:

:root {
  --brand: oklch(60% 0.2 240);
}

.hover {
  /* 80% brand + 20% putih — versi lebih terang */
  background: color-mix(in oklch, var(--brand), white 20%);
}

light-dark() — satu property untuk dua mode:

body {
  color-scheme: light dark;
  background: light-dark(white, black);
  color: light-dark(black, white);
}

Fallback pattern (pakai @supports):

.card {
  background: #4f9cf9; /* fallback untuk browser lama */
}
@supports (color: oklch(0% 0 0)) {
  .card { background: oklch(65% 0.14 240); }
}

Rekomendasi praktis:

• Mulai dari hari ini, bikin variable warna kamu dengan oklch() — lebih mudah disesuaikan.
• Pakai color-mix() untuk menghasilkan "hover", "active", "disabled" dari satu base color — tanpa mendeklarasikan puluhan variasi.

🎭 Analogi sehari-hari

Bandingin TV jadul jaman 90-an sama TV OLED modern. TV jadul cuma bisa nampilin spektrum warna terbatas — warna ungu deep keliatan kayak hitam buram. TV modern bisa nampilin warna jauh lebih kaya, lebih natural, gradasi mulus tanpa garis-garis. Format warna CSS lama (rgb, hsl) dirancang buat layar CRT 1990. Format modern (oklch, color-mix, light-dark) dirancang buat era OLED — gradient lebih halus, warna lebih akurat, tools lebih powerful buat rebrand cepat.

⚠️ Jebakan yang sering ditemui

• oklch() browser support 2023+ — pakai dengan @supports fallback.
• Display P3 (color()) cuma terlihat di layar wide-gamut — di layar standar, JS clip ke sRGB.
• color-mix() interpolation space matters — color-mix(in oklch, ...) lebih halus dari default sRGB.
• light-dark() butuh color-scheme: light dark di parent.
• Gradient bug — old browsers gradient OKLCH bisa pecah, pakai fallback.
• Hue di OKLCH dalam DEGREES (0-360), Chroma 0-0.4ish.