Cách chọn bảng màu cho website: từ màu thương hiệu đến mã HEX
Ezlun Team8 phút đọc
Cách chọn bảng màu cho website gọn nhất là bắt đầu từ một màu thương hiệu, thêm một màu nền và một màu chữ dễ đọc, rồi chọn một màu nhấn cho nút bấm. Sau đó kiểm tra độ tương phản giữa chữ và nền, và ghi lại mã HEX để dùng nhất quán trên mọi trang.
Bài này đi qua từng vai trò màu, quy tắc 60-30-10, rồi hướng dẫn dùng Tạo bảng màu của Ezlun để giữ màu thương hiệu, tạo các màu còn lại và xuất mã HEX hoặc CSS.
Một bảng màu website gồm những vai trò nào?
Một bảng màu dùng được không phải là năm màu đẹp đặt cạnh nhau, mà là mỗi màu có một việc rõ ràng. Phần lớn website chỉ cần năm vai trò sau:
Vai trò | Dùng cho | Gợi ý chọn |
|---|---|---|
Màu chính (primary) | Logo, tiêu đề lớn, thanh điều hướng | Thường là màu thương hiệu |
Màu phụ (secondary) | Khối nền phụ, biểu tượng, đường viền | Cùng tông hoặc gần với màu chính, dịu hơn |
Màu nhấn (accent) | Nút bấm chính, liên kết, thông báo cần chú ý | Nổi bật so với màu chính, dùng ít |
Màu nền | Nền trang, nền thẻ nội dung | Trắng, trắng ngà hoặc xám rất nhạt |
Màu chữ | Đoạn văn, nhãn, chú thích | Đen hoặc xám đậm, tương phản cao với nền |
Ngoài năm vai trò này, website thường có thêm vài màu trạng thái (đỏ cho lỗi, xanh lá cho thành công, vàng cho cảnh báo). Các màu này nên giữ theo quy ước quen thuộc để người dùng hiểu ngay.
Quy tắc 60-30-10 là gì?
Đây là một quy ước phổ biến trong thiết kế nội thất và đồ họa, không phải chuẩn bắt buộc. Ý tưởng là chia màu theo tỷ lệ diện tích:
Khoảng 60% là màu chủ đạo, trên website thường là màu nền.
Khoảng 30% là màu thứ hai, ví dụ màu chính ở thanh điều hướng, tiêu đề, khối giới thiệu.
Khoảng 10% là màu nhấn, dành cho nút bấm và chỗ bạn muốn người đọc chú ý.
Quy tắc này hữu ích nhất để tránh lỗi hay gặp: dùng màu nhấn quá nhiều đến mức không còn gì nổi bật. Nếu mọi nút đều cùng một màu rực, người dùng không biết nút nào quan trọng nhất.
Cách chọn bảng màu cho website từ màu thương hiệu bằng Ezlun
Tạo bảng màu của Ezlun tạo màu theo 28 chế độ, chia thành 6 nhóm như lý thuyết màu, tâm trạng, thập kỷ, thiên nhiên, văn hóa. Công cụ không tự tính màu phụ từ màu bạn nhập; cách làm là khóa màu thương hiệu, rồi tạo lại các màu còn lại cho tới khi thấy hợp.
Mỗi cột là một màu, có mã HEX và các nút khóa, sao chép, tạo lại, xóa.
Mở công cụ tại ezlun.com/vi/tools/color-palette. Trang mở sẵn một bảng 6 màu ngẫu nhiên.
Chọn số màu: dùng nút cộng, trừ để có từ 2 đến 8 màu. Với website, 5 màu thường đủ cho năm vai trò ở trên.
Nhập màu thương hiệu: bấm vào một ô màu, nhập mã HEX của thương hiệu (ví dụ
#1E3A5F) rồi xác nhận. Màu vừa nhập được khóa tự động.Chọn chế độ tạo màu: nhóm "Lý thuyết màu" có các kiểu quen thuộc như đơn sắc (Monochromatic), màu kề nhau (Analogous), màu bổ túc (Complementary). Nếu thương hiệu có cảm xúc rõ, thử nhóm "Tâm trạng" hoặc "Thiên nhiên".
Tạo lại các màu chưa khóa: bấm "Tạo màu" hoặc phím Space. Thấy màu nào hợp thì khóa lại, rồi tiếp tục cho các ô còn lại.
Sửa từng màu khi cần: nút tạo lại trên một màu chỉ đổi riêng màu đó; nút xóa bỏ màu thừa.
Xuất kết quả khi đã hài lòng (xem phần xuất ở dưới).
Mẹo nhỏ: màu nền và màu chữ thường không cần "tạo". Bạn có thể nhập thẳng một màu trắng ngà và một màu xám đậm, khóa lại, rồi chỉ để công cụ gợi ý màu phụ và màu nhấn.
Kiểm tra tương phản chữ và nền
Màu đẹp mà chữ khó đọc thì vẫn là bảng màu chưa dùng được. Chuẩn được dùng rộng rãi để đo việc này là WCAG (hướng dẫn về khả năng tiếp cận nội dung web của W3C). Tỷ lệ tương phản tối thiểu theo WCAG:
Mức | Chữ thường | Chữ lớn (từ 18pt, hoặc 14pt đậm) |
|---|---|---|
AA (mức nên đạt) | 4.5:1 | 3:1 |
AAA (mức cao) | 7:1 | 4.5:1 |
Công cụ Tạo bảng màu chưa có phần đo tương phản. Sau khi có bảng màu, hãy dán từng cặp mã HEX (màu chữ và màu nền) vào một công cụ kiểm tra tương phản trực tuyến để xem tỷ lệ. Những cặp cần kiểm nhất:
Màu chữ đoạn văn trên màu nền trang.
Chữ trên nút bấm (thường là chữ trắng) trên màu nhấn.
Chữ trắng trên màu chính, nếu bạn đặt tiêu đề trên khối màu chính.
Nếu một cặp không đạt, thường chỉ cần làm màu nền sáng hơn hoặc màu chữ đậm hơn một chút, không cần đổi cả bảng màu.
Xuất bảng màu sang mã HEX, CSS và ảnh
Trên điện thoại, các màu xếp thành hàng, kèm các nút sao chép mã màu, CSS và xuất ảnh.
Công cụ có ba cách xuất:
Copy màu: sao chép danh sách mã HEX, cách nhau bằng dấu phẩy, để dán vào tài liệu hay tin nhắn.
CSS Variables: sao chép một khối CSS dạng
:root { --color-1: #1E3A5F; ... }, kèm tên gần đúng của từng màu trong chú thích. Bạn dán vào file CSS rồi đổi tên biến theo vai trò, ví dụ--color-primary,--color-accent.Export Image: tải ảnh PNG của bảng màu theo ba khổ: Ngang 1200 x 630, Vuông 1080 x 1080, Dọc 1000 x 1500. Hợp để gửi cho khách hàng hoặc đưa vào tài liệu hướng dẫn thương hiệu.
Nếu website của bạn dùng Tailwind CSS, bạn có thể lấy mã HEX từ khối CSS và khai báo vào phần màu trong file cấu hình Tailwind. Công cụ hiện chưa xuất thẳng định dạng Tailwind.
Giới hạn của công cụ
Không tự tính màu phụ từ màu thương hiệu. Các màu chưa khóa được tạo theo chế độ đã chọn; bạn cần tự chọn và khóa màu hợp với màu thương hiệu.
Chưa có đo tương phản. Hãy kiểm tra bằng công cụ kiểm tra tương phản riêng trước khi dùng cho chữ.
Chưa xuất định dạng Tailwind hay file thiết kế. Có danh sách HEX, CSS variables và ảnh PNG.
Màu trên màn hình có thể lệch giữa các thiết bị, và lệch nhiều hơn khi in. Nếu bảng màu dùng cho cả in ấn, hãy in thử.
Câu hỏi thường gặp
Nên dùng bao nhiêu màu cho website?
Phần lớn website dùng tốt với 3-5 màu chính: màu thương hiệu, một màu phụ, một màu nhấn, màu nền và màu chữ. Thêm vài màu trạng thái cho lỗi, thành công, cảnh báo. Càng nhiều màu càng khó giữ nhất quán.
Màu chính chọn theo cảm xúc thế nào?
Nếu đã có logo, màu chính nên là màu của logo. Nếu chưa có, hãy bắt đầu từ cảm giác bạn muốn người xem có (tin cậy, năng động, ấm áp, sang trọng) và xem các thương hiệu cùng ngành dùng màu gì, để chọn màu vừa hợp ngành vừa đủ khác biệt. Không có quy tắc cố định giữa màu và cảm xúc, vì cách hiểu màu còn tùy văn hóa.
Tương phản tối thiểu bao nhiêu thì dễ đọc?
Theo WCAG mức AA, chữ thường cần tỷ lệ tương phản ít nhất 4.5:1 so với nền, chữ lớn ít nhất 3:1. Mức AAA cao hơn: 7:1 cho chữ thường.
Xuất được định dạng nào?
Danh sách mã HEX, khối CSS variables và ảnh PNG theo ba khổ ngang, vuông, dọc. Chưa có xuất Tailwind; bạn lấy mã HEX từ khối CSS để khai báo.
Có cần đăng ký không?
Không. Tạo bảng màu miễn phí, không cần đăng nhập và không dùng năng lượng.
Tổng kết
Chia màu theo vai trò: chính, phụ, nhấn, nền, chữ; dùng màu nhấn ít để nó thật sự nổi bật.
Khóa màu thương hiệu, rồi tạo lại các màu còn lại theo một chế độ cho tới khi thấy hợp.
Kiểm tra tương phản theo WCAG cho các cặp chữ và nền quan trọng, rồi xuất CSS để dùng nhất quán.
Bảng màu không chỉ dùng cho website. Bài xây thương hiệu cá nhân khi đi tìm việc dùng cùng cách này cho CV và portfolio, còn bài cách chọn mẫu CV xin việc giúp bạn đưa màu vào CV cho đúng mức. Nếu cần ảnh minh họa hợp tông màu, xem cách viết prompt tạo ảnh AI. Người bán hàng online có thể xem thêm bài xử lý ảnh sản phẩm bán hàng online.
Bạn có thể bắt đầu ngay với Tạo bảng màu của Ezlun, miễn phí và không cần đăng ký.
