Lý thuyết màu sắc trong thiết kế: Cách phối màu chuẩn cho người mới

Màu sắc là thứ người xem cảm nhận trước cả khi đọc một chữ nào. Nó cũng là thứ khiến bản thiết kế của sinh viên dễ bị nhận ra nhất: quá nhiều màu, màu nào cũng rực, và không có màu nào thực sự nổi bật vì tất cả đều đang tranh nhau.

Tin tốt: phối màu không phải năng khiếu bẩm sinh. Nó là một hệ thống có quy tắc, và bạn có thể học được trong vài buổi.

Hiểu màu theo HSL thay vì học thuộc mã màu

Người mới thường chọn màu bằng cách nhấp bừa vào bảng màu hoặc chép mã hex từ mạng. Cách làm chuyên nghiệp là tư duy theo ba thuộc tính:

Vì sao điều này quan trọng: khi cần một sắc thái đậm hơn của màu chủ đạo, bạn chỉ cần giảm lightness thay vì đi tìm một màu khác. Nhờ vậy cả bảng màu luôn "cùng một họ".

Mẹo cứu bố cục: phần lớn thiết kế bị rối không phải vì sai hue mà vì mọi màu đều bão hòa cao. Hạ saturation của các màu phụ xuống, giữ saturation cao chỉ cho màu nhấn — thiết kế lập tức dễ chịu hơn.

Bánh xe màu và 6 công thức phối màu

1. Đơn sắc (Monochromatic)

Một hue duy nhất, biến thiên độ sáng và độ bão hòa. Rất khó sai, rất dễ nhìn chuyên nghiệp. Phù hợp cho slide báo cáo, hồ sơ năng lực, portfolio.

Hạn chế: dễ đơn điệu. Khắc phục bằng cách tăng chênh lệch độ sáng giữa các cấp.

2. Tương đồng (Analogous)

Ba màu nằm cạnh nhau trên bánh xe (ví dụ lam – lam lục – lục). Cho cảm giác hài hòa, tự nhiên. Chọn một màu làm chủ đạo, hai màu còn lại là phụ trợ, đừng chia đều.

3. Bổ túc (Complementary)

Hai màu đối diện nhau (lam – cam, đỏ – lục). Tương phản mạnh nhất, hợp khi cần một nút bấm hoặc thông điệp nổi bật.

Cảnh báo: đừng đặt hai màu bổ túc bão hòa cao sát nhau ở cùng diện tích lớn — mắt sẽ bị rung. Cách dùng đúng là 90% một màu, 10% màu kia làm điểm nhấn.

4. Bổ túc xen kẽ (Split Complementary)

Một màu chính cộng hai màu nằm hai bên màu bổ túc của nó. Giữ được độ tương phản mà bớt gay gắt. Đây là công thức an toàn nhất cho người mới muốn dùng nhiều hơn hai màu.

5. Bộ ba (Triadic)

Ba màu cách đều nhau trên bánh xe. Sống động, hợp với sản phẩm cho trẻ em, sự kiện, thể thao. Bắt buộc phải chọn một màu chủ đạo, nếu không sẽ hỗn loạn.

6. Trung tính cộng một điểm nhấn

Không nằm trong sách vở kinh điển nhưng là công thức được dùng nhiều nhất trong thiết kế số hiện đại: nền và chữ dùng thang xám, chỉ một màu thương hiệu dùng cho hành động chính. Nếu bạn đang bí, hãy dùng công thức này.

Quy tắc 60–30–10: tỷ lệ diện tích quan trọng hơn việc chọn màu

Ngay cả bảng màu đẹp cũng sẽ hỏng nếu chia diện tích sai. Quy tắc mượn từ thiết kế nội thất:

• 60% — màu nền chủ đạo (thường là trung tính: trắng, xám rất nhạt).
• 30% — màu phụ, dùng cho các khối nội dung, tiêu đề, vùng nhấn nhẹ.
• 10% — màu nhấn, chỉ dành cho nút bấm chính, cảnh báo, số liệu quan trọng.

