Xây dựng bảng màu thương hiệu từ ảnh sản phẩm của chính bạn
Lấy các màu thật từ ảnh sản phẩm và bao bì, gán cho mỗi màu một vai trò, và kiểm tra từng cặp chữ với độ tương phản WCAG trước khi nó xuất hiện trên quảng cáo, chú thích hoặc thẻ cuối.
Nhiều thương hiệu nhỏ có file logo nhưng không có danh sách màu. Các màu nằm trong chính sản phẩm: chai, nhãn, hộp, vải. Khi đến lúc làm quảng cáo, thumbnail hoặc kiểu chú thích, người ta nhìn bằng mắt rồi đoán một mã hex từ ảnh và hy vọng đúng.
Bạn có thể làm tốt hơn trong khoảng mười phút. Lấy màu từ ảnh của sản phẩm thật, gán vai trò cho từng màu, và kiểm tra cặp nào đọc được làm chữ. công cụ trích xuất bảng màu miễn phí của chúng tôi thực hiện việc lấy màu và kiểm tra ngay trong trình duyệt của bạn, không tải gì lên.
Vì sao bắt đầu từ sản phẩm, không phải bảng cảm hứng
Mọi người nhận ra sản phẩm của bạn qua cách nó trông trên kệ hàng hoặc trong tay họ. Một quảng cáo có màu khớp với bao bì tạo cảm giác cùng một thương hiệu chỉ với một cái nhìn, còn một quảng cáo lệch màu thì giống hàng nhái. Bảng màu lấy từ sản phẩm cũng trung thực về những gì bạn thực sự bán, điều mà bảng cảm hứng hiếm khi làm được.
Cách này cũng áp dụng cho dịch vụ. Nếu bạn không có sản phẩm vật lý, hãy dùng ảnh chụp màn hình tốt nhất, mặt tiền cửa hàng hoặc ảnh đội ngũ của bạn, bất cứ thứ gì mọi người đã liên tưởng với bạn.
Bước 1: chọn và cắt ảnh
Chọn hai hoặc ba ảnh rõ ràng: sản phẩm trên nền trơn, mặt bao bì hướng ra, và một ảnh phong cách sống mà bạn thích. Sau đó cắt thật sát. Công cụ trích xuất đếm mọi pixel bạn đưa vào, nên một chai trên bàn gỗ sẽ trả về cái bàn như một trong các màu thương hiệu. Hãy cắt đến sản phẩm và nhãn, khi đó bảng màu chính là sản phẩm.
Chụp dưới ánh sáng ban ngày hoặc ánh sáng đều nếu có thể. Đèn vàng ấm làm bao bì trắng ngả kem, và mọi màu bạn lấy ra sẽ mang sắc thái đó.
Bước 2: trích xuất năm đến tám màu
Thả từng ảnh vào công cụ trích xuất và chọn 5 hoặc 6 màu cho ảnh sản phẩm sạch, hoặc 8 cho ảnh nhiều chi tiết. Nó gom các pixel giống nhau và liệt kê giá trị trung bình của mỗi nhóm, lớn nhất trước, cùng tỷ lệ diện tích ảnh mà mỗi nhóm chiếm. Điểm khởi đầu được cố định, nên cùng một ảnh luôn cho cùng một bảng màu, và một điểm nhấn nhỏ sáng, như nắp đỏ trên chai trắng, được giữ riêng một ô màu thay vì bị trung bình hóa.
Chạy tất cả ảnh và tìm các màu lặp lại. Đó chính là thương hiệu. Một màu chỉ xuất hiện ở một ảnh thường là nền hoặc ánh sáng.
Bước 3: gán vai trò cho mỗi màu
Bảng màu chỉ hữu ích khi mỗi màu có một vai trò. Hầu hết thương hiệu cần bốn:
- Nền: màu mà phần lớn bố cục đặt lên. Thường là màu cơ bản của bao bì, hoặc một màu trung tính sáng.
- Chữ: một màu tối đọc được trên nền. Gần đen là ổn. Một màu thương hiệu đậm sẽ tốt hơn, nếu nó qua được kiểm tra độ tương phản.
- Nhấn: màu nổi bật, dành cho nút bấm, nhãn giá hoặc một từ được làm nổi.
- Hỗ trợ: một hoặc hai màu trung tính cho khung, đường kẻ và chữ phụ.
Đừng dùng mọi màu mà ảnh cho bạn. Năm màu có tên và vai trò rõ ràng sẽ giữ cho cả trăm quảng cáo nhất quán. Mười hai màu thì không.
Bước 4: kiểm tra độ tương phản trước khi dùng cho bất cứ thứ gì
Các cặp màu trông ổn trên màn hình lớn có thể khó đọc trên điện thoại dưới nắng, và khó hơn nhiều với người có thị lực kém. Các Hướng dẫn Khả năng Truy cập Nội dung Web (WCAG) của W3C đưa ra một con số cho việc này, tỷ lệ tương phản, chạy từ 1:1 (cùng một màu hai lần) đến 21:1 (đen trên trắng). Các ngưỡng là:
| Chữ thường | Chữ lớn | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Chữ lớn nghĩa là ít nhất 18 point, hoặc 14 point đậm, theo định nghĩa của WCAG. Và các con số là giới hạn cứng: hướng dẫn về 1.4.3 của W3C nói rằng tỷ lệ đã tính không được làm tròn, nên 4.499:1 không đạt 4.5:1.
WCAG được viết cho nội dung web, không phải cho quảng cáo, nhưng lý lẽ vẫn áp dụng cho mọi chữ trên màn hình, kể cả phụ đề ghi cứng vào video và chữ trên thẻ cuối.
Một ví dụ cụ thể
Giả sử bao bì của bạn cho một màu xanh navy #1a3c6e, một màu kem #fdf6e3 và một màu cam #e07a2e.
Công thức là (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ sáng tương đối của màu sáng hơn và L2 của màu tối hơn. Độ sáng tương đối chạy từ 0 với màu đen đến 1 với màu trắng. Navy xấp xỉ 0.046, kem xấp xỉ 0.923 và cam xấp xỉ 0.300.
- Chữ navy trên nền kem: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, khoảng 10.1 với các số làm tròn này, và chính xác là 10.16:1. Cặp này đạt AAA ở mọi cỡ chữ. Đây là cặp chính của bạn.
- Chữ cam trên nền kem: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, khoảng 2.78:1. Cặp này không đạt ngay cả với chữ lớn. Màu cam không nên mang chữ trên nền kem.
- Chữ đen trên nền cam: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, tức 7.0 với các số làm tròn này nhưng chính xác là 6.99:1. Cặp này đạt AA cho mọi chữ nhưng hụt một chút so với AAA. Ổn cho nhãn nút.
- Chữ kem trên nền navy: cùng cặp với cặp đầu tiên, nên cùng 10.16:1. Đảo ngược một cặp không bao giờ làm thay đổi tỷ lệ.
Vì vậy các vai trò gần như tự chọn: nền kem, chữ navy, cam làm hình khối nhấn với chữ đen trên đó (navy trên cam chỉ đạt 3.65:1, chỉ đủ AA cho chữ lớn). Công cụ trích xuất hiển thị toàn bộ bảng này cùng lúc, mọi màu so với mọi màu khác cộng trắng và đen, mỗi ô được xếp hạng AAA, AA, AA chữ lớn hoặc Fail.
Bước 5: ghi lại một lần
Xuất bảng màu dưới dạng biến CSS tùy chỉnh hoặc JSON và giữ cạnh các file logo. Đổi tên biến theo vai trò sau khi đã quyết định: --brand-bg, --brand-text, --brand-accent dễ đọc hơn --color-3 sau một tháng. Thêm một dòng dưới mỗi biến ghi cặp nào đã đạt, để không ai phải kiểm tra lại.
Sau đó đối chiếu các số với bất kỳ tài liệu chính thức nào bạn đã có. Ảnh chụp cho bạn màu mà máy ảnh đã ghi nhận, gần với bao bì in nhưng không giống hệt thông số mực. Nếu máy in hoặc nhà thiết kế của bạn có giá trị chính xác, thì các giá trị đó được ưu tiên.
Dùng bảng màu trong quảng cáo và bài đăng
- Chú thích và phụ đề: chữ màu của bạn trên một hộp có màu nền của bạn, hoặc ngược lại. Kiểm tra cặp đó trước.
- Thẻ cuối: màu nền với logo và một dòng chữ màu chữ của bạn. Màu nhấn có thể lấp đầy hình nút phía sau một lời kêu gọi hành động ngắn.
- Thumbnail và ảnh bìa: một màu nhấn, một từ lớn dễ đọc, nhiều nền.
- Mã QR trên bao bì: màu thương hiệu dùng được nếu nó đậm rõ rệt hơn bao bì. công cụ tạo mã QR của chúng tôi sẽ cảnh báo khi độ tương phản thấp.
Hermoso nằm ở đâu
Hermoso là một tác nhân tiếp thị AI. Nó nghiên cứu các quảng cáo đang hiệu quả trên thị trường của bạn, tạo quảng cáo hình ảnh và video đúng thương hiệu, đăng và lên lịch lên các tài khoản mạng xã hội của bạn, và chạy chiến dịch trả phí trên tài khoản quảng cáo của bạn. Khi bạn thêm thương hiệu từ website, nó học sản phẩm, logo và bảng màu của bạn. Chú thích và thẻ cuối sẽ tắt trừ khi bạn yêu cầu, và khi có yêu cầu, bạn có thể đặt màu chữ, hộp và thẻ cuối bằng mã hex, để các cặp bạn đã kiểm tra ở đây chính là những cặp được phát hành. Nó hoạt động trong ứng dụng web, hoặc bên trong Claude, ChatGPT và Cursor thông qua máy chủ MCP của nó.
Câu hỏi thường gặp
Làm sao tìm mã hex của màu sản phẩm?
Cắt một ảnh rõ ràng vừa khít sản phẩm hoặc bao bì rồi thả vào công cụ trích xuất bảng màu. Nó liệt kê các màu chính dưới dạng HEX, RGB và HSL. Chạy hai hoặc ba ảnh và giữ lại các màu lặp lại.
Chữ cần tỷ lệ tương phản bao nhiêu?
Theo WCAG 2.2, mức AA cần 4.5:1 cho chữ thường và 3:1 cho chữ lớn, còn AAA cần 7:1 và 4.5:1. Chữ lớn là ít nhất 18 point, hoặc 14 point đậm.
4.49:1 có đủ cho AA không?
Không. W3C nói tỷ lệ không được làm tròn khi so với ngưỡng, nên 4.499:1 không đạt 4.5:1.
Một bảng màu thương hiệu nên có bao nhiêu màu?
Đủ để mỗi màu có một vai trò: thường là một nền, một màu chữ, một màu nhấn và một hoặc hai màu trung tính. Năm màu có tên và vai trò rõ ràng giữ quảng cáo nhất quán tốt hơn một danh sách dài.
Màu lấy từ ảnh có chính xác không?
Không. Đó là những gì máy ảnh ghi nhận dưới ánh sáng đó, gần với sản phẩm nhưng không giống thông số in hay mực. Nếu bạn có giá trị chính thức, hãy dùng chúng.