phối màu CSS()

Adam Argyle

Hàm color-mix() CSS cho phép bạn kết hợp màu sắc trong bất kỳ không gian màu nào được hỗ trợ ngay từ CSS.

Trước color-mix(), để làm tối, làm sáng hoặc làm giảm độ bão hoà của màu, nhà phát triển đã sử dụng trình xử lý trước CSS hoặc calc() trên các kênh màu.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass đã làm rất tốt việc đi trước quy cách CSS màu. Tuy nhiên, chưa có cách thực sự để kết hợp màu sắc trong CSS. Để có được màu sắc gần giống, bạn cần thực hiện phép toán của một phần giá trị màu. Dưới đây là ví dụ rút gọn về cách CSS có thể mô phỏng việc kết hợp ngày nay:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() mang đến khả năng kết hợp màu sắc cho CSS. Nhà phát triển có thể chọn không gian màu để kết hợp và mức độ chiếm ưu thế của từng màu trong quá trình kết hợp.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

Đó là điều chúng tôi muốn. API linh hoạt, mạnh mẽ và đầy đủ tính năng. Thích mê!

Pha trộn màu trong CSS

CSS tồn tại trong nhiều không gian màu và dải màu, do đó, bạn không bắt buộc phải chỉ định không gian màu để kết hợp. Hơn nữa, các không gian màu khác nhau có thể thay đổi đáng kể kết quả của một bản phối, vì vậy, việc biết hiệu ứng của một không gian màu sẽ giúp bạn có được kết quả mong muốn.

Để xem phần giới thiệu tương tác, hãy thử công cụ color-mix() này: – Khám phá hiệu ứng của từng không gian màu. – Khám phá hiệu ứng của quá trình nội suy màu sắc khi pha trộn trong không gian màu hình trụ (lch, oklch, hsl và hwb). – Thay đổi màu sắc đang được pha trộn bằng cách nhấp vào một trong hai hộp màu ở trên cùng. – Sử dụng thanh trượt để thay đổi tỷ lệ pha trộn. – Mã CSS color-mix() đã tạo ở dưới cùng.

Pha trộn trong nhiều không gian màu

Hệ màu mặc định để pha trộn (và độ dốc) là oklab. Phương pháp này mang lại kết quả nhất quán. Bạn cũng có thể chỉ định các không gian màu thay thế để điều chỉnh chế độ phối màu cho phù hợp với nhu cầu của mình.

Ví dụ: black và white. Không gian màu mà các màu này kết hợp sẽ không tạo ra sự khác biệt lớn, phải không? Sai.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);