HSL ย่อมาจาก hue, saturation, lightness ในที่นี้ Huge คือระดับของวงล้อสี ความอิ่มตัวและความสว่างเป็นค่าเปอร์เซ็นต์ระหว่าง 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> 