Hàm oklch() trong CSS

CSS

Định nghĩa và cách sử dụng trong oklch() Hàm được sử dụng để chỉ định màu trong không gian màu OKLCH.

oklch() Hàm rất trực quan: Bạn cần xem xét lượng độ sáng/màu sáng (L) cần sử dụng, cường độ màu xám (C), và màu sắc bản thân (H). Ngoài ra, bạn còn có thể chọn thêm giá trị độ trong suốt (A), biểu thị độ trong suốt của màu.

mẫu

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

/* Màu xanh với độ sáng khác nhau /
#p1 {màu nền: oklch(30% 0.4 150);}
#p2 {màu nền: oklch(60% 0.4 150);}
#p3 {màu nền: oklch(100% 0.4 150);}
/ Vàng với độ sáng khác nhau /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Đỏ với độ sáng khác nhau */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Thử ngay

Ngôn ngữ CSS

Ngôn ngữ giá trị tuyệt đối

oklch(L C H / A)
Giá trị Mô tả
L

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

0 (hoặc 0%) biểu thị đen, 1 (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 độ độ tươi của màu (lượng màu), có thể là số hoặc phần trăm.

Phải là số từ -0.4 đến 0.4 hoặc phần trăm từ -100% đến 100%.

Giá trị nhỏ nhất (0% hoặc -0.4) thì màu gần với xám hơn.

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

Bắt buộc. Định nghĩa màu本身, có thể là số hoặc góc (từ 0 đến 360).

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

Tùy chọn. Biểu thị giá trị kênh độ trong suốt của màu (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ó kênh độ trong suốt).

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

Ngôn ngữ giá trị tương đối

oklch(from color L C H / 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.
L

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

0 (hoặc 0%) biểu thị đen, 1 (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 độ độ tươi của màu (lượng màu), có thể là số hoặc phần trăm.

Phải là số từ -0.4 đến 0.4 hoặc phần trăm từ -100% đến 100%.

Giá trị nhỏ nhất (0% hoặc -0.4) thì màu gần với xám hơn.

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

Bắt buộc. Định nghĩa màu本身, có thể là số hoặc góc (từ 0 đến 360).

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

Tùy chọn. Biểu thị giá trị kênh độ trong suốt của màu (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ó kênh độ 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 hỗ trợ hàm này hoàn toàn đầu tiên.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 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 lch() CSS

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