Hướng dẫn phối màu trên máy tính

Màu sắc là một bộ phận không thể tách rời trong thiết kế web. Bài này sẽ chia sẽ với mọi người 1 chút kiến thức về nghệ thuật phối màu và 1 tool khá chuyên nghiệp để hỗ trợ việc phối màu này trên máy tính.
12.726 lượt xem
Font chữ aA aA tru cong

Trong mỹ thuật nói chung và trong thiết kế web nói riêng, màu sắc là một bộ phận không thể tách rời trong 1 thiết kế. Như mọi người cũng biết, màu sắc sẽ gây tác động mạnh đến tâm lý, nhận thức, tình cảm của người dùng vào 1 sản phẩm nào đó và web cũng không ngoại lệ. Vậy dùng màu sắc thế nào cho hợp lý hay có nguyên tắc gì để phối màu?

Hôm nay mình viết bài này để chia sẻ với mọi người 1 chút kiến thức về nghệ thuật phối màu, 1 số thuật ngữ dùng trong màu sắc cũng như giới thiệu đến mọi người 1 tool khá chuyên nghiệp để hỗ trợ việc phối màu này trên máy tính.

NGHỆ THUẬT PHỐI MÀU

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Đầu tiên nhắc lại cho các bạn nhớ một xíu về màu sắc. Nếu các bạn đã từng học qua thì đã biết là mắt thường chúng ta chỉ nhận biết được các màu sắc trong dải màu nhìn thấy được (hay còn gọi là dải màu cầu vồng), đó là do mắt chúng ta chỉ nhận biết được 1 số tần số màu sắc mà thôi.

huong dan phoi mau tren may tinh.gif

 

MỘT SỐ THUẬT NGỮ DÙNG TRONG MÀU SẮC

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Tiếp theo, để làm quen với môi trường màu sắc bạn cần biết khái niệm:

1. Bánh xe màu (Color Wheel).

Đây là một khái niệm đã có từ lâu đời để sử dụng màu sắc. Nó giúp chúng ta phân bố các màu sắc nhìn thấy được theo dạng hình tròn và có thứ tự gần giống với dải màu cầu vồng.

huong dan phoi mau tren may tinh1.gif

Bánh xe màu cơ bản sẽ gồm 12 màu, trong đó có:
- 3 màu chính (Primary) : Đỏ, Vàng và Xanh lam
- 3 màu cấp 2 (Secondary): Nằm giữa 2 cặp màu chính sẽ là màu cấp 2. Đó là: Cam, Xanh lá và Tím
- 6 màu cấp 3 (Tertiary): Nằm giữa 1 màu chính và 1 màu cấp 2 sẽ là 1 màu cấp 3.
Bánh xe màu có thể được tùy biến để tạo ra được nhiều màu hơn, nhưng theo nguyên tắc là như thế mà thôi. Ngoài ra nhìn vào Bánh xe màu để giúp phân biệt màu nóng và màu lạnh (Warm và Cool):

huong dan phoi mau tren may tinh2.gif

 

huong dan phoi mau tren may tinh3.gif

 

2. Tint, Shade và Tone trong màu sắc

Bên cạnh thuật ngữ bánh xe màu, bạn cần hiểu thêm về thuật ngữ Tint, Shade và Tone trong màu sắc. Tint là sự phối hợp của màu gốc với màu trắng để tạo thành dải màu sáng hơn. Shade là sự phối hợp của màu gốc với màu đen để tạo thành dải màu tối hơn. Còn Tone là sự phối hợp của màu gốc với cả trắng và đen hay là sự phối hợp giữa màu gốc với màu xám để tạo ra các sắc độ màu khác nhau.
Bánh xe màu dưới đây là một ví dụ về bánh xe màu có cả màu gốc, Tint và Shade.

huong dan phoi mau tren may tinh4.gif

 

 

3. Hệ màu RGB

Tiếp theo là khái niệm cuối cùng trong sử dụng màu sắc cho máy tính nói chung và cho thiết kế web nói riêng: đó là hệ màu RGB. Nếu bạn nào chưa biết thì mình sẽ giới thiệu với các bạn về hệ màu RGB. Hệ màu RGB là sự kết hợp của 3 màu R(Red) – G(Green) – B(Blue) và mỗi màu này sẽ có 256 giá trị (từ 0 – 255) và được biểu diễn dưới dạng số Thập lục phân(hệ 16) trong khi sử dụng (từ 00-FF). Do đó, tổ hợp 3 màu này lại ta sẽ có 255×255x255 màu có thể sử dụng (Khá là nhiều đó ^^). Như vậy tóm lại màu sử dụng khi thiết kế web sẽ có dạng RGB với giá trị từ 000000 tới FFFFFF (đen tới trắng).

