HSL LÀ GÌ

     

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ạn đang xem: Hsl là gì

Độ 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:


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.

Xem thêm: Đêm Nghe Tiếng Ếch Nhái Kêu Ban Đêm Nghe Tiếng Ếch, Nao Lòng Nhớ Quê!

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ụ:


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).


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:


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.

Xem thêm: Bản Mềm: 29 Bài Toán Lớp 1 Nâng Cao Có Đáp Án, 50 Bài Tập Toán Lớp 1 Cơ Bản Và Nâng Cao

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:


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 cameraminhtan.vn để nhận được nhiều hơn nữa:

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


*

*

*

*

*

cameraminhtan.vn là kênh thông tin, sự kiện, hướng dẫn và chia sẻ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu.