Phần 1: Lý thuyết màu trong webdesign

Màu sắc trong thiết kế mang tính chủ quan. Những gì gợi lên cảm xúc ở người này có thể hoàn toàn khác với cảm xúc của người khác. Điều này đôi khi là do sở thích cá nhân, hoặc là do ảnh hưởng nền văn hóa. Lý thuyết màu sắc tự nó là một môn khoa học. Nghiên cứu màu sắc ảnh hưởng như thế nào đến con người, từng cá nhân hay một nhóm người là một công việc mà người ta phải xây dựng lên. Việc thay đổi sắc độ, tông màu có thể tạo ra nhiều cảm xúc khác nhau. Ở những nền văn hóa khác nhau, màu sắc này mang lại cảm giác hạnh phúc tươi tắn ở nước này nhưng sẽ là cảm giác sầu não ở nước khác.

Phần 1: chúng ta sẽ thảo luận ý nghĩa ẩn chứa bên trong của màu sắc và đưa ra một số ví dụ về cách sử dụng màu trong thiết kế web.
Phần 2: chúng ta sẽ thảo luận về sắc độ, giá trị màu, tong màu,…
Phần 3: chúng ta sẽ thảo luận làm thế nào để tạo ra một bảng màu chuẩn cho thiết kế riêng của chúng ta.

1.Nhóm màu nóng:

Tông màu nóng bao gồm đỏ, cam, vàng. Những màu này là màu của lửa, lá cây mùa thu, ánh bình mình, ánh hoàng hôn. Tất cả những màu này đều tạo ra cảm xúc đầy năng lượng, đam mê, và sự tích cực.

Màu đỏ và màu vàng là hai màu cơ bản, màu cam là màu ở giữa. Điều này có nghĩa là tông màu ấm thì hoàn toàn ấm. Chúng không được tạo ra từ tông màu ấm và tông màu lạnh. Sử dụng những tông màu ấm trong thiết kế của bạn phản ảnh sự đam mê, hạnh phúc, đầy nhiệt huyết và năng lượng.

1.1 Màu đỏ (màu cơ bản)
Màu đỏ là màu rất nóng. Nó đại diện cho lửa, bạo lực, chiến tranh. Nó cũng liên quan đến tình yêu và lòng đam mê. Trong lịch sử, nó đại diện cho thần Chiến tranh và thần Tình yêu. Red có thể thực sự có một hiệu ứng vật lý trên người, nâng cao huyết áp và tỷ lệ hô hấp. Nó cũng được được hiển thị để tăng cường sự trao đổi chất của con người.

Màu đỏ cũng liên quan đến sự giận dữ nhưng nó cũng liên quan đến tầm quan trọng (khi nghĩ về thảm đỏ người ta nghĩ đến những lễ trao giải thưởng hay những tổ chức sự kiện). Màu đỏ cũng ám chỉ sự nguy hiểm (đó chính là lý do tại sao những đèn báo, tín hiệu đều là màu đỏ, và hầu hết các loại nhãn cảnh báo cũng có màu đỏ).

Ngoài các nước Phương Tây, màu đỏ làm màu của các hiệp hội. Ví dụ, ở Trung Quốc, màu đỏ là màu của sự thịnh vượng và hạnh phúc. Nó cũng có thể được sử dụng để thu hút may mắn. Trong nền văn hóa khác Đông, màu đỏ là màu của cô dâu trong ngày cưới của họ. Tuy nhiên ở Nam Phi, màu đỏ là màu của tang tóc. Màu đỏ cũng liên quan với cộng sản. Màu đỏ đã trở thành màu sắc được kết hợp với nhận thức về AIDS ở châu Phi do sự phổ biến của chiến dịch [RED].

Trong thiết kế, màu đỏ có thể thể hiện sự mạnh mẽ. Nó có thể gây ra một ảnh hưởng lớn nếu dùng quá nhiều trong thiết kế, đặc biệt là các dạng thiết kế thuần túy, tinh khiết. Nó là màu tuyệt vời nhất khi chúng ta muốn thể hiện quyền lực, niềm đam mê trong thiết kế. Vói nhiều sắc độ khác nhau, màu đỏ tươi thể hiện tràn đầy năng lực, màu đỏ đậm thể hiện sức mạnh và thanh lịch.

Dưới đây là một vài ví dụ:

Các điểm nhấn màu đỏ thực sự nổi bật trên nền đen tối, và cho một cảm giác mạnh mẽ và cao cấp cho trang web.

Các điểm nhấn màu đỏ rất tươi sáng trên trang web này cung cấp cho một cảm giác năng lượng và chuyển động

1.2 Màu cam (màu thứ cấp)

Màu cam là màu rất sống động và giàu năng lượng. Nó liên quan đến trái đất và mùa thu. bởi vì nó liên quan đến việc thay đổi mùa, màu cam có thể đại diện cho sự thay đổi và chuyển động.
Chính vì màu cam có cùng tên với một loại trái cây (quả cam) nên nó thể hiện sức khỏe và sức sống. Trong thiết kế màu cam không quá gây chú ý như màu đỏ. Màu cam được xem là màu thân thiện và mang ý nghĩa chào đón.

Một số dụ:


Khung box màu cam với tone độ sáng làm tăng sự chú ý hơn so với các yếu tố thiết kế màu đỏ đậm.

Ở đây màu cam được sử dụng để đại diện cho ngọn lửa ở phần logo trang web.

Khi màu cam đậm kết hợp với màu lime green, nó sẽ tạo nên cảm giác trung tính.

Màu cam của trang web này mang lại ấn tượng thân thiện và mời mọc.


Các điểm nhấn của màu cam mang lại nhiều cảm nhận trưc quan và gây chú ý cho mục gọi lệnh (call action) : View Samples.

1.3 Màu vàng (màu cơ bản)
Màu vàng được xem là màu sáng nhất và là màu cung cấp nhiều năng lượng nhất. Nó liên quan đến hạnh phúc và ánh mặt trời. Màu vàng cũng liên quan đến sự lừa dối và hèn nhát.
Mùa vàng cũng liên quan đến niềm hi vọng, có thể thấy ở một số nước, người ta làm những ruy băng màu vàng để cho biết rằng gia đình đang có người thân đang ở chiến trường. Màu vàng cũng liên quan đến sự nguy hiểm nhưng nó không thể hiện rõ bằng màu đỏ.
Màu vàng mang ý nghĩa khác nhau ở một số nước. Ví dụ, Tại Ai Cập, màu vàng là màu dành cho đám tang. Tại Nhật bản, màu vàng đại diện lòng can đảm. Và ở Ấn Độ màu vàng là màu sắc của thương gia.
Trong thiết kế, màu vàng với tone độ tươi sáng mang lại cảm giác hạnh phúc và tươi vui. Màu vàng nhạt thường được sử dụng làm màu trung tính dành cho trẻ sơ sinh (hơn là màu xanh hoặc màu hồng) và trẻ nhỏ. Màu vàng hơi sáng mang lại cảm giác bình yên hơn so với màu sáng chói. Màu vàng đậm mang lại cảm giác cổ kính và được sử dụng cho những thiết kế mang tính vĩnh cửu.

Một số ví dụ:


Màu vàng tươi sáng ở header tạo ra một cảm giác giàu cảm giác giàu năng lượng và tích cực

Màu vàng nhạt được dùng như một màu trung lập cho tiêu đề. Viêc kế kết hợp với các hình vẽ tay tạo ra một cảm giác vui vẻ.

Những điểm nhấn màu vàng tươi sáng gây sự chý ý đến những phần quan trọng trong trang web này.


Mùa vàng hướng dương khơi gợi cho người xem một cảm giác tươi sáng của mùa hè. Khi kết hợp với nền màu vàng đậm cổ kính, nó sẽ tạo ra một cảm giác ấm cũng.


Tiêu đề màu vàng sáng của thiết kế làm tăng thêm năng lượng, sức sống cho thiết kế.

2. Nhóm màu lạnh:
Nhóm màu lạnh bao gồm màu green, blue và purple, mang lại cảm giác nhẹ nhàng hơn so với nhóm màu ấm. Chúng là màu của bóng tối, nước, thiên nhiên và thường mang lại cảm giác thư thái, bình yên.
Màu blue là màu cơ bản trong dãy quang phổ, điều này có nghĩa là những màu khác được tạo ra bằng sự kết hợp giữa màu blue và nhóm màu ấm (kết hợp với màu vàng cho ra màu xanh lá cây, kết hợp với màu đỏ cho ra màu tím). Green mang một vài đặc tính của màu vàng và màu tím mang một vài đặc tính của màu đỏ. Sử dụng nhóm màu lạnh trong thiết kế tạo ra cảm giác bình yên và tính chuyên nghiệp.

2.1 Màu green (màu thứ cấp)
Màu xanh lá cây là màu xanh của trái đất, nó đại diện cho sự khởi đầu và phát triển. Nó cũng có nghĩa đổi mới và làm phong phú. Ngoài ra, màu xanh lá cây còn mang ý nghĩa ghen tỵ, thiếu kinh nghiệm.