Sai lầm kinh điển của sinh viên là làm ngược: 60% màu thương hiệu rực rỡ phủ kín nền, khiến không còn chỗ nào để tạo điểm nhấn.

Xây bảng màu cho đồ án trong 15 phút

1. Chọn màu thương hiệu (1 hue). Bắt nguồn từ nội dung: giáo dục và công nghệ hay dùng lam, sức khỏe và môi trường dùng lục, ẩm thực dùng đỏ/cam.
2. Tạo 5 cấp độ sáng của màu đó (rất nhạt → rất đậm) để dùng cho nền nhạt, viền, chữ, trạng thái hover.
3. Tạo thang trung tính 6 cấp từ gần trắng đến gần đen. Đây là bộ màu bạn sẽ dùng nhiều nhất.
4. Thêm màu trạng thái: xanh lá (thành công), đỏ (lỗi), vàng (cảnh báo). Bắt buộc phải có nếu sản phẩm có biểu mẫu.
5. Kiểm tra tương phản. Mọi cặp chữ/nền phải đạt tối thiểu 4.5:1 với chữ thường, 3:1 với chữ lớn từ 24px, theo tiêu chuẩn WCAG.
6. Đặt tên theo vai trò, không theo màu. Gọi là "màu chính", "màu nền phụ", "màu cảnh báo" thay vì "xanh dương 2". Sau này đổi màu bạn không phải sửa tên khắp nơi.

Bước 6 chính là bước đầu tiên của tư duy design token — xem thêm bài Design System là gì.

Tâm lý màu sắc: dùng có chừng mực

Màu có gợi cảm xúc, nhưng đừng tin vào những bảng "màu đỏ = đam mê" một cách máy móc. Ý nghĩa màu phụ thuộc mạnh vào văn hóa và ngữ cảnh: màu trắng gắn với đám cưới ở phương Tây nhưng gắn với tang lễ ở nhiều nước Á Đông; màu đỏ ở Việt Nam gắn với may mắn, trong khi trong giao diện phần mềm lại mặc định là lỗi.

Điều đáng nhớ: ngữ cảnh mạnh hơn ý nghĩa lý thuyết. Hãy nhìn xem đối thủ và lĩnh vực của bạn đang dùng màu gì, rồi quyết định hòa nhập hay khác biệt.

RGB, CMYK, HEX: lý do bản in khác màn hình

Không gian màu RGB rộng hơn CMYK, nên những màu neon rực rỡ trên màn hình gần như chắc chắn sẽ xỉn đi khi in. Nếu đồ án của bạn phải in:

• Đặt file ở chế độ CMYK ngay từ đầu, đừng chuyển đổi ở phút cuối.
• Tránh các màu bão hòa cực cao.
• In thử một bản trước khi in toàn bộ.
• Nhớ rằng màu trên máy in phun ở nhà và máy in offset ở tiệm cũng khác nhau.

7 lỗi phối màu thường gặp

