Cara Pakai OKLCH di CSS

Sintaksnya

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* with transparency */

• Lightness (kecerahan) bergerak dari 0% (hitam) sampai 100% (putih).
• Chroma (kejenuhan) menunjukkan seberapa cerah warnanya. 0 berarti abu-abu, dan sebagian besar warna yang bisa dipakai berada di bawah sekitar 0.37.
• Hue (rona) adalah sudut warna pada roda warna, dari 0 sampai 360.

Coba dengan OKLCH Color Picker, atau konversi warna brand kamu dengan HEX to OKLCH Converter.

Membuat set shade

Biarkan chroma dan hue tetap sama, lalu ubah lightness saja:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Membuat efek hover

Relative color syntax memungkinkan kamu menurunkan satu warna dari warna lain:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

Relative color lebih baru dibanding oklch() itu sendiri, jadi cek dukungan browser untuk pengguna kamu.

Mencampur warna

Gunakan color-mix() untuk mencampur dua warna. Mencampur di OKLCH biasanya menghasilkan titik tengah yang lebih bersih dibanding sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

Kamu bisa menguji campuran warna dengan Color Mixer.

Menambahkan fallback

Browser modern sudah mendukung OKLCH. Untuk browser yang sangat lama, taruh nilai HEX di depan. Browser akan melewati nilai yang tidak bisa mereka baca:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

OKLCH to HEX Converter akan memberimu nilai tersebut.

Mengecek kontras

Lightness membuat kontras lebih mudah diprediksi, tapi bukan jaminan. Selalu uji pasangan teks dan latar belakang dengan Contrast Checker.