Apa itu warna OKLCH

• 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