- Ruang warna OKLCH berbeda dari RGB atau HSL lama karena berdasarkan persepsi manusia, sehingga lebih presisi dan mudah diprediksi
- Cocok untuk peningkatan sistem desain dan aksesibilitas, dan sangat kuat terutama dalam merepresentasikan warna gamut lebar seperti P3, sehingga lebih kompatibel dengan perangkat modern
oklch() adalah format warna yang mudah dibaca dan intuitif, sehingga manipulasi warna berbasis kode menjadi lebih mudah. Format ini memisahkan kecerahan (L), kroma (C), rona (H), dan opasitas (a)- Bersama spesifikasi CSS Colors 4/5, kemampuan manipulasi warna native terus diperkuat, sehingga OKLCH menjadi pilihan yang berorientasi ke masa depan
- Ekosistem seperti Stylelint, plugin Figma, pustaka JS, dan lainnya juga berkembang pesat, dan ini berdampak positif pada kolaborasi desain-pengembangan
- Namun, ekosistemnya masih belum matang, dan beberapa kombinasi mungkin tidak terlihat di semua monitor
Menerapkan OKLCH ke proyek
- Cari nilai warna dalam CSS yang ada lalu konversikan ke OKLCH, dan gunakan plugin Figma atau alat konversi untuk menyalin dan menerapkan warna OKLCH
- Rapikan warna dalam CSS menjadi palet properti kustom untuk meningkatkan penggunaan ulang dan kemudahan pemeliharaan
- Gunakan Stylelint dan plugin untuk mendeteksi dan mencegah secara otomatis penggunaan warna selain OKLCH
- Integrasikan Stylelint ke lingkungan CI untuk mengotomatiskan pemeriksaan konsistensi warna
Manfaat yang diperoleh setelah beralih ke OKLCH
- Keterbacaan kode yang lebih baik
- Penyesuaian warna yang dapat diprediksi
- Membangun sistem desain berbasis warna relatif
- Dukungan untuk ekspresi visual tingkat lanjut seperti warna P3
- Potensi kolaborasi yang lebih baik dengan tim desain
1 komentar
Tampaknya kenyamanan dalam menulis urutan seperti pencahayaan warna DMX dan keterbacaannya akan meningkat cukup signifikan.