Pemilih & Konverter Warna OKLCH

Apa itu OKLCH?

OKLCH adalah ruang warna yang dirancang oleh Björn Ottosson (2020) dan ditambahkan ke CSS dalam spesifikasi Color Level 4. Warna dijelaskan dengan tiga nilai yang mudah dipahami: Lightness (0–100%), Chroma (seberapa cerah atau berwarna, sekitar 0–0.37 untuk warna layar) dan Hue (sudut dari 0 hingga 360°). Berbeda dengan HSL, ruang ini seragam secara persepsi: dua warna dengan L yang sama memang terlihat sama terangnya oleh mata manusia.

Kenapa developer mulai beralih dari HSL

• Palet yang bisa diprediksi: di HSL, kuning dengan lightness 50% terlihat jauh lebih terang daripada biru 50%. Di OKLCH, mengubah hue saja tetap mempertahankan kecerahan yang dirasakan. Ini bagus untuk membuat state tombol dan skala design system yang konsisten (alasan Tailwind CSS v4 menggunakan palet OKLCH).
• Matematika aksesibilitas yang lebih baik: selisih lightness yang tetap menghasilkan selisih kontras yang cukup konsisten.
• Warna wide-gamut: OKLCH bisa mengekspresikan warna Display P3 yang tidak bisa dibuat dengan HEX dan rgb(), sehingga layar modern bisa menampilkan warna yang lebih hidup.

Gamut dan fallback

Tidak semua kombinasi L/C/H ada di layar sRGB. Saat chroma terlalu tinggi, tool ini mempertahankan lightness dan hue lalu menurunkan chroma sampai warnanya pas, kemudian hasilnya dipakai sebagai fallback HEX/RGB. Di CSS, tulis fallback dulu dan nilai OKLCH di baris kedua. Browser yang memahami OKLCH akan memakai baris kedua:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH vs OKLab

OKLab adalah ruang yang sama dalam koordinat persegi panjang (L, a, b). Ruang ini ideal untuk pencampuran dan gradien, coba Pencampur Warna, sedangkan OKLCH lebih mudah diedit oleh manusia.

Juga dicari sebagai: oklch, oklab, warna perceptual, hex ke oklch, oklch ke hex, color picker oklch, pemilih warna oklch, gamut srgb.

Tool yang cocok dipakai bersama Konverter OKLCH

• Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
• Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
• Konverter HEX ke RGBA — Tempel kode HEX, geser slider opacity, lalu salin CSS yang kamu butuhkan: rgba() klasik, rgb( / alpha) modern, atau HEX 8 digit.
• Pengecek Kontras APCA — Hitung kontras kecerahan APCA (Lc) antara teks dan latar, lihat untuk penggunaan apa nilainya cocok, lalu bandingkan dengan rasio WCAG 2 yang klasik.