Hướng dẫn thiết kế trang web cho trẻ em: Màu sắc

Chào mừng các bạn đến với phần thứ 10 trong loạt bài  Hướng dẫn thiết kế trang web cho trẻ em, bài học về Màu sắc.

Trong bài giảng lần này chúng ta sẽ đi sâu vào việc tìm hiểu lý thuyết về sắc màu, các cách khác nhau trong việc sử dụng màu sắc trong CSS, ý nghĩa của một số màu nhất định, và duyệt lại cách chọn màu phù hợp nhất cho trang web. Cuối cùng, ta sẽ cùng nhau đến với một số lưu ý khi sử dụng màu trên trang web.   

Đừng ngại để lại câu hỏi ở khung bình luận cuối trang nếu như bạn có bất kỳ thắc mắc nào! 

Lý thuyết sắc màu 

Lý thuyết màu sắc liên quan tới rất nhiều thứ, nhưng trọng tâm là về cách làm cho màu sắc trở nên thuận mắt nhất trong thiết kế. Ta thường gọi một nhóm các màu được chọn để phối hợp với nhau là Bảng điều phối màu. Một bảng điều phối màu hợp lý sẽ bao gồm các màu hỗ trợ cho nhau (complement) và có độ tương phản (contrast) cao cùng sự bắt mắt (vibrancy). Chúng ta sẽ bàn về nghĩa của các từ này sau.  

Biết chọn màu cho chính xác và nắm được rằng tại sao chỉ một vài màu nhất định mới phù hợp có ảnh hưởng lớn tới sự thành công của bản thiết kế. Quá ít màu sắc sẽ làm trang web trở nên khó sử dụng, hoặc dẫn tới việc không đọc được chữ và khiến người truy cập rời đi. 

Một vài thuật ngữ

Trước khi tìm hiểu kỹ hơn thì chúng ta nên học một số thuật ngữ cơ bản về màu sắc thường được dùng. Sử dụng những từ chuyên môn này sẽ giúp ta hiểu rõ hơn về sự độc đáo của mỗi màu sắc. 

Sắc độ 

Sắc độ (nhiều hay ít) là màu sắc của một vật.  Khi ta nói một vật “đỏ” hay “vàng” nghĩa là ta đang nói về sắc độ của chúng.

Độ bão hòa màu 

Độ bão hòa chỉ sự sinh động hay độ rực rỡ của một màu sắc.  Độ bão hòa thấp sẽ làm màu bị phai, còn độ bão hòa cao giúp màu trở nên sáng chói hơn rất nhiều.  

Độ sáng 

Độ sáng chỉ sự tối sáng của một màu.  Ta có từ màu đen (thiếu sáng) cho tới màu trắng (thừa sáng).

Bánh xe màu

Bánh xe này dựa trên các màu đỏ, vàng và xanh, là những màu rất phổ biến đối với các họa sỹ. Với tư cách là một nhà thiết kế, hiểu được rằng màu sắc được tạo nên ra sao sẽ giúp ta có ý niệm rõ ràng hơn rằng vì sao những màu nào có thể hỗ trợ cho nhau. 

Bánh xe bên trái dưới đây mang 3 màu sơ cấp.  Bằng 3 màu này ta có thể tạo ra tất cả các màu khác.

Bánh xe bên phải thì mang các màu thứ cấp, đó là những màu được tạo ra bằng cách trộn các màu sơ cấp. Ví dụ, xanh trộn với vàng ta sẽ có xanh lá cây, còn xanh trộn với đỏ sẽ ra màu tím.

Bánh xe bên trái ở hình sau thể hiện một lớp màu nữa: các màu cao cấp.  Đây là những màu được tạo ra khi ta trộn màu sơ cấp và màu thứ cấp với nhau. Ví dụ, trộn màu xanh với màu tím tạo ra một màu tím xanh hơi tối.

Hệ thống màu cho trang web

Có rất nhiều hệ thống màu (cách diễn tả màu sắc) nhưng chỉ có một vài hệ thống là phù hợp cho các trang web.

