Phối màu hài hòa: bổ túc, tương đồng, bộ ba và các kiểu khác

Phối màu hài hòa là gì

Phối màu hài hòa là một quy tắc chọn những màu hợp nhau. Bạn lấy một màu gốc, giữ nguyên độ sáng và độ rực của nó, rồi chỉ xoay tông màu theo những góc định sẵn trên bánh xe màu.

Các góc là phần dễ. Xoay trên bánh xe nào cũng quan trọng không kém, vì bánh xe HSL quen thuộc và bánh xe theo cảm nhận như OKLCH cho kết quả khác hẳn nhau với cùng một góc. Mọi ví dụ bên dưới đều bắt đầu từ #2a7fbf, một màu xanh dương trung bình.

Bổ túc, bổ túc chia tách, tương đồng, bộ ba, bộ bốn, hình vuông

Mỗi hàng giữ độ sáng OKLCH của màu gốc là 0,577 và chroma là 0,127. Chỉ tông màu xoay theo các góc đã ghi. Khi màu sau khi xoay nằm ngoài sRGB, chroma được hạ nhẹ cho vừa, nên vài màu hơi kém rực hơn. Đơn sắc là ngoại lệ: tông màu giữ nguyên, độ sáng thay đổi theo từng bước 0,12.

• Bổ túc: độ căng mạnh nhất. Chỉ dùng màu thứ hai cho điểm nhấn nhỏ, chẳng hạn nút kêu gọi hành động.
• Bổ túc chia tách: năng lượng như bổ túc nhưng dễ cân bằng hơn, vì điểm nhấn được chia cho hai màu nằm cạnh tông đối diện.
• Tương đồng: êm dịu và liền mạch. Hợp với hình minh họa và nền, yếu khi bạn cần một thành phần nổi bật.
• Bộ ba, bộ bốn và hình vuông: sinh động nhưng khó kiểm soát. Để một màu dẫn dắt, các màu còn lại chỉ chiếm phần nhỏ.
• Đơn sắc: một tông màu ở nhiều mức độ sáng. Lựa chọn an toàn nhất cho giao diện, vì độ tương phản vốn đến từ độ sáng.

Vì sao bánh xe màu HSL cho phối màu bị lệch

Phần lớn bánh xe màu trong công cụ thiết kế là HSL: chúng xoay tông màu và giữ nguyên các con số độ bão hòa và độ sáng HSL. Nhưng độ sáng HSL là một công thức, không phải thứ mắt bạn thấy. Xoay một màu vàng nghệ 180° trong HSL, bạn nhận được màu xanh dương đậm trông tối hơn màu vàng rất nhiều.

Xoay trong OKLCH giữ độ sáng cảm nhận bằng nhau. Dưới đây là #f4b400 được xoay theo cả hai cách, kèm độ sáng OKLCH của từng kết quả.

Bộ màu HSL trải độ sáng từ 0,489 đến 0,857, nên màu xanh dương và tím chìm xuống còn màu xanh bạc hà thì chói lên. Bộ màu OKLCH nằm gọn trong khoảng 0,802 đến 0,817. Điều tương tự xảy ra với các màu gốc RGB thuần: #ff0000, #00ff00 và #0000ff là bộ ba HSL hoàn hảo, nhưng độ sáng OKLCH của chúng lần lượt là 0,628, 0,866 và 0,452.

Có một sự đánh đổi. Màu xanh dương sáng ngang màu vàng này không thể quá rực trên màn hình sRGB, nên màu bổ túc OKLCH #97c0ff có chroma 0,10 thay vì 0,166. Bạn phải chọn giữa độ sáng bằng nhau và độ rực bằng nhau; với vàng và xanh dương, không thể có cả hai.

Bánh xe RYB của họa sĩ và bánh xe RGB của màn hình

Bánh xe màu học ở lớp mỹ thuật là RYB: đỏ, vàng và xanh dương là màu gốc, giống như khi pha sơn. Trên đó, màu bổ túc của đỏ là xanh lá và của xanh dương là cam. Màn hình pha trộn ánh sáng, nên công cụ số dùng bánh xe RGB, nơi màu bổ túc của đỏ là xanh lơ (cyan) và của xanh dương là vàng.

Không cái nào sai, chúng trả lời những câu hỏi khác nhau. RYB theo truyền thống hội họa, RGB và OKLCH theo cách màn hình và mắt người hoạt động. Nếu công cụ thiết kế cho bạn màu xanh lơ ở chỗ bạn chờ màu xanh lá, nghĩa là nó đang dùng bánh xe RGB.

Cột OKLCH cho thấy độ sáng bằng nhau tác động thế nào lên các màu cực đoan. Màu bổ túc của xanh dương thuần thành màu vàng đất tối có cùng độ sáng 0,45, còn màu bổ túc của vàng thuần thành màu tím oải hương gần như trắng ở mức 0,96.

Áp dụng quy tắc 60-30-10 cho một kiểu phối màu

Kiểu phối màu cho bạn biết dùng những màu nào, chứ không nói mỗi màu dùng bao nhiêu. Quy tắc 60-30-10 lấp chỗ trống đó: khoảng 60% diện tích dành cho màu chủ đạo, 30% cho màu phụ và 10% cho màu nhấn. Chia đều khiến cả một bộ phối màu tốt cũng trông rối.

Trong giao diện, phần 60% thường là màu gần trung tính pha chút tông màu gốc, phần 30% là màu gốc và phần 10% là màu nhấn bổ túc. Đây là bộ màu dựng từ #2a7fbf, sẵn sàng để sao chép.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

Cách kiểm tra độ tương phản của một kiểu phối màu

Chênh lệch tông màu không làm chữ dễ đọc, chênh lệch độ sáng mới làm được. Cặp bổ túc ở trên cách xa nhau về tông màu hết mức có thể, vậy mà #2a7fbf trên #ab6708 chỉ có tỷ lệ WCAG 1,05:1 và APCA Lc bằng 0: gần như vô hình nếu dùng làm chữ.

Độ sáng bằng nhau cũng có mặt lợi. Chữ trắng trên mọi màu của các bộ phối OKLCH ở trên đạt từ 4,04:1 đến 4,62:1. Với phiên bản HSL của cùng các bộ phối đó, con số dao động từ 2,15:1 đến 8,90:1. Vì thế một cách sửa áp dụng được cho cả bộ OKLCH: hạ độ sáng xuống 0,52, chữ trắng sẽ vượt 4,5:1 trên mọi tông màu ở chroma 0,127, từ 5,00:1 đến 5,91:1.

Muốn dùng hai màu trong bộ phối làm chữ và nền, hãy kéo chúng xa nhau về độ sáng: giữ nguyên tông màu, đẩy một màu về khoảng 0,35 và màu kia về khoảng 0,93. Sau đó kiểm tra cặp màu thật bằng công cụ kiểm tra độ tương phản, và chạy bảng màu qua trình mô phỏng mù màu nếu màu nhấn mang ý nghĩa.

Hỏi đáp