HSL là viết tắt của Hue (Sắc độ), Saturation (Độ bão hòa) và Lightness (Độ sáng) khi đặt màu cho các phần tử. Giá trị Hue từ 0 đến 360, trong đó 0 hoặc 360 là đỏ, 240 là xanh dương, 120 là xanh lá. Saturation và Lightness là giá trị phần trăm.
Ví dụ
Ví dụ dưới đây minh họa giá trị màu HSL:
<!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>
Kết quả