RGB

RGB viết tắt của "Red Green Blue" và mô tả cách mà chúng ta nhìn màu sắc trên các thiết bị điện tử. Ba màu này có thể được kết hợp lại để tạo ra nhiều màu sắc khác nhau. Ba giá trị được liệt kê theo thứ tự và mỗi cái đi từ 0 đến 255.

1

body {

2

    background: rgb(138,138,226);

3

}

CSS ở trên tạo ra một nền màu vàng cam trong một trang. Bên trong cặp dấu ngoặc nhọn bạn có thể thấy các giá trị đỏ, xanh lá cây, và xanh nước biển.

Chúng ta chỉ sử dụng một giá trị thập lục phân của màu sắc cho đến lúc này của bàn viết, nhưng chúng ta có thể sử dụng một màu trong CSS của chúng ta theo nhiều cách khác nhau.

Truy cập trang này để tham khảo nhanh danh sách mã thập lục phân và các giá trị RGB cho 500 màu cụ thể.

HSL

HSL là viết tắt của "Hue Saturation Lightness" và giá trị được tạo thành từ ba con số theo thứ tự.

Chúng ta có thể định nghĩa màu vàng cam tương tự trong phần body của một trang sử dụng một giá trị HSL thay cho số thập lục phân hoặc các giá trị RGB của màu sắc.

1

body {

2

    background: hsl(43,100%,57%);

3

}

Giá trị đầu tiên ở đây là 43, đại diện cho một góc trên một vòng tròn màu. Điều này cho chúng ta một hue (sắc độ). Màu đỏ là 0 hoặc 360 độ, trong khi đó màu xanh lá là 120 độ và xanh nước biển là 240 độ.

Giá trị thứ hai cho chúng ta phần trăm của saturation (độ bão hoà) cho màu sắc, với 100% ở đây đang là đậm hoàn toàn.

Giá trị cuối cùng, lightness (độ sáng), xác định độ sáng hay tối của hue. 100% là trắng, 0% là đen, và bất kỳ thứ gì nằm giữa sẽ thiết lập một sự kết hợp của cả hai.

Giá trị nào mà chúng ta sử dụng trong CSS của chúng ta là hoàn toàn tuỳ thuộc vào chúng ta, nhưng các giá trị HSL là đơn giản hơn để đoán bằng cách chọn một giá trị góc di chuyển theo chiều kim đồng hồ từ đỏ (0) và sau đó thêm giá trị phần trăm của saturation và lightness mà chúng ta muốn.

Tên các Màu sắc

Hiện có một lượng giới hạn các màu sắc có tên mà chúng ta có thể sử dụng trong CSS, không yêu cầu các con số.

1

body {

2

    background: green;

3

}

Một danh sách đầy đủ của các tên màu sắc có thể được tìm thấy ở đây.

Lưu ý nhanh trên các Công cụ chuyển đổi

Nếu chúng ta đã từng có một giá trị Thập lục phân và cần giá trị RGB hoặc HSL của màu sắc đó (hoặc ngược lại!) có một số công cụ đơn giản sẽ làm công việc này cho chúng ta, như rgb.to và Colorrrs.

Ý nghĩa của màu sắc

Màu sắc mang nhiều ý nghĩa. Tùy thuộc vào đất nước bạn sống, một màu sắc nhất định có thể được sử dụng để biểu đạt ý nghĩa là nguy hiểm, tình yêu, hạnh phúc, hay xấu xa. Màu sắc có thể khiến người dùng phản ứng với một số cảm xúc, do đó, có một sự hiểu biết những điều này là quan trọng để truyền đạt thông điệp của chúng ta cho người dùng.

Hãy xem biểu đồ này cho thấy màu sắc khác nhau mang ý nghĩa là những thứ khác nhau trong các nền văn hóa khác nhau như thế nào.

Chúng ta hãy thảo luận ngắn về một số ý nghĩa đằng sau ba màu cơ bản: màu vàng, màu đỏ và xanh.

Màu vàng

