ค่าสี HSLA ใน CSS3

ค่าสี HSLA ย่อมาจาก Hue (สี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) และ Alpha (ความทึบแสง) Alpha เป็นตัวเลข 0.0 - 1.0 โดย 0.0 = โปร่งใสทั้งหมด, 1.0 = ทึบแสงเต็มที่

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <style>    #demo1 {background-color: hsla(140, 100%, 50%, 0.8);}    #demo2 {background-color: hsla(130, 100%, 50%, 0.6);}    #demo3 {background-color: hsla(190, 100%, 50%, 0.4);}    #demo4 {background-color: hsla(170, 100%, 50%, 0.3);}    #demo5 {background-color: hsl(150, 100%, 60%);}    #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>

คำอธิบาย

ตัวอย่างแสดงผลสี HSLA ที่มีค่า Alpha ต่างกัน (0.8, 0.6, 0.4, 0.3) ทำให้เห็นความทึบแสงลดลงเรื่อยๆ เปรียบเทียบกับ HSL (ไม่มี alpha) และ RGBA

ช่วงค่าของ HSLA:

ข้อดีของ HSLA:

• เข้าใจง่ายและปรับแต่งได้ตรงตัว (มากกว่า RGB/Hex)
• สร้างชุดสีที่เกี่ยวข้องง่ายๆ โดยเปลี่ยนแค่ Lightness/Saturation
• รองรับความโปร่งใสโดยตรง (ไม่ต้องแปลงเป็น RGBA)