Apa itu OKLCH dan mengapa saya harus menggunakannya daripada HEX atau HSL?

OKLCH (Lightness, Chroma, Hue) adalah ruang warna yang seragam secara perseptual berdasarkan model Oklab. Tidak seperti HEX atau HSL, perubahan numerik yang sama dalam OKLCH menghasilkan perbedaan yang sama pula secara perseptual. Hal ini menjadikannya ideal untuk merancang palet warna yang aksesibel, membuat gradien yang mulus, dan menghasilkan skala warna Tailwind v4 yang konsisten.

Bagaimana cara mengonversi HEX ke OKLCH?

Tempel nilai HEX Anda (misalnya #3b82f6) ke kolom input HEX dan kolom OKLCH langsung diperbarui dengan notasi setara oklch(0.6 0.18 250). Semua format lain — OKLab, RGB, dan HSL — juga tersinkronisasi pada saat yang sama, sehingga Anda tidak perlu melakukan konversi manual secara terpisah.

Apa arti 'di luar gamut sRGB' dan apa yang terjadi pada warna tersebut?

Beberapa warna OKLCH — terutama nilai chroma tinggi — melebihi ruang warna sRGB yang digunakan sebagian besar layar. Ketika ini terjadi, alat menerapkan algoritma toGamut CSS Color 4 untuk menemukan warna sRGB terdekat yang dapat ditampilkan. Banner peringatan berwarna kuning muncul yang menampilkan nilai out-of-gamut asli di samping hasil yang telah dipetakan.

Bagaimana cara kerja generator palet Tailwind v4 OKLCH?

Generator menggunakan jadwal kecerahan resmi Tailwind v4 (50=0.971, 100=0.945, hingga 950=0.238) yang diterapkan pada hue dan chroma Anda saat ini. Generator menghasilkan 11 langkah warna dari terang ke gelap dan mengekspornya sebagai blok kode ‎@theme { --color-brand-50: oklch(...); }‎ yang siap ditempelkan ke CSS Anda.

Mengapa interpolasi OKLCH terlihat lebih baik dari HSL untuk gradien?

HSL menginterpolasi melalui sistem koordinat silindris yang tidak sesuai dengan persepsi manusia, sehingga sering menyebabkan penurunan abu-abu atau pergeseran hue yang tidak terduga di tengah gradien. OKLCH menginterpolasi dalam ruang Oklab yang seragam secara perseptual, sehingga kecerahan dan chroma bertransisi dengan mulus tanpa pergeseran warna yang tidak diharapkan.

Apakah konverter OKLCH ini gratis dan privat?

Ya. Alat ini sepenuhnya gratis dan berjalan seluruhnya di browser Anda menggunakan pustaka culori. Tidak ada nilai warna yang diunggah ke server, semua perhitungan dan konversi dilakukan secara lokal di perangkat Anda tanpa mengirim data ke luar.

Apakah CSS Color 4 OKLCH berfungsi di semua browser?

Sintaks warna OKLCH (oklch()) didukung di semua browser modern sejak 2023, termasuk Chrome 111+, Firefox 113+, Safari 15.4+, dan Edge 111+. Untuk browser yang lebih lama, gunakan nilai fallback HEX atau RGB yang disediakan oleh konverter ini.

Alat Warna

Konverter Warna OKLCH – CSS Color 4, Generator Palet Tailwind v4

Konverter warna OKLCH gratis dengan sinkronisasi langsung antara OKLCH, OKLab, RGB, HSL, dan HEX. Termasuk slider L/C/H/alpha, pemetaan gamut CSS Color 4, dan ekspor palet Tailwind v4.

OKLCH (Lightness, Chroma, Hue) adalah ruang warna yang seragam secara perseptual yang dibangun di atas model Oklab dan diadopsi secara resmi dalam CSS Color Level 4. Tidak seperti RGB atau HSL, OKLCH menjaga kecerahan yang dipersepsikan tetap konsisten di seluruh hue, menjadikannya ideal untuk sistem warna yang aksesibel, palet Tailwind v4, dan gradien yang mulus.

Cara Menggunakan Konverter Warna OKLCH

1
Masukkan nilai warna
Ketik atau tempel nilai dalam format yang didukung: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%), atau oklab(0.6 -0.056 -0.169). Alat ini langsung menyinkronkan semua format lainnya.
2
Sesuaikan dengan slider L/C/H/Alpha
Seret slider Lightness (L), Chroma (C), Hue (H), atau Alpha. Slider Chroma menampilkan penanda batas gamut sRGB sehingga Anda selalu tahu kapan warna melebihi rentang tampilan standar.
3
Periksa peringatan gamut jika muncul
Jika warna OKLCH Anda berada di luar gamut sRGB, banner peringatan berwarna kuning menampilkan nilai asli dan hasil pemetaan toGamut CSS Color 4 yang digunakan untuk tampilan.
4
Hasilkan palet Tailwind v4
Bagian palet Tailwind v4 OKLCH secara otomatis menghasilkan langkah warna 50-950 untuk hue Anda saat ini, mengikuti jadwal kecerahan resmi Tailwind. Klik Salin untuk menempelkan blok @theme langsung ke CSS Anda.

