Phối màu website thế nào để đẹp, dễ đọc và đúng thương hiệu?
Một bảng màu có thể rất đẹp trên moodboard nhưng thất bại trên website nếu text khó đọc, CTA không nổi hoặc trạng thái lỗi chỉ phân biệt bằng màu. Phối màu web cần kết hợp brand, hierarchy, accessibility và khả năng mở rộng thành design tokens.
Tóm tắt nhanh: Bắt đầu bằng vai trò màu — background, surface, text, primary, accent, success, warning, error — rồi mới chọn harmony. Kiểm tra contrast trong component thật, light/dark state và nhiều loại màn hình.
Vì sao màu sắc quan trọng?
Màu giúp:
- tạo nhận diện;
- phân cấp hành động;
- nhóm nội dung;
- báo trạng thái;
- tạo tone cảm xúc;
- hỗ trợ người dùng quét giao diện.
Màu không nên là tín hiệu duy nhất. Error cần icon/text; selected state cần shape, border hoặc label bổ sung.
1. Phối màu đơn sắc — Monochromatic
Dùng một hue với nhiều mức sáng/tối và saturation. Phù hợp sản phẩm cần cảm giác tập trung, nhưng cần neutral đủ mạnh để tránh giao diện “một màu”.
2. Phối màu tương đồng — Analogous
Dùng các hue gần nhau trên color wheel. Tạo cảm giác mềm và thống nhất, nhưng CTA có thể thiếu contrast nếu mọi màu quá gần.
3. Phối màu bổ túc — Complementary
Dùng hai hue đối diện. Hiệu quả cho điểm nhấn, nhưng không nên chia tỷ lệ 50/50 với saturation cao. Một màu nên làm chủ, màu kia làm accent.
4. Phối màu bộ ba — Triadic
Ba màu cách đều tạo năng lượng và linh hoạt. Cần phân vai primary/secondary/accent để tránh cảm giác đồ chơi.
5. Phối màu bộ bốn — Tetradic
Hai cặp bổ túc tạo palette phong phú, phù hợp data visualization hoặc hệ thống nhiều category. Khó kiểm soát hơn và cần neutral để giữ trật tự.
Từ palette sang semantic color system
Đừng đặt token chỉ theo tên màu như blue-500. Thêm semantic roles:
background;surface;text-primary;text-muted;border;action-primary;action-hover;focus-ring;success;warning;error.
Semantic token giúp đổi brand palette hoặc dark mode mà component không phải sửa từng nơi.
Quy tắc 60–30–10 có dùng được không?
Có thể dùng như điểm bắt đầu:
- 60% neutral/background;
- 30% supporting color;
- 10% accent/action.
Đây không phải tiêu chuẩn bắt buộc. Với product UI, neutral có thể chiếm nhiều hơn; với campaign page, visual color có thể mạnh hơn.
Contrast và accessibility
WCAG 2.2 yêu cầu contrast text thông thường tối thiểu 4,5:1 và text lớn 3:1 trong phạm vi áp dụng. UI component và graphic object quan trọng cũng có yêu cầu riêng.
Thực hành tốt:
- kiểm tra text trên màu thật;
- không chỉ xem swatch;
- test hover/focus/disabled;
- kiểm tra color blindness;
- tránh gray quá nhạt cho body text;
- không đặt text trực tiếp lên ảnh thiếu overlay;
- test font mảnh vì anti-aliasing làm cảm nhận nhạt hơn.
Cách chọn màu cho website
1. Xác định brand attributes
Chọn 3–5 từ như “tin cậy, rõ ràng, năng động”, sau đó đánh giá palette có hỗ trợ không. Tránh gán tâm lý màu như luật phổ quát; văn hóa và context ảnh hưởng cách cảm nhận.
2. Bắt đầu bằng neutral
Background, surface, text và border quyết định readability nhiều hơn accent. Xây neutral scale trước.
3. Chọn primary và action color
Primary nhận diện không nhất thiết là màu button. Nếu brand color không đạt contrast, có thể dùng biến thể đậm hơn cho action.
4. Tạo state colors
Success/warning/error/info cần khác nhau đủ rõ và có icon/text đi kèm.
5. Test trong component
Đặt palette vào hero, form, table, card, modal, chart và mobile navigation. Một màu tốt trên button có thể không tốt trên background lớn.
6. Kiểm tra dark mode nếu có
Không đảo màu máy móc. Shadow, elevation, saturation và image treatment cần điều chỉnh.
Công cụ hỗ trợ
- Figma variables/styles;
- Adobe Color;
- Coolors;
- WebAIM Contrast Checker;
- browser DevTools;
- color blindness simulators.
Công cụ gợi ý palette không hiểu brand và hierarchy; designer vẫn cần quyết định.
Những lỗi thường gặp
- Dùng quá nhiều accent.
- Gray text quá nhạt.
- CTA trùng màu decoration.
- Chỉ test trên màn hình designer.
- Color là tín hiệu duy nhất.
- Copy palette từ ảnh mà không kiểm tra contrast.
- Không có token/naming.
- Brand color bị ép vào mọi surface.
Mikel Studio có thể hỗ trợ gì?
Mikel Studio có thể xây hoặc audit web color system gắn với component, responsive state và accessibility — phù hợp cho website redesign hoặc design system đang thiếu consistency.
Câu hỏi thường gặp
Website nên có bao nhiêu màu?
Không có số cố định. Hạn chế hue chính nhưng chuẩn bị đủ shade và semantic state.
Brand color không đạt contrast thì sao?
Dùng biến thể phù hợp cho text/button và giữ màu gốc ở vùng trang trí hoặc logo.
Có nên dùng gradient?
Có thể, nhưng cần kiểm tra contrast tại điểm text và tránh dùng gradient để che hierarchy yếu.
Kết luận
Phối màu website tốt không chỉ tạo cảm xúc; nó làm rõ hierarchy, hành động và trạng thái. Khi palette được chuyển thành semantic tokens và kiểm tra trong component thật, thiết kế vừa đẹp vừa vận hành bền hơn.