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

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

CSS ของ lch() ฟังก์ชันใน CSS สำหรับ LCH (ความเข้มของแสง-ชาติสี-สีสี) สำหรับกำหนดสี。

ตัวอย่าง

กำหนด lch() สี：

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(90% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

ลองทดลองเอง

CSS ภาษา

การใช้ภาษาที่เป็นค่าเรlativนี่เป็นสีต้นทางของสีที่มีสีเท่ากัน C H / Alch(from
) ค่า
นี่เป็นสีต้นทางของสีที่มีสีเท่ากัน

จำเป็นต้องมี。กำหนดความสว่างของสี (สามารถเป็นตัวเลขหรือเปอร์เซ็นต์ในระหว่าง 0 ถึง 100)

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

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

lch(

จำเป็นต้องมี。กำหนดความเป็นสี (ปริมาณสี) สามารถเป็นตัวเลขหรือเปอร์เซ็นต์

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

จำเป็นต้องมี。กำหนดมุมฉากสี (สามารถเป็นตัวเลขหรือมุมของฉาก) ที่สามารถใช้ตัวเลขหรือมุม

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

เลือกตั้งได้。แสดงค่าช่องโซ่ความโปร่งใสของสี (0% หรือ 0 แสดงว่าสีเต็มที่โปร่งใส 100% หรือ 100 แสดงว่าสีไม่โปร่งใส)

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

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

ค่าต่ำสุดคือ 0 (หรือ 0%) ค่าสูงสุดไม่มีจำกัด (แต่ในทางปฏิบัติไม่เกิน 230) 100% เท่ากับ 150

การใช้ภาษาที่เป็นค่าเรlativ from นี่เป็นสีต้นทางของสีที่มีสีเท่ากัน C H / Alch(from
) ค่า
คำอธิบาย from

color

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

จำเป็นต้องมี。กำหนดความสว่างของสี (สามารถเป็นตัวเลขหรือเปอร์เซ็นต์ในระหว่าง 0 ถึง 100)

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

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

จำเป็นต้องมี。กำหนดตัวเลขหรือเปอร์เซ็นต์ในระหว่าง -125 ถึง 125 หรือ -100% ถึง 100%

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

-125 แสดงว่าสีเขียว 125 แสดงว่าสีแดง

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

จำเป็นต้องมี。กำหนดมุมฉากสี (สามารถเป็นตัวเลขหรือมุมของฉาก) ที่สามารถใช้ตัวเลขหรือมุม

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

เลือกตั้งได้。แสดงค่าช่องโซ่ความโปร่งใสของสี (0% หรือ 0 แสดงว่าสีเต็มที่โปร่งใส 100% หรือ 100 แสดงว่าสีไม่โปร่งใส)

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

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

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

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

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

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

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

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

อ้างอิง:CSS สี

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

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

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

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

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