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à độ đậm nhạt (HSL) trong biểu mẫu:

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à màu đỏ, 120 là xanh lục và 240 là xanh lam.

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

Độ sáng cũng là một tỷ lệ phần trăm, 0% là màu đen, 50% không phải là sáng hoặc tối, 100% là màu trắng

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

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 tinh khiết, không có sắc thái xám

50% là 50% là 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 còn nhìn thấy màu sắc nữa.

Độ nhẹ

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

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 các sắc thái đậm hơn / nhạt hơn:

Giá trị HSLA

Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh alpha - chỉ định độ mờ cho một màu.

Giá trị màu HSLA được chỉ định với:

hsla ( màu sắc, độ bão hòa , độ đậm nhạt , alpha )

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không trong suốt chút nào):

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