phối màu CSS()

Adam Argyle

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

Trước color-mix(), để làm tối, làm sáng hoặc giảm độ bão hoà của một màu, nhà phát triển đã sử dụng bộ tiền xử lý 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 trong việc đi trước quy cách CSS về màu sắc. Tuy nhiên, chưa có cách nào thực sự để trộn màu trong CSS. Để có được màu gần giống, bạn cần tính toán các giá trị màu một phần. Sau đây là một 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 sắc mà họ kết hợp và mức độ nổi bật của từng màu trong 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 một thế giới có nhiều không gian màu sắc và gam màu, và do đó, bạn phải chỉ định không gian màu sắc để trộn. Hơn nữa, các không gian màu sắc khác nhau có thể thay đổi đáng kể kết quả của một hỗn hợp, vì vậy, việc biết được hiệu ứng của không gian màu sắc sẽ giúp bạn có được kết quả cần thiết.

Để xem phần giới thiệu mang tính 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 sắc. – Khám phá hiệu ứng nội suy sắc độ khi trộn trong không gian màu hình trụ (lch, oklch, hsl và hwb). – Thay đổi màu đang được trộn bằng cách nhấp vào một trong hai hộp màu trên cùng. – Dùng thanh trượt để thay đổi tỷ lệ trộn. – Mã CSS color-mix() được tạo có ở dưới cùng.

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

Không gian màu sắc mặc định để trộn (và chuyển màu) là oklab. Kỹ thuật này mang lại kết quả ổn định. Bạn cũng có thể chỉ định các không gian màu thay thế để điều chỉnh hỗn hợp cho phù hợp với nhu cầu của mình.

Hãy lấy black và white làm ví dụ. Không gian màu sắc mà họ pha trộn 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);

Điều này có tác động rất lớn!

Hãy lấy blue và white làm một ví dụ khác. Tôi chọn ví dụ này vì đây là trường hợp mà hình dạng của không gian màu sắc có thể ảnh hưởng đến kết quả. Trong trường hợp này, hầu hết các không gian màu sắc đều chuyển sang màu tím khi chuyển từ màu trắng sang màu xanh dương. Ví dụ này cũng cho thấy oklab là một không gian màu sắc đáng tin cậy để pha trộn, gần nhất với kỳ vọng của hầu hết mọi người về việc pha trộn màu trắng và xanh dương (không có màu tím).

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

Tìm hiểu về hiệu ứng của không gian màu sắc với color-mix() cũng là kiến thức tuyệt vời để tạo dải màu. Cú pháp Color 4 cũng cho phép dải màu chỉ định không gian màu sắc, trong đó dải màu cho thấy sự kết hợp trên một vùng không gian.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Nếu bạn thắc mắc không biết không gian màu sắc nào là "tốt nhất", thì câu trả lời là không có không gian màu sắc nào như vậy. Đó là lý do có rất nhiều lựa chọn! Cũng sẽ không có không gian màu sắc mới nào được phát minh (xem oklch và oklab) nếu có một không gian màu sắc "tốt nhất". Mỗi không gian màu sắc đều có thể có một thời điểm riêng để toả sáng và là lựa chọn phù hợp.

Ví dụ: Nếu bạn muốn có kết quả pha trộn sống động, hãy sử dụng hsl hoặc hwb. Trong bản minh hoạ sau, hai màu rực rỡ (đỏ tươi và xanh lục) được kết hợp với nhau, đồng thời hsl và hwb đều tạo ra kết quả rực rỡ, trong khi srgb và oklab tạo ra màu không bão hoà.

Nếu bạn muốn có sự nhất quán và tinh tế, hãy sử dụng oklab. Trong bản minh hoạ sau đây, khi kết hợp màu xanh dương và màu đen, hsl và hwb sẽ tạo ra màu sắc quá rực rỡ và bị lệch sắc độ, trong khi srgb và oklab tạo ra màu xanh dương đậm hơn.

Hãy dành 5 phút để khám phá sân chơi color-mix(), thử nghiệm nhiều màu sắc và không gian, rồi bạn sẽ bắt đầu cảm nhận được ưu điểm của từng không gian. Ngoài ra, hãy chờ đợi thêm hướng dẫn về không gian màu sắc khi tất cả chúng ta điều chỉnh theo tiềm năng của không gian màu sắc trong giao diện người dùng.

Điều chỉnh phương thức nội suy sắc độ

Nếu đã chọn kết hợp trong không gian màu sắc hình trụ, về cơ bản là bất kỳ không gian màu sắc nào có kênh sắc thái màu h chấp nhận một góc, bạn có thể chỉ định xem phép nội suy có chuyển sang shorter, longer, decreasing và increasing hay không. Vấn đề này được đề cập chi tiết trong Hướng dẫn về màu HD này nếu bạn muốn tìm hiểu thêm.

Sau đây là ví dụ về cùng một kiểu kết hợp màu xanh dương và màu trắng, nhưng lần này, kiểu kết hợp này chỉ nằm trong không gian hình trụ với các phương thức nội suy sắc độ khác nhau.

Dưới đây là một Codepen khác mà tôi đã tạo để giúp hình dung nội suy sắc thái màu, nhưng cụ thể là cho dải chuyển màu. Tôi tin rằng điều này sẽ giúp bạn hiểu cách mỗi không gian màu sắc tạo ra kết quả kết hợp khi nội suy sắc thái màu được chỉ định, hãy nghiên cứu kỹ!

Pha trộn với nhiều cú pháp màu

