ค่าสี HSL ใน CSS3

HSL ย่อมาจาก Hue (สีพื้นฐาน), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) เป็นโมเดลสีที่เข้าใจง่ายและปรับแต่งได้โดยตรงกว่า RGB

ช่วงค่า

• Hue: 0 ถึง 360 องศา (0/360=แดง, 120=เขียว, 240=น้ำเงิน)
• Saturation: 0% (เทา) ถึง 100% (สีเต็มที่)
• Lightness: 0% (ดำ) ถึง 100% (ขาว) - 50% = สีปกติ

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

<!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>

ข้อดีของ HSL:

• สร้าง monochromatic palette ได้ง่าย: เปลี่ยนแค่ lightness (50%, 40%, 30%...)
• ปรับความอิ่มตัวได้โดยไม่เปลี่ยน hue
• เข้าใจง่ายสำหรับนักออกแบบ (color wheel)
• รองรับ alpha ผ่าน hsla()

การแปลง HSL ↔ RGB: บราวเซอร์แปลงภายในอัตโนมัติ ไม่ต้องคำนวณเอง