หลักสูตรที่เลือกตั้ง

แนะนำหลักสูตร:

การกำหนดและการใช้งาน oklch() ฟังก์ชัน oklch() ใน CSS

oklch() ฟังก์ชันนี้ใช้เพื่อกำหนดสีในช่องโพรแกรมสี OKLCH

ฟังก์ชันที่มีความเข้าใจง่าย: คุณต้องคิดถึงปริมาณของความรุ้ง/ความสว่าง (L) ที่ใช้, ความแข็งของสีเงา (C), และสีตัวเอง (H) ด้วยเช่นกัน นอกจากนี้ คุณยังสามารถเลือกเพิ่มค่าช่องโพรแกรมความโปร่งแสง (A) ที่แสดงความเข้มของสีอีกด้วย

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

/* สีเขียวดอกไม้ที่มีความรุ้งต่างกัน */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 不同亮度的黄色 /
#p4 {background-color: oklch(30% 0.4 100);}
/ สีเหลืองที่มีความระลอกต่างกัน /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ สีแดงที่มีความระลอกต่างกัน */
#p7 {background-color: oklch(30% 0.4 20);}

#p8 {background-color: oklch(60% 0.4 20);}

#p9 {background-color: oklch(100% 0.4 20);}

ทดลองด้วยตัวเอง

CSS ภาษาจัดการด้วยคำสั่งจาก from ตามด้วยค่าสีของสีต้นทาง 0 (หรือ 0%) แสดงว่าสีดำ, 1 (หรือ 100%) แสดงว่าสีขาว H / Aการนำเสนอค่าเรlativ
oklch(from )
จัดการด้วยคำสั่งจาก from ตามด้วยค่าสีของสีต้นทาง

นี่เป็นสีต้นทางที่สีที่เป็นสีที่มีความเป็นสีที่สูงสุด

L

ยังสามารถใช้ none (เท่ากับ 0%) ได้
0 (หรือ 0%) แสดงว่าสีดำ, 1 (หรือ 100%) แสดงว่าสีขาว

C

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

เมื่อมีค่าขนาดเล็กที่สุด (0% หรือ -0.4) สีจะใกล้เคียงกับสีเทามากขึ้น

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

จำเป็น. กำหนดสีมันเอง, สามารถเป็นตัวเลขหรือมุม (0 ถึง 360)

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

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

การนำเสนอค่าอบโจม

oklch(

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

ค่าโดยแทนคือ 100% คำอธิบาย จัดการด้วยคำสั่งจาก from ตามด้วยค่าสีของสีต้นทาง 0 (หรือ 0%) แสดงว่าสีดำ, 1 (หรือ 100%) แสดงว่าสีขาว H / Aการนำเสนอค่าเรlativ
oklch(from )
ค่า คำอธิบาย

from

color
จัดการด้วยคำสั่งจาก from ตามด้วยค่าสีของสีต้นทาง

นี่เป็นสีต้นทางที่สีที่เป็นสีที่มีความเป็นสีที่สูงสุด

L

ยังสามารถใช้ none (เท่ากับ 0%) ได้
0 (หรือ 0%) แสดงว่าสีดำ, 1 (หรือ 100%) แสดงว่าสีขาว

C

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

เมื่อมีค่าขนาดเล็กที่สุด (0% หรือ -0.4) สีจะใกล้เคียงกับสีเทามากขึ้น

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

จำเป็น. กำหนดสีมันเอง, สามารถเป็นตัวเลขหรือมุม (0 ถึง 360)

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

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

ยังสามารถใช้ none (แสดงว่าไม่มีช่องโปร่งช่อง) ได้ (ค่าโดยแทนคือ 100%)

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

รุ่น: CSS Color Module Level 4

การสนับสนุนโปรแกรมน่าที่ใช้

ตัวเลขในตารางนี้ระบุอุปกรณ์ที่สนับสนุนฟังก์ชันนี้ทั้งหมด

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

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

อ้างอิง:สี CSS

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

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

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

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

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