Nguyên tắc phối màu cơ bản trong thiết kế đồ họa cho người mới
Mục lục bài viết
1. Bánh xe màu sắc và các màu cơ bản
Bánh xe màu sắc (Color Wheel) là công cụ nền tảng của phối màu, gồm 12 màu.
Màu cơ bản (Primary): Đỏ, Xanh dương, Vàng — không thể pha từ màu khác.
Màu thứ cấp (Secondary): Xanh lá (Vàng+Xanh dương), Cam (Đỏ+Vàng), Tím (Đỏ+Xanh dương) — pha từ 2 màu cơ bản.
Màu tam cấp (Tertiary): pha từ 1 cơ bản + 1 thứ cấp.
Nhiệt độ màu: Màu nóng (đỏ, cam, vàng) — năng động, ấm áp, thu hút sự chú ý. Màu lạnh (xanh dương, xanh lá, tím) — yên bình, chuyên nghiệp, tin cậy. Hiểu bánh xe màu giúp bạn chọn màu phối hợp một cách có chủ đích, không 'mò mẫm'.
2. Các bảng phối màu hài hòa (Color Harmonies)
(1) Monochromatic — một màu chính + các sắc độ khác nhau (đậm, nhạt, pastel). Dễ phối, an toàn, chuyên nghiệp nhưng có thể đơn điệu.
(2) Analogous — các màu liền kề trên bánh xe (xanh dương, xanh lá, xanh mint). Hài hòa tự nhiên, phù hợp thiết kế nhẹ nhàng.
(3) Complementary — hai màu đối diện trên bánh xe (đỏ-xanh lá, xanh dương-cam). Tương phản mạnh, nổi bật.
(4) Triadic — ba màu cách đều nhau. Cân bằng và sống động.
(5) Split-Complementary — một màu + hai màu lân cận của màu bổ sung. Linh hoạt, dễ chịu hơn complementary.
3. Cách chọn màu sắc cho thương hiệu và website
Bước 1: Xác định tính cách thương hiệu — trẻ trung (cam, hồng, xanh mint), sang trọng (đen, vàng gold, trắng), công nghệ (xanh dương, xám, trắng).
Bước 2: Chọn màu chính (Primary) — 1 màu đại diện thương hiệu.
Bước 3: Chọn 1-2 màu phụ (Secondary) — hỗ trợ màu chính.
Bước 4: Chọn màu nền (Background) — thường là trắng, xám nhạt, hoặc dark.
Bước 5: Chọn màu nhấn (Accent) — màu nổi bật cho nút CTA, link, thông báo.
Quy tắc 60-30-10: 60% màu chủ đạo (nền), 30% màu phụ, 10% màu nhấn.
Dùng công cụ: Coolors.co, Adobe Color, Paletton để tạo bảng màu.
4. Lưu ý về tương phản và khả năng tiếp cận (Accessibility)
Tương phản màu ảnh hưởng trực tiếp đến khả năng đọc. WCAG (Web Content Accessibility Guidelines) yêu cầu: (1) Văn bản thường: tỷ lệ tương phản tối thiểu 4.5:1;
(2) Văn bản lớn (18px+): 3:1;
(3) Các thành phần UI (icon, nút): 3:1. Dùng công cụ WebAIM Contrast Checker để kiểm tra.
Mẹo: đen trên nền trắng luôn an toàn.
Tránh: xanh dương nhạt trên nền trắng (thiếu tương phản), đỏ trên xanh lá (người mù màu không phân biệt được), xám trên xám (khó đọc).
Nguyên tắc vàng: thiết kế cho tất cả người dùng, kể cả người khiếm thị, mù màu và người lớn tuổi.
🙋 Câu hỏi thường gặp
Có bao nhiêu màu trong một thiết kế là đủ?
Tối đa 3-4 màu: 1 màu chính, 1-2 màu phụ, 1 màu nhấn. Quá nhiều màu gây rối mắt, thiếu chuyên nghiệp. Dùng các sắc độ (shade, tint, tone) của cùng một màu để tạo chiều sâu.
Màu pastel có phù hợp cho thiết kế chuyên nghiệp?
Có, nếu đúng ngành.
Pastel phù hợp: spa, làm đẹp, thời trang trẻ em, food blog, ứng dụng sức khỏe.
Không phù hợp: tài chính, công nghệ, luật — các ngành cần sự nghiêm túc, tin cậy.
Làm sao để biết màu nào hợp với nhau màu nào không?
Dùng bánh xe màu và các công thức color harmonies. Hoặc dùng Coolors.co — bấm Space để random palette. Pinterest cũng là nguồn cảm hứng tuyệt vời. Theo thời gian, mắt bạn sẽ tự cảm nhận được.
