HTML HSL and HSLA Colors - Các màu HSL và HSLA trong HTML
HSL là viết tắt của hue(màu sắc), saturation(độ bão hòa) và lightness(độ sáng).
Các giá trị màu HSLA là một bản mở rộng của HSL với một kênh Alpha(độ mờ đục).
Các giá trị màu HSL
Trong HTML, một màu có thể được xác định sử dụng, màu sắc, độ bão hòa, và độ sáng(HSL) dưới dạng:
hsl(hue, saturation, lightness)
Hue là một độ trong bánh xe màu từ 0 đến 360. 0 là đỏ, 120 là green, và 240 là blue.
Độ bão hòa là một giá trị phần trăm, 0 % nghĩa là sắc thái của màu xám, và 100% là toàn bộ màu.
Độ sáng cũng là phần trăm, 0% là màu đen, 50% không phải sáng hay tối, 100% là trắng.
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
<p>In HTML, you can specify colors using HSL values.</p>
</body>
</html>Độ bão hòa
Độ bão hòa có thể được mô tả như một cường độ của một màu.
100% là thuần màu, không có sắc xám
50% là 50% xám, nhưng bạn vẫn thấy màu.
0% hoàn toàn màu xám, bạn không còn có thể thấy màu.
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>
</body>
</html>Độ sáng
Độ sáng của một màu có thể được một tả như việc bạn muốn cho màu bao nhiêu sáng, khi 0% nghĩa là không chút sáng (đen), 50% nghĩa là 50% sáng (không phải cả sáng hay tối) 100% nghĩa là sáng hoàn toàn (trắng).
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>
</body>
</html>Các sắc thái của màu xám thường được xác định bằng cách đặt màu sắc và độ bão hòa thành 0, và điều chỉnh độ sáng từ 0% đến 100% để lấy sắc thái tối hơn/sáng hơn:
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>
<p>With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness according to how dark/light the gray color should be.</p>
</body>
</html>
Các giá trị màu HSLA
Các giá trị màu HSLA là một mở rộng của các giá trị màu HSL với một kênh alpha - trong đó xác định độ mờ đục cho một màu.
Một giá trị màu HSLA được xác định với:
hsla(hue, saturation, lightness, alpha)
Tham số alpha là một số giữa 0.0 (trong suốt hoàn toàn) và 1.0 (không trong suốt chút nào):
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
<p>You can make transparent colors by using the HSLA color value.</p>
</body>
</html>
Tags:
