Khi đã biết qua [hoặc biết sâu] về lý thuyết màu, cách kết hợp và những hiệu ứng mà chúng tạo ra đối với mắt người cũng như các hiệu quả mang lại về mặt tâm lý, bạn sẽ muốn xem xét kĩ lưỡng hơn cách sử dụng màu sắc trong các sản phẩm của mình.
Có rất nhiều công cụ trực tuyến giúp bạn tìm bảng màu, hoặc tự tạo bảng màu cho chính mình. Dưới đây là một vài gợi ý.
Color Hunt
Color Hunt là nơi các nhà thiết kế chuyên nghiệp ghé thăm để tạo ra bảng màu và lựa chọn màu mà họ yêu thích. Có các bảng màu Hot [Đang nổi], Random [Ngẫu nhiên] hoặc Popular [Phổ biến]. Bạn có thể chọn bảng màu mà mình thích hoặc phù hợp với nhu cầu của mình.
Các bảng màu của Color Hunt tha hồ cho bạn lựa chọn
Flat UI Colors
Trang web Flat UI Colors có 14 bảng màu với tổng cộng 280 màu, hoạt động rất tốt trên iOS. Với Android, hãy thử dùng Material Palette, cũng là nơi được các nhà phát triển lựa chọn sử dụng.
ColorZilla
Tiện ích ColorZilla trên Chrome cực kì tuyệt vời này giúp tìm mã HEX cho bất kì màu nào trên website.
Với các công cụ có sẵn, cùng lý thuyết về màu sắc và ảnh hưởng của chúng tới tâm trạng con người, bạn có thể tạo ra bảng màu phù hợp với bát kì dự án ứng dụng / website nào của mình.
Bây giờ chúng ta sẽ cùng nhau đi vào tìm hiểu các công cụ hỗ trợ việc chọn màu cho thiết kế web được sử dụng phổ biến trong phát triển website nhé.
Màu sắc là một trong những yếu tố quan trọng trong việc thiết kế web giúp chúng ta thu hút sự chú ý đối với người dùng, thể hiện một ý nghĩa nào đó, tăng tương tác cho trang web... Nhưng việc lựa chọn các bảng màu cho một trang web rất khó khăn, đòi hỏi nhiều kiến thức chuyên sâu do đó các công cụ và trang web xây dựng bảng màu đã ra đời để giải quyết vấn đề trên
Color Hunt
Color Hunt là một bộ sưu tập bảng màu mở được xây dựng bởi Gal Shir. Nó được bắt đầu với ý tưởng chia sẻ các bảng màu giữa những đồng nghiệp trong việc thiết kế nhưng do sự hữu ích của nó nên ngày càng có nhiều người xây dựng bảng màu và chia sẻ ở trang web này. Trang web không yêu cầu chúng ta phải đăng ký tài khoản để sử dụng và bạn chỉ việc gõ màu sắc chủ đạo trang web thì lập tức nó sẽ tự động tìm các bảng màu phù hợp trang web bạn. Ngoài ra chúng ta có thể hỗ trợ cộng đồng bằng việc chia sẻ bảng màu do mình tự tạo lên trên trang web này [Nhưng cũng phải qua kiểm duyệt của Color Hunt đã nhé].
Coolors
Coolors là một trang web với số lượng bảng màu được cung cấp rất phong phú và đa dạng. Ngoài ra bạn cũng có thể tải chương trình từ các ứng dụng IOS hay Google Play để bắt đầu sử dụng trên điện thoại của mình. Theo mình thấy nó cung cấp rất nhiều chức năng trong việc hỗ trợ bạn có thể đưa ra lựa chọn bảng màu phù hợp nhất cho trang web. Tuy nhiên để hiểu và sử dụng thành thạo tất cả chức năng đó thì bạn nên dành ra từ 10 tới 20 phút đọc hướng dẫn đã nhé. Ngoài ra nó cũng cho phép chúng ta xuất bảng màu ra nhiều định dạng khác nhau như là Code, CSS, Hình Ảnh, SVG...
ColorHexa
ColorHexa không chỉ cung cấp cho chúng ta bảng màu cụ thể mà còn hiển thị thêm các thông tin chuyên sâu về màu chủ đạo của trang web. Ví dụ mình chọn màu đỏ thì nó sẽ tự động hiển thị giá trị màu đó trong RGB, Hex, HSL... hiển thị ví dụ đầy đủ khi màu đó được sử dụng như là background, border, text trong trang web. Nếu bạn là một người yêu màu sắc hay muốn học hỏi sâu hơn về các giá trị cũng như cách sử dụng màu trong thiết kế web thì đây chính là một nơi lý tưởng.
ColorDrop
ColorDrop là trang web giúp bạn có thể dễ dàng tìm những bảng màu phù hợp nhất cho trang web của mình . Ngoài ra nó cũng có thêm một số chức năng hữu ích khác như là lấy màu sắc từ hình ảnh, chuyển đối giá trị của màu sắc ví dụ như từ RGB -> HEX...
Adobe Color
Adobe Color là một công cụ cho phép chúng ta tạo và chỉnh sửa bảng màu một cách dễ dàng tuy nhiên để lưu được bảng màu của mình thì bạn cần tạo tài khoản adobe nhé. Ngoài ra nó có chức năng tự động tạo bảng bảng màu hay gradient một cách chính xác nhất thông qua hình ảnh mà chúng ta đưa lên. Adobe Color cũng cho phép chúng ta xuất bảng màu ra nhiều định dạng khác nhau như CSS, CML, LESS...
Color Safe
Color Safe là trang web giúp bạn thiết kế và tạo bảng màu phù hợp thông qua việc hiển thị độ tương phản giữa màu nền và màu chữ trong trang web mà bạn đã chọn dựa trên tiêu chuẩn WCAG. Bạn có thể tham khảo thêm ở đây nhé.
COLOURLovers
COLOURLovers là một trang web giống như mạng xã hội dùng để chia sẻ các bảng màu giữa những nhà thiết kế web với nhau. Trên đây bạn có thể tìm thấy hàng ngàn bảng màu bằng màu sắc hay hình ảnh được cập nhật liên tục từ khắp các bạn trên thế giới. Nó cho phép bạn để lại bình luận, thích hoặc chia sẻ những bảng màu mà bạn thấy đẹp lên các trang mạng xã hội khác như Facebook, Twitter... Ngoài ra COLOURLovers còn có các bài viết hướng dẫn chi tiết cách sử dụng màu sắc hay phối hợp giữa các màu trong việc thiết kế.
HTML Color Codes
HTML Color Codes là một trang web giúp bạn tạo ra bảng màu một cách dễ dàng và nhanh chóng. Nó có thể xuất bảng màu một cách nhanh chóng dưới nhiều định dạng khác nhau như HTML, CSS, SCSS, RGB, HEX. Bạn chỉ cần sao chép và bỏ vào chương trình của mình. Thật đơn giản phải không nào. Ngoài ra nó cũng cung cấp thêm tất cả các tên màu trong HTML, khóa học HTML và CSS về sử dụng màu sắc trong trang web hay các bài viết về xu hướng chọn màu cho trang web hiện nay...
0to255
0to255 là một trang web giúp chúng ta có thể tìm các màu sáng và màu tối một cách chi tiết thông qua màu sắc mà bạn đưa vào. Bạn chỉ cần nhập mã màu dưới dạng hex thì trang web sẽ xử lý và đưa ra màu thích hợp cho bạn.
Eggradients
Eggradients là một trang web với nhiệm vụ chính là cung cấp cho chúng ta những gradient được thiết sẵn bạn chỉ cần nhấn Copy CSS là có thể sử dụng ngay trong chương trình rồi. Ngoài ra nó cũng cung cấp thêm các tính năng khác như là sưu tầm các bộ bảng màu đẹp cho thiết kế, xem các màu liên quan đến màu chủ đạo...
Material Palette
Material Palette giúp bạn tạo bảng màu một cách đơn giản bằng cách là chúng ta chọn 2 màu sau đó trang web sẽ tự động tạo một bảng màu dựa trên những màu đó. Ngoài ra để bạn dễ hình dung thì nó còn cung cấp thêm phần hiển thị thành phần trang web khi sử dụng với bảng màu đó.
Canva
Canva là trang web cung cấp và tạo ra những bảng màu đẹp mắt. Ngoài ra nó cũng cho phép chúng ta lấy bảng màu thông qua hình ảnh, học về cách kết hợp màu sắc thông qua công cụ Color wheel hay giúp chúng ta hiểu được ý nghĩa của từng màu cụ thể để từ đó có thể áp dụng tốt hơn cho trang web của mình.
ColorSpace
ColorSpace là một trang web khác mình muốn giới thiệu về cách tạo bảng màu cho trang web. Bạn chỉ việc chọn màu mình thích thì nó sẽ đưa ra tất cả các bảng màu chi tiết dành cho trang web bạn. Mình thấy nó cũng có phần tạo Gradient đẹp mắt cho CSS thông qua việc bạn chọn hai màu cho gradient và hướng của hai màu đó với nhau thì trang web sẽ tự động xuất ra thuộc tính CSS cho bạn.
Happyhues
Paletton
Brandcolors
Colormind
Khroma
Color Designer
Culr
Colorbox
Eva Design System
colorsinspo
Accessible Brand Colors
Material UI Colors
Social Icon Colors
Color Hub
My Brand New Logo
Scheme Color
Designkiki
HTML COLORS
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ tạo bảng màu hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!