Fungsi oklab() CSS

Definisi dan penggunaan

Definisi dan penggunaan CSS oklab() Fungsi digunakan untuk menentukan warna di ruang warna OKLAB. Ruang warna ini dirancang untuk memoderasi cara mata manusia mendeteksi warna.

contoh

Definisi berbeda oklab() Warna:

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

Coba sendiri

Sintaks CSS

Sintaks nilai absolut

oklab(L a b / A)
Nilai Deskripsi
L

Wajib. Definiskan kecerahan warna permasalahan, dapat berupa angka diantara 0 dan 1 atau persen diantara 0% dan 100%.

0 (atau 0%) menunjukkan hitam, 1 (atau 100%) menunjukkan putih.

Juga dapat digunakan None (setara dengan 0%).
a

Wajib. Definiskan angka antara -0.4 dan 0.4 atau persen antara -100% dan 100%.

Definiskan jarak warna sepanjang sumbu a, menunjukkan tingkat merah hijau warna.

-0.4 menunjukkan hijau, 0.4 menunjukkan merah. Juga dapat digunakan none (setara dengan 0%).
b

Wajib. Definiskan angka antara -0.4 dan 0.4 atau persen antara -100% dan 100%.

Definisi jarak warna sepanjang sumbu b, menunjukkan tingkat kuning biru warna.

-0.4 menunjukkan biru, 0.4 menunjukkan kuning. Juga dapat digunakan none (setara dengan 0%).
/ A

Pilihan. Menunjukkan nilai jalur transparensi warna (0% atau 0 menunjukkan transparensi penuh, 100% atau 100 menunjukkan tak terlihat).

Juga dapat digunakan none (menunjukkan jalur transparensi yang tidak ada). Nilai default adalah 100%.

Sintaks nilai relatif

oklab(from color L a b / A)
Nilai Deskripsi
from color

Dengan kata kunci from di awal, diikuti nilai warna yang menunjukkan warna asli.

Ini adalah warna asli yang berdasarkan warna yang relatif.
L

Wajib. Definiskan kecerahan warna permasalahan, dapat berupa angka diantara 0 dan 1 atau persen diantara 0% dan 100%.

0 (atau 0%) menunjukkan hitam, 1 (atau 100%) menunjukkan putih.

Juga dapat digunakan none (setara dengan 0%).
a

Wajib. Definiskan angka antara -0.4 dan 0.4 atau persen antara -100% dan 100%.

Definiskan jarak warna sepanjang sumbu a, menunjukkan tingkat merah hijau warna.

-0.4 menunjukkan hijau, 0.4 menunjukkan merah. Juga dapat digunakan none (setara dengan 0%).
b

Wajib. Definiskan angka antara -0.4 dan 0.4 atau persen antara -100% dan 100%.

Definisi jarak warna sepanjang sumbu b, menunjukkan tingkat kuning biru warna.

-0.4 menunjukkan biru, 0.4 menunjukkan kuning. Juga dapat digunakan none (setara dengan 0%).
/ A

Pilihan. Menunjukkan nilai jalur transparensi warna (0% atau 0 menunjukkan transparensi penuh, 100% atau 100 menunjukkan tak terlihat).

Juga dapat digunakan none (menunjukkan jalur transparensi yang tidak ada). Nilai default adalah 100%.

Detil teknis

Versi: CSS Color Module Level 4

Dukungan browser

Angka di tabel menunjukkan versi browser yang mendukung fungsi ini penuh.

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
Gabungkan angka dan persen dalam parameter
116 116 113 16.2 102

Halaman yang berhubungan

Referensi：Warna CSS

Referensi：Fungsi hsl() CSS

Referensi：Fungsi hwb() CSS

Referensi：Fungsi lch() CSS

Referensi：Fungsi lab() CSS

Referensi：Fungsi oklch() CSS