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>

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Tags

เรื่องที่น่าสนใจ