HSL ใช้สำหรับ Hue, Saturation และ Lightness เมื่อตั้งค่าสีสำหรับองค์ประกอบ ค่าฮิวอยู่ระหว่าง 0 ถึง 260 โดยที่ 0 หรือ 360 สำหรับสีแดง 240 สำหรับสีน้ำเงิน ในขณะที่ 120 สำหรับสีเขียว ความอิ่มตัวและความสว่างเป็นค่าเปอร์เซ็นต์
ตัวอย่าง
ให้เรามาดูตัวอย่างค่าสี HSL -
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsl(150, 100%, 50%);} #demo2 {background-color: hsl(150, 100%, 50%);} #demo3 {background-color: hsl(140, 100%, 40%);} #demo4 {background-color: hsl(120, 100%, 40%);} #demo5 {background-color: hsl(120, 100%, 30%);} #demo6 {background-color:rgba(108,111,35,0.6);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>
ผลลัพธ์