Chọn màu cho website hay thương hiệu là một trong những quyết định khiến nhiều người mất cả tuần mà vẫn chưa chốt được. Lý do thường là họ chọn theo cảm giác “đẹp hay không”, trong khi một bảng màu tốt phải trả lời được ba câu hỏi: có đúng với thương hiệu không, có phân biệt được với đối thủ không, và có đọc được trên mọi màn hình không.

Không có bảng màu “hoàn hảo” cho mọi người. Nhưng có một quy trình để tìm ra bảng màu đúng với bạn, và bài này đi qua từng bước, kèm ví dụ, số đo thật và mẫu bạn dùng được ngay.

Bảng màu thương hiệu gồm những gì

Nhiều người nghĩ bảng màu là “một màu logo”. Thực tế một bảng màu dùng được cho website cần đủ 5 vai trò. Thiếu vai trò nào thì khi thiết kế bạn sẽ phải tự đoán màu ở chỗ đó, và đó là nguồn gốc của những trang web “lộn xộn không rõ vì sao”.

• Màu chủ đạo (primary): Điểm nhận diện số một. Thường chỉ một màu.
• Màu phụ (secondary): Một đến hai màu hỗ trợ, tạo chiều sâu cho giao diện.
• Màu nhấn (accent): Dùng cực ít, chỉ cho chỗ cần như nút kêu gọi hành động.
• Màu trung tính: Nền, chữ, viền, đường kẻ. Chiếm phần lớn diện tích, thường bị bỏ quên nhưng quyết định cảm giác “sạch” hay “rối”.
• Màu trạng thái: Xanh lá cho thành công, vàng cam cho cảnh báo, đỏ cho lỗi, xanh dương cho thông tin. Nên đặt trước, đừng để đến lúc làm form mới nghĩ ra.

Bước 1: Hiểu thương hiệu trước khi chạm vào màu

Màu phục vụ thương hiệu, không phải ngược lại. Trước khi mở bất kỳ công cụ nào, hãy trả lời bốn câu:

• Thương hiệu của bạn là như thế nào? Chọn đúng 3 từ tính cách, ví dụ “tin cậy, ấm áp, trẻ trung”. Nếu bạn chọn được 8 từ, tức là chưa chọn.
• Khách hàng là ai? Độ tuổi, ngành, nơi họ nhìn thấy bạn. Một trang cho người cao tuổi cần chữ to và tương phản cao hơn một trang cho sinh viên.
• Đối thủ đang dùng màu gì? Mở 5 đến 8 đối thủ, chụp trang chủ, đặt cạnh nhau. Nếu cả ngành đều xanh dương, một màu khác có thể giúp bạn nổi bật, còn nếu bạn chọn xanh dương thì cần đẹp hơn hẳn. Đây là quyết định chiến lược, không có đáp án cố định.
• Màu sẽ xuất hiện ở đâu? Website, logo, in danh thiếp, bao bì, mạng xã hội. Màu trên màn hình và trên giấy cho kết quả khác nhau, nên nếu có in ấn hãy tính từ đầu.

Bước 2: Chọn màu chủ đạo

Đây là bước người ta hay sa vào “tâm lý học màu sắc”. Hãy dùng nó như gợi ý, không phải luật. Liên tưởng màu thay đổi theo văn hóa, ngành và bối cảnh, và bằng chứng nghiên cứu cho thấy tác động của một màu riêng lẻ lên hành vi khá yếu. Điều quan trọng hơn là màu phải nhất quán và khác với đối thủ.

Dưới đây là những liên tưởng phổ biến ở nhiều thị trường, để bạn tham khảo:

• Xanh dương: tin cậy, ổn định, chuyên nghiệp. Rất phổ biến trong công nghệ, tài chính, y tế.
• Xanh lá: tự nhiên, sức khỏe, tăng trưởng, cũng gắn với tiền. Hợp thực phẩm sạch, môi trường, tài chính.
• Đỏ: năng lượng, khẩn cấp, ham muốn. Thường dùng cho ăn uống, khuyến mãi. Ở Việt Nam đỏ còn gắn với may mắn và lễ tết.
• Cam, vàng: vui vẻ, thân thiện, lạc quan. Dễ gây chú ý nên hợp làm màu nhấn.
• Hồng: trẻ trung, sáng tạo, cá tính, tùy sắc độ có thể mềm mại hoặc táo bạo.
• Tím: sáng tạo, cao cấp, huyền bí.
• Đen, trắng, xám: tối giản, sang trọng, hiện đại. Là nền tảng của gần như mọi bảng màu.
• Nâu, be: ấm áp, thủ công, gần gũi, hợp cà phê, nội thất, handmade.

Cách chọn thực tế: lấy 3 từ tính cách ở bước 1, chọn ra 2 đến 3 màu ứng viên, rồi loại dần bằng việc đặt cạnh đối thủ. Màu còn lại là màu chủ đạo của bạn.

Bước 3: Dựng cả bộ màu bằng hòa sắc

