32 bảng màu website có mã hex, lấy từ thiết kế mẫu của We.Inc, cùng hướng dẫn xây dựng bảng màu giúp chuyển đổi: nền dịu mắt với một màu nhấn dành riêng cho hành động, ví dụ theo ngành và kiểm tra khả năng tiếp cận.
Không có màu nào luôn thắng trong mọi trường hợp. Màu nút tốt nhất là màu tương phản mạnh với trang và không được dùng cho mục đích nào khác, để mắt người xem hướng thẳng đến nút.
Một cách phổ biến là dùng nền trung tính (trắng hoặc trắng ngà cùng màu chữ tối), một màu thương hiệu chính và một màu nhấn cho lời kêu gọi hành động, cộng thêm màu ngữ nghĩa cho thông báo thành công và lỗi. Thường dùng nhiều hơn sẽ làm suy yếu thứ bậc thị giác.
Các liên tưởng về màu sắc có tồn tại, nhưng thay đổi theo văn hóa, ngành và ngữ cảnh; nhiều tuyên bố phổ biến bị phóng đại. Những yếu tố đáng tin cậy ảnh hưởng đến chuyển đổi là độ tương phản, khả năng đọc và mức độ dễ nhận biết bằng mắt của hành động bạn muốn người dùng thực hiện.
Người mua trong ngành công nghiệp coi trọng sự rõ ràng và đáng tin. Màu xanh navy, than chì và xám thép cùng một màu nhấn mạnh — thường là cam an toàn, vàng hoặc xanh dương sáng — phù hợp với ngành này. Hãy dùng màu nhấn cho bảng thông số, nút yêu cầu báo giá và số điện thoại để người xem dễ tìm.
Hãy dùng công cụ kiểm tra độ tương phản như WebAIM. WCAG 2.2 cấp AA yêu cầu độ tương phản tối thiểu 4.5:1 với văn bản thường và 3:1 với văn bản lớn cũng như thành phần giao diện quan trọng như viền nút và trường biểu mẫu.
Không có màu nào giúp chuyển đổi tốt nhất trong mọi trường hợp. Điều quan trọng là nút nổi bật như thế nào so với trang. Bảng màu giúp tăng chuyển đổi là bảng màu có nền dịu mắt, nhất quán và một màu nhấn tương phản cao chỉ dành riêng cho hành động bạn muốn người xem thực hiện.
Vì vậy, thay vì hỏi “màu nào?”, hãy hỏi “nút quan trọng nhất của tôi có trông khác mọi thứ khác trên trang không?” Hướng dẫn này chỉ cách xây dựng bảng màu dựa trên ý tưởng đó.
Các bảng màu này được lấy từ nguồn thiết kế mẫu của We.Inc (bốn màu được dùng nhiều nhất trong từng bản xem trước thiết kế, không tính màu xám trơn của khung xem trước). Đây là các thiết kế mẫu, không phải trang khách hàng; chúng tôi không khẳng định bất kỳ bảng màu nào trong số này giúp chuyển đổi tốt hơn. Hãy sao chép mã hex vào công cụ chọn màu hex để xem màu và lấy giá trị RGB/HSL, đồng thời kiểm tra từng cặp chữ-nền trong công cụ kiểm tra độ tương phản màu trước khi sử dụng.
| Thiết kế mẫu We.Inc | Phong cách | Màu sắc (hex) | Tông màu |
|---|---|---|---|
| Atlas Builders | Xây dựng / thủ công | #101d2c #0b1521 #f2a614 #d18f0a | Nền xanh navy đậm, màu hành động hổ phách |
| Summit Trades | Thủ công | #0e2436 #e4671e #16222e #f6eeec | Xanh navy với cam an toàn |
| Ironpeak Roofing | Lợp mái | #e4671e #0e2436 #17415f #16222e | Dẫn đầu bằng cam, cấu trúc xanh navy |
| Ridgewater Plumbing | Sửa ống nước | #b08544 #d8401f #f2ede3 #c9a063 | Đồng thau và đỏ trên kem ấm |
| Sunward Solar | Năng lượng mặt trời | #0b1f3a #f5a524 #d98a0b #fff6e6 | Xanh navy đêm và vàng mặt trời |
| Hookline Towing | Cứu hộ xe | #0e0e0e #ffc400 #f4f1ea #161616 | Đen và vàng tín hiệu cao |
| Redline Auto Group | Đại lý xe | #e3262e #0e0f11 #eeeeee #17191c | Đỏ đua trên nền gần đen |
| Maple Street Motors | Sửa xe | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Xanh rừng với mù tạt |
| Freshpile Carpet Cleaning | Vệ sinh thảm | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Vàng sáng trên xanh navy hoàng gia |
| Tideline Pressure Washing | Vệ sinh ngoại thất | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Xanh navy đậm với aqua |
| Mowline Lawn Care | Chăm sóc bãi cỏ | #eef3e6 #c6f24e #0f1410 #1a2a17 | Nền xanh nhạt, màu nhấn xanh chanh |
| Fairway Lawn Co. | Cảnh quan | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Kem, xanh lá đậm, vàng nhẹ |
| Brightside Dental | Nha khoa | #10312e #3f605c #0e5f57 #0a4841 | Xanh mòng két dịu mắt |
| Meadowpaw Veterinary | Thú y | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Xanh mòng két nhạt trên bạc hà nhạt |
| Vibrant Wellness | Phòng khám sức khỏe | #25382c #eef2e6 #7c9a7e #3f6b4a | Xô thơm và rừng |
| Kinfolk Home Care | Chăm sóc tại nhà | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Xanh thông với vàng ấm |
| Lumora | Chăm sóc sức khỏe | #c8a97e #182c41 #0b1220 #0e1a26 | Xanh navy đêm với vàng cát |
| Sterling & Vance LLP | Công ty luật | #8a93a2 #b08a4f #0b0e14 #f6eeec | Xám đá, đồng và mực |
| Harborview Wealth Partners | Tư vấn tài chính | #102a43 #b08d57 #d9bf8f #faf8f4 | Xanh navy và vàng kim trên ngà |
| Harborline Insurance Agency | Bảo hiểm | #0f2742 #5fd3c9 #17a398 #0b1e33 | Xanh navy với xanh mòng két |
| Larkfield Partners | Tư vấn | #1f4d3f #f4f1ea #14181c #4a5560 | Xanh lá chai trên giấy |
| Keystone Realty | Bất động sản | #f6eeec #7a2e2a #59606b #e9f0ef | Nền hồng phấn với đỏ bordeaux |
| Lucia Trattoria | Nhà hàng | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Cát ấm với xanh ô liu đen |
| Ember & Roast | Quán cà phê / nhà hàng | #ede6dc #c9642f #14100d #f6eeec | Yến mạch, cam cháy, cà phê espresso |
| Kilnhouse Coffee | Quán cà phê | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Nâu rang và đất nung |
| Parcel No. 9 Wines | Vườn nho | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Đỏ claret với hồng |
| Petalry Florist | Hoa tươi | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Mận và hồng nhạt |
| Hollow Oak Farm Shop | Cửa hàng nông trại | #24301f #f6f1e4 #5e7f3a #e3a33b | Rêu, kem và mật ong |
| Suds & Scruff | Chăm sóc thú cưng | #3b1740 #ffd84d #ff8fab #fff8e7 | Tím cà, vàng và hồng |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Tím với san hô |
| Mast Security | Bảo mật | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Graphite với bạc hà |
| Afterglow Sound | Sự kiện / âm nhạc | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavender, hồng và tím |
Một đặc điểm bạn sẽ thấy xuyên suốt: hầu hết các thiết kế ghép nền tối hoặc nhạt với một màu nhấn bão hòa (hổ phách, cam, vàng, xanh chanh hoặc san hô). Đó chính là cấu trúc “nền dịu mắt, một màu hành động” được mô tả bên dưới.
Các bài viết về tâm lý học màu sắc thường nói xanh dương tượng trưng cho lòng tin, đỏ tạo cảm giác cấp bách và xanh lá thể hiện sự phát triển. Những liên tưởng chung này có phần đúng, nhưng phụ thuộc nhiều vào văn hóa, ngành và ngữ cảnh. Đỏ có thể là cảnh báo ở tình huống này và là màu ăn mừng ở tình huống khác. Xanh lá có thể có nghĩa là “đi”, “sinh thái” hoặc “tiền bạc”.
Điều có bằng chứng vững chắc hơn là hiệu ứng cô lập, còn gọi là hiệu ứng Von Restorff: một vật thể khác biệt với xung quanh thường dễ được chú ý và ghi nhớ hơn. Nút màu cam duy nhất trên trang xanh dương-trắng sẽ nổi bật. Cũng màu cam đó trên trang có đầy chi tiết màu cam thì không.
Từ đó có hai nguyên tắc áp dụng cho mọi ngành:
Nhà thiết kế nội thất dùng tỷ lệ 60-30-10, và cách này cũng phù hợp với website:
| Tỷ lệ | Vai trò | Lựa chọn thường gặp |
|---|---|---|
| ~60% | Nền và màu cơ sở | Trắng, trắng ngà, xám rất nhạt hoặc màu tối đậm cho giao diện tối |
| ~30% | Thương hiệu và cấu trúc | Màu thương hiệu chính cho đầu trang, điều hướng, nền các phần |
| ~10% | Màu nhấn / hành động | Nút, liên kết quan trọng, yếu tố duy nhất bạn muốn người dùng nhấp |
Thêm màu chữ tối (thường là gần đen hoặc xám đậm thay vì đen tuyệt đối) và các màu ngữ nghĩa: xanh lá cho thành công, đỏ cho lỗi, hổ phách cho cảnh báo. Tránh dùng các màu ngữ nghĩa này cho nút chính để người dùng không nhầm nút “Mua ngay” với thông báo lỗi.
Nếu có logo, hãy lấy màu chính của logo làm màu chủ đạo. Nếu chưa có, chọn màu phù hợp với ngành (xem bảng bên dưới) và đủ yêu thích để sử dụng lâu dài.
Xem bánh xe màu sắc. Các màu bổ túc (nằm đối diện nhau) tạo độ nổi bật mạnh nhất: xanh dương và cam, tím và vàng, xanh mòng két và san hô. Nếu thương hiệu dùng xanh dương, màu cam hoặc vàng ấm sẽ nổi bật hơn nhiều so với một sắc xanh dương khác.
Chọn màu nền, màu bề mặt cho thẻ nội dung, màu xám cho đường viền và màu chữ. Những màu này chiếm phần lớn giao diện nên cần dịu mắt.
Dùng công cụ kiểm tra độ tương phản cho mọi cách kết hợp chữ và nút (WebAIM cung cấp công cụ miễn phí). WCAG 2.2 cấp AA yêu cầu:
Chữ xám có độ tương phản thấp trên nền trắng là một trong những vấn đề dễ đọc phổ biến nhất trên web. Nếu người đọc khó xem được đề nghị của bạn, màu nút hầu như không còn quan trọng.
Kiểm tra bảng màu trên điện thoại ngoài trời, màn hình laptop giá rẻ và chế độ tối nếu website hỗ trợ. Màu sắc trông tinh tế trên màn hình của nhà thiết kế có thể nhạt đi trên thiết bị khác.
Đây là điểm khởi đầu hợp lý, không phải quy tắc cứng. Mỗi bảng dùng nền dịu mắt và một màu nhấn tương phản duy nhất.
| Ngành | Màu nền và màu chính | Màu nhấn cho hành động | Vì sao phù hợp |
|---|---|---|---|
| Sản xuất / công nghiệp | Xanh navy, than chì, xám thép | Cam an toàn hoặc vàng | Tạo cảm giác nghiêm túc và đáng tin, đồng thời làm nút “Yêu cầu báo giá” dễ thấy |
| Y tế / nha khoa | Trắng, xanh dương nhạt hoặc xanh mòng két | San hô ấm hoặc xanh lá | Sạch sẽ, dễ chịu; nút đặt lịch nổi bật |
| Luật / tài chính | Xanh navy đậm hoặc xanh lá rừng, màu kem | Vàng kim hoặc xanh dương sáng | Tín hiệu đáng tin truyền thống cùng hành động liên hệ rõ ràng |
| Nhà hàng / thực phẩm | Màu trung tính ấm, đỏ đậm hoặc xanh ô liu | Vàng sáng hoặc cam | Gợi cảm giác ngon miệng, làm nút “Đặt món” hoặc “Đặt bàn” dễ thấy |
| SaaS / công nghệ | Trắng hoặc gần đen, chàm hoặc xanh dương | Xanh lá rực, cam hoặc hồng | Sắc nét, với nút “Bắt đầu miễn phí” có độ tương phản cao |
| Làm đẹp / chăm sóc sức khỏe | Hồng phấn, xanh xô thơm, kem | Mận đậm hoặc đen | Thương hiệu mềm mại, nút đặt lịch tự tin |
| Dịch vụ nhà ở (sửa ống nước, HVAC, mái nhà) | Trắng, xanh dương đậm | Đỏ hoặc cam | Nút gọi khẩn cấp tạo cảm giác cấp thiết |
| Thương mại điện tử / thời trang | Chủ yếu trắng và đen | Một màu nhấn thương hiệu | Để ảnh sản phẩm tự tạo điểm nhấn màu sắc |
Riêng với nhà sản xuất: người mua thường truy cập trang sản phẩm hoặc năng lực và muốn xem bảng thông số hoặc yêu cầu báo giá. Hãy để “Yêu cầu báo giá”, “Tải bảng thông số” và số điện thoại là những yếu tố duy nhất có màu nhấn trên các trang đó.
Hãy tưởng tượng website của một công ty làm vườn có logo xanh lá, tiêu đề xanh lá, biểu tượng xanh lá, nền phần đầu xanh lá và nút “Nhận báo giá miễn phí” cũng màu xanh lá. Mọi thứ đều đúng thương hiệu, nhưng nút bấm biến mất giữa các yếu tố khác.
Cách sửa:
Thương hiệu không thay đổi, nhưng hành động giờ là yếu tố dễ thấy nhất trên màn hình.
Nếu có đủ lưu lượng truy cập, hãy chạy thử nghiệm A/B cho nút hoặc màu nhấn, nhưng mỗi lần chỉ thay đổi một yếu tố và chạy đủ lâu để có kết quả đáng tin. Website ít truy cập thường không thể đạt kết quả ổn định; thay vào đó, hãy thử các cách đơn giản hơn:
Màu sắc là một phần giúp trang chuyển đổi tốt; bài phân tích các ví dụ trang đích chuyển đổi tốt trình bày những phần còn lại. Với We.Inc, bạn có thể mô tả kiểu giao diện muốn có trong khung chat, chẳng hạn “xanh navy và xám với nút báo giá màu cam”, duyệt mẫu, rồi tinh chỉnh màu bằng giao diện trực quan hoặc trong mã.
Bắt đầu miễn phí · Không cần thẻ tín dụng