HTML HSL Colors การใช้งานสีแบบ HSL ในเอชทีเอ็มแอล
ใน HTML เราสามารถใช้งานสีแบบ HSL โดยที่ H คือ Hue ได้แก่เนื้อสี S คือ Saturation ได้แก่ความอิ่มของสี และ L คือ Lightness ได้แก่ความสว่าง ซึ่งสามารถใช้งานได้ในรูปแบบ
hsl(Hue, Saturation, Lightness)
Hue คือ ค่าของเนื้อสี ซึ่งสามารถระบุได้ตั้งแต่ 0 – 360 โดยที่ 0 คือสีแดง 120 คือสีเขียว และ 240 คือสีน้ำเงิน
Saturation คือค่าเปอร์เซ็นต์ของความอิ่มของสี โดยที่ 0% หมายถึงโทนสีเทา และ 100% หมายถึงสีนั้น ๆ แบบร้อยเปอร์เซ็นต์
Lightness คือค่าเปอร์เซ็นต์ของความสว่าง โดยที่ 0% คือสีดำ ส่วน 50% คือไม่สว่างแต่ก็ไม่มืด ส่วน 100% คือสีขาว
ตัวอย่างการใช้งานสีแบบ HSL
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
ตัวอย่างสีที่ได้จากโค้ดด้านบน
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturation
Saturation คือความหนาแน่นของสี โดยที่
- 100% หมายถึง สีนั้น ๆ แบบร้อยเปอร์เซ็นต์ ไม่มีโทนสีเทาปะปน
- 50% หมายถึง มีโทนสีเทาปะปนอยู่ 50%
- 0% หมายถึง สีเทา
ตัวอย่างการตั้งค่า Saturation เป็นค่าต่าง ๆ
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1> <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1> <h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1> <h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1> <h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Lightness
Lightness คือความสว่างของสี เราต้องการให้สีมีความสว่างมากน้อยแค่ไหน สามารถกำหนดได้ที่ค่านี้ โดยที่
- 0% หมายถึง ไม่มีความสว่าง (สีดำ)
- 50% หมายถึง สว่าง 50 เปอร์เซ็นต์ (ไม่มืดแต่ก็ไม่สว่าง)
- 100% หมายถึง สว่างแต็มที่ (สีขาว)
ตัวอย่างการกำหนดค่า Lightness แบบต่าง ๆ
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1> <h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1> <h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1> <h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
โทนสีเทา
ถ้าต้องการโทนสีเทา สามารถทำได้โดยการกำหนดค่า hue และ saturation เป็น 0 ส่วนค่า lightness สามารถกำหนดได้ตามต้องการเพื่อปรับความมืดหรือสว่าง ดังตัวอย่าง
<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1> <h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1> <h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1> <h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1> <h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1> <h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
HSLA
HSLA คือส่วนที่เพิ่มเติมมาจาก HSL โดยเพิ่ม alpha channel เข้ามา เพื่อปรับความโปร่งแสงให้กับสี ซึ่งสามารถใช้งานได้ในรูปแบบ
hsla(hue, saturation, lightness, alpha)
โดยค่า alpha สามารถกำหนดได้ตั้งแต่ค่า 0.0 ถึง 1.0 โดยที่
- 0.0 คือ สว่างเต็มที่
- 1.0 คือ ไม่สว่าง
ตัวอย่างการใช้งาน HSLA
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
