Cách xây dựng bảng màu nhận diện thương hiệu
Bảng màu nhận diện không chỉ là “chọn một màu đẹp”. Một bộ màu dùng được lâu dài cần có màu chính dễ nhận ra, vài màu phụ để trình bày, bộ màu trung tính cho chữ và nền — và phải đọc được, in được. Bài này đi qua từng bước, kèm ví dụ với số liệu thật từ các công cụ trên bangmamau.com.
Một bảng màu nhận diện gồm những gì?
- Màu chính (1 màu): màu người ta nhớ tới khi nghĩ về thương hiệu, xuất hiện ở logo, nút bấm chính, biển hiệu.
- Màu phụ (1–2 màu): hỗ trợ màu chính trong đồ hoạ, biểu đồ, các mảng nền.
- Màu nhấn (1 màu): dùng rất ít để gây chú ý — nhãn khuyến mãi, nút “Mua ngay”.
- Màu trung tính (4–6 sắc): từ trắng, xám nhạt tới gần đen, cho chữ, nền, đường kẻ. Đây là những màu được dùng nhiều nhất trên thực tế.
- Thang sắc độ của màu chính: các bản nhạt hơn và đậm hơn để làm nền nhẹ, trạng thái di chuột, viền.
Bước 1: chọn màu chính theo tính cách và đối thủ
Bắt đầu từ vài tính từ mô tả thương hiệu (tin cậy, trẻ trung, cao cấp, gần gũi…) rồi chọn nhóm màu gợi cảm giác gần nhất. Liên tưởng màu phụ thuộc văn hoá và ngữ cảnh nên hãy xem đó là gợi ý, không phải quy luật: xanh dương thường gợi sự tin cậy, được nhiều ngân hàng, công nghệ dùng; đỏ và cam gợi năng lượng, hay gặp ở ẩm thực, bán lẻ; xanh lá gợi tự nhiên, sức khoẻ.
Quan trọng không kém là khác biệt với đối thủ. Xem mã màu của các thương hiệu cùng ngành ở trang mã màu thương hiệu (chúng tôi chỉ ghi mã khi thương hiệu tự công bố): nếu cả ngành đã dùng xanh dương, một màu khác có thể giúp bạn nổi bật hơn.
Chọn và tinh chỉnh màu bằng color picker. Ví dụ trong bài này dùng màu chàm #2F48D1.
Bước 2: thêm màu phụ và màu nhấn
Dùng công cụ phối màu để tìm màu hợp với màu chính theo quy tắc trên bánh xe màu. Với màu chàm #2F48D1, màu bổ túc (xoay 180°) là vàng #D1B92E, còn quy tắc bổ túc xẻ gợi ý cam #D1672E. Bạn không cần lấy nguyên màu gợi ý: có thể giữ sắc độ và chỉnh cho sáng, rực hơn — ví dụ chọn hổ phách #F59E0B làm màu nhấn.
Giữ số màu ít. Ba màu có sắc độ rõ (chính, phụ, nhấn) cộng bộ trung tính thường đã đủ cho hầu hết thương hiệu nhỏ. Cách phân bổ các màu này trên giao diện có trong bài quy tắc 60-30-10.
Bước 3: dựng bộ màu trung tính và thang sắc độ
Chọn một thang xám dùng cho toàn bộ chữ và nền. Xám hơi ngả về sắc của màu chính (xám lạnh cho màu chàm, xám ấm cho màu nâu, cam) sẽ trông hài hoà hơn xám thuần. Với bảng ví dụ: chữ chính #1B1E25, chữ phụ #5B6272, nền nhạt #F7F8FA, trắng #FFFFFF.
Tiếp theo, tạo thang sắc độ cho màu chính bằng công cụ tạo thang 50–950. Với #2F48D1, màu gốc rơi vào bậc 700; bậc 50 là #F3F7FF (nền rất nhạt), bậc 100 là #E5EDFF, bậc 900 là #162481 (chữ đậm trên nền nhạt).
Bước 4: kiểm tra độ tương phản trước khi chốt
Một màu đẹp mà đặt chữ lên không đọc được thì không dùng được. Kiểm tra từng cặp chữ – nền bằng công cụ tương phản; chữ thường cần tối thiểu 4,5:1, chữ lớn 3:1.
| Cặp màu | Tỉ lệ | Dùng được cho |
|---|---|---|
Chữ trắng trên chàm #2F48D1 |
7,07:1 | Mọi cỡ chữ (đạt AAA) |
Chữ #1B1E25 trên nền #F7F8FA |
15,69:1 | Mọi cỡ chữ |
Chữ phụ #5B6272 trên trắng |
6,11:1 | Mọi cỡ chữ (đạt AA) |
Chữ trắng trên hổ phách #F59E0B |
2,14:1 | Không đạt — kể cả chữ lớn |
Chữ #1B1E25 trên hổ phách #F59E0B |
7,76:1 | Mọi cỡ chữ |
Bài học từ bảng trên: màu nhấn sáng như hổ phách, vàng, xanh lá tươi nên đi với chữ tối, không phải chữ trắng. Hãy ghi rõ điều này vào hướng dẫn sử dụng màu để cả nhóm làm theo.
Bước 5: chốt mã cho web, in ấn và ghi thành quy định
- Web, ứng dụng: lưu HEX và tạo biến CSS hoặc token (công cụ phối màu và thang Tailwind đều xuất sẵn biến CSS,
@theme). - In ấn: đừng tự quy đổi CMYK từ HEX rồi gửi nhà in; hãy nhờ nhà in hoặc dùng phần mềm thiết kế với hồ sơ màu của họ, và cân nhắc mã Pantone cho màu chính. Xem thêm vì sao màu in khác màn hình.
- Tài liệu quy định: một trang ghi mã của từng màu (HEX, RGB, CMYK/Pantone), màu nào dùng cho việc gì, cặp chữ – nền nào được phép, và ví dụ đúng – sai.
Những lỗi thường gặp
- Quá nhiều màu chính: năm, sáu màu rực ngang nhau khiến không màu nào được nhớ.
- Chọn màu trên nền trắng rồi mới thử chữ: dẫn tới các nút bấm chữ trắng trên nền vàng không đọc được.
- Chỉ duyệt trên màn hình: màu neon, xanh lá rực đẹp trên điện thoại nhưng in ra xỉn hẳn.
- Không có thang sắc độ: mỗi người tự pha một bản “xanh nhạt” khác nhau, lâu dần giao diện mất nhất quán.
Xem thêm các hướng dẫn về màu sắc khác.