Cho đến nay, chúng ta chủ yếu kết hợp các màu được đặt tên trong CSS, chẳng hạn như blue và white. Tính năng pha trộn màu CSS đã sẵn sàng để pha trộn các màu từ hai không gian màu sắc khác nhau. Đây là một lý do khác khiến việc chỉ định không gian màu sắc cho quá trình trộn là rất quan trọng, vì việc này sẽ đặt không gian chung cho trường hợp hai màu không nằm trong cùng một không gian.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

Trong ví dụ trước, hsl và display-p3 sẽ được chuyển đổi thành oklch rồi kết hợp với nhau. Khá hay và linh hoạt.

Điều chỉnh tỷ lệ pha trộn

Không phải lúc nào bạn cũng muốn pha trộn các màu với tỷ lệ bằng nhau, như hầu hết các ví dụ đã trình bày. Tin vui là có một cú pháp để thể hiện lượng màu sắc cần thấy trong hỗn hợp thu được.

Để bắt đầu chủ đề này, dưới đây là một mẫu các kiểu kết hợp tương đương (và theo thông số kỹ thuật):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Tôi thấy những ví dụ này minh hoạ rõ ràng các trường hợp hiếm gặp. Tập hợp ví dụ đầu tiên cho thấy cách 50% không bắt buộc nhưng có thể được chỉ định tuỳ ý. Ví dụ cuối cùng cho thấy một trường hợp thú vị khi các tỷ lệ vượt quá 100% khi cộng lại với nhau, chúng sẽ được giới hạn bằng nhau để tổng là 100%.

Ngoài ra, xin lưu ý rằng nếu chỉ có một màu chỉ định tỷ lệ, thì màu còn lại được giả định là phần còn lại để đạt 100%. Sau đây là một vài ví dụ khác giúp minh hoạ hành vi này.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Những ví dụ này minh hoạ hai quy tắc: 1. Khi tỷ lệ vượt quá 100%, các tỷ lệ này sẽ được giới hạn và phân bổ đều. 1. Khi chỉ có một tỷ lệ được cung cấp, màu còn lại sẽ được đặt thành 100 trừ đi tỷ lệ đó.

Quy tắc cuối cùng có phần ít rõ ràng hơn; điều gì sẽ xảy ra nếu tỷ lệ phần trăm được cung cấp cho cả hai màu và tổng của chúng không bằng 100%?

color-mix(in lch, purple 20%, plum 20%)

Sự kết hợp này của color-mix() dẫn đến độ trong suốt, độ trong suốt 40%. Khi tỷ lệ không cộng lại thành 100%, hỗn hợp thu được sẽ không có màu đục. Cả hai màu sẽ không được pha trộn hoàn toàn.

Lồng ghép color-mix()

Giống như tất cả CSS, việc lồng nhau được xử lý tốt và như mong đợi; các hàm bên trong sẽ giải quyết trước và trả về giá trị của chúng cho ngữ cảnh gốc.

color-mix(in lch, purple 40%, color-mix(plum, white))

Bạn có thể lồng bao nhiêu tuỳ ý để đạt được kết quả mà bạn đang hướng tới.

Xây dựng bảng phối màu sáng và tối

Hãy tạo bảng phối màu bằng color-mix()!

Bảng phối màu cơ bản

Trong CSS sau, giao diện sáng và Giao diện tối được tạo dựa trên mã màu hex của thương hiệu. Giao diện sáng tạo ra hai màu văn bản xanh dương đậm và một màu nền bề mặt trắng rất sáng. Sau đó, trong một truy vấn nội dung nghe nhìn về lựa chọn ưu tiên tối, các thuộc tính tuỳ chỉnh sẽ được chỉ định màu mới để nền có màu tối và màu văn bản có màu sáng.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Tất cả những điều này đều được thực hiện bằng cách kết hợp màu trắng hoặc đen vào màu thương hiệu.

Bảng phối màu trung gian

Bạn có thể tiến thêm một bước bằng cách thêm nhiều giao diện hơn ngoài giao diện sáng và tối. Trong bản minh hoạ sau, các thay đổi đối với nhóm nút chọn sẽ cập nhật một thuộc tính trên thẻ HTML [color-scheme="auto"], sau đó cho phép bộ chọn áp dụng có điều kiện một chủ đề màu sắc.

Bản minh hoạ trung gian này cũng cho thấy một kỹ thuật tạo chủ đề màu sắc, trong đó tất cả màu của chủ đề đều được liệt kê trong :root. Điều này giúp bạn dễ dàng xem tất cả các mục cùng lúc và điều chỉnh nếu cần. Sau này, trong biểu định kiểu, bạn có thể sử dụng các biến như đã được định nghĩa. Việc này giúp bạn không phải tìm kiếm các thao tác màu trong biểu định kiểu vì tất cả đều có trong khối :root ban đầu.

Các trường hợp sử dụng thú vị khác

Ana Tudor có một bản minh hoạ tuyệt vời với một số trường hợp sử dụng để nghiên cứu:

Gỡ lỗi color-mix() bằng Công cụ cho nhà phát triển

Chrome DevTools hỗ trợ rất tốt cho color-mix(). Công cụ này nhận dạng và làm nổi bật cú pháp, tạo bản xem trước của kiểu kết hợp ngay bên cạnh kiểu trong ngăn Kiểu và cho phép chọn màu thay thế.

Nó sẽ có dạng như sau trong Công cụ cho nhà phát triển:

Chúc các bạn phối nhạc vui vẻ!