Màu CSS HSL
HSL là viết tắt của màu sắc, độ bão hòa và độ sáng.
Giá trị HSL
Trong CSS, 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( màu sắc , độ bão hòa , độ sáng )
Hue là một độ trên bánh xe màu từ 0 đến 360. 0 là đỏ, 120 là xanh lục và 240 là xanh lam.
Độ bão hòa là một giá trị phần trăm. 0% có nghĩa là màu xám và 100% là màu đầy đủ.
Độ nhẹ cũng là một tỷ lệ phần trăm. 0% là màu đen, 50% không sáng cũng không tối, 100% là màu trắng
Thử nghiệm bằng cách trộn các giá trị HSL bên dưới:
HUẾ
BÃO HÒA
NHẸ
Ví dụ
Hãy tự mình thử »
Độ bão hòa
Độ bão hòa có thể được mô tả là cường độ của màu sắc.
100% là màu thuần khiết, 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.
Ví dụ
Hãy tự mình thử »
Độ 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% 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) và 100% có nghĩa là độ sáng hoàn toàn (màu trắng) .
Ví dụ
Hãy tự mình thử »
Sắc thái của màu xám
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, đồng thời điều chỉnh độ sáng từ 0% đến 100% để có được sắc thái tối hơn/sáng hơn:
Ví dụ
Hãy tự mình thử »
Giá trị HSLA
Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha - kênh này 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):
Thử nghiệm bằng cách trộn các giá trị HSLA bên dưới:
HUẾ
BÃO HÒA
NHẸ
ALPHA
Ví dụ
Hãy tự mình thử »
Video: Màu CSS HSL