1. Dùng quá nhiều hue. Giới hạn: 1 màu chính + 1 màu nhấn + thang trung tính.
2. Không có màu trung tính. Thiết kế không có chỗ cho mắt nghỉ.
3. Chữ xám nhạt trên nền trắng. Nhìn tinh tế trên MacBook, không đọc được trên máy chiếu.
4. Dùng đen tuyệt đối (#000000) cho chữ. Xám rất đậm thường dễ chịu hơn.
5. Chỉ dùng màu để truyền đạt thông tin. Người mù màu chiếm khoảng 8% nam giới; hãy kèm theo icon hoặc nhãn chữ.
6. Gradient cầu vồng. Chuyển sắc giữa hai màu gần nhau trên bánh xe luôn an toàn hơn.
7. Đổi màu tùy hứng giữa các màn hình. Nhất quán quan trọng hơn đẹp cục bộ.

Bài tập thực hành

1. Lấy một poster bạn đã làm, giảm toàn bộ về thang xám, sau đó chỉ tô lại đúng một màu nhấn. So sánh hai bản.
2. Chọn ba thương hiệu bạn thích, lấy mẫu (eyedropper) bảng màu của họ và đếm xem thực sự họ dùng bao nhiêu hue.
3. Thiết kế lại một slide bằng đúng công thức 60–30–10 và ghi rõ mỗi màu chiếm vai trò gì.
4. Kiểm tra toàn bộ cặp màu chữ/nền trong đồ án bằng công cụ đo tương phản, liệt kê những chỗ chưa đạt 4.5:1.

Câu hỏi thường gặp

Nên dùng bao nhiêu màu trong một thiết kế?

Với người mới: một màu chính, một màu nhấn và một thang trung tính là đủ cho hầu hết trường hợp. Thêm màu chỉ khi có lý do rõ ràng như phân loại danh mục hoặc thể hiện trạng thái.

Lấy bảng màu ở đâu cho nhanh?

Bạn có thể tham khảo các bộ màu có sẵn từ Adobe Color hoặc Coolors, nhưng đừng dán nguyên vào bài. Hãy chọn một hue rồi tự dựng thang độ sáng — cách này cho bạn bộ màu vừa vặn với nhu cầu thay vì 5 màu ngẫu nhiên.

Làm sao biết hai màu có "hợp" nhau không?

Kiểm tra hai điều: chúng có cùng mức độ bão hòa tương đối không, và độ sáng của chúng có đủ chênh lệch không. Hai màu cùng độ sáng đặt cạnh nhau luôn gây khó chịu, dù hue có hợp lý đến đâu.

Thiết kế giao diện tối (dark mode) có gì khác?

Không phải cứ đảo ngược màu là xong. Trên nền tối, màu bão hòa cao sẽ bị "chói", nên cần giảm saturation. Nền nên là xám rất đậm chứ không phải đen tuyệt đối, và bóng đổ gần như vô dụng — hãy dùng chênh lệch độ sáng để phân lớp.

Màu thương hiệu của trường/CLB đã có sẵn thì làm sao phối?

Coi màu đó là màu chính bắt buộc, rồi xây thang trung tính và chọn màu nhấn theo công thức bổ túc xen kẽ. Bạn không cần dùng màu trường ở diện tích lớn — chỉ cần dùng đúng chỗ để nhận diện.

Màu sắc ảnh hưởng thế nào đến điểm đồ án?

Hội đồng hiếm khi chấm "màu đẹp", nhưng họ chấm được tính nhất quán, khả năng đọc và mức độ chuyên nghiệp — cả ba đều bị màu sắc chi phối trực tiếp. Một bảng màu tiết chế, tương phản đạt chuẩn gần như luôn được đánh giá cao hơn bảng màu rực rỡ nhưng lộn xộn.

Nguồn tham khảo

• Nguyên lý màu sắc – Hướng Nghiệp Á Âu
• WebAIM: Contrast and Color Accessibility
• WCAG 2.2 – W3C
• Interaction Design Foundation – Visual Design

Kết luận

Phối màu giỏi không phải là biết nhiều màu, mà là biết hạn chế. Một hue chính, một thang trung tính, một điểm nhấn, cộng với tỷ lệ diện tích hợp lý — đó là công thức tạo ra phần lớn những thiết kế trông chuyên nghiệp mà bạn ngưỡng mộ.

Trước khi nộp bất kỳ bài nào, hãy chạy hai bài kiểm tra nhanh: chuyển sang đen trắng xem còn phân cấp không, và đo tương phản xem chữ có đọc được không. Hai bước này loại bỏ được đa số lỗi màu sắc.

Bài viết liên quan

• Typography cơ bản cho người mới
• Thiết kế dễ tiếp cận và tiêu chuẩn WCAG
• Design System là gì
• 7 yếu tố và nguyên lý cơ bản trong thiết kế đồ họa