Phối màu đẹp không nhất thiết phải dựa hoàn toàn vào cảm giác. Các quy tắc phối màu giúp chúng ta biết những màu nào có quan hệ với nhau và vì sao chúng có thể đứng cạnh nhau mà không tạo cảm giác khó chịu.
Phần lớn những cách phối quen thuộc đều có thể nhìn thấy trực tiếp trên bánh xe màu sắc, từ các màu nằm cạnh nhau cho đến những màu nằm đối diện. Bài này sẽ tập trung vào 6 cách phổ biến và dễ áp dụng nhất trong thiết kế.
Bánh xe màu sắc và quy tắc phối màu có liên quan như thế nào?
Hãy hình dung Color Wheel như một chiếc đồng hồ, chỉ khác là thay vì các con số, xung quanh nó là các màu.
Có màu nằm sát cạnh nhau, có màu nằm ở hai phía đối diện, có những nhóm ba hoặc bốn màu nằm cách nhau khá đều. Chính vị trí đó tạo nên phần lớn các quy tắc phối màu mà chúng ta thường gặp.
Ví dụ, xanh dương và xanh ngọc nằm khá gần nhau nên khi đặt cạnh thường tạo cảm giác nhẹ nhàng. Xanh dương và cam lại nằm gần phía đối diện nên tạo tương phản rõ hơn.
Ngoài vị trí trên vòng tròn màu sắc, một màu còn thay đổi theo độ sáng và độ bão hòa. Cùng là xanh dương nhưng xanh nhạt, xanh đậm và xanh rực có thể tạo cảm giác rất khác.
Mình thường xem bánh xe màu như một bản đồ. Nó không quyết định thiết kế phải dùng màu gì, nhưng giúp mình biết nếu bắt đầu từ một màu thì có thể đi theo hướng nào tiếp theo.
6 quy tắc phối màu cơ bản trong thiết kế
Không có một quy tắc phối màu trong thiết kế nào phù hợp với mọi trường hợp. Có lúc mình muốn bảng màu thật yên, có lúc lại cần một màu đủ mạnh để nút bấm hoặc tiêu đề bật lên.
Chọn kiểu phối màu trong công cụ dưới đây để thấy rõ hơn:
Sáu quy tắc dưới đây khác nhau chủ yếu ở vị trí của các màu trên Color Wheel.
1. Phối màu đơn sắc: Monochromatic
Phối màu đơn sắc bắt đầu từ một màu chính rồi sử dụng các phiên bản sáng hơn, tối hơn hoặc bớt rực hơn của màu đó.
Ví dụ, nếu màu chính là xanh dương, bạn có thể dùng xanh rất nhạt cho nền, xanh vừa cho các khối nội dung và xanh đậm cho tiêu đề hoặc nút bấm.
Cách này khá giống việc mặc một bộ đồ cùng tông màu nhưng khác sắc độ. Nhìn chung dễ kiểm soát và ít xảy ra tình trạng các màu tranh nhau sự chú ý.
Mình thích Monochromatic khi thiết kế cần sạch và có một màu nhận diện rõ. Điểm yếu là nếu các sắc độ quá giống nhau, tổng thể dễ trở nên hơi đều và thiếu điểm hút mắt.
2. Phối màu tương đồng: Analogous
Phối màu tương đồng sử dụng những màu nằm gần nhau trên bánh xe màu sắc.
Ví dụ, xanh dương, xanh ngọc và xanh lá có thể tạo thành một nhóm màu tương đồng. Vì chúng ở gần nhau nên sự chuyển đổi giữa các màu thường khá nhẹ.
Analogous phù hợp với hình minh họa, poster hoặc giao diện muốn có nhiều màu nhưng vẫn giữ chung một không khí.
Mình thường chọn một màu làm chính rồi để hai màu còn lại hỗ trợ. Nếu cả ba màu đều xuất hiện với mức độ ngang nhau, thiết kế đôi khi nhìn hơi dàn trải.
3. Phối màu bổ túc: Complementary
Phối màu bổ túc sử dụng hai màu nằm đối diện nhau trên Color Wheel.
Một số cặp quen thuộc là xanh dương với cam, đỏ với xanh lá, vàng với tím. Khoảng cách lớn trên bánh xe khiến hai màu tạo tương phản rõ rệt.
Đây là lý do bạn thường thấy một màu khá yên làm nền, trong khi màu đối diện được dùng cho nút bấm, tiêu đề hoặc chi tiết cần nổi bật.
Theo mình, Complementary rất dễ cho hiệu quả rõ ràng nhưng cũng dễ bị dùng quá tay. Hai màu bổ túc cùng rực và cùng chiếm diện tích lớn có thể khiến mắt hơi mệt.
4. Phối màu bộ ba: Triadic
Phối màu bộ ba, hay Triadic, sử dụng ba màu nằm cách đều nhau trên bánh xe màu.
Nếu nối ba điểm đó lại, chúng gần giống một hình tam giác.
Triadic cho nhiều màu hơn Complementary nhưng vẫn có một cấu trúc khá rõ. Nó phù hợp với infographic, hình minh họa, nhận diện trẻ trung hoặc các thiết kế cần nhiều vùng màu khác nhau.
Mình sẽ không cho cả ba màu cùng làm nhân vật chính. Một màu nên xuất hiện nhiều hơn, hai màu còn lại dùng cho các phần nhỏ hoặc điểm cần chú ý.
5. Phối màu bổ túc xen kẽ: Split Complementary
Phối màu bổ túc xen kẽ bắt đầu bằng một màu chính. Sau đó, thay vì chọn màu nằm đối diện trực tiếp, chúng ta chọn hai màu nằm hai bên màu đối diện đó.
Nghe hơi khó khi đọc, nhưng nhìn trên bánh xe màu thì rất dễ hiểu.
Cách này vẫn giữ được tương phản nhưng cảm giác thường nhẹ hơn Complementary. Nếu bạn muốn thiết kế có điểm nhấn mà không muốn hai màu đối chọi quá rõ, Split Complementary là một lựa chọn khá dễ dùng.
Mình thấy đây là cách phối khá thân thiện với người mới vì nó cho nhiều lựa chọn hơn nhưng vẫn có hướng rõ ràng.
6. Phối màu bộ bốn: Tetradic
Phối màu bộ bốn, hay Tetradic, sử dụng bốn màu nằm ở những vị trí tạo thành một tứ giác trên vòng tròn màu sắc.
Có thể hình dung nó như hai cặp màu bổ túc cùng xuất hiện trong một bảng màu.
Vì có bốn màu nên Tetradic phù hợp với poster, illustration hoặc thiết kế có nhiều nhóm nội dung. Đổi lại, bạn phải kiểm soát vai trò của từng màu kỹ hơn.
Mình ít khi để cả bốn màu xuất hiện ngang nhau. Chọn một màu chủ đạo rõ ràng sẽ giúp tổng thể dễ nhìn hơn rất nhiều.
Nên chọn quy tắc phối màu nào?
Không có cách phối màu nào luôn tốt hơn quy tắc khác. Cách chọn phụ thuộc vào cảm giác bạn muốn thiết kế tạo ra.
Muốn đơn giản và thống nhất, có thể bắt đầu với Monochromatic. Muốn nhẹ nhàng hơn nhưng có nhiều màu, Analogous khá hợp. Khi cần tương phản rõ, Complementary dễ tạo điểm chú ý.
Triadic phù hợp nếu cần ba màu có khoảng cách cân bằng. Split Complementary cho tương phản nhưng bớt gay gắt. Tetradic phù hợp khi thiết kế cần nhiều màu và bạn đã biết màu nào sẽ đóng vai chính.
Mình thường không chọn quy tắc trước rồi ép thiết kế đi theo. Mình hay bắt đầu bằng màu chính, sau đó xem quy tắc nào cho ra nhóm màu phù hợp với cảm giác mình đang cần.
Màu chủ đạo, màu phụ và màu nhấn
Hiểu đúng nguyên tắc phối màu trong thiết kế mới chỉ là một nửa câu chuyện. Sau đó vẫn phải quyết định màu nào xuất hiện nhiều và màu nào chỉ nên xuất hiện một chút.
Màu chủ đạo thường tạo ấn tượng chung cho thiết kế. Nó có thể nằm ở nền, khu vực lớn hoặc những thành phần xuất hiện thường xuyên.
Màu phụ hỗ trợ màu chính và giúp chia các khu vực khác nhau.
Màu nhấn thường được dùng ít hơn nhưng dễ nhìn thấy, chẳng hạn nút bấm, liên kết, icon hoặc một chi tiết cần kéo ánh mắt người xem tới.
Mình nghĩ đây là chỗ nhiều bảng màu đẹp bị dùng chưa tốt. Có năm màu đẹp không có nghĩa là năm màu đó phải xuất hiện với diện tích giống nhau.
Quy tắc 60 30 10 có phải là một quy tắc phối màu không?
Có thể xem 60 30 10 là một quy tắc liên quan đến phối màu, nhưng nó giải quyết một câu hỏi khác.
Các quy tắc như Analogous hay Complementary giúp trả lời:
Những màu nào nên đi cùng nhau?
Còn 60 30 10 trả lời:
Sau khi chọn được màu rồi, nên dùng chúng nhiều hay ít?
Cách hiểu đơn giản là khoảng 60 phần trăm dành cho màu chủ đạo, 30 phần trăm cho màu phụ và 10 phần trăm cho màu nhấn.
Mình xem con số này như một gợi ý hơn là luật bắt buộc. Một giao diện nhỏ, poster hay hình minh họa có thể cần tỷ lệ khác, miễn là người xem vẫn nhận ra đâu là màu chính và đâu là điểm nhấn.
Những lỗi thường gặp khi phối màu
Một lỗi khá phổ biến là thấy nhiều màu đẹp rồi muốn đưa tất cả vào cùng một thiết kế. Kết quả thường giống như một căn phòng có quá nhiều đồ trang trí, từng món đều ổn nhưng đặt cạnh nhau lại khó biết nên nhìn vào đâu trước.
Một lỗi khác là không xác định màu chủ đạo, khiến các màu có sức nặng gần như nhau.
Độ sáng và độ bão hòa cũng dễ bị bỏ quên. Hai màu có quan hệ đúng trên Color Wheel chưa chắc đã đẹp khi cả hai đều quá rực hoặc quá tối.
Với phối màu bổ túc, dùng hai màu mạnh với tỷ lệ ngang nhau cũng dễ làm thiết kế trở nên gắt.
Cuối cùng là độ tương phản giữa chữ và nền. Một bảng màu nhìn đẹp khi đặt cạnh nhau chưa chắc đã giúp chữ dễ đọc.
Mình thường kiểm tra phần này sau cùng vì chỉ cần một dòng chữ khó đọc là cảm giác về cả thiết kế có thể giảm đi khá nhiều.
Cách áp dụng quy tắc phối màu vào thiết kế
Nếu chưa quen phối màu trong thiết kế, bạn có thể dùng Color Wheel rồi đi theo một trình tự rất đơn giản.
- Chọn một màu chính phù hợp với thiết kế.
- Chọn một trong các quy tắc phối màu dựa trên Color Wheel.
- Lấy các màu liên quan rồi thử chúng ở nhiều độ sáng khác nhau.
- Xác định màu chủ đạo, màu phụ và màu nhấn.
- Kiểm tra lại độ tương phản giữa chữ, nền và những thành phần quan trọng.
Mình thích cách làm này vì nó vẫn để lại nhiều khoảng cho cảm giác cá nhân. Bánh xe màu chỉ giúp chọn hướng, còn quyết định cuối cùng vẫn nằm ở mắt người thiết kế.
Khi đã chọn được bảng màu phù hợp, bạn có thể thử áp dụng trực tiếp vào ảnh hoặc thiết kế bằng Photoshop miễn phí để xem các màu hoạt động với nhau như thế nào trong thực tế.
Tóm tắt 6 quy tắc phối màu
| Quy tắc | Quan hệ màu | Cảm giác thường gặp |
|---|---|---|
| Monochromatic | Một màu với nhiều sắc độ | Đồng nhất, đơn giản |
| Analogous | Các màu nằm gần nhau | Nhẹ nhàng, hài hòa |
| Complementary | Hai màu đối diện | Tương phản rõ |
| Triadic | Ba màu cách đều | Cân bằng, nhiều màu |
| Split Complementary | Một màu và hai màu cạnh màu bổ túc | Tương phản vừa |
| Tetradic | Bốn màu tạo thành tứ giác | Phong phú, nhiều lựa chọn |
Mình nghĩ cách dễ nhất để nhớ các quy tắc phối màu không phải là học thuộc tên tiếng Anh. Hãy nhìn chúng trên bánh xe màu sắc vài lần, bạn sẽ nhanh chóng nhận ra màu nào nằm cạnh nhau, màu nào đối diện và vì sao một nhóm màu lại cho cảm giác khác nhóm còn lại.