OKLCH untuk desainer: mengapa OKLCH menggantikan HSL

Jika Anda pernah membuat ramp warna dengan menaikkan kecerahan HSL secara merata lalu mendapati bagian tengahnya tampak janggal, Anda sudah bertemu dengan alasan keberadaan OKLCH.

Masalah pada HSL

HSL memang praktis. Hue sebagai sudut, saturasi dan kecerahan sebagai persentase: mudah dinalar, mudah disesuaikan secara manual.

Masalahnya, sumbu kecerahannya tidak sesuai dengan kecerahan yang dipersepsikan mata. hsl(60 100% 50%) adalah kuning yang mencolok. hsl(240 100% 50%) adalah biru tua. Keduanya mengaku memiliki kecerahan 50%. Letakkan berdampingan, dan kuningnya jauh lebih terang: luminans relatif yang terukur adalah 0.928 berbanding 0.072, selisih sekitar tiga belas kali lipat.

Ini bukan kesalahan pembulatan. Ini konsekuensi dari HSL yang hanya merupakan transformasi matematis sederhana dari RGB, tanpa model penglihatan manusia sama sekali. Mata kita jauh lebih peka terhadap panjang gelombang hijau daripada biru, dan HSL tidak mengetahuinya.

Kerusakan praktisnya:

• Ramp yang dibuat dengan langkah HSL yang rata terlihat tidak rata, menumpuk di beberapa bagian dan melompat di bagian lain
• Dua warna dengan kecerahan HSL yang sama memiliki kontras yang sangat berbeda terhadap latar belakang yang sama
• Mengubah saturasi ikut menggeser kecerahan yang terlihat sebagai efek samping

Apa yang berbeda pada OKLCH

OKLCH dibangun di atas ruang warna Oklab, yang dirancang khusus agar jarak numerik sesuai dengan jarak yang dipersepsikan.

Tiga komponen:

• L: kecerahan (lightness), 0% hingga 100%, seragam secara persepsi
• C: kroma (chroma), kurang lebih saturasi, dimulai dari 0 tanpa batas atas yang tetap
• H: hue, 0 hingga 360 derajat

Sifat yang penting: langkah yang sama besar pada L terlihat sama besar. oklch(50% 0.2 60) dan oklch(50% 0.2 250) benar-benar terlihat memiliki kecerahan yang sama, yang satu kuning-oranye dan yang lain biru.

Itu membuat ketiga komponen saling independen, persis seperti yang selama ini diasumsikan desainer. Anda bisa mengubah kecerahan tanpa membuat warnanya tampak bergeser hue-nya, dan mengubah hue tanpa membuat warnanya tampak lebih terang.

Mengapa ini penting untuk kontras

Kontras hampir sepenuhnya ditentukan oleh kecerahan. Hue nyaris tidak memengaruhinya, dan saturasi hampir tidak berpengaruh sama sekali.

Di OKLCH, artinya hanya ada satu kenop yang perlu diputar. Pertahankan H dan C, geser L, dan Anda mengubah kontras sambil menjaga warnanya tetap dikenali sebagai dirinya sendiri. Di HSL, langkah yang sama akan menggeser warna yang terlihat, karena kecerahan HSL terjalin dengan semua komponen lainnya.

Inilah yang membuat urusan “pertahankan warna brand, perbaiki kontrasnya” menjadi masalah yang bisa dipecahkan, bukan sekadar negosiasi. Brand Anda tinggal di hue; pengukuran tinggal di kecerahan; OKLCH memisahkan keduanya.

Membuat ramp

Pendekatan standarnya adalah mempertahankan hue, menaikkan kecerahan secara merata, dan mengecilkan kroma di kedua ujung, karena warna yang sangat terang dan sangat gelap tidak bisa mempertahankan saturasi tinggi tanpa keluar dari rentang yang bisa ditampilkan layar.

--blue-100: oklch(95% 0.03 255);
--blue-300: oklch(82% 0.09 255);
--blue-500: oklch(62% 0.16 255);
--blue-700: oklch(48% 0.14 255);
--blue-900: oklch(30% 0.08 255);

Satu hue, langkah kecerahan yang rata, kroma memuncak di tengah. Hasilnya terlihat seperti satu keluarga yang padu, sesuatu yang gagal dicapai oleh ramp HSL dengan langkah yang rata.

Jebakan gamut

OKLCH bisa mendeskripsikan warna yang tidak bisa ditampilkan layar Anda. oklch(70% 0.4 150) adalah koordinat yang sepenuhnya sah, tetapi jauh di luar sRGB.

Ketika itu terjadi, browser memotong warnanya (clipping), dan pemotongan itu tidak mulus: hue bisa bergeser cukup jelas, sehingga warna yang Anda dapat bukan warna yang Anda tentukan. Alat apa pun yang melakukan perhitungan OKLCH perlu menurunkan kroma sampai warnanya muat, alih-alih membiarkannya terpotong. Jika Anda menulisnya secara manual, jaga kroma di bawah sekitar 0.24 agar aman untuk sRGB, atau periksa dengan alat yang memperhitungkan gamut.

Dukungan browser

OKLCH sudah didukung di semua browser utama sejak 2023 dan berstatus Baseline widely available. Anda bisa menulisnya langsung di CSS tanpa fallback untuk sebagian besar audiens:

color: oklch(62% 0.16 255);

Tailwind CSS v4 memakai OKLCH untuk palet default-nya, sinyal yang cukup jelas tentang arah yang dipilih ekosistem.

Saat HSL masih memadai

Untuk penyesuaian cepat sekali jalan pada satu warna, HSL sepenuhnya bisa diandalkan dan model mentalnya sudah akrab.

Begitu Anda membuat sebuah sistem, entah ramp, sekumpulan token semantik, atau varian terang dan gelap dari warna brand yang sama, keseragaman itu menjadi penting, dan HSL akan menyulitkan Anda di setiap langkah.

Contrast checker kami mencari di ruang OKLCH justru karena alasan ini: alat ini bisa mengunci hue dan kroma Anda lalu hanya menggeser kecerahannya, dan dengan cara itulah ia menemukan warna lolos terdekat yang tetap terlihat seperti warna Anda.