Màu HTML HSL và HSLA

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

Giá trị màu HSL

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à độ đậm nhạt (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à 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 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 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ị màu 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: