Hàm color-mix() của CSS 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 trong CSS.
Trước color-mix(), để làm tối, làm sáng hoặc giảm độ bão hoà màu, các nhà phát triển đã sử dụng bộ tiền xử lý CSS hoặc calc() trên 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 vượt qua thông số kỹ thuật CSS màu. Tuy nhiên, chưa có cách thực sự nào để kết hợp màu trong CSS. Để tiến gần hơn, bạn cần phải tính toán từng phần của các giá trị màu. Dưới đây là ví dụ rút gọn về cách CSS có thể mô phỏng hoạt động kết hợp hiện 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 cho CSS. Nhà phát triển có thể chọn hệ màu cần kết hợp và mức độ nổi bật của mỗi màu trong hỗn 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. Tính linh hoạt, sức mạnh và các API đầy đủ tính năng. Thích mê!
Kết hợp màu trong CSS
CSS tồn tại trong nhiều hệ màu và thế giới gam màu, do đó, bạn không bắt buộc phải chỉ định hệ màu để kết hợp. Hơn nữa, các hệ màu khác nhau có thể làm thay đổi đáng kể kết quả của việc kết hợp, vì vậy, việc biết hiệu ứng của hệ màu sẽ giúp bạn nhận được kết quả mình cần.
Để xem phần giới thiệu giàu tính tương tác, hãy dùng thử 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 loại nội suy màu khi trộn trong không gian màu hình trụ (lch, oklch, hsl và hwb).
– Thay đổi màu đượ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() đã tạo có sẵn ở dưới cùng.
Kết hợp nhiều màu sắc
Hệ màu mặc định để phối (và chuyển màu) là oklab. Phương thức này mang lại kết quả nhất quán. Bạn cũng có thể chỉ định hệ màu thay thế để điều chỉnh bảng phối cho phù hợp với nhu cầu của mình.
Hãy lấy black và white làm ví dụ. Hệ màu mà chúng kết hợp sẽ không
tạo ra sự khác biệ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);
Việc này có tác động rất lớn!
Hãy lấy blue và white làm ví dụ khác. Tôi chọn cách này vì đây là trường hợp mà hình dạng của không gian màu 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 đều chuyển sang màu tím khi di chuyển từ màu trắng sang màu xanh dương. Bảng này cũng cho thấy oklab là không gian màu đáng tin cậy để kết hợp, gần giống nhất với kỳ vọng của hầu hết mọi người về việc kết hợp 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);
Việc tìm hiểu về hiệu ứng của không gian màu với color-mix() cũng là kiến thức tuyệt vời để tạo hiệu ứng chuyển màu. Cú pháp màu 4 cũng cho phép độ dốc chỉ định không gian màu, trong đó độ dốc hiển thị 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);
}
Không có hệ màu nào là "tốt nhất" nếu bạn muốn biết. Đó là lý do tại sao
có rất nhiều lựa chọn! Ngoài ra, không có không gian màu mới nào được phát minh (xem oklch và oklab), nếu một trong hai là "tốt nhất". Mỗi không gian màu có thể có một khoảnh khắc riêng biệt để toả sáng và là lựa chọn phù hợp.
Ví dụ: nếu bạn muốn có một kết quả kết hợp sống động, hãy sử dụng hsl hoặc hwb. Trong bản minh hoạ sau đây, 2 màu rực rỡ (màu đỏ tươi và màu vàng chanh) được trộn lẫn với nhau, còn 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 sự nhất quán và tinh tế, hãy dùng oklab. Trong bản minh hoạ sau đây, kết hợp màu xanh dương và đen, hsl và hwb tạo ra màu sắc quá rực rỡ và thay đổi màu sắc, trong khisrgb và oklab tạo ra màu xanh dương đậm hơn.
Dành 5 phút với sân chơi color-mix(), thử nghiệm các màu sắc và không gian khác nhau và bạn sẽ bắt đầu hiểu được ưu điểm của từng không gian. Ngoài ra, chúng ta cũng mong đợi có thêm hướng dẫn về hệ màu vì tất cả chúng ta đều điều chỉnh theo tiềm năng của chúng trong giao diện người dùng.
Điều chỉnh phương pháp nội suy màu
Nếu bạn chọn kết hợp trong một hệ màu hình trụ, về cơ bản là bất kỳ không gian màu nào có kênh màu h chấp nhận góc, thì bạn có thể chỉ định việc nội suy có chuyển sang shorter, longer, decreasing và increasing hay không. Bạn có thể xem nội dung này trong Hướng dẫn màu HD này nếu muốn tìm hiểu thêm.
Dưới đây là ví dụ tương tự về cách kết hợp màu xanh dương với màu trắng, nhưng lần này chỉ là trong các không gian hình trụ với các phương pháp nội suy màu khác nhau.
Đây là một Codepen khác mà tôi đã tạo để giúp trực quan hoá nội suy màu sắc, nhưng dành riêng cho tính năng 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 tạo ra kết quả kết hợp khi chỉ định loại nội suy màu, hãy nghiên cứu!
Kết hợp nhiều cú pháp màu
Cho đến nay, chúng tôi chủ yếu sử dụng các màu có tên CSS kết hợp, như blue và white. Tính năng trộn màu CSS sẵn sàng kết hợp các màu đến từ hai không gian màu khác nhau. Đây là một lý do khác khiến bạn cần chỉ định hệ màu cho việc kết hợp, vì nó thiết lập không gian chung khi 2 màu không ở 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, sau đó kết hợp. Khá thú vị và linh hoạt.
Điều chỉnh tỷ lệ trộn
Không phải lúc nào bạn cũng muốn kết hợp các màu bằng nhau, như hầu hết các ví dụ đã trình bày từ trước đến nay. Tin vui là có cú pháp để xác định lượng màu của mỗi màu sẽ hiển thị trong kết quả kết hợp.
Để bắt đầu chủ đề này, sau đây là mẫu danh sách kết hợp tất cả đều 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 minh hoạ rõ ràng các trường hợp hiếm gặp. Tập hợp các ví dụ đầu tiên cho thấy 50% là không bắt buộc nhưng có thể được chỉ định nếu muốn. 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 cộng lại với nhau, thì chúng sẽ được giới hạn bằng nhau thành tổng 100%.
Ngoài ra, hãy lưu ý rằng nếu chỉ một màu chỉ định một tỷ lệ, thì màu còn lại được giả định là phần còn lại là 100%. Dưới đây là một vài ví dụ khác để giúp minh hoạ cho 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ạ 2 quy tắc: 1. Khi tỷ lệ vượt quá 100%, các tỷ lệ sẽ được kẹp và phân bổ đồng đều. 1. Khi chỉ có một tỷ lệ được cung cấp, màu còn lại được đặt thành 100 trừ đi tỷ lệ đó.
Quy tắc cuối cùng kém rõ ràng hơn một chút; điều gì xảy ra nếu tỷ lệ phần trăm được cung cấp cho cả hai màu và tổng tỷ lệ phần trăm đó không bằng 100%?
color-mix(in lch, purple 20%, plum 20%)
Sự kết hợp này của color-mix() mang lại độ trong suốt và tính minh bạch 40%.
Khi các tỷ lệ không bằng 100%, hỗn hợp thu được sẽ không mờ.
Không màu nào có thể được kết hợp hoàn toàn.
Cách lồng color-mix()
Giống như tất cả CSS, việc lồng nhau được xử lý tốt và như dự kiến; các hàm bên trong sẽ phân giải trước và trả về giá trị của chúng về ngữ cảnh gốc.
color-mix(in lch, purple 40%, color-mix(plum, white))
Bạn có thể lồng ghép nhiều nhất có thể để đạt được kết quả mong muốn.
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 với color-mix()!
Bảng phối màu cơ bản
Trong CSS sau đây, một giao diện sáng và tối được tạo dựa trên 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 bề mặt nền trắng rất nhạt. Sau đó, trong truy vấn nội dung nghe nhìn có 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 tối và màu văn bản cũng 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 có thể được thực hiện bằng cách kết hợp màu trắng hoặc đen với màu của thương hiệu.
Bảng phối màu trung gian
Bạn có thể cải thiện điều này bằng cách thêm nhiều giao diện sáng và tối. Trong bản minh hoạ sau đây, những thay đổi đối với nhóm chọn sẽ cập nhật một thuộc tính trên thẻ HTML [color-scheme="auto"], sau đó cho phép các bộ chọn áp dụng giao diện màu theo điều kiện.
Bản minh hoạ trung gian này cũng cho thấy kỹ thuật tuỳ chỉnh giao diện, 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ùng một lúc và điều chỉnh nếu cần. Trong phần sau của biểu định kiểu, bạn có thể sử dụng các biến khi chúng được định nghĩa. Thao tác này sẽ lưu hoạt động tìm kiếm thông qua biểu định kiểu cho các thao tác màu vì tất cả đều nằm 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 qua 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 có hỗ trợ tuyệt vời cho color-mix(). Lớp 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ế.
Công cụ này sẽ có dạng như sau trong Công cụ cho nhà phát triển:
Chúc mọi người có sự phối hợp vui vẻ!