Thuộc tính màu HSL trong CSS3

Giới thiệu

HSL là viết tắt của Hue (sắc độ), Saturation (độ bão hòa), Lightness (độ sáng). Hue là góc trên vòng tròn màu (0-360), saturation và lightness là giá trị phần trăm từ 0% đến 100%.

Ví dụ

Ví dụ sau minh họa thuộc tính màu 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>Màu HSL:</p>
    <p id="g1">Xanh lá</p>
    <p id="g2">Xanh lá bình thường</p>
    <p id="g3">Xanh lá đậm</p>
</body>
</html>