Màu sắc là một trong những yếu tố “đập vào mắt” người dùng đầu tiên khi họ mở một website hoặc ứng dụng. Trước khi đọc nội dung, trước khi bấm vào nút, não bộ của người dùng đã phản ứng với màu sắc. Các nghiên cứu trong lĩnh vực tâm lý học UI/UX cho thấy màu sắc có thể ảnh hưởng đến cách con người nhận thức, cảm xúc, và thậm chí cả quyết định của họ (nhiều khi ở mức vô thức). Việc lựa chọn màu sắc một cách chiến lược có thể giúp cải thiện khả năng sử dụng, hướng sự chú ý của người dùng và tăng mức độ tương tác, trong khi việc phối màu thiếu cân bằng có thể khiến giao diện trở nên rối rắm hoặc thiếu chuyên nghiệp.
Vì vậy, các designers hiếm khi chọn màu một cách ngẫu nhiên. Thay vào đó, họ dựa trên những nguyên tắc đã được kiểm chứng để tạo ra sự hài hòa về thị giác và thứ bậc rõ ràng trong giao diện. Một trong những hướng dẫn đơn giản nhưng hiệu quả nhất là quy tắc màu 60-30-10, một nguyên tắc thiết kế kinh điển vốn xuất phát từ lĩnh vực nội thất, nhưng hiện nay được áp dụng rộng rãi trong thiết kế đồ họa, thiết kế sản phẩm, và đặc biệt là trong UI/UX.
Tỉ lệ này giúp designer xây dựng interface có cấu trúc rõ ràng, dễ đọc và hài hòa về mặt thị giác, đồng thời làm nổi bật những thành phần quan trọng. Bằng cách kiểm soát mức độ xuất hiện của từng màu, quy tắc 60-30-10 giúp giảm nhiễu thị giác và khiến người dùng dễ dàng nhận biết nên tập trung vào đâu trước. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách quy tắc 60-30-10 được áp dụng trong thiết kế UI/UX hiện đại, vì sao nguyên tắc này vẫn còn phù hợp trong các design system ngày nay, và cách bạn có thể sử dụng nó để tạo ra những interface gọn gàng, rõ ràng và chuyên nghiệp hơn.
Vậy quy tắc 60-30-10 trong thiết kế UI/UX là gì?
Quy tắc 60-30-10 là một nguyên tắc thiết kế kinh điển được sử dụng để tạo ra bảng màu cân bằng và dễ nhìn. Ý tưởng rất đơn giản: chia tỉ lệ sử dụng màu thành ba phần, trong đó một màu đóng vai trò chủ đạo, một màu hỗ trợ, và một màu chỉ dùng để nhấn mạnh. Tỉ lệ này giúp tránh cảm giác rối mắt và giúp người dùng nhanh chóng hiểu được cấu trúc của layout ngay từ cái nhìn đầu tiên.
Nguyên tắc này bắt nguồn từ thiết kế nội thất và lý thuyết màu sắc truyền thống, nơi designer phân bổ màu theo tỉ lệ để không gian trở nên hài hòa và dễ chịu. Theo thời gian, cách tiếp cận này được áp dụng rộng rãi trong graphic design, branding và UI/UX, bởi các interface số cũng cần có thứ bậc rõ ràng và sự cân bằng thị giác. Quy tắc này chia màu thành ba tỉ lệ để tạo sự cân bằng: 60% màu chủ đạo, 30% màu phụ, và 10% màu nhấn.
1. 60% Dominant Color:
Đây là màu chính của interface. Màu này thường xuất hiện ở background, các vùng lớn, hoặc các surface chính trong layout. Dominant color quyết định cảm xúc tổng thể và tone của toàn bộ thiết kế.
Trong nhiều interface hiện đại, dominant color thường là các màu trung tính như trắng, xám hoặc tông tối, vì background trung tính giúp nội dung dễ đọc hơn và giảm cảm giác mỏi mắt khi sử dụng trong thời gian dài.
2. 30% Secondary Color
Secondary color có nhiệm vụ hỗ trợ màu chủ đạo và tạo độ tương phản vừa đủ mà không làm layout bị quá nổi. Trong thiết kế UI/UX, màu này thường được dùng cho card, panel, menu, text, shape, hình ảnh hoặc background của từng section. Màu phụ giúp phân tách các vùng nội dung và tạo chiều sâu cho interface, khiến layout trông có cấu trúc rõ ràng và dễ hiểu hơn.
3. 10% Accent Color
Accent color được sử dụng với tần suất ít để thu hút sự chú ý vào những thành phần quan trọng. Các vị trí thường dùng gồm button, link, highlight, notification hoặc các chi tiết nhỏ.
Vì xuất hiện ít nhất nên accent color lại trở thành màu dễ thấy nhất. Đây là lý do nhiều design system chỉ dùng màu nhấn cho CTA (call-to-action) và các yếu tố có thể tương tác, giúp người dùng biết nên bấm vào đâu hoặc thực hiện hành động gì tiếp theo.
Trong thiết kế UI/UX, quy tắc 60-30-10 không phải là công thức bắt buộc, mà là một guideline thực tế giúp designer giữ việc sử dụng màu sắc luôn nhất quán, có chủ đích và dễ hiểu đối với người dùng.
Vì sao quy tắc 60-30-10 hoạt động hiệu quả
Quy tắc 60-30-10 hoạt động tốt không chỉ vì nó giúp thiết kế trông đẹp hơn, mà còn vì nó phù hợp với cách não bộ con người xử lý thông tin thị giác một cách tự nhiên. Khi người dùng mở một website hoặc app, họ không đọc mọi thứ theo thứ tự. Thay vào đó, não sẽ quét nhanh toàn bộ màn hình để tìm pattern, độ tương phản và những điểm cần chú ý trước. Việc phân bổ màu sắc cân bằng giúp người dùng hiểu đâu là phần quan trọng mà không cần phải suy nghĩ quá nhiều.
Một nguyên tắc quan trọng đứng sau điều này là visual hierarchy. Visual hierarchy là cách sắp xếp các yếu tố trong interface để hướng sự chú ý của người dùng từ phần quan trọng nhất đến phần ít quan trọng hơn. Theo nghiên cứu của Nielsen Norman Group, visual hierarchy rõ ràng giúp người dùng hoàn thành tác vụ nhanh hơn và giảm nhầm lẫn, vì interface đã thể hiện cấu trúc trước khi người dùng kịp đọc nội dung.
Quy tắc 60-30-10 tự nhiên tạo ra hierarchy này. Vì accent color xuất hiện ít hơn, não sẽ chú ý đến nó ngay lập tức. Điều này khiến nó trở thành lựa chọn lý tưởng cho button, link và các thành phần tương tác quan trọng. Khi có quá nhiều màu cạnh tranh sự chú ý, người dùng dễ bị quá tải và mất nhiều thời gian hơn để quyết định nên bấm vào đâu. Các nghiên cứu về tâm lý học màu sắc cho thấy việc giới hạn số lượng màu nổi bật giúp giảm cognitive load và cải thiện usability, đặc biệt trong các interface số nơi người dùng cần đưa ra quyết định nhanh.
Một lý do khác khiến quy tắc này hiệu quả là liên quan đến độ tương phản (contrast) và khả năng dự đoán (predictability). Con người thường cảm thấy thoải mái hơn với những layout có tổ chức và nhất quán. Khi một màu chiếm phần lớn màn hình, thiết kế sẽ tạo cảm giác ổn định và dễ chịu. Khi một màu khác được dùng để phân tách cấu trúc, layout trở nên dễ đọc hơn. Khi chỉ dùng một lượng nhỏ màu nổi để highlight, interface sẽ trông rõ ràng và có tính tương tác. Pattern quen thuộc này giúp người dùng cảm thấy dễ hiểu hơn và tăng mức độ tin tưởng vào sản phẩm.
Nguyên tắc này cũng được sử dụng trong nhiều design system hiện đại, từ mobile app đến dashboard của các sản phẩm SaaS, vì nó giúp designer kiểm soát độ phức tạp mà vẫn giữ được tính nhận diện thương hiệu. Ngay cả khi người dùng không nhận ra quy tắc 60-30-10 đang được áp dụng, họ vẫn cảm nhận được kết quả, một UI gọn gàng, chuyên nghiệp và dễ sử dụng.
Cách áp dụng quy tắc 60-30-10 trong UI Design
Hiểu lý thuyết thì khá đơn giản, nhưng giá trị thực sự của quy tắc 60-30-10 nằm ở cách áp dụng vào interface thực tế. Trong UI/UX, quy tắc này không có nghĩa là phải đo chính xác từng pixel. Thay vào đó, nó là cách kiểm soát diện tích thị giác mà mỗi màu chiếm trong layout để tổng thể trông cân bằng và dễ quan sát. Designer sử dụng quy tắc này như một guideline để quyết định màu nào nên chiếm ưu thế, màu nào đóng vai trò hỗ trợ, và màu nào dùng để thu hút sự chú ý. Dưới đây là cách quy tắc này thường được áp dụng trong UI design và cách bạn có thể triển khai trong Figma.
1. 60% Dominant Color (Background & Main Surfaces)
Dominant color nên chiếm phần lớn interface. Màu này tạo cảm giác tổng thể cho thiết kế và cung cấp nền trung tính cho nội dung. Các vị trí thường dùng cho màu 60%:
Trong Figma, dominant color thường được định nghĩa dưới dạng Color Style cho background.
Ví dụ:
2. 30% Secondary Color (Structure & Separation)
Secondary color hỗ trợ dominant color và giúp chia layout thành các vùng rõ ràng. Màu này không nên cạnh tranh với màu chính, nhưng phải đủ khác để tạo contrast. Các vị trí thường dùng cho màu 30%:
Nhiều designer chọn surface color trong design system, brand color nhẹ hơn, neutral đậm hơn / nhạt hơn hoặc tinted background. Trong Figma, bạn có thể xây dựng màu sắc cho Secondary Color như sau:
3. 10% Accent Color (Action & Attention)
Accent color là phần nhỏ nhất nhưng quan trọng nhất. Màu này dùng để thu hút sự chú ý vào các hành động hoặc thông tin quan trọng. Các vị trí thường dùng cho màu 10%:
Trong Figma, nên tạo các Accent color styles:
Cách chọn màu cho quy tắc 60-30-10
Biết tỉ lệ thôi chưa đủ. Khó nhất là chọn màu sao cho phối hợp tốt với nhau nhưng vẫn đúng quy tắc 60-30-10. Một bảng màu tốt phải tạo cảm giác cân bằng, dễ đọc và phù hợp với brand. Nếu chọn màu sai, dù đúng tỉ lệ thì interface vẫn có thể trông thiếu chuyên nghiệp. Thông thường designer sẽ xây dựng color system trước, sau đó gán từng màu vào vai trò 60%, 30%, hoặc 10%.
1. Bắt đầu từ Brand Color
Trong nhiều project UI, brand color là điểm xuất phát để các designers có thể lựa chọn được màu match với thương hiệu. Tuy nhiên, brand color không nhất thiết phải chiếm 60%. Trong nhiều interface hiện đại:
Brand color → Accent (10%)
Neutral color → Dominant (60%)
Soft variation → Secondary (30%)
Cách này giúp interface sạch sẽ nhưng vẫn giữ nhận diện thương hiệu. Ví dụ:
- White background → 60%
- Light gray cards → 30%
- Blue brand button → 10%
Đây là lý do nhiều website dùng layout trung tính với accent color nổi cho action để thu hút hơn, như Apple là một ví dụ cụ thể.
2. Dùng màu trung tính cho vùng Dominant
Các vùng lớn nên dùng màu trung tính, vì màu mạnh trên diện tích lớn dễ gây mỏi mắt. Dominant color phổ biến:
- White
- Light gray
- Dark gray
- Soft beige
- Brand tint rất nhẹ
Background trung tính giúp text dễ đọc hơn và làm accent color nổi bật hơn.
Nhiều design system hiện đại khuyến nghị dùng neutral surface cho phần lớn layout để cải thiện readability và accessibility. Contrast cao giữa text và background là yếu tố quan trọng cho usability, đặc biệt với interface nhiều nội dung hoặc sử dụng lâu.
3. Choose a Secondary Color That Supports, Not Competes
Màu 30% nên giúp tạo cấu trúc, không nên gây phân tâm. Lựa chọn tốt:
- phiên bản đậm / nhạt của dominant
- brand tint nhẹ
- màu complementary dịu
- surface color từ design system
Lựa chọn không tốt:
- quá sáng
- quá bão hòa
- quá gần accent color
- quá giống background
Secondary color nên giúp tách nội dung mà không làm mất sự tập trung vào action.
4. Dùng Accent Color một cách có kiểm soát
Màu 10% là màu mạnh nhất trong interface. Vì xuất hiện ít nên não sẽ chú ý nhanh hơn. Accent color thường dùng cho:
- Primary buttons
- Links
- Active states
- Notifications
- Important icons
- Selected items
Theo nghiên cứu usability của Nielsen Norman Group, việc nhấn mạnh thị giác rõ ràng giúp người dùng biết nên bấm vào đâu và làm gì tiếp theo, từ đó tăng khả năng hoàn thành task và giảm nhầm lẫn. Accent color tốt thường:
- có contrast mạnh với background
- phù hợp với brand
- dùng nhất quán
- chỉ xuất hiện khi cần
Nếu dùng accent ở mọi nơi, nó sẽ không còn là accent nữa.
5. Dùng công cụ màu để tạo palette tốt hơn
Designer hiếm khi chọn màu ngẫu nhiên. Họ thường dùng các công cụ để tạo palette cân bằng.
Các cách phổ biến bao gồm:
- Monochrome palette
- Complementary colors
- Analogous colors
- Neutral + brand + accent
- Light / dark / highlight
Công cụ phổ biến:
- Adobe Color
- Coolors
- Material color system
- Tailwind color scale
Các công cụ này giúp tạo bảng màu hài hòa trước khi áp dụng tỉ lệ 60-30-10.
Những lỗi thường gặp khi áp dụng quy tắc 60-30-10
Quy tắc 60-30-10 khá đơn giản, nhưng nhiều thiết kế vẫn trông mất cân bằng dù designer cố gắng làm theo. Nguyên nhân thường là do hiểu sai hoặc áp dụng quá máy móc. Mục tiêu của quy tắc không phải là đo màu chính xác tuyệt đối, mà là tạo visual hierarchy rõ ràng và sự hài hòa thị giác. Dưới đây là những lỗi phổ biến nhất khi áp dụng quy tắc 60-30-10 trong UI/UX.
Mistake 1: Dùng quá nhiều accent color
Một trong những lỗi lớn nhất trong UI là dùng nhiều màu highlight cùng lúc.
Ví dụ:
- Button xanh dương
- Button xanh lá
- Link màu cam
- Notification đỏ
- Icon tím
Khi có quá nhiều màu cạnh tranh sự chú ý, người dùng không biết nên nhìn vào đâu trước. Accent color cần được giới hạn vì mục đích của nó là hướng sự chú ý. Nếu cái gì cũng nổi bật, thì không còn gì thật sự quan trọng. Designer nên
- Tốt nhất nên dùng một accent color chính
- Các màu khác chỉ dùng cho status (success, warning, error)
- Giữ màu cho các Nút kêu gọi hành động CTA nhất quán, tránh chọn nhiều màu
Mistake 2: Dùng accent color quá nhiều
Nhiều designer chọn accent color rất mạnh nhưng lại dùng ở khắp nơi:
- background
- cards
- buttons
- text
- icons
Điều này phá vỡ quy tắc 10%. Accent color phải hiếm thì mới có tác dụng. Sức mạnh của nó đến từ sự tương phản. Visual emphasis chỉ hiệu quả khi các yếu tố quan trọng thật sự nổi bật so với phần còn lại. Nếu màu highlight xuất hiện quá nhiều, người dùng sẽ mất thời gian hơn để hiểu layout.
Tốt nhật bạn nên:
- Accent color → chỉ dùng cho action
- Dominant color → background
- Secondary color → structure
Mistake 3: Không có dominant color rõ ràng
Một số interface dùng nhiều màu có độ mạnh giống nhau:
- background có màu
- card có màu
- section có màu
- button có màu
Kết quả là UI bị rối và khó quan sát. Dominant color nên chiếm phần lớn màn hình để tạo cảm giác ổn định. Nếu không có dominant color:
- layout trông lộn xộn
- hierarchy yếu
- text khó đọc
Designer nên:
- Chọn một màu background chính
- Giữ các vùng lớn ở trạng thái nhẹ nhàng
- Tránh dùng màu mạnh cho toàn màn hình
Mistake 4: Secondary color cạnh tranh với accent color
Màu 30% nên hỗ trợ layout, không nên tranh sự chú ý.
Ví dụ sai:
- background xanh sáng
- card xanh lá sáng
- button đỏ
Khi đó mọi thứ đều mạnh như nhau.
Secondary color tốt thường:
- dịu hơn
- ít bão hòa hơn
- neutral đậm / nhạt
- tint nhẹ của brand color
Accent color luôn phải là màu dễ thấy nhất.
Mistake 5: Bỏ qua accessibility và contrast
Ngay cả khi đúng tỉ lệ, UI vẫn có thể khó dùng nếu contrast kém.
Các lỗi thường gặp:
- chữ sáng trên nền sáng
- button thiếu contrast
- xám trên xám
- pastel trên pastel
Các guideline về accessibility như WCAG khuyến nghị phải có contrast đủ mạnh giữa text và background để đảm bảo mọi người đều đọc được, kể cả người có vấn đề về thị lực.
Tốt nhất bạn nên:
- Kiểm tra contrast ratio
- Test light mode và dark mode
- Tránh màu quá nhạt
- Button phải nhìn rõ
Cân bằng màu sắc không chỉ là đẹp, mà còn là usability.
Mistake 6: Áp dụng quy tắc quá cứng nhắc
60-30-10 là guideline, không phải công thức toán nên đôi khi designer không cần dùng đúng tuyệt đối theo tỷ lệ 60-30-10. Đối với UI hiện đại, designer có thể cân nhắc các tỷ lệ sau:
- 70-20-10
- 65-25-10
- 80-15-5
Và đặc biệt điều quan trọng là sự cân bằng giữa các yếu tố:
- một màu chiếm ưu thế
- một màu hỗ trợ
- một màu nhấn
Nếu hierarchy rõ ràng, thì quy tắc đang hoạt động rất tốt.
Áp dụng quy tắc 60-30-10 trong project thực tế với Align.vn
Hiểu quy tắc 60-30-10 là một chuyện, nhưng áp dụng đúng trong project thật cần kinh nghiệm, đặc biệt khi làm với branding, responsive layout và design system lớn. Trong workflow UI/UX chuyên nghiệp, cân bằng màu sắc không chỉ quyết định trên một màn hình, mà phải giữ nhất quán trên toàn bộ sản phẩm, từ landing page đến dashboard và mobile view.
Tại Align, chúng tôi sử dụng nguyên tắc 60-30-10 như một phần của cách tiếp cận design system. Thay vì chọn màu ngẫu nhiên, chúng tôi xây dựng color token và style có cấu trúc trong các công cụ như Figma, để mọi page đều giữ cùng một visual hierarchy. Nếu bạn muốn xem cách chúng tôi áp dụng những nguyên tắc này trong project thực tế, bạn có thể tham khảo dịch vụ UI/UX và web design tại Align.vn.
Kết luận: Một quy tắc đơn giản nhưng giúp UI trông chuyên nghiệp hơn
Quy tắc 60-30-10 nghe có vẻ đơn giản, nhưng vẫn là một trong những cách hiệu quả nhất để tạo UI cân bằng và chuyên nghiệp. Khi kiểm soát tần suất xuất hiện của từng màu, designer có thể hướng sự chú ý, cải thiện khả năng đọc, và làm interface trở nên gọn gàng, rõ ràng hơn. Thay vì đoán nên dùng màu gì, quy tắc đưa ra điểm bắt đầu rõ ràng: một dominant color để tạo sự ổn định, một secondary color để tạo cấu trúc, và một accent color để dẫn dắt hành động.
Trong UI/UX hiện đại, quy tắc này không nằm ở con số chính xác, mà nằm ở visual hierarchy. Dù bạn thiết kế landing page, SaaS dashboard hay mobile app, người dùng nên hiểu ngay đâu là background, đâu là nội dung, và đâu là phần có thể tương tác. Khi cân bằng màu sắc đúng, interface sẽ dễ dùng ngay cả trước khi người dùng đọc nội dung.
Ngày nay, nhiều design system, component library và product framework vẫn áp dụng nguyên tắc này, dù không gọi tên là 60-30-10. Surface trung tính, layer hỗ trợ và accent color giới hạn xuất hiện trong hầu hết sản phẩm hiện đại vì chúng giúp giảm nhiễu thị giác và làm interaction rõ ràng hơn. Các nghiên cứu về usability và visual hierarchy tiếp tục cho thấy cấu trúc nhất quán giúp người dùng hoàn thành tác vụ nhanh hơn và cảm thấy tự tin hơn khi sử dụng sản phẩm.
Với designer, cách tốt nhất là xem quy tắc này như một guideline, không phải giới hạn. Bạn có thể điều chỉnh tỉ lệ, đơn giản hóa palette hoặc thay đổi theo brand, miễn là hierarchy vẫn rõ ràng. Khi một màu chiếm ưu thế, một màu hỗ trợ và một màu nhấn, thiết kế gần như luôn trông gọn gàng và chuyên nghiệp hơn.