Referensi

W3C CSS Color Level 4 – oklch()
Spesifikasi W3C yang mendefinisikan notasi warna OKLCH dan algoritma pemetaan gamut.
Culori – Pustaka Warna JavaScript
Pustaka open-source yang mendukung konversi OKLCH, pemetaan toGamut, dan interpolasi perseptual dalam alat ini.
Evil Martians – OKLCH dalam CSS: Mengapa Meninggalkan RGB dan HSL?
Panduan komprehensif yang menjelaskan keunggulan OKLCH dibandingkan RGB dan HSL untuk pekerjaan warna modern.
Tailwind CSS v4 – Palet Default
Dokumentasi palet warna resmi Tailwind, termasuk nilai kecerahan OKLCH yang digunakan dalam generator palet ini.

Alat Terkait

Konverter Warna

Konversi antara RGB, RGBA, HEX, HSL, HSV, dan CMYK dengan sinkronisasi langsung dua arah.

Minifier CSS

Minifikasi CSS yang menggunakan nilai warna OKLCH Anda.

Penampil SVG

Pratinjau dan periksa grafik SVG yang menggunakan nilai fill dan stroke OKLCH.

Pertanyaan yang Sering Diajukan

Apa itu OKLCH dan mengapa saya harus menggunakannya daripada HEX atau HSL?: OKLCH (Lightness, Chroma, Hue) adalah ruang warna yang seragam secara perseptual berdasarkan model Oklab. Tidak seperti HEX atau HSL, perubahan numerik yang sama dalam OKLCH menghasilkan perbedaan yang sama pula secara perseptual. Hal ini menjadikannya ideal untuk merancang palet warna yang aksesibel, membuat gradien yang mulus, dan menghasilkan skala warna Tailwind v4 yang konsisten.
Bagaimana cara mengonversi HEX ke OKLCH?: Tempel nilai HEX Anda (misalnya #3b82f6) ke kolom input HEX dan kolom OKLCH langsung diperbarui dengan notasi setara oklch(0.6 0.18 250). Semua format lain — OKLab, RGB, dan HSL — juga tersinkronisasi pada saat yang sama, sehingga Anda tidak perlu melakukan konversi manual secara terpisah.
Apa arti 'di luar gamut sRGB' dan apa yang terjadi pada warna tersebut?: Beberapa warna OKLCH — terutama nilai chroma tinggi — melebihi ruang warna sRGB yang digunakan sebagian besar layar. Ketika ini terjadi, alat menerapkan algoritma toGamut CSS Color 4 untuk menemukan warna sRGB terdekat yang dapat ditampilkan. Banner peringatan berwarna kuning muncul yang menampilkan nilai out-of-gamut asli di samping hasil yang telah dipetakan.
Bagaimana cara kerja generator palet Tailwind v4 OKLCH?: Generator menggunakan jadwal kecerahan resmi Tailwind v4 (50=0.971, 100=0.945, hingga 950=0.238) yang diterapkan pada hue dan chroma Anda saat ini. Generator menghasilkan 11 langkah warna dari terang ke gelap dan mengekspornya sebagai blok kode ‎@theme { --color-brand-50: oklch(...); }‎ yang siap ditempelkan ke CSS Anda.
Mengapa interpolasi OKLCH terlihat lebih baik dari HSL untuk gradien?: HSL menginterpolasi melalui sistem koordinat silindris yang tidak sesuai dengan persepsi manusia, sehingga sering menyebabkan penurunan abu-abu atau pergeseran hue yang tidak terduga di tengah gradien. OKLCH menginterpolasi dalam ruang Oklab yang seragam secara perseptual, sehingga kecerahan dan chroma bertransisi dengan mulus tanpa pergeseran warna yang tidak diharapkan.
Apakah konverter OKLCH ini gratis dan privat?: Ya. Alat ini sepenuhnya gratis dan berjalan seluruhnya di browser Anda menggunakan pustaka culori. Tidak ada nilai warna yang diunggah ke server, semua perhitungan dan konversi dilakukan secara lokal di perangkat Anda tanpa mengirim data ke luar.
Apakah CSS Color 4 OKLCH berfungsi di semua browser?: Sintaks warna OKLCH (oklch()) didukung di semua browser modern sejak 2023, termasuk Chrome 111+, Firefox 113+, Safari 15.4+, dan Edge 111+. Untuk browser yang lebih lama, gunakan nilai fallback HEX atau RGB yang disediakan oleh konverter ini.