Apa itu warna OKLCH

(jakub.kr)

11 poin oleh GN⁺ 2025-08-26 | 1 komentar | Bagikan ke WhatsApp

OKLCH adalah model warna modern yang disesuaikan dengan persepsi visual manusia, dengan karakteristik bahwa perubahan kecerahan, kejenuhan, dan warna terasa seragam antarwarna, sehingga menjadi model warna yang seragam secara perseptual
Strukturnya terdiri dari Lightness (kecerahan), Chroma (kejenuhan), Hue (rona), dan dibanding model lama memungkinkan penyusunan palet warna yang lebih konsisten
Dengan mempertahankan kecerahan dan kejenuhan yang sama lalu hanya mengubah Hue, palet warna yang seragam dapat dibuat sehingga menguntungkan untuk desain UI
Dibanding sRGB/HSL, model ini memberikan perubahan terang-gelap yang lebih dapat diprediksi dan gradien yang lebih seragam, meski dalam beberapa kasus dapat menghasilkan warna yang tidak diinginkan
Pada layar modern seperti Display-P3, model ini memungkinkan representasi warna yang lebih luas, didukung di browser modern melalui CSS Color 4, dan juga menyediakan fallback sRGB, sehingga makin menjadi bagian dari standar web

Pengenalan model warna OKLCH

OKLCH adalah model warna modern yang dikembangkan dengan tujuan keseragaman perseptual (perceptually uniform)
Model ini bekerja lebih dekat dengan cara manusia benar-benar mengenali warna, sehingga pengelolaan warna menjadi jauh lebih mudah dalam desain digital dan pengembangan frontend

Konsep dasar model warna

Model warna adalah sistem untuk mendefinisikan dan merepresentasikan warna secara matematis
Contoh model yang umum digunakan: RGB, HSL, LCH, OKLCH, LAB, XYZ
Setiap model menentukan kemudahan representasi dan manipulasi warna

Contoh cara penulisan warna

oklch(0.55 0.18 260)
hsl(220 100% 50%)
rgb(0, 128, 255)
lch(60% 60 260)
lab(50 -10 -50)
color(xyz 0.18 0.19 0.6)
#1E90FF

Gamut (cakupan ruang warna)

Gamut berarti seluruh rentang warna yang dapat direpresentasikan oleh model warna tersebut
Gamut yang representatif: sRGB (standar web), Display-P3 (didukung perangkat modern)
Ruang warna memiliki beragam properti selain rentang gamut, seperti white point dan transfer function

Struktur OKLCH

OKLCH dan LCH sama-sama terdiri dari tiga nilai: Lightness, Chroma, Hue
OKLCH berbasis pada ruang warna OKLab

Lightness (terang/kecerahan): dinyatakan sebagai 0~1 atau 0%~100%, dan menjamin perubahan kecerahan yang seragam
Chroma (kejenuhan): intensitas warna, mirip dengan Saturation (kejenuhan) pada HSL
Hue (rona): merepresentasikan warna dengan sudut 0~360 derajat

Kelebihan dan pemanfaatan OKLCH

Kecerahan yang konsisten
- Di OKLCH, jika warna ditentukan dengan nilai kecerahan dan kejenuhan yang sama, hanya hue yang berbeda, maka semua warna akan terasa memiliki tingkat kecerahan yang mirip
- Pada sRGB atau HSL lama, kecerahan atau kejenuhan bisa tampak tidak konsisten tergantung warnanya
- Karena itu, OKLCH memudahkan pembuatan palet warna yang seragam secara perseptual
Tahapan kecerahan warna yang dapat diprediksi
- Di OKLCH, saat kecerahan diubah, berbagai tingkatan warna dapat dibuat tanpa perubahan pada hue (rona) atau chroma (kejenuhan)
- Pada HSL dan sejenisnya, perubahan kecerahan dapat menimbulkan gejala drift di mana rona ikut bergeser
- OKLCH memungkinkan pembuatan tahapan kecerahan warna yang konsisten hanya dengan menyesuaikan kecerahan
Cara menangani gradien (Gradients)
- Pada sRGB, interpolasi dilakukan di antara nilai merah, hijau, dan biru, sehingga titik tengah bisa tampak kusam atau perubahan kecerahannya terlalu besar
- OKLCH melakukan interpolasi sepanjang sumbu Lightness, Chroma, dan Hue, sehingga gradien dapat tampak lebih alami
- Namun, karena nilai Hue memiliki struktur melingkar, perubahan warna tak terduga bisa muncul
- Untuk mencegahnya, interpolasi garis lurus di OKLab dapat digunakan agar hasilnya lebih dapat diprediksi

