Quy tắc 60-30-10 trong phối màu thiết kế UI/UX

Hiểu lầm phổ biến khi bắt đầu thiết kế màu sắc

Khi mới làm quen với thiết kế giao diện, nhiều designer thường có xu hướng chọn những bảng màu rực rỡ nhất có thể. Màu đỏ, xanh, cam, tím được sử dụng làm màu nhấn cho mọi thành phần như button, background, text, icon… Nhìn riêng lẻ, từng yếu tố đều nổi bật và “có vẻ đẹp”, nhưng khi đặt cạnh nhau, tổng thể giao diện lại trở nên rối rắm.

Người dùng không biết nên nhìn vào đâu trước, các yếu tố quan trọng như CTA bị chìm, còn thông tin chính thì không được làm rõ. Đây là lỗi lạm dụng màu nhấn, một vấn đề rất phổ biến ở những người mới bước vào UI/UX.

Để giải quyết bài toán này, thiết kế không cần thêm màu nhấn mới, mà cần một nguyên tắc phân bổ màu hợp lý. Và đó chính là lúc quy tắc 60-30-10 phát huy tác dụng.

Các nguyên tắc phối màu cơ bản mà designer thường biết

Trong môi trường thiết kế kỹ thuật số, màu sắc thường được định nghĩa và tùy chỉnh thông qua hai hệ màu phổ biến là RGB và HSB.

Đầu tiên là RGB (Red-Green-Blue). Đây là hệ màu cộng (additive color), được tạo nên từ sự kết hợp ánh sáng của ba màu cơ bản: Đỏ, Xanh lá và Xanh dương. RGB là tiêu chuẩn hiển thị trên hầu hết các thiết bị điện tử như màn hình máy tính, smartphone - nơi mà UI Designer làm việc hàng ngày.

Tuy nhiên, để tinh chỉnh màu sắc một cách trực quan theo mắt nhìn con người, HSB lại là lựa chọn tối ưu hơn. HSB cho phép designer kiểm soát màu sắc thông qua 3 thông số cụ thể: Hue (Sắc độ/Màu gốc), Saturation (Độ bão hòa/Đậm nhạt) và Brightness (Độ sáng tối). Việc hiểu rõ HSB giúp bạn dễ dàng tạo ra các biến thể màu (Shades & Tints) nhất quán cho hệ thống UI.

‍

→ Tìm hiểu thêm hướng dẫn phối màu cho thiết kế UI theo không gian màu HSB của Capi tại đây:

https://capidemy.com/news/kham-pha/huong-dan-phoi-mau-thiet-ke-ui-cho-nguoi-moi-bat-dau

Khi hệ thống hóa các dải màu này, ta có bánh xe màu sắc (color wheel) - "kim chỉ nam" cho mọi bản phối. Dựa vào color wheel, designer có thể xác định chính xác mối quan hệ giữa các màu như: Complementary (tương phản) để tạo điểm nhấn, Analogous (tương đồng) để tạo sự hài hòa, hay Triadic (bộ ba) để tạo sự cân bằng năng động.

‍
Tuy nhiên, điểm chung của các nguyên tắc này là giúp chọn màu nhưng chưa chỉ ra đầy đủ cách phân bổ màu trong toàn bộ giao diện. Designer biết màu nào phù hợp với màu nào, nhưng vẫn gặp khó khăn khi trả lời các câu hỏi: Màu này dùng bao nhiêu là đủ? Màu nào chỉ nên làm điểm nhấn?... Đây chính là khoảng trống mà quy tắc 60 - 30 - 10 có thể giải quyết.

‍

Vì sao quy tắc 60-30-10 quan trọng với UI/UX?

1. Quy tắc 60-30-10 là gì?

Quy tắc 60-30-10 là quy tắc hướng dẫn các designer lựa chọn và kết hợp màu sắc cho thiết kế. 

Quy tắc 60-30-10 bao gồm ba nhóm màu với vai trò khác nhau trong giao diện:

Màu chủ đạo (60%)

Màu chủ đạo thường là các tông trung tính hoặc ít bão hòa, giúp giao diện dễ nhìn và không gây xao nhãng. Những màu phổ biến cho nhóm này có thể kể đến như trắng, xám, xanh dương nhạt hoặc be. Đây là gam màu chiếm tỷ trọng lớn nhất trong thiết kế và đóng vai trò làm nền cho toàn bộ giao diện, tạo sự thống nhất và cân bằng.

Màu phụ (30%)

Màu phụ được sử dụng để hỗ trợ và làm rõ màu chủ đạo, đồng thời giúp phân tách đa dạng các khu vực nội dung trong giao diện. Nhóm màu này thường xuất hiện ở các thành phần như tiêu đề phụ, typography, icon hoặc các khối nội dung phụ. Các gam màu đậm hơn như đen, xanh đậm hoặc các biến thể của màu chủ đạo thường được dùng làm màu phụ.

Màu nhấn (10%)

Màu nhấn chiếm tỷ lệ nhỏ nhất nhưng lại có vai trò thu hút sự chú ý của người dùng. Đây là nhóm màu dùng cho các yếu tố cần ưu tiên như nút bấm, CTA hoặc các trạng thái tương tác quan trọng. Màu nhấn thường có độ tương phản cao so với nền, chẳng hạn như vàng, cam hoặc xanh lá sáng, nhằm dẫn dắt hành vi người dùng một cách rõ ràng.

Đọc thêm: Bí quyết để "vào việc" với màu sắc

2. Vì sao quy tắc 60-30-10 quan trọng trong thiết kế UI/UX?

Trong thiết kế UI/UX, màu sắc đóng vai trò như một công cụ định hướng. Nếu mọi thành phần đều được làm nổi bật ngang nhau, người dùng sẽ khó xác định đâu là nội dung chính và đâu là hành động cần ưu tiên. Điều này khiến giao diện trở nên rối rắm, dù từng yếu tố riêng lẻ có thể được thiết kế tốt.

Quy tắc 60-30-10 giúp giải quyết vấn đề này bằng cách phân cấp vai trò của màu sắc trong giao diện. Khi màu nền, màu hỗ trợ và màu nhấn được phân bổ rõ ràng, cấu trúc giao diện trở nên dễ quét, dễ hiểu và trực quan hơn. Người dùng có thể nhanh chóng nhận biết khu vực nội dung, các nhóm chức năng và những điểm cần tương tác mà không cần suy nghĩ quá nhiều.

Sự khác biệt này thể hiện rõ khi so sánh với thiết kế đồ họa. Trong graphic design, màu sắc thường được sử dụng để tạo ấn tượng thị giác mạnh hoặc truyền tải cảm xúc trong thời gian ngắn. Trong khi đó, giao diện UI/UX phải được sử dụng liên tục và lặp đi lặp lại, vì vậy màu sắc cần được kiểm soát để tránh gây mệt mỏi thị giác và làm nhiễu thông tin. Chính vì thế, các nguyên tắc phân bổ màu như quy tắc 60-30-10 trở thành công cụ quan trọng giúp duy trì sự rõ ràng và ổn định cho trải nghiệm người dùng.

Kết luận

Quy tắc 60-30-10 không phải là công thức cứng nhắc, mà là một nguyên tắc định hướng giúp designer tránh lạm dụng màu sắc và xây dựng giao diện cân bằng, dễ dùng.

Hiểu và áp dụng đúng nguyên tắc này sẽ giúp UI/UX Designer:

• Xây dựng hệ thống màu logic hơn
• Tạo visual hierarchy rõ ràng
• Định hướng người dùng tập trung đúng vào hành động quan trọng
• Thiết kế giao diện chuyên nghiệp và thân thiện hơn

Đối với UI/UX, màu sắc không chỉ mang giá trị thẩm mĩ mà còn để dẫn dắt trải nghiệm. Và quy tắc 60-30-10 là một trong những nguyên tắc nền tảng giúp bạn làm được điều đó.

Đọc thêm: Những Nguyên Tắc Vàng Của Thiết Kế Giao Diện Tối