Apa itu OKLCH: format warna yang akhirnya sesuai dengan mata Anda

Apa itu OKLCH

OKLCH adalah bentuk polar dari Oklab, ruang warna perseptual yang diterbitkan Björn Ottosson pada 2020. Isinya tiga angka. L adalah kecerahan yang dirasakan mata, dari 0 (hitam) sampai 1 atau 100% (putih). C adalah kroma, yaitu banyaknya warna, dari 0 (abu-abu) sampai sekitar 0,37 untuk warna paling mencolok yang bisa ditampilkan layar. H adalah sudut rona dari 0 sampai 360 derajat.

Beginilah satu warna yang sama ditulis dalam berbagai format. Semua nilai di bawah dihitung langsung oleh PickShade, jadi Anda bisa menyalinnya apa adanya.

Mengapa OKLCH lebih baik daripada HSL

Kecerahan di HSL hanyalah rumus, bukan persepsi. hsl(60 100% 50%) adalah kuning terang dan hsl(240 100% 50%) adalah biru gelap, tetapi keduanya mengaku punya kecerahan 50%. Kalau Anda menyusun palet dengan HSL, setiap rona harus dikoreksi manual.

Di OKLCH, warna dengan L yang sama terlihat sama terangnya. Anda bisa mempertahankan L dan C lalu memutar H untuk mendapatkan sekumpulan rona yang terasa seimbang, atau mempertahankan H dan C lalu menaikkan L bertahap untuk mendapatkan skala shade yang rapi. Itulah sebabnya Tailwind CSS v4 mendefinisikan seluruh palet bawaannya dalam OKLCH.

Kecerahan juga bisa memprediksi kontras. Teks yang selisih L-nya dengan latar sekitar 0,4 atau lebih biasanya mudah dibaca, sehingga memilih warna yang aksesibel jadi jauh lebih mudah dipahami.

Sintaks di CSS

Kecerahan bisa ditulis sebagai persentase atau angka dari 0 sampai 1. Kroma berupa angka. Rona berupa sudut dalam derajat. Transparansi ditulis setelah garis miring.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Dukungan browser

oklch() berfungsi di semua browser terkini: Safari sejak 15.4, Chrome dan Edge sejak 111, Firefox sejak 113. Itu mencakup jauh lebih dari 90% pengguna. Untuk browser yang sangat lama, tulis cadangan HEX di baris sebelum nilai OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Batas kroma dan gamut

OKLCH bisa menggambarkan warna yang tidak bisa ditampilkan layar mana pun. Kroma maksimum bergantung pada kecerahan dan rona: kuning yang mencolok hanya mungkin pada kecerahan tinggi, biru yang mencolok hanya pada kecerahan rendah. Jika nilainya berada di luar gamut sRGB atau Display P3, browser memetakannya kembali, dan warnanya bisa bergeser.

PickShade menandai warna di luar sRGB dan memberi Anda warna terdekat yang masih muat, dicari dengan menurunkan kroma sambil mempertahankan kecerahan dan rona. Metode ini sama dengan yang direkomendasikan CSS Color 4.

Cara konversi HEX ke OKLCH

Urutan konversinya: HEX ke sRGB, sRGB ke cahaya linear, sRGB linear ke ruang kerucut LMS, akar pangkat tiga, sebuah matriks ke Oklab, lalu Oklab ke koordinat polar. Menghitungnya manual rawan salah, jadi tempel saja warna apa pun ke konverter dan salin hasilnya.

Tanya jawab