Dukungan ruang warna

sRGB tidak mampu mencakup sebagian ruang warna luas yang dapat ditampilkan layar modern
Dengan OKLCH, warna yang lebih vivid dapat ditampilkan pada perangkat yang mendukung gamut luas seperti Display-P3
Pada perangkat yang hanya mendukung sRGB, warna akan dipetakan ke warna yang semirip mungkin

Nilai Chroma (kejenuhan) maksimum

OKLCH secara matematis dapat menentukan warna yang berada di luar rentang yang benar-benar dapat ditampilkan layar
Misalnya, nilai chroma yang terlalu besar seperti oklch(0.7 0.4 40) tidak dapat ditampilkan secara nyata sehingga akan di-clip ke warna terdekat
Penting untuk memahami konsep chroma maksimum dan menetapkan nilai yang sesuai berdasarkan rona, kecerahan, serta ruang warna target (sRGB, Display-P3)

Dukungan browser dan fallback

Warna OKLCH diperkenalkan dalam CSS Color Module Level 4 dan sebagian besar sudah didukung oleh browser modern

Di browser lama, dukungannya mungkin tidak tersedia, sehingga nilai fallback dapat diatur dengan direktif CSS @supports

@layer base {  
  :root {  
    /* sRGB hex */  
    --color-gray-100: #fcfcfc;  
    --color-gray-200: #fafafa;  
    --color-gray-300: #f4f4f4;  

    @supports (color: oklch(0 0 0)) {  
      /* OKLCH */  
      --color-gray-100: oklch(0.991 0 0);  
      --color-gray-200: oklch(0.982 0 0);  
      --color-gray-300: oklch(0.955 0 0);  
    }  
  }  
}

Di browser yang mendukung, OKLCH akan diterapkan; di browser yang tidak mendukung, warna sRGB (hex) akan digunakan

Alat oklch.fyi

oklch.fyi adalah alat web yang menyediakan fitur terkait OKLCH seperti pembuatan palet warna OKLCH dan konversi variabel CSS
Membantu mempermudah penggunaan warna OKLCH dalam sistem desain, pengembangan tema, dan lain-lain

1 komentar

GN⁺ 2025-08-26

Opini Hacker News

