[Tự học HTML] HSL vs HSLA Colors trong HTML

Cafedev chia sẻ về HSL là viết tắt của màu sắc, độ bão hòa và độ sáng.

Giá trị màu HSLA là phần mở rộng của HSL với kênh Alpha (độ mờ).

1. Giá trị HSL Color

Trong HTML, một màu có thể được chỉ định bằng cách sử dụng màu sắc, độ bão hòa và độ sáng (HSL) ở dạng:

hsl(hue, saturation, lightness)

Hue là một độ từ 0 đến 360. 0 là màu đỏ, 120 là màu xanh lá cây và 240 là màu xanh lam.

Độ bão hòa(Saturation) là một giá trị phần trăm, 0% có nghĩa là màu xám và 100% là màu đầy đủ.

Độ sáng(lightness) cũng là một giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Thử nghiệm bằng cách trộn các giá trị HSL bên dưới:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(240, 100%, 50%)">hsl(240, 100%, 50%)</div>
<div style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</div>
<div style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</div>
<div style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</div>
<div style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</div>

Copy and chạy code

2. Độ bão hòa – Saturation

Độ bão hòa có thể được mô tả là cường độ của một màu.

100% là màu thuần khiết, không có sắc độ 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% là màu xám hoàn toàn, bạn không thể nhìn thấy màu nữa.

Ví dụ:

<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 80%, 50%)">hsl(0, 80%, 50%)</div>
<div style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</div>
<div style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</div>
<div style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</div>
<div style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</div>

Copy and chạy code

3. Độ sáng – Lightness

Độ sáng của màu sắc có thể được mô tả là bạn muốn cung cấp bao nhiêu ánh sáng, trong đó 0% có nghĩa là không có ánh sáng (đen), 50% có nghĩa là 50% ánh sáng (không tối cũng không sáng) 100% có nghĩa là ánh sáng đầy đủ (trắng).

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->


<div style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</div>
<div style="background-color:hsl(0, 100%, 25%)">hsl(0, 100%, 25%)</div>
<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</div>
<div style="background-color:hsl(0, 100%, 90%);color:#555555">hsl(0, 100%, 90%)</div>
<div style="background-color:hsl(0, 100%, 100%);color:#555555;">hsl(0, 100%, 100%)</div>

Copy and chạy code

4. Màu xám

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% để có được màu tối hơn / sáng hơn:

<div style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</div>
<div style="background-color:hsl(0, 0%, 30%)">hsl(0, 0%, 30%)</div>
<div style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</div>
<div style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</div>
<div style="background-color:hsl(0, 0%, 70%);color:#555555">hsl(0, 0%, 70%)</div>
<div style="background-color:hsl(0, 0%, 90%);color:#555555;">hsl(0, 0%, 90%)</div>

Copy and chạy code

5. Giá trị HSLA Color

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(hue, saturation, lightness, alpha)

Tham số alpha là một số trong khoảng 0,0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn không minh bạch):

Thử nghiệm bằng cách trộn các giá trị HSLA bên dưới:

<div style="background-color:hsla(9, 100%, 64%, 0);color:#555555;">hsla(9, 100%, 64%, 0)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.2);color:#555555;">hsla(9, 100%, 64%, 0.2)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</div>
<div style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</div>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!