Màu xanh lá cây mang nhiều thuộc tính của màu blue và thuộc tính của màu vàng. Trong thiết kế, màu xanh lá cây tạo ra hiệu ứng cân bằng, hài hòa và rất ổn định. Nó thích hợp cho các thiết kế liên quan đến sự giàu có, sự ổn định, sự đổi mới, và thiên nhiên. Màu xanh lá cây tone độ sáng tạo cảm giác sôi động, giàu năng lượng. Màu green với tone độ đậm mang tạo cảm giác ổn định

Một số ví dụ:

Trang web này tạo cảm giác rất thiên nhiên


Header với tone màu xanh lá cây sáng kế hợp với motif lá cây tạo cảm giác tự nhiên và sống động.


Màu xanh lá cây ô liu tạo cảm giác tự nhiên và rất hòa hợp với nội dung.


Màu xanh lá cây oliu mang lại cảm giác thiên nhiên.

1.2 Màu blue (màu cơ bản)

Màu xanh thường gắn liền với nỗi buồn (trong tiếng Anh). Màu xanh được sử dụng rộng rãi để thể hiện cho sự điềm tĩnh và có trách nhiệm. Màu xanh với tone độ sáng thể hiện sự tươi mới và thân thiện. Màu xanh với sắc độ đậm mang lại cảm giác mạnh mẽ và đáng tin cậy hơn. Màu xanh cũng liên quan đến hòa bình, nó cũng mang ý nghĩa tâm linh và tôn giáo ở nhiều nền văn hóa truyền thống khác nhau (ví dụ Đức mẹ Maria thường được mô tả trong chiếc áo choàng màu xanh).
Ý nghĩa của màu xanh bị ảnh hưởng bởi sắc độ và tone màu. Trong thiết kế, tone màu blue gây tác động lớn đến thiết kế của bạn được cảm nhận như thế nào. Màu blue với tone độ nhạt thường mang đến cảm giác thư thái, bình yên. Màu blue với tone độ sáng tạo cảm giác tiếp thêm sinh lực và làm mới. Màu blue với tone độ đậm là màu tuyệt vời nhất cho các website công ty nơi mà sức mạnh và độ tin cậy được cho là quan trọng.

Một số ví dụ:


Màu xanh đậm mang lại cảm giác tin cậy trong khi đó màu xanh đậm với tone độ sáng tạo cảm giác trầm tĩnh.

Màu xanh đậm thể hiện sự chuyên nghiệp, đặt biết là khi kết hợp với background màu trắng. Tuy nhiên phần text màu xanh nhẹ tạo điểm nhấn khá thú vị.


Trong trang web này, màu xanh da trời thể hiện sự trẻ trung và được nhấn mạnh bằng những điểm nhấn màu đỏ.

Trang web này kết hợp các sắc độ màu xanh, tạo cảm giác tươi mát cho toàn bộ trang web.


Màu xanh trung tính mang lại cảm giác thư thái và êm dịu.

2.3 Màu tím (màu thứ cấp)
Màu tím liên quan đến màu hoàng gia. Nó là sự kết hợp giữa màu đỏ và màu xanh và mang thuộc tính của cả hai. Nó liên quan đến trí tưởng tượng và sự sáng tạo.
Ở Thái Lan, màu tím là màu tang của quả phụ. Màu tím đậm liên quan đến những lớp người có quyền uy và giàu có. Trong khi đó màu tím nhat (giống như màu Lavendar) được cho là màu lãng mạn.
Trong thiết kế, màu tím mang lại cảm giác sang trọng và giàu có. Màu tím nhẹ liên quan đến mùa xuân và sự lãng mạn.

Một số ví dụ:


Sắc độ đậm được dùng để khơi gợi di sản của hoàng gia, rất thích hợp cho các thương hiệu cao cấp Asprey.

Màu tím nhạt và tím vừa mang mang thông điệp sáng tạo.


Màu tím hơi ngả đỏ mang lại cảm giác giàu có và đầy năng lượng

Nền màu tím đậm mang tăng cảm giác sáng tạo.


Những điểm nhấn màu tím đậm mang thông điệp sang trọng và tinh khiết.

3. Mùa trung tính:
Màu trung tính được dùng làm bối cảnh cho thiết kế. Chúng thường được kết hợp với những màu có sắc độ tươi, sáng. Chúng cũng được dùng cho thiết kể riêng của chúng tạo ra sự tinh tế. Các ý nghĩa và ấn tượng của màu trung tính được ảnh hưởng bởi những màu mà chúng kế hợp, có thể tạo ra cảm giác ấm hơn hoặc tươi mát hơn.

