Quy tắc 60-30-10 khi phối màu
Có bảng màu rồi nhưng đặt vào giao diện lại thấy rối, hoặc nhạt nhẽo? Thường vấn đề không nằm ở màu mà ở tỉ lệ: màu nào chiếm bao nhiêu diện tích. Quy tắc 60-30-10 là một cách chia tỉ lệ đơn giản, xuất phát từ thiết kế nội thất và được dùng rộng rãi trong thiết kế giao diện, đồ hoạ.
Quy tắc 60-30-10 là gì?
- 60% — màu chủ đạo: màu phủ phần lớn diện tích, thường là màu trung tính hoặc rất nhạt (nền trang, nền thẻ).
- 30% — màu phụ: tạo cấu trúc và nhận diện (thanh đầu trang, cột bên, mảng nền lớn, tiêu đề), thường là màu chính của thương hiệu.
- 10% — màu nhấn: kéo ánh mắt tới điều quan trọng nhất (nút kêu gọi hành động, nhãn, biểu tượng trạng thái).
Con số là ước lượng theo diện tích nhìn thấy, không phải đo từng điểm ảnh. Đây là một kinh nghiệm thiết kế giúp bố cục cân bằng, không phải luật bắt buộc; nhiều giao diện đẹp có tỉ lệ 70-20-10 hay 80-15-5. Điều cốt lõi là có một màu thống trị, một màu hỗ trợ và một màu rất ít để nhấn.
Vì sao tỉ lệ này hiệu quả?
Mắt người cần một “nền” yên tĩnh để nghỉ, một lớp cấu trúc để định hướng, và một điểm khác biệt để biết nhìn vào đâu. Khi ba màu chiếm diện tích ngang nhau, không màu nào nổi bật — giao diện trông rối. Khi màu nhấn xuất hiện khắp nơi, nó mất khả năng gây chú ý: nút “Mua ngay” màu cam chỉ nổi bật nếu gần như không có gì khác màu cam.
Áp dụng cho giao diện web
Lấy bảng màu ở bài xây dựng bảng màu nhận diện làm ví dụ:
| Vai trò | Màu | Dùng cho |
|---|---|---|
| 60% chủ đạo | Trắng #FFFFFF, nền nhạt #F7F8FA |
Nền trang, nền thẻ, vùng nội dung |
| 30% phụ | Chàm #2F48D1 và thang sắc độ của nó |
Thanh đầu trang, chân trang, tiêu đề, liên kết, mảng nền nổi bật |
| 10% nhấn | Hổ phách #F59E0B |
Nút hành động chính, nhãn “Mới”, biểu tượng cảnh báo |
Chữ không tính vào tỉ lệ nhưng phải đọc được trên từng màu nền: chữ #1B1E25 trên nền #F7F8FA đạt 15,69:1; chữ trắng trên chàm đạt 7,07:1; còn trên nút hổ phách phải dùng chữ tối (7,76:1) vì chữ trắng chỉ đạt 2,14:1. Kiểm tra từng cặp bằng công cụ tương phản.
Áp dụng cho ấn phẩm và không gian
Quy tắc bắt nguồn từ nội thất: tường và sàn là 60%, đồ nội thất lớn như sofa, rèm là 30%, còn gối, tranh, bình hoa là 10%. Cách nghĩ này dùng được cho poster, bao bì, slide thuyết trình: chọn màu nền chiếm phần lớn, một màu cho khối chữ và hình chính, một màu thật ít cho thông tin cần nổi bật nhất (giá, ngày, lời kêu gọi).
Các bước áp dụng nhanh
- Chọn ba màu bằng công cụ phối màu — ví dụ kiểu “5 màu cho giao diện” đã tách sẵn màu nền, màu chính và màu nhấn.
- Gán vai trò: màu nhạt nhất hoặc trung tính làm 60%, màu thương hiệu làm 30%, màu tương phản mạnh nhất làm 10%.
- Phác bố cục chỉ bằng các khối màu, chưa cần chữ, rồi nhìn từ xa hoặc nheo mắt: nếu điểm nhấn không phải thứ bạn muốn người xem thấy đầu tiên, giảm diện tích màu nhấn.
- Kiểm tra độ tương phản chữ trên cả ba màu nền.
Những lỗi thường gặp
- Dùng màu nhấn cho quá nhiều thứ: mọi nút, mọi tiêu đề đều cam — không còn gì nổi bật.
- Chọn màu rực làm 60%: nền đỏ hay xanh lá tươi phủ cả trang gây mỏi mắt; màu chủ đạo nên dịu.
- Quên chế độ tối: khi đổi sang nền tối, tỉ lệ vẫn giữ nhưng vai trò đổi: nền tối là 60%, và màu nhấn thường cần sáng hơn để đủ tương phản.
Xem thêm các hướng dẫn về màu sắc khác.