————————————————

Như vậy là bạn đã có 1 số khái niệm cơ bản về màu sắc rồi. Bây giờ chỉ là phối màu mà thôi. Như các bạn cũng đã từng gặp phải, việc chọn màu cho 1 thiết kế web là một việc khá quan trọng và ảnh hưởng phần nào đến nội dung mà mình muốn truyền tải đến người sử dụng website. Tuy nhiên, nếu để ý thì hiện nay số lượng website sử dụng màu sắc “bậy bạ” rất nhiều làm ảnh hưởng nặng đến “nhận thức” và “suy nghĩ” của 1 tầng lớp thiết kế đàn em sau này.

Đầu tiên phải hiều phối màu là gì. Rất đơn giản, bạn hãy chọn cho mình 1 màu cơ bản, phối màu sẽ giúp bạn chọn các màu khác phù hợp với màu cơ bản của bạn, để từ đó có các màu để dùng chung cho 1 thiết kế mà đảm bảo tính hài hòa giữa màu sắc.Có rất nhiều phương pháp phối màu, và hầu hết đều dựa trên Bánh xe màu để phối. Ví dụ về một số mô hình phối màu:

huong dan phoi mau tren may tinh5.gif

Các đường màu đen chính là cách chọn màu cho phù hợp tương ứng với từng cách phối màu. Ngoài các loại này ra, còn có nhiều kiểu phối màu thông dụng khác như là: Màu không sắc, Màu đơn sắc, màu trung tính, màu chỏi, màu cấp 2, màu cấp 3…

Công việc chọn màu này cho website đòi hỏi khá công phu. Nay mình giới thiệu với các bạn một phần mềm làm việc này rất hiệu quả. Ngoài việc tạo các bánh xe màu, nó còn giúp mình phối màu theo các phương pháp nói trên. Ngoài ra, còn có khá nhiều công cụ để thử nghiệm bộ màu mà bạn đã chọn xem kết quả như thế nào sau khi phối…Phần mềm đó chính là ColorImpact. Lần đầu tiên tiếp xúc với nó thì mình đã thật sự thích thú với nó, vì nó giúp mình nghiên cứu về màu sắc dựa trên bánh xe màu chi tiết hơn và có điều kiện để thử nghiệm màu sắc trên các mẫu thử khác nhau để xem hiệu ứng. Đây không phải là phần mềm miễn phí, cho dùng thử 14 ngày.

PHẦN MỀM PHỐI MÀU COLORLMPACT

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Dưới đây là hình mình chụp 1 số chức năng chính của phần mềm này để các bạn xem thử nó có nhiều Tool cỡ nào.

1.Introduction – Main menu

 

huong dan phoi mau tren may tinh6.gif

 

2. Color harmonies: Hướng dẫn các phương pháp phối màu

 

huong dan phoi mau tren may tinh7.gif

 

3. Advanced Color Wheel : Tạo bánh xe màu

 

huong dan phoi mau tren may tinh8.gif

 

4. Color Formula: Từ màu cơ bản, giúp tạo ra các màu khác liên quan dựa trên các công thức mà bạn chọn

 

huong dan phoi mau tren may tinh9.gif

 

5. Color Variations: Giúp tạo các dài màu để xem xét sử dụng

 

huong dan phoi mau tren may tinh10.gif

 

6. Color Blender: Từ 2 màu đầu vào, sẽ giúp tạo ra các màu phối hợp từ 2 màu đó

 

huong dan phoi mau tren may tinh11.gif

 

7.Test Patterns: Dùng các mẫu thử để kiểm tra các màu sắc của bạn. Có khó nhiều mẫu thử để bạn làm thử nghiêm.

 

huong dan phoi mau tren may tinh12.gif

 

————–
Hy vọng bài viết này sẽ giúp ích cho các bạn trên con đường thiết kế web của mình. 

P.S: Nếu ai sử dụng Adobe Illustrator CS4 cũng có phần phối màu đó, nó cũng sử dụng bánh xe màu như phần mềm này, có điều không hoành tránh hơn thôi.

Theo bloghoctap.com