Saya ragu dengan fitur yang disebut “Better Gradients”. OKLCH adalah ruang polar, dan hue di ruang ini berperan sebagai sudut. Saat menginterpolasi warna antara dua titik yang berbeda, lintasannya akan bergerak di sepanjang tepi lingkaran. Misalnya, jika memakai kode linear-gradient(in oklch, #f0f, #0f0), transisi dari hijau ke ungu akan terlihat jelas keluar dari rentang warna. Jika memutar lingkaran ke arah lain, seperti linear-gradient(in oklch longer hue, #f0f, #0f0), lintasannya akan melewati teal atau aqua. Ini menunjukkan betapa tidak nyamannya jalur semacam ini ketika ruang warna berbasis persepsi harus berurusan dengan batas sRGB atau batas wilayah warna yang bisa dipersepsi manusia, yaitu gamut. Bahkan sedikit sekali perubahan nilai pun bisa membuat warna keluar dari gamut. Ada berbagai algoritme untuk mengatasinya, tetapi keseragaman perseptual jadi dikorbankan. Misalnya, warna merah pada gradient bisa menjadi terasa terlalu gelap. Jika yang diinginkan adalah gradient yang lebih baik dan keseragaman perseptual itu penting, sebenarnya interpolasi Oklab seharusnya menjadi default. Oklab menginterpolasi dengan jalur garis lurus melintasi lingkaran, dan bila perlu bahkan melewati abu-abu (linear-gradient(in oklab, #f0f, #0f0)). Cara ini juga menghilangkan efek penggelapan yang sering terlihat pada interpolasi sRGB, dan menghasilkan gradient alami dari magenta ke lime. Sebagai catatan, Tailwind v4 sempat memakai Oklch alih-alih sRGB pada versi beta, tetapi pada rilis final memilih Oklab sebagai default yang lebih aman
- Menurut saya, cara browser menginterpolasi warna di sRGB pada dasarnya seperti bug. sRGB adalah encoding berskala logaritmik, jadi menurut spesifikasi asli, interpolasi warna tidak boleh dilakukan langsung di sRGB, melainkan setelah dikonversi ke linear RGB
- Artikel ini sudah diperbaiki, jadi komentar saya boleh diabaikan. Meski begitu, saya tetap setuju bahwa interpolasi Oklab seharusnya jadi default. Di artikelnya juga disebutkan bahwa untuk “gradient yang lebih baik”, hue pada OKLCH bersifat melingkar sehingga bisa menempuh jalur yang tak terduga. Untuk menghindari masalah ini, banyak alat memakai OKLAB, dan Oklab memberi hasil yang konsisten dengan jalur lurus
- Sebenarnya CIE LAB juga menjalankan peran yang sama dan sudah ada sebagai standar (Wikipedia CIE LAB)
  Materi tinjauan W3C
- Terima kasih atas penjelasannya yang sangat informatif. Sayalah penulis artikel ini. Saya akan merevisi isinya agar penjelasannya lebih jelas
- Kasus membuat gradient dari dua warna yang berada di sisi berlawanan spektrum itu agak ekstrem. Tidak ada jawaban pasti soal seharusnya terlihat seperti apa, dan saya rasa dalam desain nyata pun jarang sekali perlu gradient seperti itu. Biasanya saat memakai gradient dalam desain, kita akan memilih sendiri warna tengahnya
Untuk OKLCH, oklch.com membantu saya membangun intuisi. Namun perlu diingat bahwa nilai hue berbeda dari hue di HSL, dan nilai chroma maksimum juga berbeda-beda menurut hue dan lightness. Ini bukan bug, melainkan cerminan dari karakteristik mata manusia dan display. Berbeda dengan OKLCH, pada HSL nilai maksimum selalu tetap, tetapi makna warnanya tidak konsisten. Hal yang bagus dari OKLCH di CSS adalah ia bisa dimanipulasi dalam bentuk rumus. Misalnya bisa ditulis seperti oklch(from var(--accent) calc(l + .1) c h). Tetapi untuk benar-benar memakai rumus dengan baik, tetap dibutuhkan teori warna atau pengujian. Misalnya saya sempat mengira bayangan cukup dibuat dengan hanya mengubah lightness, tetapi ternyata hue juga perlu berubah. Bukan berarti gradient OKLCH selalu yang terbaik. Saat memakai hue yang mirip, warna memang terlihat merata, tetapi jika kita juga peduli pada bagaimana cahaya bercampur secara fisik, maka ruang warna XYZ diperlukan. Untuk ini, dokumen MDN color-mix layak dirujuk. Sebagai catatan, ‘ok’ memang benar-benar berasal dari kata OK. Namanya muncul karena LCH sebelumnya dianggap bermasalah, alias tidak OK
- Anda bilang bagus bahwa OKLCH di CSS bisa memakai rumus, tetapi sebenarnya manipulasi warna relatif bisa dipakai di semua ruang warna CSS. Misalnya background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
- Berkat OKLCH dan relative color, saya bisa banyak mengurangi jumlah warna yang di-hardcode di stylesheet
  Contoh variabel CSS
Beberapa kritiknya sudah disebutkan, tetapi menurut saya ini tetap artikel yang cukup bagus sebagai pengantar tentang OKLCH dan cara menerapkannya di CSS. Sebagai pertanyaan tambahan, saya jadi penasaran dengan tren belakangan ini untuk tidak mencantumkan tanggal pada posting blog. Terutama karena kalimat seperti “OKLCH adalah model warna baru” akan cepat terasa usang di masa depan. Di situs utamanya hanya tertulis “Agustus 2025”, jadi terasa seolah penanggalan memang sengaja dihindari
Situs terkait
- Saya tidak bisa menjelaskannya dengan tepat, tetapi menurut saya tulisan tanpa tanggal adalah masalah serius. Saya tidak tahu apakah kecenderungan ini memang tren saat ini, tetapi tanpa tanggal, artikel lama bisa dengan mudah disangka tulisan baru. Kadang saya menebak tahun artikel dari timestamp yang tersisa di komentar, tetapi banyak blog bahkan tidak mendukung komentar sama sekali, jadi saya jadi enggan untuk kembali lagi. (Ironisnya, di halaman utama OP tertulis “tidak terobsesi pada detail”, tetapi justru tampak terobsesi pada estetika desain sambil mengorbankan fungsionalitas)
- Jika sebuah tulisan tidak punya tanggal, saya biasanya mencoba melihat header Last-Modified saat mengambil dokumen HTML lewat HTTP. Tetapi sering kali penulis memang tidak peduli pada tanggal. Seperti terlihat dari istilah blog itu sendiri, asalnya adalah [web]-log, jadi timestamp adalah elemen inti, namun tampaknya banyak yang tidak memahami itu. Sebagai catatan, nilai Last-Modified menunjukkan waktu terakhir resource itu (HTML) diubah. Jika server tidak mengatur cache dan merender ulang dari backend setiap kali, tanggalnya akan terus diperbarui
  Contoh masalah ini
- Motifnya besar kemungkinan SEO, agar konten lama tidak turun peringkat di mesin pencari. Trik yang benar-benar merepotkan
- Karena Google dan SEO
Katanya warna OKLCH memberi biru yang lebih konsisten dibanding HSL, tetapi dalam praktiknya perubahan lightness pada OKLCH justru banyak bergeser ke arah hijau. Menjaga intensitas perseptual tetap konstan memang jelas merupakan kelebihan, tetapi menurut saya efek yang diklaim di sini dibesar-besarkan
- Jika melihat chart hue untuk warna ini, alasannya jadi jelas
  Chart warna OKLCH
  Saat lightness dinaikkan, warnanya melewati batas band hue tersebut, lalu bergeser ke arah cyan karena ada batas pada biru terang yang bisa direproduksi display. Saat menyesuaikan lightness dalam gradient, OKLCH tidak mempertahankan hue melainkan saturation. Apakah efek ini bagus atau tidak itu soal selera estetika, tetapi setelah lama hanya memakai warna web yang hue-nya tetap dan desaturated, rasanya segar bahwa sekarang kita bisa memilih titik kompromi yang diinginkan
  Diskusi Hacker News terkait
  Belakangan dunia sains juga sudah menemukan LED biru yang lebih dalam, jadi saya berharap 10–20 tahun lagi, ketika ada teknologi yang menggantikan Display P3, kita bisa menampilkan gradient biru yang lebih akurat tanpa gejala pergeseran ke cyan ini. Sampai saat itu, yang penting adalah mana yang terlihat bagus secara desain.
  Sebagai tambahan, untuk desain ruang warna masa depan, saya membayangkan daripada harus memilih hue atau saturation secara dikotomis, mungkin bisa dibuat tetap mempertahankan saturation sampai batas display, lalu bertransisi bertahap menjadi mempertahankan hue di titik batas. Tapi ini sangat sulit karena keterbatasan profil warna (IDCv4). Meski begitu, akan menarik sebagai target DisplayCAL eksperimental
- Di display saya, contoh itu sama sekali tidak menunjukkan green shift. Saya jadi penasaran apakah mungkin layar Anda tidak terkalibrasi dengan benar
- Setuju. Warnanya benar-benar berubah total dari biru menjadi cyan. Kalau OKLCH memang diimplementasikan seperti itu, saya sama sekali tidak ingin memakainya. Sepertinya ada masalah serius dalam perhitungan hue. HSL/HSV memang punya masalah pada lightness perseptual, tetapi hue-nya sendiri selalu konstan sehingga tidak perlu koreksi
- Saya tidak terlalu paham sains warna dan ini mungkin opini subjektif, tetapi di mata saya ujung kanan warna OKLCH paling buruk hanya terasa blue-green atau sekadar light blue. Sebaliknya, dua warna paling terang pada HSL sama sekali tidak terlihat biru; yang kedua dari kanan justru tampak seperti light purple, dan yang paling kanan hampir seperti abu-abu. Pada caption disebutkan bahwa sisi gelap HSL tampak grayish, tetapi sebenarnya pada OKLCH maupun HSL, bagian paling kiri yang paling gelap tetap terasa biru. Jika dicek dengan macOS Digital Color Meter, nilai green pada ujung kanan OKLCH dan HSL juga hampir sama (226 dan 227, dalam sRGB menjadi 228 dan 227)
Saya merekomendasikan tulisan yang lebih baik tentang topik ini
OKLCH in CSS: Why quit RGB, HSL dari Evil Martians
Alat konversi OKLCH yang bisa dicoba
Diskusi Hacker News sebelumnya (6 bulan lalu, 30 komentar)
OKLCH dibuat berdasarkan OKLab (ruang warna seragam berbasis persepsi), dan merupakan model yang mengatur Lightness, Chroma, dan Hue. Nama ‘OK’ diambil dari jawaban pembuatnya yang mengatakan bahwa ini “cukup lumayan bekerja”
- Saya menduga “OK” pada OKLCH sebenarnya singkatan dari “Ottossons kulör” (bahasa Swedia untuk “warna Ottosson”). Bisa saja penciptanya secara rendah hati menyebutnya OK
Saat bekerja dengan warna serta teks/logo, menurut saya kontras dan keterbacaan juga wajib dipertimbangkan
APCA Contrast
- Situs di atas bagus jika ingin memakai algoritme kontras terbaru (APCA, yang masih pra-rilis sebagai algoritme resmi untuk standar WCAG 3), tetapi saat ini banyak industri masih memakai WCAG 2 sebagai acuan, jadi perlu juga memperhatikan persyaratan hukum.
  Pengecekan kontras (WCAG 2)
  Selain itu masih ada banyak alat lain
Di kepala saya, nama OKLCH otomatis terbaca sebagai "Oklachroma"
Ada posting blog pertama yang memperkenalkan ruang warna OKLab, dan menarik dilihat dari sudut pandang sejarah
Posting asli OKLab
Saya penasaran kenapa rumus untuk konversi ke ruang warna OKLCH tidak didokumentasikan. Kalau dicari di Google, yang muncul hanya satu Gist[0], sementara untuk Oklab ada artikel Wikipedia[1]
Contoh rumus konversi di Gist
Wikipedia Oklab
- Inti konversinya ada pada matriks antara Oklab dan sRGB. Konversi OKLab-OKLCH sendiri hanyalah transformasi koordinat, dan itu juga sudah ada di Wikipedia
- OKLCH dan OKLab adalah ruang warna yang sama. Bedanya hanya pada cara representasi: koordinat ortogonal (OKLab) vs. koordinat polar (OKLCH)