Một nhóm khởi nghiệp mang tới bảng màu thương hiệu gồm năm màu rất đẹp, trình bày trên một slide. Sau ba tháng làm sản phẩm, giao diện của họ có 47 mã màu khác nhau — mười một sắc xám, chín sắc xanh, và không ai nhớ màu nào dùng cho việc gì.
Chuyện này xảy ra vì bảng màu thương hiệu và hệ màu giao diện là hai thứ khác nhau. Bảng màu thương hiệu trả lời câu “chúng ta trông như thế nào”. Hệ màu giao diện trả lời câu “nền này dùng màu gì, viền ô nhập dùng màu gì, thông báo lỗi dùng màu gì” — hàng trăm lần mỗi ngày.
Bốn nhóm màu của một hệ giao diện
- Dải trung tính: các sắc xám từ gần trắng tới gần đen. Chiếm phần lớn diện tích: nền, chữ, viền, đường ngăn.
- Màu chính (primary): màu thương hiệu dùng cho hành động chính, liên kết, trạng thái được chọn.
- Màu phụ hoặc màu nhấn (accent): tuỳ chọn, dùng tiết kiệm cho điểm nhấn thứ hai.
- Màu trạng thái (semantic): thành công, cảnh báo, lỗi, thông tin.
Mỗi nhóm cần nhiều bậc, không phải một màu. Một nút màu xanh cần bậc đậm hơn khi di chuột, bậc nhạt hơn cho nền thông báo, bậc rất nhạt cho nền dòng được chọn trong bảng.
Dựng dải trung tính trước
Người mới hay bỏ qua bước này vì xám “không phải màu thương hiệu”. Nhưng 70–90% điểm ảnh của một giao diện là trung tính. Dải trung tính tốt làm cả giao diện trông chỉn chu; dải trung tính tệ làm màu thương hiệu đẹp đến mấy cũng thành rẻ tiền.
Một dải thông dụng có khoảng 10 bậc, đặt tên theo số (50, 100, 200 … 900). Vài gợi ý:
- Xám hơi ngả màu. Xám tuyệt đối (R=G=B) thường trông lạnh và chết. Pha một chút sắc độ của màu chính (ví dụ xám hơi ngả lam nếu màu chính là lam) làm cả hệ hoà hợp hơn.
- Chữ không đen tuyệt đối. Chữ thân bài ở bậc 800–900 thay vì đen 100% giảm độ gắt trên màn hình sáng, mà vẫn đủ tương phản.
- Bậc đều theo cảm nhận. Dựng trong không gian màu cảm nhận (như OKLCH) để các bậc cách đều trong mắt người, không dồn cục ở vùng sáng.
Tỉ lệ 60–30–10: điểm xuất phát, không phải luật
Quy tắc 60–30–10 bắt nguồn từ trang trí nội thất: 60% màu chủ đạo, 30% màu phụ, 10% màu nhấn. Trong giao diện, tỉ lệ thực tế thường cực đoan hơn: khoảng 85–90% trung tính, 8–12% màu chính, 1–3% màu nhấn và trạng thái.
Điều quan trọng không phải con số chính xác mà là màu chính phải hiếm. Nếu màu chính phủ khắp thanh điều hướng, tiêu đề, biểu tượng và nền khối, nó không còn chỉ ra “đây là chỗ để bấm” được nữa.
Màu trạng thái: quy ước chung và cái bẫy của nó
| Trạng thái | Màu quy ước | Dùng cho | Bẫy |
|---|---|---|---|
| Thành công | Lục | Lưu xong, thanh toán thành công | Trùng với màu chính lục của thương hiệu |
| Cảnh báo | Vàng, cam | Sắp hết hạn, thiếu thông tin | Chữ trắng trên vàng gần như không đọc được |
| Lỗi | Đỏ | Nhập sai, thất bại | Trùng với màu chính đỏ; nút “Xoá” lẫn với nút thường |
| Thông tin | Lam | Mẹo, ghi chú | Trùng với màu liên kết |
Khi màu chính của thương hiệu trùng với một màu trạng thái (thương hiệu màu đỏ là trường hợp khó nhất), cần tách bằng sắc độ hoặc độ sáng: ví dụ thương hiệu dùng đỏ trầm ngả đỏ tía, còn lỗi dùng đỏ tươi ngả cam, và thông báo lỗi luôn đi kèm biểu tượng và chữ.
Ở Việt Nam còn một lưu ý văn hoá: màu đỏ gắn với may mắn và lễ Tết, nhiều người không cảm thấy đỏ là “nguy hiểm” mạnh như trong một số nền văn hoá khác. Đừng để màu đỏ gánh một mình thông điệp lỗi.
Đặt tên màu theo vai trò, không theo giá trị
Tên “xanh-dương-2” cho biết màu trông thế nào nhưng không cho biết dùng vào đâu. Hệ tốt có hai tầng tên:
- Tầng gốc: blue-500, gray-100 — định nghĩa màu.
- Tầng vai trò: nen-trang, chu-chinh, vien-o-nhap, nut-chinh-nen, loi-chu — trỏ vào tầng gốc.
Lợi ích lớn nhất: khi làm chế độ tối, bạn chỉ cần đổi tầng vai trò trỏ vào bậc khác (nền-trang từ gray-50 sang gray-900), không phải sửa từng màn hình.
Chế độ tối không phải đảo màu
- Nền tối nên là xám rất đậm, không phải đen tuyệt đối — đen tuyệt đối kèm chữ trắng tuyệt đối gây chói và nhoè viền chữ với nhiều người.
- Màu chính thường phải giảm bão hoà và tăng sáng một chút; cùng một màu xanh rực trên nền trắng sẽ rung trên nền tối.
- Độ sâu (lớp trên, lớp dưới) thể hiện bằng nền sáng dần lên thay vì bóng đổ, vì bóng đổ khó thấy trên nền tối.
Checklist dựng hệ màu trong một buổi
- Chọn màu chính từ nhận diện. Kiểm nó trên nền trắng với chữ trắng bên trong (cho nút) — đủ tương phản chưa?
- Dựng dải trung tính 10 bậc, pha nhẹ sắc độ của màu chính.
- Dựng 7–10 bậc cho màu chính.
- Chọn bốn màu trạng thái, mỗi màu ít nhất ba bậc (nền nhạt, viền, chữ đậm).
- Đặt tên tầng vai trò cho khoảng 15–25 vai trò thường dùng.
- Dựng một màn hình mẫu có đủ: nền, thẻ, chữ ba cấp, nút chính, nút phụ, ô nhập, thông báo bốn trạng thái, bảng. Nếu màn này ổn, hệ đã dùng được.
- Ghi luật: “màu chính chỉ dùng cho hành động và trạng thái được chọn”, “không dùng màu trạng thái để trang trí”.
Nếu dự án đang có hàng chục mã màu trôi nổi, bước đầu tiên không phải thiết kế lại mà là kiểm kê: liệt kê mọi mã màu đang dùng, gom những màu gần nhau về một bậc trong hệ mới. Việc này thường gom 40–50 mã xuống còn khoảng 25–30 bậc có tên và có luật.
Câu hỏi thường gặp
Bảng màu giao diện nên có bao nhiêu màu?
Không tính theo số màu mà theo nhóm: một dải trung tính khoảng 10 bậc, màu chính 7–10 bậc, bốn màu trạng thái mỗi màu vài bậc. Tổng thường 25–40 bậc nhưng chỉ một hai sắc độ chủ đạo.
Quy tắc 60-30-10 có dùng cho website được không?
Dùng làm điểm xuất phát được, nhưng giao diện thực tế thường dùng trung tính nhiều hơn, khoảng 85–90%. Điều cốt lõi là màu chính phải hiếm để giữ vai trò chỉ dẫn hành động.
Có nên dùng đen tuyệt đối cho chữ không?
Trên màn hình, chữ xám rất đậm thường dễ chịu hơn đen tuyệt đối mà vẫn đủ tương phản. Trong in ấn thì chữ thân bài nên dùng đen thuần K100.
Thương hiệu màu đỏ thì làm màu báo lỗi thế nào?
Tách bằng sắc độ và độ sáng, ví dụ đỏ trầm cho thương hiệu và đỏ tươi ngả cam cho lỗi. Luôn kèm biểu tượng và chữ để lỗi không chỉ dựa vào màu.
Làm chế độ tối có phải đảo ngược màu không?
Không. Nền nên là xám rất đậm, màu chính cần giảm bão hoà và tăng sáng, độ sâu thể hiện bằng nền sáng dần thay vì bóng đổ.