3.1 Màu đen
Màu đen là màu trung tính mạnh nhất. Theonghĩa tích cực, màu đen là màu của quyền lực, thanh lịch, và hình thức. Về mặc tiêu cực, màu đen là màu tang nhiều nước phương Tây. Nó cũng liên quan đến cuộc nổi loạn ở một số nền văn hóa, nó liên quan đến Halloween và sự huyền bí.
Màu đen thường được dùng trong các thiết kế sắc sảo cũng như những thiết kế thanh lịch. Tùy theo cách kết hợp với những màu khác, nó mang cả nghĩa bảo thủ hoặc hiện đại, theo quy tắc hoặc không theo quy tắc. Trong thiết kế, màu đen được dùng làm typo và một số chức năng khác bởi vì nó là màu trung tính. Màu đen dễ chuyển tải cảm giác tinh tế và bí ẩn trong thiết kế.

Một số ví dụ:

Các điểm nhấn màu đen, trộn với màu tươi sáng với nền nâu tối tạo cảm giác tinh tế, sắc bén trong thiết kế.

Màu đen kết hợp với màu xanh tạo cảm giác tươi mát hơn trong thiết kế.


Màu đen trộn với màu xám đen, màu lime green tạo ra độ sắc bén cho thiết kế.


Những điểm nhấn màu đen tạo ra sự tinh tế và hiện đại.


Những điểm nhấn màu đen mạnh mẽ trong trang web tạo ra sự tinh tế trong thiết kế.

3.2 Màu trắng
Màu trắng là màu đối của màu đen trong dãy quang phổ, nhưng giống như màu đen, nó có thể kết hợp với nhiều màu khác. Màu trắng thể hiện sự tinh khiết, sạch sẽ, và đức hạnh. Ở phương Tây, màu trắng thường được dùng làm áo cưới cô dâu trong ngày cưới của họ. Nó lien quan đến ngành y tế, đặc biệt là bác sĩ, y tá và nha sĩ. Màu trắng liên quan đến lòng tốt, các thiên sứ thường được mô tả lại bằng màu trắng tinh khiết.

Trong thiết kế, màu trắng được chọ là màu trung lập nên khi kết hợp với những màu khác, nó cho phép các màu sắc khác thể hiện tiếng nói của chúng lớn hơn so với màu trắng. Nó chuyển tải thông điệp thuần khiết, đơn giản và nó được dùng trong thiết kế tối giản.

Vidu:

Các màu trắng trên các trang web Fuelhaus được sử dụng để tương phản với màu xanh.


Nền trắng được dùng rất phổ biến trên các trang web giản, và cung cấp tương phản tuyệt vời với kiểu chữ typo.


Màu trắng được dùng như màu chính, làm sáng cả hiệu quả trang web.


Trắng kết hợp với màu xám cho một cảm giác mềm mại và sạch sẽ.


Màu trắng được sử dụng làm một nền cho toàn bộ thiết kế.

3.3 Màu xám
Màu xám là màu trung tính, thường được cho là màu lạnh trong dãy quanh phổ. Đôi khi nó được cho là màu mang cảm giác buồn, ảm đạm. Màu xám trắng được dùng thay màu trắng trong một vài thiết kế, cà màu xám đen được dùng thay cho màu đen.
Màu xám là được cho là màu mang tính bảo thủ và trang nghiêm. Đôi khi nó được xem là màu của tang tóc. Nó thường được sử dụng trong các thiết kế công ty nơi mà tính trang trọng và chuyên nghiệp được cho là yếu tố then chốt. Nó là màu rất tinh tế. màu xám có rất nhiều sắc độ tùy theo việc két hợp giữa nó với màu xanh hoặc nâu. Trong thiết kế, nền màu xám rất phổ biến, thường được dùng trong typo.

Một số ví dụ

Màu xám cho một cảm giác rất nhẹ nhàng và yên tĩnh trong thiết kế này.


Nền sáng trắng mang lại cảm giác hiện đại bằng những dòng chữ typo.


Nền xám đen mang lại cảm giác hiện đại và tinh tế.


Nền xám đậm và xám nhạt cho cảm giác hiện đại trong thiết kế.


Các tông độ màu xám được sử dụng trong thiết kế này tạo nên tính tinh vi và chuyên nghiệp trong trang web.

3.4 Màu nâu:
Màu nâu là màu của trái đất, gỗ và đá. Đó hoàn toàn là màu sắc tự nhiên và sắc độ ấm trung tính. Màu nâu thể hiện độ tin cậy, ổn định. Nó cũng được cho là màu ngu xi đần độn.
Trong thiết kế, màu nâu thường được dùng làm nền. Nó được thấy trên các chất liệu gỗ và đôi khi ở trên đá. Dôi khi nó được dùng trong các thiết kế tối để thay màu đen, thường là background hay là typo.

