คุณสมบัติสี CSS3 HSL

HSL ย่อมาจาก Hue (สี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) โดย Hue เป็นองศาบนวงสี (0-360) saturation และ lightness เป็นเปอร์เซ็นต์ 0-100%

ตัวอย่าง

ตัวอย่างด้านล่างแสดงคุณสมบัติสี HSL:

<html>
  <head>
    <style>
      #g1 { background-color: hsl(120, 100%, 50%); }
      #g2 { background-color: hsl(120, 100%, 75%); }
      #g3 { background-color: hsl(120, 100%, 25%); }
    </style>
  </head>
  <body>
    <p>HSL colors:</p>
    <p id="g1">Green</p>
    <p id="g2">Normal Green</p>
    <p id="g3">Dark Green</p>
  </body>
</html>