phối màu CSS()

Adam Argyle

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

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 16,2

Nguồn

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

Trước khi sử dụng SCSS

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

Sass làm tốt lắm luôn đi trước thông số kỹ thuật CSS màu. Tuy nhiên, chưa có một cách thực sự để kết hợp màu sắc trong CSS. Để đưa ra kết quả gần, bạn cần tính một phần giá trị màu. Dưới đâ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 hiện nay:

Trước đây bằng HSL

.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 lại khả năng kết hợp màu sắc với CSS. Nhà phát triển có thể chọn hệ màu để kết hợp và mức độ nổi bật của mỗi màu.

Sau

.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à có đầy đủ tính năng. Thích mê!

Kết hợp màu trong CSS

CSS tồn tại trong một thế giới nhiều hệ màu và gam màu, chính vì thế bạn không bắt buộc phải chỉ định hệ màu để kết hợp. Ngoài ra, các kiểu không gian màu có thể thay đổi đáng kể kết quả của sự kết hợp, vì vậy khi biết được hiệu ứng hệ màu sẽ giúp bạn đạt được kết quả mình cần.

Để xem phần giới thiệu mang tính tương tác, hãy thử dùng công cụ color-mix() này: – Khám phá hiệu ứng của từng hệ màu. - Khám phá hiệu ứng của nội suy màu khi kết hợp một màu hình trụ dấu cách (lch, oklch, hsl và hwb). – Thay đổi các 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. – Sử dụng thanh trượt để thay đổi tỷ lệ trộn. - Mã CSS color-mix() đã tạo có sẵn ở dưới cùng.

Sự kết hợp giữa nhiều không gian màu sắc

Hệ màu mặc định để kết hợp (và độ dốc) là oklab. Chiến dịch này cung cấp kết quả nhất quán. Bạn cũng có thể chỉ định hệ màu thay thế để điều chỉnh theo nhu cầu của bạn.

Hãy lấy black và white làm ví dụ. Hệ màu này sẽ không tạo ra khác biệt rất lớn, đúng 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);

Dùng thử bản minh hoạ

Điều đó có tác động lớn!

Hãy lấy blue và white làm một ví dụ khác. Tôi chọn mục này vì đó là trường hợp hình dạng của hệ màu có thể ảnh hưởng đến kết quả. Trong trường hợp này thì nghĩa là hầu hết hệ màu đều chuyển từ màu trắng sang màu xanh dương. Nó cũng cho thấy oklab là hệ màu đáng tin cậy để kết hợp. gần đúng 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à màu xanh lam (không phải 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);

Dùng thử bản minh hoạ

Tìm hiểu về hiệu ứng của hệ màu bằng color-mix() là kiến thức tuyệt vời để tạo độ dốc của Google. Cú pháp Màu 4 cũng cho phép hiệu ứng chuyển màu chỉ định không gian màu, trong đó độ dốc thể hiện 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);
}

Dùng thử bản minh hoạ

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

Ví dụ: nếu bạn muốn có kết quả kết hợp rực rỡ, hãy sử dụng hsl hoặc hwb. Trong phần sau bản minh hoạ, hai màu rực rỡ (đỏ tươi và vàng chanh) được trộn lẫn với nhau và hsl và hwb cả hai đề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à.

Dùng thử bản minh hoạ

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

Dùng thử bản minh hoạ

Dành 5 phút cho sân chơi color-mix() để thử nghiệm nhiều màu sắc và không gian để bắt đầu tìm hiểu lợi thế của từng không gian. Ngoài ra chúng ta hãy kỳ vọng có thêm hướng dẫn về hệ màu khi tất cả chúng ta đều điều chỉnh theo tiềm năng trong giao diện người dùng.

Điều chỉnh phương pháp nội suy màu sắc

Nếu bạn đã chọn kết hợp hệ màu hình trụ, về cơ bản là màu bất kỳ có một kênh màu h chấp nhận một góc, bạn có thể chỉ định nếu giá trị phép nội suy diễn ra theo shorter, longer, decreasing và increasing. Đây là được đề cập đầy đủ trong Hướng dẫn về màu sắc HD này nếu bạn muốn tìm hiểu thêm.

Lưu ý: Sân chơi color-mix() sẽ thêm một trình đơn thả xuống lựa chọn khác nếu hệ màu là hình trụ. Bạn có thể phát ở đó để xem hiệu ứng của danh sách kết hợp đó.