Bạn muốn có một website đẹp hơn, chuyên nghiệp và hiệu quả hơn?
Liên hệ để được tư vấn
Ý kiến bạn đọc (30)
VT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
- 11/12/2017 10:30:45 AM
VT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
- 11/12/2017 10:30:45 AM
VT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
- 11/12/2017 10:30:45 AM
TT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
Quản trị viên - 11/12/2017 10:30:45 AM
VT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
- 11/12/2017 10:30:45 AM
VT
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
- 11/12/2017 10:30:45 AM
Gửi bình luận
Chúng tôi rất hy vọng nhận được phản hồi của bạn về bài viết này :)
Bài viết cùng chuyên mục
7.701 xem 35 bình luận
13 bình luận
1.947 xem 35 bình luận
13 bình luận
1.863 xem 35 bình luận
13 bình luận
2.190 xem 35 bình luận
13 bình luận
1.602 xem 35 bình luận
13 bình luận
1.449 xem 35 bình luận
13 bình luận
1.694 xem 35 bình luận
13 bình luận
1.081 xem 35 bình luận
13 bình luận
1.271 xem 35 bình luận
13 bình luận
1.298 xem 35 bình luận
13 bình luận
1.115 xem 35 bình luận
13 bình luận
1.510 xem 35 bình luận
13 bình luận
1.213 xem 35 bình luận
13 bình luận
1.228 xem 35 bình luận
13 bình luận
1.458 xem 35 bình luận
13 bình luận
872 xem 35 bình luận
13 bình luận
976 xem 35 bình luận
13 bình luận
946 xem 35 bình luận
13 bình luận
870 xem 35 bình luận
13 bình luận
1.016 xem 35 bình luận
13 bình luận
1.010 xem 35 bình luận
13 bình luận
1.011 xem 35 bình luận
13 bình luận
993 xem 35 bình luận
13 bình luận
26 xem 35 bình luận
13 bình luận
943 xem 35 bình luận
13 bình luận
872 xem 35 bình luận
13 bình luận
1.138 xem 35 bình luận
13 bình luận
1.467 xem 35 bình luận
13 bình luận
1.511 xem 35 bình luận
13 bình luận
2.110 xem 35 bình luận
13 bình luận

Các dịch vụ nổi bật của Tất Thành

Chúng tôi đã làm việc cùng nhau, cùng phấn đấu để Tất Thành ngày càng phát triển hơn với chất lượng sản phẩm cao cấp, dịch vụ hoàn hảo hơn, môi trường làm việc tuyệt vời hơn… để phục vụ khách hàng tốt hơn… để mỗi người đều có một tương lai tươi sáng hơn, hạnh phúc hơn, viên mãn hơn…

Thiết kế website chuyên nghiệp

Có một website chuyên nghiệp sẽ giúp bạn kinh doanh hiệu quả hơn, nhàn hơn và kiếm được nhiều tiền $$$ hơn. Website cũng giúp bạn giảm được chi phí marketing, quảng cáo, tăng lợi nhuận.

Tăng thứ hạng website trên Google (SEO)

Có 50 triệu người Việt Nam sử dụng Google để tìm kiếm thông tin, sản phẩm, dịch vụ. Nếu website của bạn xuất hiện trên Google, bạn sẽ có cơ hội tiếp cận 50 triệu khách hàng tiềm năng này.

Thiết kế bộ nhận diện thương hiệu

Doanh nghiệp thành công, phát triển là doanh nghiệp có được những logo nhận diện, profile giới thiệu, catalog sản phẩm chuyên nghiệp, ấn tượng. Đó cũng là cách để tạo ấn tượng với khách hàng, tăng tỷ lệ ký hợp đồng.

Thiết kế website đào tạo trực tuyến

Giúp giảm thiểu chi phí đào tạo, không phân biệt khoảng cách địa lý, tăng hiệu quả kinh doanh, tiết kiệm chi phí. Đây đang là xu hướng cung cấp dịch vụ đào tạo phát triển mạnh mẽ nhất.
go top
"NGAY BÂY GIỜ, khách hàng đang trên đường đến với ĐỐI THỦ của bạn. Nếu bạn không có website chuyên nghiệp, không SEO website trên Google và không có một bộ nhận diện thương hiệu chuyên nghiệp, KHÁCH HÀNG sẽ thuộc về đối thủ của bạn!
Đội ngũ tư vấn chuyên nghiệp của Tất Thành sẽ giúp bạn có được nhiều KHÁCH HÀNG hơn, nhiều TIỀN $$$ hơn một cách thường xuyên và liên tục!
Hà Mạnh Linh
Trưởng phòng tư vấn
0988.184.022 linh@tatthanh.com.vn
Võ Thị Huyền
Trưởng phòng thiết kế
0981.552.379 huyen@tatthanh.com.vn
Nguyễn Thị Hiền
Trưởng phòng SEO website
0942.416.933 hien@tatthanh.com.vn
Trần Minh Thắng
Chuyên gia tư vấn
0988.56.59.56 thang@tatthanh.com.vn
Hoặc bạn có thể gửi yêu cầu tư vấn cho chúng tôi tại đây hoặc chat online qua facebook tại đây! Trân trọng!