Fungsi lab() CSS

Definisi dan penggunaan

Definisi dan penggunaan CSS lab() Fungsi di ruang warna CIE Lab menentukan warna. Ruang warna ini mewakili semua warna yang dapat dilihat mata manusia.

contoh

Tentukan lab() Warna：

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

Cuba sendiri

CSS Syntax

Tatabahasa absolut

lab(L a b / A)
Nilai Penerangan
L

Diperlukan. Mendefinikan kecerahan warna, boleh adalah nombor di antara 0 dan 100 atau peratusan.

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

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

Diperlukan. Mendefinikan nombor di antara -125 dan 125 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna sepanjang sumbu a, menunjukkan kesan merah-hijau warna. -125 menunjukkan hijau, 125 menunjukkan merah.

Juga boleh digunakan none (sama dengan 0%).
b

Diperlukan. Mendefinikan nombor di antara -125 dan 125 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna sepanjang sumbu b, menunjukkan kesan kuning-biru warna.

-125 menunjukkan biru, 125 menunjukkan kuning.

Juga boleh digunakan none (sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai laluan kecerahan warna (0% atau 0 menunjukkan kecerahan penuh, 100% atau 100 menunjukkan tak kecerahan penuh).

Juga boleh digunakan none (menunjukkan laluan kecerahan).

Nilai lalai adalah 100%.

Tatabahasa nilai relatif

lab(from warna L a b / A)
Nilai Penerangan
from warna

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

Ini adalah warna asal yang berdasarkan warna warna relatif.
L

Diperlukan. Mendefinikan kecerahan warna, boleh adalah nombor di antara 0 dan 100 atau peratusan.

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

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

Diperlukan. Mendefinikan nombor di antara -125 dan 125 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna sepanjang sumbu a, menunjukkan kesan merah-hijau warna.

-125 menunjukkan hijau, 125 menunjukkan merah.

Juga boleh digunakan none (sama dengan 0%).
b

Diperlukan. Mendefinikan nombor di antara -125 dan 125 atau peratusan di antara -100% dan 100%.

Mendefinikan jarak warna sepanjang sumbu b, menunjukkan kesan kuning-biru warna.

-125 menunjukkan biru, 125 menunjukkan kuning.

Juga boleh digunakan none (sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai laluan kecerahan warna (0% atau 0 menunjukkan kecerahan penuh, 100% atau 100 menunjukkan tak kecerahan penuh).

Juga boleh digunakan none (menunjukkan laluan kecerahan).

Nilai lalai adalah 100%.

Butir teknikal

Versi: CSS Color Module Level 4

Pendukung pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong fungsi ini.

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
Campur nombor dan peratusan dalam parameter
116 116 113 16.2 102

Laman yang berkenaan

Rujukan：Warna CSS

Rujukan：Fungsi hsl() CSS

Rujukan：Fungsi hwb() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi oklab() CSS

Rujukan：Fungsi oklch() CSS