Màu sắc HSL và HSLA
Máy tính HSL
Màu HSL
Giá trị màu HSL được hỗ trợ trong Edge, Chrome, Firefox, Safari, Opera 10+ và trong IE9+.
HSL là viết tắt của Hue, Saturation và Lightness.
Giá trị màu HSL được chỉ định bằng:
hsl( màu sắc, độ bão hòa , độ sáng )
Huế
Hue là một độ trên bánh xe màu từ 0 đến 360. 0 (hoặc 360) là đỏ, 120 là xanh lá cây, 240 là xanh lam.
Độ bão hòa
Độ bão hòa có thể được mô tả là cường độ của màu sắc. Đó là giá trị phần trăm từ 0% đến 100%.
100% có đầy đủ màu sắc, không có sắc thái xám.
50% là 50% màu xám nhưng bạn vẫn có thể nhìn thấy màu sắc.
0% hoàn toàn có màu xám; bạn không thể nhìn thấy màu sắc nữa.
Độ nhẹ
Độ sáng của một màu có thể được mô tả là lượng ánh sáng bạn muốn cung cấp cho màu đó, trong đó 0% nghĩa là không có ánh sáng (tối), 50% nghĩa là 50% ánh sáng (không tối cũng không sáng) và 100% nghĩa là sáng hoàn toàn.
Hãy thử nó
Giá trị màu HSL được hỗ trợ trong tất cả các trình duyệt chính.
Ví dụ
<style>
div {
background-color: hsl(170, 50%, 50%);
color: hsl(0, 50%, 50%);
}
</style>
Hãy tự mình thử »Giá trị màu HSLA
Giá trị màu HSLA là phần mở rộng của giá trị màu HSL, với kênh Alpha - chỉ định độ mờ cho màu.
Giá trị màu HSLA được chỉ định bằng:
hsla ( màu sắc, độ bão hòa , độ sáng, alpha )
Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không minh bạch chút nào):
Ví dụ
<h1 style="background-color:hsla(120, 100%, 50%, 0.2);">hsla(0, 100%, 50%,
0.2)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.4);">hsla(0,
100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.6);">hsla(0,
100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.8);">hsla(0,
100%, 50%, 0.8)</h1>
Hãy tự mình thử »