Chức năng lch() của CSS

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

CSS của lch() Chức năng trong không gian màu LCH (sáng - độ chiếu - màu sắc) xác định màu.

thực例

Định nghĩa khác nhau lch() Màu sắc:

#p1 {màu nền: lch(10% 100 130 / 0.5);}
#p2 {màu nền: lch(40% 100 130);}
#p3 {màu nền: lch(90% 100 130 / 20%);}
#p3 {background-color:lch(10% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

Thử ngay

Ngữ pháp CSS

Ngữ pháp giá trị tuyệt đốiĐây là màu sắc ban đầu mà màu sắc tương đối dựa trên. C H / Alch(from
) Giá trị
Đây là màu sắc ban đầu mà màu sắc tương đối dựa trên.

Bắt buộc. Định nghĩa độ sáng của màu sắc, có thể là số hoặc phần trăm từ 0 đến 100.

0 (hoặc 0%) biểu thị đen, 100 (hoặc 100%) biểu thị trắng.

Cũng có thể sử dụng none (tương đương với 0%).
C

lch(

Bắt buộc. Định nghĩa độ sắc (lượng của màu sắc), có thể là số hoặc phần trăm.

Cũng có thể sử dụng none (tương đương với 0%).
H

Bắt buộc. Định nghĩa góc màu sắc, có thể là số hoặc giá trị góc.

Cũng có thể sử dụng none (tương đương với 0deg).
/ A

Tùy chọn. Biểu thị giá trị độ trong suốt của màu sắc (0% hoặc 0 biểu thị hoàn toàn trong suốt, 100% hoặc 100 biểu thị hoàn toàn không trong suốt).

Cũng có thể sử dụng none (biểu thị không có độ trong suốt).

Giá trị mặc định là 100%.

Giá trị tối thiểu là 0 (hoặc 0%). Giá trị tối đa không có giới hạn (nhưng thực tế không vượt quá 230). 100% bằng 150.

Ngữ pháp giá trị tương đối from Đây là màu sắc ban đầu mà màu sắc tương đối dựa trên. C H / Alch(from
) Giá trị
Mô tả from

color

Bắt đầu bằng từ khóa from, sau đó là giá trị màu sắc biểu thị màu sắc ban đầu.
Đây là màu sắc ban đầu mà màu sắc tương đối dựa trên.

Bắt buộc. Định nghĩa độ sáng của màu sắc, có thể là số hoặc phần trăm từ 0 đến 100.

0 (hoặc 0%) biểu thị đen, 100 (hoặc 100%) biểu thị trắng.

Cũng có thể sử dụng none (tương đương với 0%).
C

Bắt buộc. Định nghĩa số hoặc phần trăm từ -125 đến 125 hoặc từ -100% đến 100%.

Định nghĩa khoảng cách của màu sắc theo trục a, biểu thị mức độ đỏ-xanh của màu sắc.

-125 biểu thị xanh, 125 biểu thị đỏ.

Cũng có thể sử dụng none (tương đương với 0%).
H

Bắt buộc. Định nghĩa góc màu sắc, có thể là số hoặc giá trị góc.

Cũng có thể sử dụng none (tương đương với 0deg).
/ A

Tùy chọn. Biểu thị giá trị độ trong suốt của màu sắc (0% hoặc 0 biểu thị hoàn toàn trong suốt, 100% hoặc 100 biểu thị hoàn toàn không trong suốt).

Cũng có thể sử dụng none (biểu thị không có độ trong suốt).

Giá trị mặc định là 100%.

Chi tiết kỹ thuật

Phiên bản: CSS Color Module Level 4

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
Kết hợp số và phần trăm trong tham số
116 116 113 16.2 102

Trang liên quan

Tham khảo:Màu CSS

Tham khảo:Hàm hsl() trong CSS

Tham khảo:Hàm hwb() CSS

Tham khảo:Hàm lab() CSS

Tham khảo:Hàm oklab() CSS

Tham khảo:Hàm oklch() CSS