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

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

CSS hwb() ฟังก์ชันใช้รูปแบบสี สีฝาก - ความชัดเจน - ความมืด (HWB) ที่ระบุสี ยังสามารถเพิ่มช่องทางความโปร่งใส (แสดงความโปร่งใสของสี) ได้

ตัวอย่าง

กำหนดสี HWB(A) ต่าง ๆ :

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

ลองทดลองเอง

ภาษาสกุล CSS

การใช้งานภาษาอักษรตัวเลข

hwb(hue whiteness blackness / A)
ค่า คำอธิบาย
hue

สำคัญ. กำหนดมุมบนวงแหวนสี (0 หรือ 360 คือสีแดง, 120 คือสีเขียว, 240 คือสีสีน้ำเงิน)

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

สำคัญ. กำหนดความขาวของการผสม; 0% แสดงถึงไม่มีความขาว, 100% แสดงถึงความขาวเต็ม

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

สำคัญ. กำหนดความเข้มของการผสม; 0% แสดงถึงไม่มีความเข้ม, 100% แสดงถึงความเข้มเต็ม

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

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

สามารถใช้ none (แสดงถึงช่องโปร่งภาพ) ด้วย

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

การใช้งานภาษาอักษรตัวเลข

hwb(from color whiteness blackness / A)
ค่า คำอธิบาย
from color

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

นี่เป็นสีต้นทางที่ธรรมชาติของสีที่มีความเป็นสีสัมพันธ์
hue

สำคัญ. กำหนดมุมบนวงแหวนสี (0 หรือ 360 คือสีแดง, 120 คือสีเขียว, 240 คือสีสีน้ำเงิน)

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

สำคัญ. กำหนดความขาวของการผสม; 0% แสดงถึงไม่มีความขาว, 100% แสดงถึงความขาวเต็ม

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

สำคัญ. กำหนดความเข้มของการผสม; 0% แสดงถึงไม่มีความเข้ม, 100% แสดงถึงความเข้มเต็ม

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

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

สามารถใช้ none (แสดงถึงช่องโปร่งภาพ) ด้วย

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

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

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

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

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

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
ผสมเลขและเปอร์เซ็นต์ในตัวแปร
121 121 122 ไม่สนับสนุน 107

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

อ้างอิง:สี CSS

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

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

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

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

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