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

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

CSS oklab() ฟังก์ชันที่ใช้กำหนดสีในช่องโลกสี OKLAB โดยมีวัตถุประสงค์ที่จะแสดงสีตามที่ตามนุษย์ตระหนักได้

ตัวอย่าง

กำหนดตัวอย่าง oklab() สี:

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

亲自试一试

CSS 语法

绝对值语法

oklab(L a b / A)
描述
L

จำเป็น

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

也可以使用 None(等同于 0%)。

a

จำเป็น

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

-0.4 แสดงถึงสีเขียว 0.4 แสดงถึงสีแดง สามารถใช้ none (เท่ากับ 0%) ได้ด้วย

b

จำเป็น

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

-0.4 แสดงถึงสีฟ้า 0.4 แสดงถึงสีเหลือง สามารถใช้ none (เท่ากับ 0%) ได้ด้วย

/ A

เลือกตั้ง

สามารถใช้ none (แสดงถึงช่องโปร่งภาพ) ได้ด้วย ค่าเริ่มต้นคือ 100%

相对值语法

oklab(from color L a b / A)
描述
from color

以关键字 from 开头,后跟表示原始颜色的颜色值。

这是相对颜色所基于的原始颜色。

L

จำเป็น

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

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

a

จำเป็น

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

-0.4 แสดงถึงสีเขียว 0.4 แสดงถึงสีแดง สามารถใช้ none (เท่ากับ 0%) ได้ด้วย

b

จำเป็น

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

-0.4 แสดงถึงสีฟ้า 0.4 แสดงถึงสีเหลือง สามารถใช้ none (เท่ากับ 0%) ได้ด้วย

/ A

เลือกตั้ง

สามารถใช้ none (แสดงถึงช่องโปร่งภาพ) ได้ด้วย ค่าเริ่มต้นคือ 100%

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

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

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

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

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
ใช้ตัวเลขและเปอร์เซ็นต์ในการผสมที่ตัวเลข
116 116 113 16.2 102

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

อ้างอิง:สี CSS

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

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

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

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

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