Hàm color-mix() của CSS

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

CSS của color-mix() Hàm dùng để trộn hai giá trị màu theo tỷ lệ chỉ định trong không gian màu đã cho.

Mẫu

Ví dụ 1

Trộn hai giá trị màu khác nhau theo tỷ lệ chỉ định trong không gian màu hsl:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Thử ngay

Ví dụ 2

Trộn hai giá trị màu khác nhau theo tỷ lệ khác nhau trong không gian màu oklab:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Thử ngay

Ngữ pháp CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Giá trị Mô tả
color-interpolation-method

Bắt buộc. Định nghĩa phương pháp chèn màu cần sử dụng.

Nó được cấu thành từ từ khóa in sau đó là tên không gian màu.

Có thể sử dụng hai loại sau:

Mô hình không gian màu hình vuông:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Mô hình không gian màu cực坐标:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Bắt buộc. Các giá trị màu cần trộn, cũng như giá trị phần trăm tùy chọn (0% đến 100%), được sử dụng để chỉ định tỷ lệ màu.

Giá trị phần trăm mặc định là 50%.
color2 %

Bắt buộc. Các giá trị màu cần trộn, cũng như giá trị phần trăm tùy chọn (0% đến 100%), được sử dụng để chỉ định tỷ lệ màu.

Giá trị phần trăm mặc định là 50%.

Chi tiết kỹ thuật

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

Hỗ trợ trình duyệt

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

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Trang liên quan

Tham khảo:Màu CSS