Nguyên tắc tạo màu sắc

Có những bình minh có màu xanh lá cây trong lúc những buổi sớm khác có màu xanh da trời, màu cam hay đỏ tía… Vì sao? Khi những phần tử đến trái đất bị va chạm với khí quyển, năng lượng được phát ra dưới dạng ánh sáng. Màu của ánh sáng đó là do khí tạo nên. Màu tỏa ra bởi khí gọi là phổ của nó. Mỗi chất khí chỉ phát ra một màu duy nhất, như chỉ tay của ta. Có chất khí chỉ phát ra một màu duy nhất, có chất lại phát ra nhiều màu

Nguyên tắc chung

Khi ánh sáng trắng chiếu tia sáng đến một trái cà chín màu đỏ, vỏ của nó hấp thụ tất cả mọi màu, trừ màu đỏ. Ánh sáng màu đỏ chiếu đến mắt ta và ta thấy trái cà màu đỏ. Ta thấy một vật màu trắng khi vật đó phản chiếu ánh sáng của tất cả mọi màu đến mắt ta . Vì những màu này tạo thành ánh sáng trắng nên ta thấy vật đó màu trắng. Một vật có vẻ màu đen khi nó hấp thụ tất cả mọi màu của ánh sáng trắng nên không phản chiếu đến mắt ta. Vì không có ánh sáng pản chiếu đến mắt ta nên ta thấy nó màu đen. Một vật mà ánh sáng đi xuyên qua mà không giữ lại một màu gì cả, cũng không phản chiếu lại màu nào hết có nghĩa là vật đó trong suốt.

Mắt ta nhạy cảm với màu nào?

Màu là cảm giác do kết quả của sự tương tác giữa ánh sáng và tế bào mắt. Mỗi độ dài sóng được kết hợp với mỗi cảm giác sinh lý khác nhau mà ta gọi là “màu sắc”: màu tím cho những độ dài sóng khoảng 0.4 micron, màu xanh khoảng 0.5 micron, màu vàng khoảng 0.55 micron, màu đỏ trên 0.6 micron…

Mắt ta nhạy cảm với ánh sáng thấy được. Ánh sáng mặt trời được gọi là ánh “sáng trắng”. Ánh sáng này thật ra là tổng hợp của nhiều màu căn bản gây cho mọi tế bào mắt của ta có cảm giác ánh sáng màu trắng. Nếu một hay nhiều màu căn bản thiếu mất thì mắt nhận được một màu chớ không còn màu trắng nữa.

Nếu thiếu những màu (vì vật được chiếu hấp thụ ) xanh lá cây, vàng, đỏ thì mắt sẽ thấy màu chàm (xanh bleu).

Nếu thiếu những màu chàm, xanh lá xây, vàng, mmắt sẽ thấy màu đỏ

Nếu thiếu màu tím, chàm, mắt sẽ thấy màu vàng.

Khi ánh sáng trắng chiếu tia sáng đến một trái cà chín màu đỏ, vỏ của nó hấp thụ tất cả mọi màu, trừ màu đỏ. Ánh sáng màu đỏ chiếu đến mắt ta và ta thấy trái cà màu đỏ.

Ta thấy một vật màu trắng khi vật đó phản chiếu ánh sáng của tất cả mọi màu đến mắt ta . Vì những màu này tạo thành ánh sáng trắng nên ta thấy vật đó màu trắng.

Một vật có vẻ màu đen khi nó hấp thụ tất cả mọi màu của ánh sáng trắng nên không phản chiếu đến mắt ta. Vì không có ánh sáng pản chiếu đến mắt ta nên ta thấy nó màu đen.

Một vật mà ánh sáng đi xuyên qua có nghĩa là vật đó trong suốt.

Ta lấy thí dụ đem cái áo đen và áo trắng ra phơi nắng, áo đen nóng hơn áo trắng nhiều là vì áo đen hấp thụ mọi ánh sáng trắng từ mặt trời đến. Vì ánh sáng mang năng lượng truyền cho áo nên áo nóng.

Vậy thì màu đen không phải là một màu vì từ nó không phát ra một tia sáng nào.

Màu trắng cũng không phải là một màu vì nó là một tập hợp của nhiều màu.

Tuy nhiên về mặt nghệ thuật thì màu đen và trắng cũng đóng một vai trò y hệt những màu sác thật sự.

Một số cách dùng màu sắc sử dụng sai khi thiết kế

Màu sắc là công cụ tuyệt vời để thu hút sự chú ý của người dùng, tạo cho họ sự thích thú về mặt hình ảnh và sự tương phản để cải thiện trải nghiệm đọc. Ngoài ra, màu sắc cũng là trung tâm của nhiều xu hướng thiết kế, bao gồm các phong cách thiết kế Material và phẳng (flat). Đây là lý do vì sao mà bất kỳ một sự sai sót trong cách chọn màu nào cũng đều dẫn tới những tác động xấu đối với trải nghiệm người dùng, nghiêm trọng hơn là giảm lượng khách hàng tiếp cận web.

Mặc dù nhận thức rõ điều này nhưng trong quá trình thiết kế, nhiều Designer không tránh khỏi việc nhầm lẫn hoặc hiểu sai về ý nghĩa màu sắc nên sử dụng sai màu cho giao diện. Dưới đây là tổng hợp 8 màu cần tránh khi thiết kế web mà các Designer cần chú ý.

1. Màu neon

Màu neon là màu phản quang, là những gam màu chói, cực kỳ bắt mắt như vàng sáng, xanh nõn chuối, màu hồng rực hay tím hồng và cũng được sử dụng khá nhiều trong thiết kế. Tuy nhiên, chính vì sự bắt mắt này nên nó dễ gây chói, tạo cảm giác khó chịu cho người đọc, thậm chí là “chảy nước mắt”.

