[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website

  Bài viết hay nhất1
Đôi khi bạn thay, thử nhiều màu sắc mà có vẻ vẫn không vừa mắt, thì nên đọc bài viết này.
Nó sẽ rất có ích cho bạn nào định chau chuốt lại giao diện, hay đơn giản là chọn màu cho các đề mục trong bài cho nổi bật.



Màu sắc luôn tác động đến cuộc sống của chúng ta. 
Màu sắc là hiện tượng vật lý mà mắt chúng ta thấy được. Màu sắc có ngôn ngữ riêng của nó mà chúng ta phải tự cảm nhận. Màu sắc có sức mạnh làm tâm hồn chúng ta rung động.

Người ta có thể dùng nghệ thuật phối màu để nói lên ý tưởng của mình mà không cần đến lời nói hay câu văn.
Màu sắc ngoài cái đẹp trời cho còn có một chiều sâu kín đáo, chính cái điều kỳ diệu ấy làm rung động lòng người. Tất nhiên không phải lúc nào màu sắc cũng đẹp, không phải lúc nào màu sắc cũng hài hoà. Vì vậy nghệ thuật phối màu sẽ bù đắp những khuyết điểm đó.

Trước hết là một vài khái niệm: 

1/ Màu dương tính: 
Màu được tạo ra từ một nguồn sáng. Ví dụ: khi những màu cơ bản: Đỏ; Xanh lá cây và Xanh da trời phối hợp với nhau sẽ tạo ra màu trắng.

2/ Màu âm tính: 
Là màu được xác định bởi sự hấp thu ánh sáng. Ví dụ: khi màu Xanh lục, Đỏ cánh sen và Vàng được phối hợp chúng sẽ tạo ra màu nâu đen.
Nếu bạn phối những màu dương tính cơ bản bạn sẽ được những màu âm tính cơ bản và ngược lại.
Hiểu được mối quan hệ đối nghịch này trong màu sắc rất cần thiết khi phải xác định và chỉnh sửa những trục trặc về màu sắc.

Ví dụ: 
Nếu một hình ảnh quá xanh, bạn có 2 cách để tiếp cận vấn đề: Hoặc tăng thêm màu vàng vốn là màu
đối nghịch với xanh da trời nhằm làm trung hoà màu xanh da trời. Hoặc giảm bớt màu xanh da trời trong hình ảnh. Cả 2 cách đều đi đến cùng một kết quả là giảm bớt được màu xanh.

3/ Vòng tròn màu căn bản (the color wheel) 
Vòng tròn màu căn bản có 12 cung chia đều theo hình nan quạt trên diện tích hình tròn, mỗi cung có 8 cấp độ màu đi dần vào tâm vòng tròn từ đậm đến nhạt. 12 cung x 8 cấp độ sẽ tạo ra 106 màu căn bản và được đánh số từ 1 đến 106 đó cũng là kí hiệu khi ta chọn màu .
Ví dụ: Số 1 là màu đỏ sậm nhất (C:0 – M00 – Y00 – K:45) số 36 là màu vàng tươi (C:0 – M:0 – Y00 – K:0) số 84 (C:80 – M00 – Y:0 –
K:0) là màu tím rượu nếp than (híc nghe mà…thèm) số 68 (C00 – M:60 – Y:0 – K:0) là màu xanh nước biển…

Vòng tròn màu căn bản được tạo ra từ 3 màu: Đỏ - Vàng - Lục lam. Từ ba màu này, màu sắc được pha lẫn hai màu với nhau (ví dụ: Đỏ + Vàng = Da cam) rồi ba màu trộn lại với nhau, cứ thế ta sẽ có hơn
3.400 màu thông dụng nhất trong thiết kế đồ hoạ và nếu cứ pha , pha và pha trộn mãi bạn sẽ có hàng ty tỷ sắc màu cho…riêng bạn.

[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website Q99kNLa

4/ Cách dùng màu:

• Cấp thứ nhất (Primary) 

Dùng 3 màu: Đỏ - Vàng - Lục lam để phối ra các sắc độ màu khác nhau. 
• Cấp thứ hai (Secondary)
Nếu lấy màu đỏ chồng lên màu vàng sẽ được màu da cam, lấy màu đỏ chồng lên lục lam sẽ có màu tím, lấy màu vàng chồng lên màu lục lam sẽ được màu xanh lá cây…
Cách lấy 2 màu chồng lên nhau để tạo ra màu khác như trên được gọi là màu chồng đơn.

• Cấp thứ ba (Tertiary) 
Từ 3 màu căn bản: Đỏ - Vàng - Lục lam chúng ta đã phối ra màu da cam – xanh lá – tím. Nếu chồng các màu ở cấp Primary và Secondary, ta sẽ được các màu ở cấp Tertiary là:
Đỏ cam – Vàng cam – Vàng xanh – Xanh lơ – Xanh tím và Đỏ tím.

5/ Cái này cũng ít người biết: 
Không có “cái gọi là” màu đen, màu xám hay màu trắng vì màu trắng chỉ là sắc độ giảm tối đa của một trong 12 màu trên vòng tròn màu, màu xám và đen chính là sắc độ tăng tối đa của những màu trên (quá xá là đúng)

6/ Trình tự phối màu: 

• Bước 1: 
Xác định rõ hiệu ứng màu sắc bạn muốn đạt được.(Hiệu ứng màu sẽ nói ở các phần sau của bài này)
• Bước 2:
Chọn 1 màu chính đặc trưng cho chủ đề muốn thể hiện.
• Bước 3:
Chọn 1 màu hỗ trợ cho màu chính. Để có thể tìm được màu hỗ trợ một cách nhanh chóng, bạn dùng 2màu đối diện nhau trong vòng tròn màu căn bản. Ví dụ:
Màu đỏ được chọn là màu chính thì màu hỗ trợ cho nó là màu xanh lá cây. Tương tự như vậy ta có các cặp màu chính và màu hỗ trợ như sau:
Màu Gạch cua – Xanh ve chai. Da cam – Xanh dương.
Nghệ - Chàm. Vàng – Tím.
Vàng xanh - Đỏ tím…
Màu chính và màu hỗ trợ có tính năng làm tăng nét rực rỡ, linh động và giúp nhau nổi bật lên.
Ví dụ:
Nếu ta đặt cánh hoa vàng trên phông nền tím, hoa vàng sẽ rực rỡ hơn nhờ màu tím làm nền đệm. Nhưng nếu cũng với cách thức ấy, dùng nền màu trắng hay xanh lá thì cánh hoa vàng không nổi bật được.
Nếu đặt mảng màu đỏ tươi cạnh màu xanh lá cây thì cũng có hiệu ứng tương tự.
• Bước 4:
Từ màu chính và màu phối hợp chọn ra màu thứ ba hài hoà với 2 màu trước

[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website SbbAt47

7/ Độ tương phản của màu sắc:

Đố nhanh bạn: mực đen viết trên giấy trắng có phải là những màu tương phản dễ nhận thấy nhất ? 
Chắc chắn sẽ có 51% nhanh nhẩu trả lời: Có ! Vì hai màu Đen và Trắng là 02 màu có độ tương phản lớn nhất.
TNDH sẽ mãi ở trong số 51% nhanh nhẩu đó “níu” không đọc những dòng dưới đây:

Bảng phân loại độ tương phản: 
1. Mực đen trên giấy vàng.
2. Mực xanh lá cây trên giấy trắng.
3. Mực xanh dương trên giấy trắng.
4. Mực trắng trên giấy xanh dương.
5. Mực đen trên giấy trắng.
6. Mực vàng trên giấy đen.
7. Mực trắng trên giấy đỏ.
8. Mực trắng trên giấy xanh lá cây.
9. Mực trắng trên giấy đen.
10. Mực đỏ trên giấy vàng.
11. Mực xanh lá cây trên giấy đỏ.
12. Mực đỏ trên giấy xanh lá cây.
Hoá ra "nó" chỉ đứng hàng thứ 5 trong bảng phân loại mà thui.


Phần II: 07 SẮC CẦU VỒNG 

Sắc độ hay tính chất của màu sắc gợi lên ít nhiều xúc động cho người xem. Người ta dùng nhiều từ khác nhau để mô tả đặc tính của màu sắc đơn và so sánh khi chúng phối hợp với nhau.


Tuy nhiên độ sáng và tối lại là điều cơ bản của việc tạo ra sắc độ. Nếu không có ánh sáng thì sẽ chẳng có màu sắc. Tất nhiên, ở trong bóng tối tất cả chỉ là màu đen. Ánh sáng mặt trời là chùm tia sáng có
bước sóng khác nhau. Nếu ánh sáng mặt trời chiếu qua lăng kính thì sẽ tạo ra một dải màu. Trong thiên nhiên điều này được thể hiện qua cầu vồng 7 sắc.

Khi ánh sáng chiếu qua 1 vật, bề mặt của nó sẽ nhận bức xạ của bước sóng ánh sáng này và phản chiếu lại bức xạ của ánh sáng khác. Nếu mức hấp thụ bức xạ của các bước sóng đều nhau và mỗi thứ
một chút thì chúng ta sẽ thấy vật ấy màu trắng. Ngược lại, nếu nó hấp thu toàn bộ bức xạ thì chúng ta sẽ thấy vật ấy màu đen.
Vậy màu sắc thấy được trên một sự vật là sự tổng hợp bức xạ ánh sáng mà bề mặt của nó phản chiếu. Cùng một vật thể, nếu chụp hình ở dưới ánh sáng tự nhiên sẽ có sắc màu khác khi chụp dưới ánh sáng nhân tạo. Cũng vậy, khi soi một tờ in màu dưới ánh sáng tự nhiên thì màu sắc của hình ảnh sẽ khác khi soi tờ in dưới ánh sáng nhân tạo.


Màu sắc được phân thành 8 loại: 
- Màu nóng (Hot)
- Màu lạnh (Cold)
- Màu ấm (Warm)
- Màu mát (Cool)

- Màu sáng (Light) 
- Màu sậm (dark)
- Màu nhạt (Pale)
- Màu tươi (Bright)


Như đã nói ở phần đầu do không có hình minh hoạ giống như trong sách, nên các hình ảnh TNDH minh hoạ dưới đây có thể sẽ không phản ánh chính xác nội dung của từng màu. Một số màu chưa tìm được hình, mong các bạn xem nội dung và tìm kiếm giúp. 

MÀU NÓNG 
Màu nóng là màu đỏ bão hoà trên vòng tròn màu, đó là màu đỏ cờ được pha bởi màu magenta và yellow.
Màu nóng tự nó phản chiếu và lôi cuốn sự chú ý. Vì vậy màu đỏ thường dùng trong thiết kế khi muốn gây sự chú ý.
Màu nóng có ảnh hưởng mạnh mẽ, làm tác động đến không gian chung quanh nó.
Sức lôi cuốn của màu nóng ảnh hưởng nhiều đến sự chú ý của con người, nó làm tăng huyết áp (Ớn quá ! May mà dân IT đa số là trẻ nên cũng hổng sợ cái vụ này) và kích động hệ thống thần kinh (Cái này thì già trẻ gì cũng bị).

MÀU LẠNH 
Màu lạnh là mầu thuần xanh biển. Nó toả sáng và tươi sáng hẳn lên.
Màu lạnh làm chúng ta thấy mát như đang gần một tảng đá hay trên tuyết. Màu lạnh làm người xem có cảm giác mát mẻ, nhẹ nhàng.
Màu lạnh có tính đối lập với màu nóng.
Khi chuyển dần từ màu nóng sang màu lạnh, chúng ta có cảm giác như đang đứng bên lò lửa được chuyển sang cạnh một tảng băng, thật dễ chịu (?!)

MÀU ẤM 
Trong màu ấm luôn có sự hiện diện của màu đỏ.
Màu ấm được tạo ra do sự phối hợp giữa màu đỏ và màu vàng.
Tùy theo mức độ pha giữa màu đỏ và màu vàng mà chúng ta có những dạng màu ấm khác nhau.
Ví dụ: màu đỏ cam; màu cam; màu vàng cam … Màu ấm như thân thiện, đón chào người xem.
Nhìn màu ấm giống như chúng ta đang ngắm cảnh đẹp của mặt trời bình minh hoặc hoàng hôn.

MÀU MÁT 
Màu mát được tạo ra trên nền màu xanh.
Nó không giống như màu lạnh bởi vì được phối với màu vàng. Một số dạng màu mát như : vàng xanh; xanh lá cây; lục lam… Dạng màu xanh ngọc và xanh lá cây luôn có trong tự nhiên.
Màu mát làm chúng ta thấy nhẹ nhàng như đang trong mùa đâm chồi nẩy lộc của mùa xuân. Màu mát luôn nhẹ nhàng, tươi mát và sâu lắng.
Màu mát giống như một thác nước làm dịu mắt người xem.

MÀU SÁNG 
Màu sáng là màu của thủy tinh, của cây tùng lam. Màu sáng có tính nhẹ nhàng trong sáng.
Màu sáng được tạo ra từ màu đỏ pha với lục lam đi kèm với vàng nhạt.
Tuy nhiên sắc thái màu phải trong. Khi độ trong của màu tăng thì mức độ thay đổi sắc độ màu giảm. Màu sáng làm chúng ta thấy tâm hồn trở nên thoải mái, thư thái và buông lỏng.
Màu sáng giống như màn cửa sổ hé ra để ánh nắng ban mai lùa vào phòng.

MÀU SẬM 
Màu sậm là màu chứa màu đen trong khi phối màu.
Màu sậm làm khoảng không gian như thu nhỏ lại và làm vật thể như nhỏ hơn. Màu sậm làm tăng tính nghiêm trang, đứng đắn.
Thật vậy màu sậm ẩn khuất như khung cảnh của mùa thu và mùa đông ảm đạm.
Phối hợp giữa màu sáng và màu sậm sẽ gây nên một ấn tượng sâu sắc, mạnh mẽ. Nó tiêu biểu cho sự
đối lập của tự nhiên, sự tương phản nhưng cần thiết giữa ngày và đêm.

MÀU NHẠT 
Màu nhạt là màu tùng lam thật nhẹ.
Sắc màu nhợt nhạt, nó chứa ít nhất 65% màu trắng. Màu nhạt tạo nên vẻ mềm mại, lãng mạn và lơ đãng.
Màu nhạt thường dùng như màu ngà, tùng lam sáng và hồng tối nhạt.
Màu nhạt tạo cho người xem một cảm giác như ngắm đám mây nhẹ trôi hoặc như nắng nhẹ ban mai hoặc êm đềm như một sáng mờ sương.
Vì màu nhạt là màu trang nhã nên thường được dùng trong trang trí nội thất.

MÀU TƯƠI 
Màu tươi là tổng hợp tinh khiết của màu sắc.
Sự tươi thắm của màu sắc được tạo ra bằng cách bỏ qua thang xám và đen. Trong màu tươi chứa các sắc màu xanh; đỏ; vàng và cam.
Màu tươi chói lọi và sặc sỡ, nó gây nên sự chú ý.
Một chiếc xe màu vàng tươi, một chùm bong bóng rực rỡ hoặc cái mũi tươi thắm của chú hề … là những sắc màu không bao giờ bị quên lãng.
Màu sắc tươi tạo ra nét phấn khởi, vui tươi luôn được ngành thời trang và quảng cáo chú ý.

[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website OOdHq5X





Cách thức phối hợp màu sắc trong website.

Một website có giao diện thu hút chắc chắn phải được phối màu một cách hợp lý. Nếu không có màu sắc, trang web sẽ mất đi cá tính riêng của nó. Với màu sắc được phối hợp lý và thống nhất ,trang web sẽ thể hiện được đúng tính chất của nó. Dùng quá nhiều màu hoặc màu sắc hỗn độn sẽ đem lại cảm giác khó chịu cho người xem.

Thường khi thiết kế một website thường có một tông màu chủ đạo.Tuy nhiên vẫn có những website sử dụng nhiều tông màu khác nhau.

Ví dụ: Trang Apple.com, mỗi trang con của nó đều có những tông màu khác nhau. Ở trường hợp này, sự thống nhất phụ thuộc vào cách xử lý khéo léo của người thiết kế.

[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website LhyqL4f

Ví dụ về màu sắc chưa đủ độ trong một website.

Trang chủ của Starbuck thiếu màu một cách trầm trọng
Màu nền xám của website là một màu nhờ nhờ và không có điểm nhấn trên trang.Tuy nhiên tại thời điểm này thì trang của Starbuck đã sinh động và có màu sắc hơn rất nhiều phiên bản trước.

Dùng màu đủ độ.

Dùng ít màu mạnh làm cho website trở nên buồn tẻ và nhạt nhoà. Màu sắc là một cách thức tốt để nhận dạng, nhóm lại hay phân chia riêng rẽ các thành phần của website với nhau. Nó làm cho website nhẹ hơn nhiều khi tải về (đặc biệt nếu sử dụng tối đa CSS-Cascading Style Sheets trong website). Nếu bạn dùng quá ít màu bạn cũng nên nghĩ một cách nào đấy để thu hút mắt quan sát vào các thành phần chính của website.

Để những khoảng trắng.

Màu trắng là một màu tuyệt vời để có thể làm nền cho text bên trên. Người ta thường đặt nội dung bằng chữ đậm lên trên một nền trắng (hoặc một nền sáng màu). Mảng màu trắng (hay sáng màu) thường được dùng để đặt nội dung website.

Dùng nền sáng nhất cho phần nội dung chính.

Hãy dùng màu nền sáng nhất cho phần nội dung chính của bạn. Lý do đơn giản là não bộ của bạn có thể dễ dàng tìm thấy và thu hút vào phần nội dung trên nền sáng đó.

Ví dụ: Hãy ghé thăm trang pixelgraphix.de . Phần nội dung được hiển thị trên các ô vuông màu xám nhạt được đặt lên trên nền trắng. Bạn có thể thấy, đôi mắt của bạn không bao giờ muốn chú ý vào những khoảng xám mà cứ đi tìm kiếm những mảng màu trắng sáng hơn thế.

Trang chủ của đài tiếng nói Ireland dùng màu nền cho nội dung chính là một màu xanh nhợt với text đen. Nó làm phần nội dung chính rất khó nhìn.

Hãy dùng những màu mạnh để thu hút mắt nhìn

Những màu mạnh luôn luôn thu hút sự chú ý của mắt người xem. Mảng màu đó càng lớn càng gây được nhiều sự chú ý. Tuy nhiên nếu dùng quá nhiều màu mạnh sẽ làm cho mắt ta bị loạn lên và không biết sẽ phải nhìn vào đâu nữa, đừng để việc đó làm mất đi sự hiểu quả của việc dùng những màu mạnh.

guardian.co.uk dùng quá nhiều khu vực có màu sắc gây sự chú ý. Có quá nhiều các bảng màu đỏ làm cho mắt ta bị rối.Chưa kể còn rất nhiều bảng dùng màu nặng nề làm ta không còn dành sự chú ý cho nội dung chính của trang web.

Trong khi đó màu website của RNIB lại không đủ để tạo được sự tương phản. Màu sắc trong website không được phối hợp lý. Có lẽ không nên phối màu xanh của logo với màu đỏ nhạt ,màu vàng và… hồng nhạt.

Nên đảm bảo sự tương phản tối đa giữa menu và màu nền. Hãy làm cho website của bạn rõ ràng và khiến cho người dùng có thể dễ dàng duyệt website. Đừng để mắt của bạn cứ hút vào những phần phụ của website mà bỏ qua đi Logo và nội dung chính cuả trang.

Tránh đặt các màu mạnh cạnh những bức ảnh.

Website Harrah’s Casino dùng màu tím đậm ngay cạnh một bức ảnh khu Casino. Màu tím và một số màu khác trên bức ảnh đặt cạnh nhau làm mọi thứ dường như rối rắm và nặng nề hơn. 

Tránh sử dụng quá nhiều màu khác nhau.

Sử dụng quá nhiều màu sẽ làm cho trang web bị rối mắt hoặc trở nên loè loẹt thái quá.

Chưa kể có những màu khi để cạnh nhau sẽ tạo ra những hiệu ứng rất tệ.

Sự kết hợp của 2 màu nâu và xanh nhạt này làm cho chữ thật khó đọc, chưa kể đó còn do dùng font chữ quá nhỏ.

Phối màu lấy cảm hứng từ thiên nhiên.

Luke Wrobleski- một designer cho rằng các tập đoàn lớn thường sử dụng những tông màu an toàn và hầu hết các website của các cty đều có tông màu hao hao nhau. Anh ta cho rằng cần có sự sáng tạo hơn trong việc sử dụng màu sắc. Nếu tự bằng lòng với những bản thiết kế quen thuộc chúng ta sẽ không thể tự vượt ra khỏi giới hạn của chính bản thân mình.

Những website của các tập đoàn lớn thường hao hao nhau (HP, IBM, Dell, Microsoft) 

Luke Wrobleski đã nghĩ ra một cách phối màu cũng khá thú vị : Lấy màu từ thiên nhiên.





Công cụ phối màu

Nếu bạn đã bắt đầu choáng với các quy tắc trên thì hãy thử qua công cụ phối màu trực tuyến rất hữu ích:

Phối màu đơn giản: https://devs.forumvi.com/h12-cong-cu-phoi-mau
Colors Cheme Designer: http://colorschemedesigner.com/


Nguồn: icolor.vn traumwind.de pixy.cz
  Bài viết hay nhất2
Méo tưởng màu lục là xanh lá cây còn màu lam là xanh dương :v
Nhưng trong này lại ghi là màu lục lam :v
  Bài viết hay nhất3
Lục thì tất nhiên là xanh lá cây rồi. Mà tên không quan trọng, mã màu mới là cái mình quan tâm :3

[Tips] Nguyên tắc phối màu và ứng dụng trong thiết kế website LhyqL4f
  Bài viết hay nhất4
You cannot reply to topics in this forum