Có màu chủ đạo rồi, bạn không cần đoán các màu còn lại. Bánh xe màu cho bạn các quan hệ đã được kiểm chứng. Mẹo quan trọng: hãy nghĩ theo HSL gồm Hue (sắc độ, vị trí trên bánh xe, 0 đến 360 độ), Saturation (độ bão hòa) và Lightness (độ sáng). Muốn có màu mới, bạn xoay Hue, còn Saturation và Lightness giữ gần như cũ, màu sẽ hợp nhau.

Gợi ý chọn: Thương hiệu muốn an toàn và sang thì chọn đơn sắc hoặc tương đồng. Muốn nút bấm nổi bật thì chọn bổ sung hoặc chia bổ sung. Muốn vui, nhiều năng lượng thì thử bộ ba, nhưng giữ một màu chiếm ưu thế.

Đừng quên bộ màu trung tính

Màu trung tính không nhất thiết là xám thuần. Pha một chút màu chủ đạo vào xám sẽ làm cả trang ăn khớp hơn. Ví dụ nền #FFF8FB là trắng pha hồng rất nhẹ, hợp với thương hiệu hồng hơn trắng tinh. Với thương hiệu xanh dương, hãy thử xám hơi ngả xanh.

Bước 4: Chia tỉ lệ bằng quy tắc 60-30-10

Bảng màu đẹp trên giấy vẫn có thể lên web sẽ thấy rối nếu chia sai tỉ lệ. Quy tắc 60-30-10 là điểm khởi đầu đơn giản mà hiệu quả: 60% diện tích là màu nền và trung tính, 30% là màu phụ, 10% là màu nhấn.

Điểm hay của quy tắc này là nó bảo vệ màu nhấn. Nếu nút kêu gọi hành động chỉ là phần nhỏ hồng trên nền sáng, mắt người xem sẽ tự đến đó. Nếu mọi thứ đều hồng, không còn gì để nổi bật.

Bước 5: Kiểm tra độ tương phản, bước người ta hay bỏ qua nhất

Đây là bước phân biệt bảng màu “đẹp trong Figma” với bảng màu “dùng được trên điện thoại ngoài nắng”. Độ tương phản là tỉ lệ độ sáng giữa chữ và nền, từ 1:1 (không phân biệt được) đến 21:1 (đen trên trắng). Chuẩn WCAG mức AA yêu cầu:

• 4.5:1 cho chữ thường.
• 3:1 cho chữ lớn (từ khoảng 24px, hoặc 19px đậm trở lên) và các thành phần giao diện như viền ô nhập, biểu tượng.

Ví dụ trên rất đáng nhìn kỹ. Màu hồng brand #FF448D rất đẹp, nhưng chữ trắng trên nền hồng chỉ đạt 3.25:1, tức không đạt cho chữ nhỏ. Có hai cách xử lý: dùng chữ đen trên nền hồng (6.46:1), hoặc đổi sang nút nền đen chữ trắng rồi để hồng xuất hiện ở trạng thái hover, đúng như các nút của trang này. Hồng cũng làm được chữ trên nền trắng nếu hạ độ sáng xuống thành #C2185B (5.87:1).

Ba thứ khác cần kiểm tra cùng lúc

• Mù màu: Khoảng 1 trong 12 nam giới và 1 trong 200 nữ giới có khó khăn phân biệt đỏ và xanh lá theo các thống kê thường được trích dẫn. Vì vậy đừng dùng riêng màu để truyền thông tin, hãy kèm biểu tượng hoặc chữ (ví dụ lỗi form có chữ “Lỗi” chứ không chỉ viền đỏ).
• Trạng thái: Hover, focus, nút bị vô hiệu hóa, liên kết đã xem. Mỗi trạng thái cần màu rõ ràng và vẫn đủ tương phản.
• Chế độ tối: Đừng đảo ngược màu một cách máy móc. Màu bão hòa mạnh trên nền tối dễ chói mắt, hãy giảm độ bão hòa và tăng độ sáng một chút cho các màu nhấn.

Để đo, bạn dùng bất kỳ công cụ kiểm tra tương phản nào (có nhiều công cụ miễn phí trên mạng), nhập mã HEX của chữ và nền rồi đọc tỉ lệ. Mất chưa đến một phút cho mỗi cặp màu.

Bước 6: Thử trên demo thật rồi mới chốt

• Dựng một trang mẫu. Đừng chỉ nhìn các ô màu. Đặt màu vào trang chủ thật với ảnh thật, chữ thật, nút thật.
• Thử ngoài điều kiện lý tưởng. Mở trên điện thoại, giảm độ sáng màn hình, bật chế độ tiết kiệm pin, thử trên màn hình cũ.
• Thử 5 giây. Cho một người lạ nhìn trang 5 giây rồi hỏi họ nhớ gì và cảm thấy thế nào. Nếu họ không nhắc tới nút chính, màu nhấn chưa hoạt động tốt.
• Nheo mắt. Nheo mắt nhìn trang: phần nào còn nổi lên thì đó là thứ mắt thấy đầu tiên. Đó nên là nút chính hoặc tiêu đề.
• So với đối thủ. Đặt trang của bạn cạnh ba đối thủ. Nếu che logo mà vẫn không phân biệt được, bạn cần điều chỉnh.