Khi sử dụng màu neon cho text, các con chữ quá “sáng” khiến cho khả năng đọc và nắm bắt thông tin bị giảm sút. Nếu sử dụng cho nền, màu neon cũng “nổi hơn” nên dễ khiến người nhìn bị phân tán khỏi thông điệp chính của thiết kế.

Cách sửa: Giảm độ sáng của các màu neon để chúng trở nên tối hơn và nhẹ nhàng hơn.

2. Các màu “rung”

Khi các màu sắc có độ bão hòa cao được kết hợp với nhau thì chúng dễ tạo ra “hiệu ứng rung”. Cụ thể, nhìn vào bạn sẽ có cảm giác như chúng đang di chuyển (dù rất chậm) khiến hình ảnh hoặc text bị nhòe hoặc sáng rực.

Tương tự như màu neon, sử dụng màu sắc như vậy cũng sẽ khiến cho người đọc không cảm thấy thoải mái. Thế nên, chúng rất ít khi được dùng ngoại trừ áp dụng cho hiệu ứng tiếng thét trong quảng cáo. Kết quả, người xem sẽ có cảm giác “không hài lòng, không thích và muốn tránh xa”.

Một ví dụ điển hình đó là sự kết hợp của màu đỏ tươi và màu xanh lá cây trong thiết kế “Giáng sinh” nhưng lại được sử dụng rất phổ biến. Cách kết hợp này gây ra vấn đề về khả năng tiếp cận vì chúng khiến cho những người bị mù màu không thể nhận biết được.

Cách sửa: Nếu buộc phải sử dụng các cách kết hợp màu dễ gây hiệu ứng rung thì tốt nhất là tách chúng ra bằng một thứ gì khác ở giữa, chẳng hạn như một màu trung lập.

3. Sáng trên sáng

Đây là một trong những lỗi sai khi dùng màu sắc nhiều người mắc phải nhất, có lẽ là bởi vì nó hiệu quả với các quảng cáo trên báo in hoặc có thể là nó thích hợp với một số tình huống nào đó. Tuy nhiên, những cách kết hợp màu sáng với màu sáng thường rất khó đọc, đa phần là thế.

Chẳng hạn, tiêu đề được thiết kế với text màu trắng, nằm trên một hình ảnh nhưng lại được đặt ở vị trí sáng trên hình ảnh. Nếu có bất kỳ một chữ nào trong tiêu đề không thể hoặc khó nhận dạng thì bạn cần phải nghĩ lại một cách nghiêm túc.

Cách sửa: Có rất nhiều cách để sửa chữa vấn đề này, ví dụ: (1) chọn hình ảnh với background có màu nhất quán, (2) sử dụng hộp màu cho text ở phía trên hình ảnh với nhiều biến thể màu sắc, (3) xem xét việc sử dụng overlay là hình ảnh đầy màu sắc để tăng độ tương phản giữa background và các yếu tố thuộc về text.

4. Bất cứ thứ gì có màu cầu vồng
Các màu sắc có màu cầu vồng không hiệu quả. Khi sử dụng phong cách này cho thiết kế website thì bạn đã phá vỡ rất nhiều quy tắc về màu sắc.

Các cách kết hợp màu sắc cầu vồng quá mạnh và quá nổi. Điều này có thể giúp thu hút sự chú ý của người dùng lần đầu nhưng về sau, chắc chắn sớm muộn gì họ cũng sẽ phát hiện ra là không thể đọc được nội dung thông điệp.

Cách sửa: Nếu muốn sử dụng bảng màu rộng cho website thì hãy lựa chọn các phong cách Card (thiết kế web theo dạng thẻ) hoặc Color Block (thiết kế web theo các khối màu). Chúng cho phép bạn sử dụng linh hoạt các màu sắc nhưng vẫn đảm bảo tính tổ chức và sự mạch lạc.

5. Màu sáng trên màu sáng/màu tối trên màu tối
Giống như màu sáng trên màu sáng, sử dụng cùng một độ bão hòa cho các màu sắc cũng sẽ gây ra nhiều vấn đề. Tốt nhất là nên tránh chúng.

Nếu nghĩ rằng bạn sẽ không bao giờ mắc phải lỗi này thì hãy cẩn trọng, nhất là khi dùng các bảng màu đơn sắc (monotone).

Cách sửa: Nghĩ về độ tương phản. Nếu muốn dùng nhiều màu tối hoặc nhiều màu sáng thì hãy xem chúng như các lựa chọn cho các màn hình trên các site cho chép cuộn (Scroll) trang.

6. Màu đen (“K” Black)

Nếu thường xuyên phải thiết kế cho các dự án in và web đồng thời thì nhiều Designer sẽ mắc phải lỗi này: đó chính là sử dụng các màu đen thuần khiết (Pure black). Pure Black còn được gọi là “K” Black do nó chỉ có duy nhất một màu (#000000). Màu này “phẳng”.

Trong thực tế, tất cả các màu đen được lọc với các sắc thái màu (hue) khác để tạo sự phong phú. Ngay cả lông của một con quạ cũng thường trông có màu xanh hoặc màu tím nếu bạn nhìn nó vào ban ngày.

Cách sửa: Càng làm cho màu đen bớt đen “thuần khiết” hơn thì các màu sắc được hòa trộn với nó càng dễ nhận thấy. Tuy nhiên, khi kết hợp màu khác với màu đen thì nên cân nhắc sự phù hợp với thương hiệu hoặc thông điệp bạn muốn truyền tải (Chẳng hạn như màu của thiết kế Wonderland ở trên là #0a0a0b).