Dưới đây là ví dụ tương tự về kiểu kết hợp màu xanh lam với màu trắng, nhưng lần này, nó chỉ ở không gian hình trụ bằng các phương pháp nội suy màu khác nhau.

Dùng thử bản minh hoạ

Đây là một Codepen khác tôi tạo để giúp trực quan hoá nội suy màu sắc, nhưng dành riêng cho độ dốc. Tôi tin rằng bài viết này sẽ giúp bạn hiểu rõ cách mỗi Tuy nhiên, hệ màu tạo ra kết quả kết hợp khi nội suy hue được chỉ định, hãy nghiên cứu!

Cảnh báo: Cung cấp phương pháp nội suy hue cho một không phải hình trụ hệ màu là một lỗi cú pháp trong color-mix().

Kết hợp bằng nhiều cú pháp màu sắc

Cho đến nay, chúng ta chủ yếu là kết hợp các màu có tên CSS, như blue và white. Màu CSS sẵn sàng để kết hợp các màu từ hai hệ màu khác nhau. Đây là một lý do khác, đó là cần thiết để chỉ định không gian màu cho sự kết hợp, vì nó thiết lập không gian chung khi hai màu không ở 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. Khá thú vị và linh hoạt.

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

Rất ít khả năng mỗi lần kết hợp bạn đều muốn các phần bằng nhau của mỗi màu, giống như hầu hết các ví dụ chúng ta thấy từ trước đến nay. Chúng tôi có một cú pháp cho cho biết mức độ hiển thị của mỗi màu trong hỗn hợp thu được.

Để bắt đầu chủ đề này, sau đây là mẫu gồm các danh sách kết hợp tương đương (và từ 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 có thể giúp bạn hiểu rõ các trường hợp hiếm gặp. Tập hợp đầu tiên các ví dụ cho thấy mức 50% là không bắt buộc nhưng bạn có thể chỉ định nếu muốn. Cuối cùng ví dụ cho thấy một trường hợp thú vị khi tỷ lệ vượt quá 100% khi thêm vào cùng với nhau, chúng được giới hạn bằng nhau thành 100%.

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

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ụ sau minh hoạ hai quy tắc: 1. Khi tỷ lệ vượt quá 100%, chúng sẽ được giới hạn và phân bổ đồng đều. 1. Khi chỉ cung cấp một tỷ lệ, màu còn lại được đặt thành 100 trừ đi tỷ lệ đó.

Quy tắc cuối cùng ít rõ ràng hơn một chút; đ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ộng chúng không bằng 100%?

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

Sự kết hợp của color-mix() này mang lại độ trong suốt, 40%. Khi các tỷ lệ không cộng lại tới 100%, thì hỗn hợp thu được sẽ không mờ. Sẽ không có màu nào được kết hợp hoàn toàn.

Đang lồng color-mix()

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

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

Hãy lồng ghép càng nhiều càng tốt nếu bạn cần để nhận được kết quả mà mình đang hướng tới.

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

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

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

Trong CSS sau đây, giao diện sáng và tối được tạo dựa trên hệ thập lục phân thương hiệu . Giao diện sáng tạo ra 2 màu văn bản là màu xanh dương đậm và 1 màu trắng rất nhạt màu của bề mặt nền. Sau đó, trong một truy vấn phương tiện ưu tiên tối, các thuộc tính được gán màu mới để nền tối và màu văn bản nhẹ.

: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 được thực hiện bằng cách kết hợp màu trắng hoặc đen thành màu sắc của thương hiệu.

Bảng phối màu trung gian

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

Bản minh hoạ trung gian này cũng thể hiện kỹ thuật tuỳ chỉnh giao diện màu, trong đó tất cả màu giao diện được liệt kê trong :root. Điều này giúp bạn dễ dàng xem tất cả các thẻ cùng một 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 vì chúng được xác định. Thao tác này sẽ lưu việc tìm kiếm thông qua biểu định kiểu để chỉnh sửa màu như 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ó bản minh hoạ tuyệt vời với một số trường hợp sử dụng cho nghiên cứu:

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

Công cụ của Chrome cho nhà phát triển hỗ trợ tuyệt vời cho color-mix(). Trợ lý 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ế.

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

Chúc mọi người phối nhạc vui vẻ!