Bảng 5 màu cho mỹ phẩm, thời trang, mẹ và bé, hàng tiêu dùng, điện tử. Chữ đọc được trước, đẹp sau: mỗi bảng đều kèm số đo độ tương phản, bản xem trước và CSS để dán.
Hồng phấn đi cùng ánh vàng gợi cảm giác mềm mại, chăm sóc nhẹ nhàng; nền ngả hồng thay vì trắng tinh để ảnh sản phẩm nổi hơn.
Xanh lá trầm gợi thành phần tự nhiên và cảm giác dịu cho da nhạy cảm; điểm nhấn cam đất giữ cho bố cục không quá lạnh.
Be và nâu ấm hợp dòng sản phẩm tối giản, đắt tiền; ít sắc độ nên ảnh chai lọ và bao bì là thứ nổi bật nhất.
Nền trắng và chữ đen để lại chỗ cho ảnh mặc đồ; một điểm nhấn cam gạch dùng cho giá và nhãn giảm giá.
Tông đất ấm hợp bộ sưu tập theo mùa, đồ vải thô, phong cách retro; xanh navy làm đối trọng cho nút và nhãn.
Tím đậm tạo cảm giác trẻ, hợp streetwear và đồ theo xu hướng; điểm nhấn hổ phách đủ nổi để gọi người xem tới nút mua.
Xanh bạc hà trung tính về giới tính, gợi cảm giác sạch và an tâm; vàng bơ thêm chút ấm áp mà không quá sặc sỡ.
Hồng đào dịu hợp đồ cho bé gái và quà tặng sơ sinh; xanh trời đóng vai đối trọng, tránh cả trang chỉ một tông hồng.
Vàng kem gợi sự ấm áp, quen thuộc, hợp sữa, đồ ăn dặm và đồ dùng hằng ngày; xanh dương nhạt giữ vẻ tin cậy.
Đỏ và cam là tông quen thuộc của đồ ăn, đồ uống và khuyến mãi; hợp trang cần nổi bật khi khách lướt nhanh.
Xanh lá gợi cảm giác tươi, lành và tự nhiên; hợp thực phẩm sạch, đồ khô, nước giải khát ít đường.
Vàng nghệ ấm gợi bữa ăn gia đình và đồ nấu nướng; đỏ gạch dùng cho nhãn giá và combo để mắt dừng đúng chỗ.
Xanh dương là tông quen thuộc của công nghệ, gợi sự tin cậy và chính xác; hợp trang cần trình bày thông số rõ ràng.
Xám than trung tính cho cảm giác bền, chắc, hợp đồ gia dụng và thiết bị; cam tạo điểm nhấn cho nút và ưu đãi.
Nền tối làm ảnh thiết bị và đèn nền nổi hơn, hợp gaming, âm thanh, phụ kiện; xanh lục và vàng đủ sáng để đọc trên nền đó.
Chọn ngành hàng
Bấm chip ngành ở đầu công cụ để chỉ xem các bảng màu của ngành đó, hoặc để “Tất cả ngành” để so sánh. Mỗi ngành có vài bảng màu khác hướng: dịu, nổi bật, hoặc nền tối.
So sánh và xem trước
Mỗi bảng có 5 vai trò màu và hai phép đo độ tương phản. Bấm “Xem trước” để thấy bảng màu đó trên một banner và một thẻ sản phẩm mẫu, rồi mới quyết định.
Chép mã màu hoặc CSS
Bấm vào ô màu để chép mã HEX. Muốn lấy cả bộ, dùng khối “Xuất CSS variables” rồi dán vào file CSS của landing page hoặc trang bán hàng.
Gian hàng, banner và landing page bị xem lướt rất nhanh, nên màu phải làm hai việc: nhận ra thương hiệu, và để chữ giá, tên sản phẩm, nút mua đọc được ngay trên màn hình điện thoại nhỏ. Việc thứ hai đo được bằng số, việc thứ nhất thì không.
Không dựa trên nghiên cứu hay con số chuyển đổi nào. Đây là gợi ý thiết kế của đội Media Omni: mỗi bảng đi kèm một câu giải thích cảm giác màu thường gợi ra và kiểu hàng hợp với nó. Tiêu chí cứng duy nhất là đọc được: chữ trên nền của mọi bảng đều đạt mức AA của WCAG. Hãy coi đây là điểm xuất phát, không phải đáp án.
Chủ đạo là màu của nút, link và điểm nhấn chính. Phụ là màu nền thẻ và khối phụ. Điểm nhấn dành cho huy hiệu, nhãn giảm giá. Nền là màu nền trang. Chữ là màu chữ chính. Một cách chia thường gặp là phần lớn diện tích dùng màu nền và màu phụ, một phần dùng màu chủ đạo, và rất ít dùng màu điểm nhấn để nó thật sự nổi bật.
Đây là hai mức độ tương phản giữa màu chữ và màu nền theo hướng dẫn WCAG của W3C. AA cần tỷ lệ tối thiểu 4,5:1 cho chữ thường (3:1 cho chữ lớn), AAA cần 7:1. Tỷ lệ càng cao, chữ càng dễ đọc, nhất là với người kém thị lực, khi màn hình bị chói hoặc xem ngoài trời. Công cụ đo hai cặp quan trọng nhất: chữ trên nền, và màu chủ đạo trên nền.
Chưa. Công cụ cho xem và chép các bảng màu có sẵn. Muốn chỉnh, bấm vào ô màu để chép mã HEX rồi sửa trong phần mềm thiết kế của bạn, sau đó đo lại độ tương phản chữ trên nền trước khi dùng.
Thường là không giống hoàn toàn. Màn hình hiển thị bằng ánh sáng (RGB) còn bản in dùng mực (thường là CMYK), nên có màu trên màn hình không in ra được đúng sắc. Nếu bao bì hoặc tờ rơi quan trọng, hãy xin nhà in in thử và so với bảng màu.
Dán khối :root vào file CSS, sau đó dùng var(--brand-primary), var(--brand-background)… ở mọi chỗ cần màu. Khi đổi bảng màu chỉ phải sửa một khối này thay vì tìm từng mã HEX rải rác khắp file.
Một số ngành, như thiết bị điện tử, gaming, âm thanh, thường dùng nền tối để ảnh sản phẩm và đèn nền nổi hơn. Bảng nền tối trong công cụ cũng đạt AA cho chữ chính, nhưng đọc đoạn chữ dài trên nền tối có thể mỏi hơn, nên nó hợp cho banner và trang giới thiệu hơn là cho bài viết dài.
Media Omni vận hành quảng cáo và sàn cho hơn 300 brand & shop tại Việt Nam. Nếu bảng tính vừa rồi cho ra con số không như bạn muốn, đó thường là chuyện của cơ cấu giá và cách chạy chứ không phải của cái máy tính.
Nói chuyện với đội vận hành