ฟังก์ชัน lab() ของ CSS

กำหนดและการใช้งาน

CSS lab() ฟังก์ชันสำหรับกำหนดสีในความเป็นสี CIE Lab ของ Lab ซึ่งนำแสงสีที่มีอยู่ในสายตามนุษย์

ฟังก์ชัน

กำหนดตัวอย่างต่าง ๆ lab() สี：

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

ลองทดลองเอง

ภาษา CSS

การใช้งานภาษาค่าบุคคล

lab(L a b / A)
ค่า คำอธิบาย
L

จำเป็น. กำหนดความสว่างของสี ซึ่งเป็นตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง 0 ถึง 100

0 (หรือ 0%) แสดงถึงสีดำ, 100 (หรือ 100%) แสดงถึงสีขาว

ยังสามารถใช้ none (เท่ากับ 0%)
a

จำเป็น. กำหนดตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง -125 ถึง 125 หรือ -100% ถึง 100%

กำหนดระยะทางของสีตามเส้น a แสดงความเหนียวแน่นของสีที่หน้าตัดทางสีแดงสีเขียว. -125 แสดงสีสีเขียว, 125 แสดงสีสีแดง

ยังสามารถใช้ none (เท่ากับ 0%)
b

จำเป็น. กำหนดตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง -125 ถึง 125 หรือ -100% ถึง 100%

กำหนดระยะทางของสีตามเส้น b แสดงความเหนียวแน่นของสีที่หน้าตัดทางสีเหลืองสีน้ำเงิน

-125 แสดงสีสีน้ำเงิน, 125 แสดงสีสีเหลือง

ยังสามารถใช้ none (เท่ากับ 0%)
/ A

เลือกได้. แสดงค่าช่องโปร่งใสของสี (0% หรือ 0) แสดงถึงความโปร่งใสสุดที่สุด, 100% หรือ 100) แสดงถึงความโปร่งใสไม่มีสี

ยังสามารถใช้ none (แสดงถึงช่องโปร่งใสไม่มีสี)

ค่าเริ่มต้นคือ 100%。

การใช้งานภาษาค่าเรlativ

lab(from color L a b / A)
ค่า คำอธิบาย
from color

เริ่มต้นด้วยคำว่า from ตามด้วยค่าสีของสีแรก

นี่เป็นสีแรกที่มีฐานของสีที่เป็นสีเรlativ
L

จำเป็น. กำหนดความสว่างของสี ซึ่งเป็นตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง 0 ถึง 100

0 (หรือ 0%) แสดงถึงสีดำ, 100 (หรือ 100%) แสดงถึงสีขาว

ยังสามารถใช้ none (เท่ากับ 0%)
a

จำเป็น. กำหนดตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง -125 ถึง 125 หรือ -100% ถึง 100%

กำหนดระยะทางของสีตามเส้น a แสดงความเหนียวแน่นของสีที่หน้าตัดทางสีแดงสีเขียว

-125 แสดงสีสีเขียว, 125 แสดงสีสีแดง

ยังสามารถใช้ none (เท่ากับ 0%)
b

จำเป็น. กำหนดตัวเลขหรือเปอร์เซ็นต์ที่อยู่ระหว่าง -125 ถึง 125 หรือ -100% ถึง 100%

กำหนดระยะทางของสีตามเส้น b แสดงความเหนียวแน่นของสีที่หน้าตัดทางสีเหลืองสีน้ำเงิน

-125 แสดงสีสีน้ำเงิน, 125 แสดงสีสีเหลือง

ยังสามารถใช้ none (เท่ากับ 0%)
/ A

เลือกได้. แสดงค่าช่องโปร่งใสของสี (0% หรือ 0) แสดงถึงความโปร่งใสสุดที่สุด, 100% หรือ 100) แสดงถึงความโปร่งใสไม่มีสี

ยังสามารถใช้ none (แสดงถึงช่องโปร่งใสไม่มีสี)

ค่าเริ่มต้นคือ 100%。

รายละเอียดเทคนิค

เวอร์ชั่น: CSS Color Module Level 4

การสนับสนุนบราวเซอร์

ตัวเลขในตารางแสดงความสนใจในการสนับสนุนฟังก์ชันนี้ของเวอร์ชั่นบราวเซอร์ที่สนับสนุนครบถ้วน

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
ผสมตัวเลขและเปอร์เซ็นต์ในตัวแปร
116 116 113 16.2 102

หน้าที่เกี่ยวข้อง

อ้างอิง:ตัวแปรที่เกี่ยวข้องกับ CSS สี

อ้างอิง:ฟังก์ชัน hsl() ของ CSS

อ้างอิง:CSS hwb() ฟังก์ชัน

อ้างอิง:CSS lch() ฟังก์ชัน

อ้างอิง:CSS oklab() ฟังก์ชัน

อ้างอิง:CSS oklch() ฟังก์ชัน