4 bảng màu mẫu để bạn tham khảo

Để dễ hình dung, đây là 4 bảng màu theo phong cách khác nhau, mỗi bảng kèm số đo tương phản thật để bạn thấy chỗ nào dùng chữ được, chỗ nào chỉ làm nền hoặc nhấn.

Công cụ giúp bạn tìm và kiểm tra màu

• Tạo bảng màu theo hòa sắc: Các công cụ như Coolors hay Adobe Color cho bạn chọn kiểu hòa sắc rồi xoay bánh xe màu.
• Lấy màu từ ảnh: Nếu bạn có một bức ảnh thể hiện đúng cảm giác thương hiệu, hãy trích 5 màu chính từ đó. Màu lấy từ ảnh thật thường hài hòa hơn màu tự chọn.
• Kiểm tra tương phản: Bất kỳ công cụ đo tỉ lệ tương phản WCAG nào.
• Xem thử trên giao diện: Các công cụ xem trước màu trên trang mẫu giúp bạn nhìn thấy bảng màu trong bối cảnh thật.
• Nhờ AI gợi ý: Bạn có thể nhờ Claude hay ChatGPT đề xuất bảng màu, miễn là bạn cho nó đủ bối cảnh. Mẫu bên dưới bạn chép dùng được ngay.

Bạn là chuyên gia nhận diện thương hiệu. Hãy đề xuất 3 bảng màu cho thương hiệu sau.
Ngành: [ngành của bạn]
Khách hàng chính: [độ tuổi, nhu cầu]
3 từ tính cách thương hiệu: [ví dụ: tin cậy, ấm áp, trẻ trung]
Đối thủ đang dùng màu: [liệt kê]
Mỗi bảng gồm: màu chủ đạo, màu phụ, màu nhấn, nền, chữ, kèm mã HEX.
Với mỗi bảng, giải thích vì sao hợp với thương hiệu, và tính tỉ lệ tương phản của cặp chữ và nền chính.
Không đoán, nếu thiếu thông tin hãy hỏi lại tôi trước.

Nhớ kiểm tra lại tỉ lệ tương phản AI đưa ra bằng công cụ đo, vì AI có thể tính sai. Muốn thêm các prompt hay cho công việc khác, xem 51 prompt AI hay cho marketing và SEO.

Áp bảng màu vào website WordPress

Khi đã chốt màu, hãy lưu chúng thành biến màu dùng chung thay vì nhập mã HEX từng chỗ. Trong Elementor và nhiều theme có phần màu toàn cục (global colors), bạn đặt một lần rồi mọi nút, tiêu đề, nền đều lấy từ đó. Về sau đổi thương hiệu chỉ cần sửa một nơi. Nếu bạn viết CSS, cách làm tương đương là dùng biến:

:root {
  --mau-chinh: #ff448d;
  --mau-phu: #111111;
  --mau-nhan: #ffd166;
  --nen: #fff8fb;
  --chu: #1f2937;
  --chu-phu: #6b7280;
  --vien: #f3d3e1;
}
a { color: #c2185b; }
.nut { background: var(--mau-phu); color: #fff; }
.nut:hover { background: var(--mau-chinh); }

Đặt tên theo vai trò (màu chính, màu phụ, nền, chữ) thay vì theo tên màu (hồng, xanh). Nếu tháng sau bạn đổi hồng thành tím, tên “màu chính” vẫn đúng.

7 lỗi bảng màu hay gặp

Checklist trước khi chốt bảng màu

• Có ghi ra 3 từ tính cách thương hiệu và màu chủ đạo khớp với chúng.
• Đã đặt cạnh 3 đến 5 đối thủ và vẫn phân biệt được.
• Có đủ 5 vai trò: chủ đạo, phụ, nhấn, trung tính, trạng thái.
• Có chia tỉ lệ 60-30-10 cho trang mẫu.
• Mọi cặp chữ và nền quan trọng đạt 4.5:1 (chữ lớn đạt 3:1).
• Không dùng riêng màu để truyền thông tin.
• Đã thử trên điện thoại và ở độ sáng thấp.
• Đã lưu thành biến màu toàn cục và ghi mã HEX vào một tài liệu chung.

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

Nên dùng bao nhiêu màu cho website? Thường 3 đến 5 màu chính: một chủ đạo, một đến hai phụ, một nhấn, cộng bộ trung tính. Các màu trạng thái là phần thêm.

Làm sao biết màu nào hợp ngành của tôi? Nhìn đối thủ trước. Bạn có thể đi theo quy ước ngành để khách dễ hiểu, hoặc chọn màu khác để nổi bật. Cả hai đều hợp lý, miễn là bạn chọn có chủ đích.

Có nên đổi bảng màu khi website đã chạy không? Có thể, nhưng hãy cân nhắc vì khách đã quen. Thay đổi từ từ, bắt đầu từ màu nhấn và nền, giữ nguyên màu chủ đạo nếu thương hiệu đã được biết đến nhiều.

Cần một bảng màu và giao diện đúng chất thương hiệu cho website của bạn? Nhắn Nam để được tư vấn. Nhớ nhen!