Bảng học

Sách tham khảo CSS

Thuộc tính CSS

Khóa học chọn lọc

Khóa học gợi ý:

Bảo tàng Bảo Bối CodeW3C.com

Hàm hsl() của CSS

Trang trước Hàm grayscale() CSS
Trang tiếp theo Hàm hue-rotate() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

Định nghĩa và cách sử dụng

CSS của hsl() Hàm sử dụng mô hình màu sắc HSL (Hue-Saturation-Lightness) để chỉ định màu sắc. Còn có thể thêm thành phần alpha tùy chọn (biểu thị độ trong suốt của màu sắc).

Gợi ý:HSL đại diện cho màu sắc (Hue), độ bão hòa (Saturation) và độ sáng (Lightness), nó biểu diễn phương pháp tọa độ hình trụ của màu sắc.

Lưu ý:hsla() Hàm là hsl() Tên hàm thay thế. Gợi ý sử dụng hsl() Hàm.

Mô hình

Ví dụ 1

Định nghĩa các màu HSL(A) khác nhau:

#p1 {background-color:hsl(120 100% 50%);} /* Màu xanh lá cây */
#p2 {background-color:hsl(120 100% 75%);} /* Màu xanh lá cây nhạt */
#p3 {background-color:hsl(120 100% 25%);} /* Màu xanh lá cây đậm */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Đen mờ màu xanh lá cây đậm */
#p5 {background-color:hsl(120 60% 70%);} /* Màu xanh lá cây nhẹ */
#p6 {background-color:hsl(290 100% 50%);} /* Màu hồng */
#p7 {background-color:hsl(290 60% 70%);} /* Màu hồng phấn */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Đen mờ màu hồng phấn */

Thử ngay

Ví dụ 2

Ngữ pháp cũ sử dụng dấu phẩy để phân cách giá trị:

#p1 {background-color:hsl(120, 100%, 50%);} /* Xanh lục */
#p2 {background-color:hsl(120, 100%, 75%);} /* Xanh lục nhạt */
#p3 {background-color:hsl(120, 100%, 25%);} /* Xanh lục đậm */
#p4 {background-color:hsl(120, 60%, 70%);} /* Xanh lục nhạt */
#p5 {background-color:hsl(290, 100%, 50%);} /* Tím */
#p6 {background-color:hsl(290, 60%, 70%);} /* Tím nhạt */

Thử ngay

Ngữ pháp CSS

Ngữ pháp giá trị tuyệt đối

hsl(hue saturation lightness / A)

Giá trị	Mô tả
hue	Bắt buộc. Định nghĩa độ số của màu trên bánh xe màu (từ 0 đến 360) - 0 (hoặc 360) là đỏ, 120 là xanh lục, 240 là xanh dương.
saturation	Bắt buộc. Định nghĩa độ bão hòa của màu; 0% là xám, 100% là màu đầy đủ (độ bão hòa tối đa). Cũng có thể sử dụng None (tương đương với 0%).
lightness	Bắt buộc. Định nghĩa độ sáng của màu; 0% là đen, 50% là bình thường, 100% là trắng. Cũng có thể sử dụng None (tương đương với 0%).
/ A	Tùy chọn. Biểu thị giá trị alpha channel của màu (từ 0% (hoặc 0) - trong suốt đến 100% (hoặc 100) - không trong suốt). Cũng có thể sử dụng None (biểu thị không có alpha channel). Giá trị mặc định là 100%.

Ngữ pháp giá trị tương đối

hsl(from color hue saturation lightness / A)

Giá trị	Mô tả
from color	Bắt đầu bằng từ khóa from, sau đó là giá trị màu biểu thị màu gốc. Đây là màu gốc dựa trên màu tương đối.
hue	Bắt buộc. Định nghĩa độ số của màu trên bánh xe màu (từ 0 đến 360) - 0 (hoặc 360) là đỏ, 120 là xanh lục, 240 là xanh dương.
saturation	Bắt buộc. Định nghĩa độ bão hòa của màu; 0% là xám, 100% là màu đầy đủ (độ bão hòa tối đa). Cũng có thể sử dụng None (tương đương với 0%).
lightness	Bắt buộc. Định nghĩa độ sáng của màu; 0% là đen, 50% là bình thường, 100% là trắng. Cũng có thể sử dụng None (tương đương với 0%).
/ A	Tùy chọn. Biểu thị giá trị alpha channel của màu (từ 0% (hoặc 0) - trong suốt đến 100% (hoặc 100) - không trong suốt). Cũng có thể sử dụng None (biểu thị không có alpha channel). Giá trị mặc định là 100%.