ฟังก์ชัน oklab() ของ CSS
- หน้าก่อน CSS mod() ฟังก์ชัน
- หน้าต่อไป CSS oklch() ฟังก์ชัน
- กลับไปยังชั้นบน คู่มืออ้างอิงฟังก์ชัน 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() ฟังก์ชัน
- หน้าก่อน CSS mod() ฟังก์ชัน
- หน้าต่อไป CSS oklch() ฟังก์ชัน
- กลับไปยังชั้นบน คู่มืออ้างอิงฟังก์ชัน CSS