Fungsi oklab() CSS

Definisi dan penggunaan

Definisi dan penggunaan CSS oklab() Fungsi digunakan untuk menentukan warna di ruang warna OKLAB. Ruang warna ini bertujuan untuk mensimulasikan cara mata manusia memperoleh pengalaman warna.

contoh

Tentukan 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%);}

Cuba sendiri

CSS syntax

Absolute value syntax

oklab(L a b / A)
Value Description
L

Wajib. Mendefinikan kecerahan warna pengalaman, boleh adalah nombor di antara 0 dan 1 atau peratusan di antara 0% dan 100%.

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

Juga boleh guna None (sama dengan 0%).
a

Wajib. Mendefinikan nombor di antara -0.4 dan 0.4 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna di tengah a-ax, menunjukkan tingkat merah-hijau warna.

-0.4 menunjukkan hijau, 0.4 menunjukkan merah. Juga boleh guna none (sama dengan 0%).
b

Wajib. Mendefinikan nombor di antara -0.4 dan 0.4 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna di tengah b-ax, menunjukkan tingkat kuning-biru warna.

-0.4 menunjukkan biru, 0.4 menunjukkan kuning. Juga boleh guna none (sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai laluan kekang kecolongan warna (0% atau 0 menunjukkan kekang sepenuhnya, 100% atau 100 menunjukkan kekang yang tiada).

Juga boleh guna none (menunjukkan laluan kekang yang tiada). Nilai lalai adalah 100%.

Relative value syntax

oklab(from color L a b / A)
Value Description
from color

Bermula dengan kata kunci from, diikuti dengan nilai warna yang mewakili warna asal.

Ini adalah warna asal yang berdasarkan warna yang bersangkutan.
L

Wajib. Mendefinikan kecerahan warna pengalaman, boleh adalah nombor di antara 0 dan 1 atau peratusan di antara 0% dan 100%.

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

Juga boleh guna none (sama dengan 0%).
a

Wajib. Mendefinikan nombor di antara -0.4 dan 0.4 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna di tengah a-ax, menunjukkan tingkat merah-hijau warna.

-0.4 menunjukkan hijau, 0.4 menunjukkan merah. Juga boleh guna none (sama dengan 0%).
b

Wajib. Mendefinikan nombor di antara -0.4 dan 0.4 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna di tengah b-ax, menunjukkan tingkat kuning-biru warna.

-0.4 menunjukkan biru, 0.4 menunjukkan kuning. Juga boleh guna none (sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai laluan kekang kecolongan warna (0% atau 0 menunjukkan kekang sepenuhnya, 100% atau 100 menunjukkan kekang yang tiada).

Juga boleh guna none (menunjukkan laluan kekang yang tiada). Nilai lalai adalah 100%.

Butiran teknikal

Versi: CSS Color Module Level 4

Dukungan perekap

Nombor di dalam tabel menunjukkan versi perekap yang sepenuhnya mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
Guna nombor dan peratusan dalam parameter
116 116 113 16.2 102

Laman berkaitan

Rujukan：Warna CSS

Rujukan：Fungsi hsl() CSS

Rujukan：Fungsi hwb() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi lab() CSS

Rujukan：Fungsi oklch() CSS