Màu vàng thu hút sự chú ý của người dùng nhiều hơn bất kỳ màu nào khác và thường đại diện cho hạnh phúc và ánh nắng mặt trời. Mặt khác, màu vàng có thể cũng có nghĩa là "nguy hiểm", như được hiển thị với nhiều tín hiệu giao thông.

Sử dụng màu vàng trên các trang web có thể rất bắt mắt, vì vậy tốt nhất không lạm dụng nó và đảm bảo rằng chúng ta chỉ đang làm nổi bật thông tin quan trọng.

Màu đỏ

Tùy thuộc vào đất nước mà bạn đang sống, màu đỏ có nghĩa là bất cứ điều gì từ mối nguy hiểm cho tới sự tức giận, cho tới năng lượng, tình yêu và hạnh phúc. Cho dù nó có ý nghĩa gì, thì màu đỏ luôn luôn được sử dụng để đại diện cho một cảm giác tột cùng hay một hành động.

Trong thiết kế web màu đỏ thường được sử dụng để truyền đạt việc xoá hoặc các lỗi. Nó là một màu đậm mà bắt lấy sự chú ý của người dùng do đó, nó có thể làm việc tốt như là một màu nhấn mạnh. Quá nhiều màu đỏ trên một trang web có thể quá mạnh và có thể rất khó để nói điều gì là đặc biệt quan trọng.

Màu xanh nước biển

Màu xanh nước biển đại diện cho cả sự trầm tĩnh và buồn bã đối với hầu hết các phần và là một màu rất phổ biến trên trang web.

Cảm giác tạo ra bằng cách sử dụng màu xanh nước biển trong các thiết kế phụ thuộc rất nhiều vào mức độ đậm nhạt và màu mà chúng ta lựa chọn. Trong khi một màu xanh đậm sẽ truyền đạt sức mạnh và độ tin cậy, một màu xanh lợt hơn sẽ thêm sự vui vẻ và thân thiện.

Lựa chọn một Bảng màu

Hầu hết các trang web sẽ có một loạt các màu sắc để tạo ra sự phân cấp và thiết lập cảm xúc của một thiết kế. Sự lựa chọn màu sắc của chúng ta có thể quan trọng như tất cả các quyết định thiết kế khác mà chúng ta đã thực hiện cho đến lúc này, vì vậy chúng ta cần phải có một cái nhìn tốt đối với các màu nào có thể kết hợp với nhau, chúng ta có thể đạt được một sự tương phản tốt hay không trên trang web, và nếu các màu sắc có mang cùng cảm xúc và ý nghĩa như nội dung của chúng ta hay không.

Dưới đây là cái nhìn khác của bảng màu chính được sử dụng trong suốt loạt bài hướng dẫn Tuts+ Town:

Màu sắc nhẹ hơn được sử dụng như là các nền trong khi màu sắc đậm hơn được sử dụng cho các văn bản hoặc để làm nổi bật các phần nhất định.

Màu bổ sung và Tương phản

Nói chung, các màu sắc nằm đối diện nhau trên bánh xe màu được xem như là dễ chịu đối với mắt. Đây là những màu sắc bổ sung-khi được kết hợp chúng tạo ra một sắc thái của màu xám. Có thể cho các màu sắc nằm cạnh nhau trên bánh xe màu sắc kết hợp với nhau, nhưng có thể cần một chút điều chỉnh về độ bão hòa và độ sáng để có được cặp màu ưng ý.

Chúng ta cũng đã đề cập một chút về độ tương phản trong hướng dẫn trước trong khái niệm thiết kế cơ bản, nhưng hãy xem lại một cách ngắn gọn.

Độ tương phản thích hợp làm giảm mỏi mắt và làm sự phân cấp trở nên rõ ràng. Ví dụ tốt nhất của tương phản tốt và xấu có thể được nhìn thấy bằng cách so sánh sự kết hợp màu sắc của nền và văn bản cụ thể.

Hình ảnh trên cho thấy độ tương phản kém ở bên trái với độ tương phản tốt hơn ở bên phải. Văn bản với độ tương phản kém thì khó đọc và làm đau mắt của chúng ta,  tạo ra một hiệu ứng mờ.