Một số ví dụ.

Màu nâu xám cho cảm giác có tránh nhiệm và độc lập.


Màu nâu đỏ cho cảm giác rất trần tục và đáng tin cậy.


Màu nâu sẫm cho cảm giác trần tục và kiên định, cho phép các màu sáng trong thiết kế nổi bật trong nền đen.


Màu gỗ là màu phổ biến của màu nậu và trong trường hợp này, những thiết kế màu nâu tạo thêm cảm giác thân thiện.

3.5 Màu beige và màu Tan
Màu beige có thể tạo cảm giác mát mẻ hoặc ấm cúng tùy thuộc vào những màu kết hợp với nó. Nó có sự ấm áp của màu nâu, sự tươi mát của màu trắng, và cũng giống như màu nâu, nó có cảm giác đần độn. Đây là màu bảo thủ trong tất cả các trường hợp. Nó là biểu tượng của lòng đạo đức.

Beige trong thiết kế thường được sử dụng làm nền và thường được thấy trong kết cấu giấy. Nó mang nhưng đặc tính của màu kết hợp với nó. Điều này có nghĩa là màu beige có ảnh hưởng rất ít cho toàn bộ thiết kế.

Một số ví dụ:


Nền màu sáng cho cảm giác tươi trẻ bởi vì những màu sáng xung quanh nó.


Nền màu sáng cho cảm giác bảo thủ và thanh lich trong toàn bộ thiết kế.


Các nền màu vàng nâu là được làm ấm hơn bởi ngay cả các điểm nhấn màu cam và màu nâu trong thiết kế của trang web này.


Màu tan được sử dụng như là một kết cấu túi giấy, và trong hình thức của nó xám như là một kết cấu bê tông hoặc đá.


Các tiêu đề màu Beige và các điểm nhấn trên trang web cho cảm giác tinh tế và truyền thống.

3.6 Màu cream và Ivory
Màu kem và màu Ivory(màu ngà) là những màu tinh tế, với sự kết hợp của sắc ấm của màu nâu và nhiều sắc lạnh của màu trắng. Chúng là màu yên bình, khơi gợi tính lịch sử. Mặc dù nó là màu ấm nhưng khi kết hợp với màu trắng, màu Ivory trở thành là màu bình tĩnh.

Trong thiết kế, màu Ivory (màu ngà) cso thể cho một cảm giác sang trọng và bình tĩnh. Khi kết hợp với màu trái đất ví dụ như màu đào hoặc màu nâu, nó tạo ra màu nâu. Nó cũng có thể được dùng làm màu sáng hoặc tối hơn mà ko có sự tương phản rõ rệt của việc dùng màu trắng.

Một số ví dụ:


Màu Ivory mang lại cảm giác ấm áp nhưng được làm dịu đi bởi các sắc lạnh trong trang web.


Các nền xám-kem ở đây được làm ấm hơn bởi những điểm nhấn màu cam nâu.


Màu kem tạo tăng sự tinh tế trong trang này.


Nền màu kem tăng tính cổ kính xuyên xuốt trang web.

Kết luận:
Có rất nhiều thông tin trong bài viết này, lý thuyết về màu sắc nghiên cứu về những cảm xúc màu tùy theo sắc độ và tone màu. Dưới đây là một số tham khảo nhanh về ý nghĩa của màu sắc:
-Màu đỏ: đam mê, tình yêu, sự giận giữ
-Màu cam: Năng lượng, hạnh phúc, sự sống
-Màu vàng: Hạnh phúc, hi vọng, sự gian dối
-Màu xanh lá cây: Sự khởi đầu, giàu có, thiên nhiên.
-Màu xanh dương: Bình tĩnh, trách nhiệm và nỗi buồn.
-Màu tím: sáng tạo, hoàng tộc, giàu có.
-Màu đen: Bí mật, sang trọng, tội ác.
-Màu xám: Tâm trạng, bảo thủ, hình thức.
-Màu trắng: tinh khiết, rõ ràng, đức hạnh.
-Màu kem hoặc ngà: Bình tĩnh, thanh lịch.
-Màu tan hoặc beige: bảo thủ, một đạo, đần độn.
-Màu nâu: thiên nhiên, độc lập.

Các nguồn khác:
http://desktoppub.about.com/cs/color/a/symbolism.htm
http://www.color-wheel-pro.com/color-meaning.html
http://en.wikipedia.org/wiki/Color

Bởi: Cameron Chapman. smashingmagazine

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: