Bảng màu thương hiệu cần bao nhiêu màu?

Chốt nhanh

Một bảng màu dùng được thường gồm một màu chính, một tới hai màu phụ, một dải trung tính, và một màu nhấn dùng rất tiết chế. Khung 60-30-10 là điểm tựa thực tế: 60 phần nền và trung tính, 30 phần màu phụ mang bản sắc, 10 phần màu nhấn cho điểm kêu gọi hành động. Nhiều màu ngang hàng không làm thương hiệu phong phú hơn, chỉ làm không màu nào trở thành dấu hiệu nhận biết.

Câu hỏi về số lượng màu nghe đơn giản nhưng ẩn sau đó là câu hỏi lớn hơn: đội ngũ của Anh / Chị có thể tự phối màu đúng mà không cần nhà thiết kế ngồi bên cạnh không? Một bảng màu tốt không phải bảng màu đẹp khi đứng một mình, mà là bảng màu mà người không chuyên vẫn dùng ra kết quả đúng, nhất quán.

Bốn tầng màu trong một bảng hoàn chỉnh

Sinh Vũ phân bảng màu thương hiệu thành ba tầng rõ vai, cộng thêm một dải chức năng khi cần:

Màu chính: thường là một màu duy nhất, xuất hiện ở logo và các điểm nhận diện cốt lõi. Đây là màu người nhìn nhớ khi nghĩ đến thương hiệu.
Màu phụ: một tới hai màu, hỗ trợ màu chính trong ứng dụng cụ thể như nền mục, thẻ thông tin, viền phân cách. Mỗi màu phụ phải có chỗ rõ ràng để đứng, không thêm vì bảng trông còn trống.
Dải trung tính: đen, trắng, một đến ba mức xám. Đây là phần gánh phần lớn diện tích trong ấn phẩm và giao diện. Thiếu dải này, đội sẽ không biết dùng màu gì cho chữ thân, nền trang dài, hay đường kẻ.
Màu nhấn: một màu dùng rất tiết chế, dành riêng cho nút kêu gọi hành động và điểm cần hút mắt ngay lập tức. Nếu màu nhấn xuất hiện tràn lan, nó mất tác dụng.

Khung 60-30-10 để phân bổ tỷ lệ

Khung 60-30-10 là một điểm tựa thực hành phổ biến trong thiết kế giao diện số (UI design), giúp giữ cân bằng thị giác và tránh hỗn loạn màu sắc:

60 phần: nền chủ đạo và dải trung tính. Đây là phần không gian thở của thiết kế.
30 phần: màu phụ mang bản sắc. Đủ để người nhìn cảm nhận tính cách thương hiệu.
10 phần: màu nhấn cho nút, đường dẫn, điểm kêu gọi hành động. Ít thôi, nhưng chính vì ít nên mới nổi.

Một phần tử màu không được lấn át phần còn lại. Khi mọi thứ đều to và sặc sỡ như nhau, mắt người xem không biết nhìn vào đâu trước.

Bảng gọn: một màu chính, một màu phụ, dải trung tính. Phù hợp thương hiệu mới, ít điểm chạm, ưu tiên dễ nhớ và dễ nhất quán. Đội nhỏ tự vận hành được ngay.

Bảng mở rộng: thêm màu phụ thứ hai hoặc dải màu chức năng. Phù hợp khi có sản phẩm số cần trạng thái giao diện, hoặc nhiều dòng sản phẩm cần phân biệt bằng màu. Cần hướng dẫn sử dụng rõ hơn để đội không dùng nhầm.

Lỗi thường gặp nhất

Quá nhiều màu ngang hàng: khi sáu hay bảy màu đứng cùng cấp trong bảng, không màu nào trở thành dấu hiệu nhận biết. Thương hiệu trông đa dạng trên paper, nhưng người ngoài không nhớ màu nào của thương hiệu đó.
Thiếu dải trung tính: lỗi này thường lộ ra muộn, khi đội bắt đầu làm tài liệu dài, slide thuyết trình, hay email marketing. Không có màu chữ thân và nền an toàn để dùng, họ tự ứng biến và kết quả không nhất quán.
Màu nhấn dùng ở khắp nơi: màu nhấn chỉ có hiệu lực khi nó hiếm. Khi nó xuất hiện ở tiêu đề, viền, nền, và cả nút, nó không còn nhấn cái gì nữa.
Không kiểm tương phản: chữ màu sáng trên nền màu sáng tương tự, hay chữ tối trên nền tối, đọc rất khó trên màn hình chất lượng thấp hoặc ngoài nắng. Chuẩn tiếp cận (accessibility) yêu cầu tỷ lệ tương phản đủ rõ giữa chữ và nền.

Khi nào cần thêm màu chức năng

Màu chức năng là các màu mang ý nghĩa hành động: xanh lá cho thành công, vàng hoặc cam cho cảnh báo, đỏ cho lỗi. Những màu này cần thiết khi sản phẩm có giao diện số tương tác như ứng dụng di động hay trang web phức tạp. Với thương hiệu chủ yếu hoạt động qua ấn phẩm in, bao bì và mạng xã hội, dải trung tính và màu nhấn đã đủ. Thêm màu chức năng vào bảng của thương hiệu thuần truyền thống thường gây thừa và nhầm lẫn trong đội.

Mục tiêu của bảng màu không phải là làm hài lòng mắt nhà thiết kế. Mục tiêu là để đội của khách tự dùng đúng, không cần ai ngồi bên nhắc.
Kinh nghiệm thực hành, Sinh Vũ Studio

Góc nhìn của Sinh Vũ

Khi Sinh Vũ xây bảng màu cho khách, tiêu chí đầu tiên không phải là bảng đẹp nhất, mà là bảng đội của khách tự vận hành được sau khi bàn giao. Điều đó có nghĩa là số màu phải gọn đủ để không ai phải đoán, và mỗi màu phải có vai trò đủ rõ để không ai dùng nhầm.

Thực tế Sinh Vũ thấy nhiều nhất: khách đến với một bảng màu đã có từ trước, năm đến bảy màu, nhưng đội không biết màu nào dùng cho đâu. Kết quả là mỗi người tự chọn theo cảm giác, và sau một thời gian ấn phẩm trông như của nhiều thương hiệu khác nhau. Bài toán không phải thêm màu, mà là xác định rõ vai của từng màu đang có, bỏ những màu không có vai, và đặt tên cho từng nhóm để đội dùng không cần hỏi.

Nguồn tham khảo

LogRocket, Master UI design: the 60-30-10 rule. Kinh nghiệm thực hành xây hệ nhận diện tại Sinh Vũ Studio.

Câu hỏi thường gặp

Màu chính và màu phụ khác nhau ở điểm nào?

Màu chính là màu xuất hiện thường xuyên nhất, gắn với tên và logo thương hiệu, người nhìn nhớ đến là nhớ màu này. Màu phụ hỗ trợ màu chính trong các ứng dụng cụ thể như nền mục, thẻ thông tin, đường phân cách. Nếu một màu không có vai trò rõ trong ứng dụng thực tế, đó là dấu hiệu nó chưa cần có mặt trong bảng.

Khi nào thì cần thêm màu chức năng như xanh lá, đỏ, vàng?

Màu chức năng (semantic color, tức màu mang ý nghĩa hành động như thành công, cảnh báo, lỗi) chỉ cần thiết khi thương hiệu có sản phẩm số như app hoặc website với giao diện người dùng. Với thương hiệu chủ yếu dùng ấn phẩm in, mạng xã hội và bao bì, dải trung tính và màu nhấn đã đủ. Thêm màu chức năng vào bảng của thương hiệu truyền thống thường gây thừa và lẫn lộn.

Tôi có thể dùng ba màu phụ không?

Được, nhưng mỗi màu phụ phải có vai trò riêng biệt trong ứng dụng thực tế, không phải thêm vì thấy bảng màu còn trống. Khi không thể giải thích rõ màu phụ thứ ba xuất hiện ở đâu và làm việc gì, đó là tín hiệu nên bỏ nó ra ngoài.