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