Công cụ Bảng Màu

Có các công cụ cung cấp cho chúng ta danh sách các bảng màu đáng yêu để lựa chọn từ đó, đó có thể là một sự tiết kiệm thời gian và cung cấp nguồn cảm hứng tuyệt vời.

Coolors

Coolors.co là một trong những công cụ chọn màu đơn giản nhất hiện có.

Nó cung cấp cho chúng ta các bảng màu đẹp mà chúng ta có thể tùy chỉnh và thay đổi bằng cách nhấn phím cách.

Adobe Color

Adobe Color là một công cụ lựa chọn màu sắc khác sử dụng bánh xe màu sắc tuyệt vời mà chúng ta đề cập trước đó.

Chúng ta có thể tạo ra các thay đổi trên bánh xe màu sắc, xác định các bảng màu của chúng ta, và sau đó tiếp tục điều chỉnh đối với mỗi màu sắc riêng.

Adobe Color cũng cho phép chúng ta lưu bảng màu yêu thích của chúng ta và duyệt qua những cái phổ biến, được chọn sẵn.

Mẹo chung

Khi lựa chọn màu sắc cho trang web, và áp dụng chúng cho các phần tử trên trang, điều quan trọng là nhớ một số thứ để đảm bảo rằng các màu sắc cải thiện trải nghiệm của người dùng.

Tương phản

Tương phản là rất quan trọng, mà khi không chắc chắn, hãy kèm với các tùy chọn an toàn nhất; thậm chí nếu nó có vẻ như có một chút "nhàm chán"! Một số nhiệm vụ quan trọng nhất mà chúng ta phải làm khi là nhà thiết kế là đảm bảo các thứ hoạt động, dễ dàng sử dụng và dễ đọc. Độ tương phản kém sẽ hạn chế người dùng có thể đọc nội dung tuyệt vời của chúng ta.

Bạn có thể mạo hiểm với việc lựa chọn màu sắc của bạn, nhưng các lựa chọn không nên tách khỏi các hoạt động tổng thể của trang web hoặc sao lãng so với nội dung.

Số lượng Màu

Công cụ lựa chọn bảng màu, giống như Coolors, sẽ thường cung cấp cho chúng ta năm màu. Năm màu cho phép chúng ta có một hoặc hai màu sắc chủ đạo và một số màu sắc ít quan trọng cho những thứ như các nút và các liên kết.

Có nhiều hơn năm màu sắc khác nhau làm cho thiết kế của chúng ta có nguy cơ bị thiếu thống nhất và khó để theo dõi; mặc dù màu trắng, màu đen và màu xám không được tính ở đây.

Các mẫu phổ biến

Điều thực sự quan trọng không nên đi lệch khỏi việc sử dụng màu sắc mà thông thường được chấp nhận bởi nhiều người. Ví dụ, hầu hết mọi người thường sử dụng màu xanh lá cây có nghĩa là "thêm" và màu đỏ có nghĩa là "xóa". Đảo ngược điều này trên trang web của chúng ta sẽ là một quyết định tồi tệ bởi vì nó không phải là những gì được mong đợi và sẽ hoàn toàn gây bối rối người dùng.

Tổng kết

Trong hướng dẫn này chúng ta đã đề cấp đến lý thuyết và các quy tắc của màu sắc, cách lựa chọn và sử dụng chúng hợp lý trên web. Mỗi màu sắc mang trong nó một thông điệp. Chúng ta cần đảm bảo rằng thông điệp này phù hợp với các nội dung của chúng ta thông qua các lựa chọn bảng màu một cách cẩn thận.

Tiếp theo chúng ta sẽ kết thúc loạt bài viết của chúng ta với một số những suy nghĩ cuối cùng và những cách khác nhau mà chúng ta có thể chia sẻ công việc khó khăn của chúng ta với bạn bè và gia đình trực tuyến.

Hẹn gặp bạn ở thị trấn!