Lý thuyết màu sắc nghe có vẻ học thuật. Trong thực tế, đó là một bộ công cụ nhỏ gồm các quy tắc mà một nhà thiết kế tốt sử dụng một cách tự nhiên. Bảy hài hòa cổ điển bao phủ 95% công việc bảng màu — nắm vững từng quy tắc và khi nào sử dụng là điểm khác biệt giữa bảng màu có vẻ cố ý và bảng màu có vẻ ngẫu nhiên.

Vòng Tròn Là Cái La Bàn

Mỗi quy tắc hài hòa định nghĩa vị trí trên vòng tròn màu sắc 12 phần. Bạn chọn một sắc cơ bản, sau đó quy tắc cho bạn biết vị trí nào trên vòng tròn để lấy phần còn lại. Các quy tắc không chỉ định độ bão hòa hoặc độ sáng — những chiều này là của bạn để điều chỉnh.

Bổ Sung (Sắc Đối Diện)

Hai màu trực tiếp đối diện trên vòng tròn: đỏ và lục lam, cam và xanh lam, tím và vàng. Độ tương phản tối đa. Được sử dụng khi bạn cần một cái gì đó nổi bật trên nền — một nút CTA trên trang đích, một điểm nổi bật trên biểu đồ dữ liệu.

Bẫy: ở độ bão hòa đầy đủ, các cặp bổ sung rung lắc một cách khó chịu. Làm tê một màu (giảm bão hòa, làm nhạt hoặc làm tối) và sử dụng màu kia làm điểm nhấn.

Tam Giác (Ba Cách Đều Nhau)

Ba sắc ở các khoảng 120°: đỏ-vàng-xanh, cam-lục-tím. Cân bằng và năng động. Phổ biến cho minh họa, sản phẩm dành cho trẻ em và các thương hiệu muốn cảm thấy sôi động mà không quá choáng ngợp.

Bẫy: cả ba ở độ bão hòa bằng nhau cạnh tranh để gây chú ý. Chọn một cái để chiếm ưu thế (60% thiết kế của bạn), một cái để hỗ trợ (30%), một cái cho các điểm nhấn (10%).

Tương Tự (Hàng Xóm Trên Vòng Tròn)

Ba đến năm sắc liền kề: vàng-vàng lục-lục hoặc xanh lam-xanh lam tím-tím. Hài hòa lặng lẽ nhất — không có xung đột vì không có màu nào chiến đấu với nhau. Các cảnh tự nhiên (hoàng hôn, rừng) hầu như luôn là tương tự.

Bẫy: bảng màu tương tự có thể cảm thấy bằng phẳng. Thêm một điểm nhấn bổ sung (một lượng nhỏ của màu đối diện của màu ở giữa của bạn) cho các điểm tương phản.

Bổ Sung Chia Đôi (Hai Gần Đối Diện)

Chọn một cơ sở, sau đó lấy hai màu liền kề với phần bổ sung của nó thay vì phần bổ sung chính nó. Mềm mỏng hơn bổ sung nghiêm ngặt nhưng vẫn còn sức mạnh. Một mặc định tốt cho các nhà thiết kế thấy bổ sung thẳng quá tấn công.

Tứ Giác (Hai Cặp Bổ Sung)

Bốn sắc tạo thành một hình chữ nhật trên vòng tròn: ví dụ đỏ + lục + cam + xanh lam. Hài hòa phong phú nhất — có rất nhiều sự đa dạng — nhưng khó cân bằng nhất. Tốt nhất khi một màu chiếm ưu thế và ba màu còn lại hỗ trợ.

Bẫy: bảng màu tứ giác dễ dàng đọc như hỗn loạn. Quyết định màu nào mang lại danh tính và hạ cấp ba màu còn lại thành các vai trò nhỏ hơn.

Đơn Sắc (Một Sắc, Nhiều Giá Trị)

Một sắc với độ bão hòa và độ sáng khác nhau. Sự gắn kết tối đa, không có tương phản sắc. Hoàn hảo cho các giao diện nơi bạn muốn nội dung (ảnh, kiểu chữ) để mang lại sự quan tâm trực quan, không phải giao diện UI.

Hầu hết các công cụ SaaS tối giản nghiêng về đơn sắc — thương hiệu là một xanh lam, mọi thứ khác là xám.

Xu Hướng (Phá Vỡ Các Quy Tắc Tốt)

Một chế độ thứ bảy mà chúng tôi bao gồm trong Trình Tạo Bảng Màu Sắc của chúng tôi: 177 bảng màu được cộng đồng chọn lọc kỹ lưỡng từ ColourLovers, Coolors và các nhà thiết kế ngành. Những bảng màu này thường phá vỡ các quy tắc cổ điển có mục đích — chúng hoạt động vì nhà thiết kế có ý định sáng tạo cụ thể — và chúng là một nguồn cảm hứng tuyệt vời khi lý thuyết thuần túy tạo ra điều gì đó quá an toàn.

Chọn Cái Nào?

Biên tập, lặng lẽ, tự nhiên → tương tự.
Sức mạnh, CTA, năng lượng → bổ sung hoặc bổ sung chia đôi.
Thương hiệu sôi động, minh họa → tam giác.
Biên tập phong phú, các chiến dịch táo bạo → tứ giác.
Giao diện người dùng tối giản, nhiều ảnh → đơn sắc.
Cảm thấy bế tắc → duyệt Xu Hướng.

Vượt Ra Ngoài Các Quy Tắc

Tất cả bảy hài hòa bỏ qua hai chiều quan trọng: tương phản (có thể đọc văn bản trên nền này không?) và màu sắc ngữ nghĩa (đỏ có nghĩa là nguy hiểm trong giao diện người dùng phương Tây bất kể lý thuyết). Luôn chạy bảng màu cuối cùng của bạn qua kiểm tra tương phản WCAG — Trình Tạo Bảng Màu Sắc hiển thị cho bạn tỷ lệ AA/AAA của mỗi cặp chỉ trong một cú nhấp chuột — và không chọn màu nguy hiểm chỉ vì vòng tròn nói nó trông đẹp.

Các quy tắc là điểm khởi đầu, không phải điểm cuối. Tạo năm bảng màu, chỉ trích chúng, điều chỉnh. Bảng màu tốt đến từ sự lặp lại, không phải từ một cuộn xúc xắc duy nhất.

Quy Tắc Hài Hòa Màu Sắc: Bổ Sung, Tam Giác, Tứ Giác và Khi Nào Sử Dụng Mỗi Quy Tắc