Membangun Sistem Desain UI Berbasis CSS Tokens dan OKLCH Color Space

Ketidaksempurnaan Ruang Warna HSL Tradisional

Pernahkah Anda memperhatikan bahwa warna kuning dengan lightness 50% di HSL terlihat jauh lebih terang dan menyilaukan dibandingkan warna biru dengan lightness yang sama?

Hal ini terjadi karena HSL tidak mempertimbangkan Perceptual Lightness—bagaimana mata manusia memproses spektrum cahaya nyata.

:root {
  /* OKLCH: oklch(Lightness Chroma Hue / Alpha) */
  --brand-primary: oklch(0.65 0.24 290);
  --brand-surface: oklch(0.18 0.05 290);
  --brand-accent: oklch(0.75 0.22 330);
  
  /* Palette dinamis dengan kalkulasi kontras konsisten */
  --text-main: oklch(0.98 0.01 290);
  --text-muted: oklch(0.70 0.03 290);
}

Keunggulan OKLCH untuk Dark Mode

1. Lightness yang Konsisten: Mengubah hue tidak akan merusak rasio kontras WCAG teks Anda.
2. Pencampuran Warna Halus: Transisi gradasi antar dua warna OKLCH tidak menghasilkan area abu-abu mati di tengah-tengah.
3. Wide Gamut Support: Mampu menampilkan warna Display-P3 yang lebih hidup pada layar perangkat modern (MacBook, iPhone, flagship Android).