Color palette là gì: tập hợp màu có chủ đích, không phải màu đẹp ngẫu nhiên
Color palette (bảng màu) là một tập hợp màu sắc được chọn lọc trước, dùng nhất quán xuyên suốt một sản phẩm thiết kế. Thay vì mỗi lần cần màu lại nghĩ “cái này trông hay thế”, palette đặt ra từ trước ba đến sáu màu và gán rõ vai trò từng màu: đâu là màu chủ đạo, đâu dùng để nhấn, đâu chỉ làm nền.
Trong làm web, palette xuất hiện ở nhiều chỗ cùng lúc. Brand guideline (tài liệu nhận diện thương hiệu) ghi rõ mã màu HEX. Figma lưu vào Color Styles để toàn team dùng chung. CSS khai báo trong :root thành các biến như --color-primary hay --color-accent. Mỗi khi designer hay developer cần màu, họ lấy từ palette có sẵn chứ không tự nghĩ thêm.
Palette còn liên hệ chặt với wireframe và moodboard ở giai đoạn đầu dự án: moodboard định hướng cảm xúc tổng thể, từ đó rút ra palette, rồi palette mới đổ vào wireframe khi chuyển sang bản thiết kế thật.
Màu chính, màu phụ và màu nhấn: ba vai trò không hoán đổi tùy tiện được
Một palette cơ bản chia thành ba nhóm chức năng. Dùng đúng vai trò thì trang trông gọn và nhất quán. Hoán đổi bừa thì trang loạn dù đang dùng đúng ba màu đó.
| Loại màu | Vai trò | Tỉ lệ xuất hiện | Ví dụ thực tế |
|---|---|---|---|
| Màu chính (primary) | Màu đại diện thương hiệu, dùng ở nút bấm chính, header, tiêu đề trọng yếu | Nhiều nhất, khoảng 60% | Xanh dương #2563EB cho nút “Đặt hàng” |
| Màu phụ (secondary) | Hỗ trợ màu chính, dùng cho chip danh mục, badge, tab, nhãn ít quan trọng hơn | Vừa phải, khoảng 30% | Xanh nhạt #DBEAFE cho chip danh mục |
| Màu nhấn (accent) | Thu hút chú ý ở đúng một điểm: CTA phụ, tooltip, trạng thái hover | Ít nhất, chỉ khoảng 10% | Cam #F97316 cho nút “Xem ngay” phụ |
| Màu trung tính (neutral) | Nền trang, đường phân cách, text thường. Chiếm phần lớn không gian nhưng không phải màu đặc trưng | Hầu hết nền trang | Trắng, xám nhạt, đen dịu |
Cái bẫy hay gặp là dùng màu nhấn quá nhiều. Khi mọi thứ đều được “nhấn”, không thứ gì còn nổi bật nữa. Tự kiểm tra bằng cách nhìn vào trang và hỏi: tôi cần bấm vào đâu trước? Nếu không trả lời được ngay, thường là màu nhấn đang bị dùng sai chỗ hoặc dàn trải quá dày.
Bốn kiểu palette phổ biến: dùng cái nào phụ thuộc mục tiêu, không phải sở thích cá nhân
Màu sắc có mối quan hệ toán học với nhau trên vòng màu (color wheel). Bốn cách kết hợp dưới đây không phải quy tắc cứng bắt buộc, nhưng là điểm khởi đầu tốt để không phải mò mẫm từ đầu.
| Kiểu palette | Nguyên tắc | Phù hợp | Rủi ro |
|---|---|---|---|
| Đơn sắc (monochromatic) | Chỉ dùng một màu, thay đổi độ sáng và độ đậm | Sản phẩm tối giản, thương hiệu cần vẻ tinh tế, cao cấp | Dễ đơn điệu nếu không tạo được tương phản đủ giữa các vùng |
| Tương đương (analogous) | 3-4 màu nằm cạnh nhau trên vòng màu, như xanh lam – xanh lơ – tím | Website spa, sức khỏe, thiên nhiên, cần cảm giác dịu và hài hòa | Thiếu độ tương phản, nội dung dễ “chìm” vào nền |
| Tương phản (complementary) | Hai màu đối nhau hoàn toàn trên vòng màu, như xanh lam và cam | Trang thương mại điện tử, khuyến mãi, cần thu hút sự chú ý mạnh | Lòe loẹt nếu dùng 50/50; phải chọn một màu chủ và một màu nhấn |
| Bộ ba (triadic) | Ba màu chia đều vòng màu, như đỏ, vàng và xanh lam | Sản phẩm thiếu nhi, thương hiệu sáng tạo, cần sự vui nhộn | Khó cân bằng, trông rối nếu ba màu được dùng ngang bằng nhau |
Trong thực tế nhiều project không áp nguyên một kiểu. Designer thường lấy một kiểu làm khung rồi điều chỉnh: palette tương phản nhưng cho màu nhấn chiếm 10% thay vì 50%, kết quả cân và dễ nhìn hơn nhiều.
Palette cảm tính và palette có hệ thống: đây là chỗ phân biệt chuyên nghiệp và không chuyên
Palette cảm tính là cách nhiều người bắt đầu: thấy màu nào trông hay thì thêm vào, thấy chỗ nào “thiếu màu” thì bổ sung thêm màu khác. Sau vài tháng sửa đi sửa lại, trang có thể tích lũy tới 12-15 màu khác nhau mà không ai để ý.
Palette có hệ thống ngược lại: trước khi viết một dòng code hay đặt một hình ảnh, team ngồi lại chốt tối đa sáu màu, ghi rõ mã HEX, mỗi màu có tên và vai trò. Từ đó ai cũng biết “màu nhấn là cái này, không phải cái kia” và không ai tự ý thêm màu mới vào.
Sự khác biệt không chỉ ở thẩm mỹ. Palette có hệ thống tiết kiệm đáng kể thời gian khi cần sửa: muốn đổi màu chủ đạo chỉ thay một biến CSS, thay vì tìm từng chỗ trên hàng chục trang. Với website lớn, đây là khoảng cách giữa “sửa mất một buổi” và “sửa mất cả tuần”.
Công cụ tạo palette: Coolors, Adobe Color và Figma Styles, mỗi cái làm một việc khác nhau
Ba công cụ hay được nhắc tới không cạnh tranh nhau, chúng phục vụ các giai đoạn khác nhau trong quy trình thiết kế.
Coolors (coolors.co) tốt ở khâu khám phá: nhấn Space để sinh palette ngẫu nhiên, khóa màu đã ưng rồi tiếp tục sinh phần còn lại. Phù hợp khi chưa có định hướng rõ và muốn thử nhiều hướng nhanh trong thời gian ngắn.
Adobe Color tốt ở khâu xây palette theo lý thuyết màu: chọn một màu gốc, chọn quy tắc (complementary, triadic…), công cụ tự tính ra các màu còn lại theo đúng vị trí trên vòng màu. Phù hợp khi đã có màu chủ đạo từ logo và cần tìm màu đi kèm nhất quán.
Figma Color Styles không phải công cụ tạo palette mà là nơi lưu và dùng chung palette trong team. Sau khi chốt màu bằng Coolors hay Adobe Color, designer đưa vào Figma Styles với tên vai trò rõ ràng (Primary, Secondary, Accent) để mọi người dùng chung mà không mỗi người một phiên bản.
Palette cũng thường bắt đầu từ moodboard: tập ảnh tham khảo định hướng cảm xúc và phong cách, từ đó rút ra ba bốn màu đặc trưng rồi mới tinh chỉnh tỉ lệ và độ sáng trước khi đưa vào Figma.
Người không làm thiết kế cần quan tâm tới palette ở mức nào?
Nếu bạn là chủ website, không nhất thiết phải hiểu vòng màu hay công thức complementary. Nhưng biết một chút về palette giúp bạn phản hồi đúng chỗ khi duyệt thiết kế.
Thay vì nói “màu trông không đẹp” (designer không biết cần sửa gì), bạn nói được cụ thể hơn: “nút chính và nút phụ trông như nhau, không biết cần bấm vào đâu trước” hoặc “trang dùng quá nhiều màu, nhìn không ra đâu là điểm trọng yếu”. Những câu đó chỉ thẳng vấn đề và designer sửa được ngay mà không cần đoán mò.
Một điều thực tế nữa: nếu bạn đã có logo với màu chủ đạo rõ ràng, đó là điểm khởi đầu tốt rồi. Màu logo thường trở thành màu chính, phần còn lại của palette xây xung quanh để hỗ trợ chứ không cạnh tranh với nó.
Câu hỏi thường gặp về color palette
Một palette cần bao nhiêu màu là đủ?
Thực tế làm việc cho thấy ba đến sáu màu là vùng hợp lý. Ít hơn ba thì khó có đủ đa dạng để phân vai trò; nhiều hơn sáu thì giữ nhất quán rất khó và trang dễ loạn. Màu trung tính (nền, đường kẻ, text thường) thường không tính vào con số này vì chúng không phải màu đặc trưng thương hiệu.
Màu trong logo và màu hiển thị trên web có cần giống nhau không?
Cần thống nhất về hướng nhưng không phải giống pixel-perfect. Logo thường dùng màu cho in ấn (CMYK hoặc Pantone), web dùng HEX hoặc RGB. Khi chuyển đổi thường có độ lệch nhỏ do nền màn hình khác nền giấy. Điều quan trọng là hai cái trông cùng “gia đình màu” khi đứng cạnh nhau, không bị lệch hẳn tông.
Có cần thay palette theo từng chiến dịch không?
Palette thương hiệu nên ổn định để khách nhận ra. Nhưng palette theo chiến dịch thời vụ (khuyến mãi, sự kiện theo mùa) có thể thêm tạm một màu nhấn đặc biệt vào banner và email, miễn giữ màu chính làm neo và không thay toàn bộ trang.
Tìm hiểu thêm về thiết kế UI/UX ở đâu?
Bước xây dựng color palette nằm trong quy trình thiết kế sau giai đoạn duyệt moodboard, trước khi vào wireframe có màu. Xem thêm dịch vụ thiết kế UI/UX của Web22 để biết toàn bộ quy trình.