Hãy sử dụng bất cứ công cụ nào trong danh sách của chúng tôi để xây dựng bảng màu hoàn hảo cho website của bạn.
(Nguồn: TravelCouples trên Getty Images)
Các công cụ màu sắc giúp những nhà thiết kế web với một trong những lựa chọn quan trọng nhất mà họ phải đưa ra khi tạo ra website: lựa chọn màu sắc. Những màu sắc chúng ta lựa chọn có thể mang đến một ảnh hưởng tâm lý đến người xem nên việc này thực sự quan trọng và chúng ta cần làm đúng.
Ví dụ, đỏ thì thường được coi là màu của năng lượng, trong khi màu xanh lam gợi lên sự bình tĩnh và yên bình. Để minh họa cho điều này, hãy xem xét những màu bạn dùng cho website bán đồ chơi trẻ em với màu của website của hãng luật. Điều thú vị là bạn thường sẽ chọn những màu sáng, rực rỡ cho website trẻ em, trong khi chọn những tông màu tĩnh lặng như xanh lam và xám cho website luật.
Nhưng bằng cách nào bạn biết những màu nào có thể kết hợp với nhau? May mắn là, bạn không cần phải là một bậc thầy về lý thuyết màu sắc để có được một bảng màu tốt. Để giúp bạn trong sự lựa chọn khó khăn này, chúng tôi đã tổng hợp ở đây 14 công cụ thiết kế màu sắc web tốt nhất – và tất cả chúng đều miễn phí.
- HueSnap
Những bức ảnh ngẫu nhiên truyền cảm hứng cho bạn và biến chúng thành những bảng màu đẹp mắt
HueSnap luôn ở nơi bạn cần bất cứ khi nào có những ý tưởng nảy sinh. Nó có thể là màu trang trí phòng khách sạn hoặc màu đèn trong công viên khiến bạn có một ý tưởng thú vị cho bảng màu của thiết kế web của mình. Hãy chụp nhanh một bức ảnh với HueSnap để trích xuất màu từ hình ảnh và biến chúng thành một bảng màu.
Ứng dụng này được dành riêng cho thiết bị di động và bạn có thể lưu và chia sẻ bảng màu của bạn (tối đa lên tới 6 màu mỗi bảng màu) với người khác. Có nhiều tính năng giúp bạn chỉnh sửa bảng màu, như những tùy chọn màu bổ sung và phối màu.
- Khroma
Khroma sử dụng AI để đề xuất những màu sắc bạn sẽ thích
Khroma là một công cụ màu sắc dựa trên AI giúp bạn dễ dàng duyệt và so sánh những tổ hợp màu gốc. Bạn huấn luyện thuật toán AI để đóng vai trò hỗ trợ cho não bạn. Hãy bắt đầu bằng việc chọn 50 sắc độ màu bạn thích, những lựa chọn này được dùng để huấn luyện hệ thống trí tuệ nhân tạo có thể nhận diện hàng tram ngàn những màu tương tự nhau.
- Coolors.co
Phần “Explore” chứa hàng trăm – nếu không nói là hàng ngàn – những lựa chọn bảng màu
Coolors mang đến nhiều tính năng đa dạng để điều chỉnh bảng màu theo cách bạn muốn. Thêm vào đó, bạn có thể xuất sáng tạo của mình thành nhiều định dạng khác nhau nên bạng có thể sử dụng chúng ở hầu như mọi nơi bạn muốn. Coolors không chỉ là một công cụ để tạo bảng màu, nó còn cho phép bạn nhìn những sáng tạo hoàn thiện của người khác để bạn có thêm cảm hứng. Phần “Explore” có hàng trăm (nếu không nói là hàng nghìn) bảng màu bạn có thể xem, lưu và chỉnh sửa.
Coolors có sẵn cho máy tính để bàn. Thậm chí, nó còn phiên bản ứng dụng di động cho iOS, một add-on cho Adobe (PhotoShop, Illustrator, InDesign) và Google Chrome để truy cập dễ dàng hơn.
- Adobe Color CC
Xuất hiện đã lâu nhưng Adobe Color CC vẫn hữu ích một cách đáng ngạc nhiên
Công cụ miễn phí Adobe Color CC đã xuất hiện một thời gian, và nó là một trong những công cụ màu sắc tốt nhất hiện tại trên thị trường. Bạn không chỉ có thể tạo những bảng màu của riêng mình mà còn có thể khám phá những bảng màu của người khác tạo ra. Hãy tạo một màu từ bánh xe màu (hoặc từ một hình ảnh) và áp dụng những quy tắc màu sắc như chỉ dùng màu bổ sung, những màu hoặc sắc độ đơn sắc của màu bạn chọn, để tạo bảng màu của bạn. (Hoặc, click chuột vào mỗi màu và khám phá bánh xe màu để cá nhân hóa sự lựa chọn của bạn.)
Tính năng mới nhất của Adobe Color CC là công cụ khả năng truy cập, thứ cho bạn biết về những màu sắc bạn chọn có thân thiện với người mù màu và có thể sử dụng làm nền cho text được không.
- Colordot
Hãy sử dụng những cử chỉ chuột đơn giản để xây dựng bảng màu của bạn
Colordot của Hailpixel là một công cụ miễn phí trực tuyến tuyệt vời để tạo ra một bảng màu. Sử dụng những cử chỉ chuột đơn giản, bạn có thể lựa chọn và lưu màu sắc. Hãy di chuyển chuộttiến và lùi để thay đổi sắc độ, lên và xuống để thay đổi độ sáng, cuộn để thay đổi độ bão hòa và clich để lưu một màu vào bảng màu. Hãy click vào biểu tượng tog để xem những giá trị RGB và HSL của mỗi màu. Thậm chí còn có cả một ứng dụng iOS cho phép bạn chụp lại những màu sắc với camera của bạn.
- Eggradients
Nguồn cảm hứng từ hiệu ứng chuyển sắc và những cái tên khơi gợi cảm xúc
Eggradients mang đến những ý tưởng hiệu ứng chuyển sắc đẹp mắt để sử dụng trong thiết kế của bạn, mang tinh thần của một nhà thiết kế không chỉ giỏi về màu sắc mà còn có sự hài hước vô tận. Mỗi chuyển sắc hiển thị với hình trứng, cùng với cái tên khơi gợi cảm xúc. Những ví dụ điển hình bao gồm ‘Wozniak’s Broken Heart – Trái tim tan vỡ của Wozniak’ với một màu xanh tái và một chuyển sắc đỏ tía mang tên ‘Tax-free earnings – Thu nhập miễn thuế’.
- 147 Colors
Công cụ miễn phí này bao gồm những màu CSS tiêu chuẩn
Khi bạn chịu trách nhiệm tạo ra những thiết kế CSS dễ đọc, đôi khi sử dụng những màu và tên mà tiêu chuẩn là con đường phù hợp để đi. Nhờ có 147 Colors của Brian Maier Jr, bạn có thể nhanh chóng nắm bắt được chúng, và chọn những màu thực sự phù hợp cho mình. Nó bao gồm 17 màu tiêu chuẩn công với 130 tên CSS khác. Hãy lọc kết quả bằng sắc độ màu lam, xanh lá,…hoặc chọn từ danh sách đầy đủ.
- Canva Color Palette Generator
Tạo ra một bảng màu từ một hình ảnh
The Color Palette Generator của Canva là lựa chọn hoàn hảo nếu bạn đang tìm kiếm một bảng màu dựa trên một hình ảnh nào đó. Mặc dùng có những công cụ khác cũng mang đến tính năng tương tự, phần mềm của Canva là công cụ siêu dễ sử dụng: bạn tải lên một hình ảnh và công cụ sẽ trả về 5 màu sắc chính có trong bức ảnh đó. Bạn có thể click vào những màu sắc bạn thích và copy giá trị HEX của màu đó vào clipboard của mình.
Không may là, sự hữu ích của nó chỉ dừng lại ở đó. Bạn không thể điều chỉnh màu sắc của bảng màu được tạo ra. Lựa chọn duy nhất là bạn copy mã hex được cung cấp hoặc tải lên một bức hình khác. Thay vào đó, bạn có thể sử dụng bánh xe màu của Canva để tạo ra một bảng màu tùy biến một cách thủ công.
- Material Design Palette
Tạo ra một bảng màu dựa trên những nguyên lý thiết kế vật liệu của Google
Với Material Design Palette, bạn có thể lựa chọn 2 màu – thứ sau đó được chuyển đổi thành một bảng màu đầy đủ cho bạn để tải về, hoàn chỉnh kèm với khả năng xem trước. Hãng cũng cung cấp Material Design Colors – công cụ cho phép nhà thiết kế nhìn những sắc độ khác nhau của một màu, cùng với giá trị hex tương ứng của chúng.
- ColourCode
Lưu và xuất những bảng màu dưới dạng file SCSS, LESS hoặc PNG
ColourCode của Tamino Martinius và Andreas Storm tương tự với Colordot, nhưng nó mang tính hướng dẫn nhiều hơn một chút. Công cụ miễn phí này đơn giản và trực tiếp, phô diễn một lớp nền thay đổi màu sắc với sự di chuyển chuột của bạn. Bên cạnh đó, công cụ này cũng cấp những thể loại khác nhau cho bảng màu (analogue, triad, quad, monochrome, monochrome light,…)
Với ColourCode, bạn có thể đặt những tùy chọn khác nhau cùng với bánh xe màu để tạo ra một tổ hợp màu nguyên gốc. Bạn cũng có thể lưu bảng màu của mình hoặc xuất ra dạng file SCSS hoặc LESS. Bạn thậm chí còn có thể xuất ra dạng file PNG nếu bạn thích.
- Color Calculator
Hãy lựa chọn một màu và một màu cộng hưởng, và công cụ này sẽ tạo ra cả một bảng màu
Công cụ Color Calculator từ Sessions College khá dễ sử dụng: bạn chỉ cần lựa chọn một màu sắc và một tùy chọn màu cộng hưởng. Đổi lại, bạn nhận lấy kết quả là một bảng màu mà công cụ đề xuất. Đó là điều hữu ích ở trang web này, tuy nhiên cần hiểu chi tiết một chút về lý thuyết màu sắc và cách liên hệ với những lựa chọn màu sắc của bạn.
- HTML Color Code
Bộ công cụ này bao gồm một danh sách tên màu tiêu chuẩn
HTML Color Codes là một bộ công cụ khá tốt đến từ Dixon & Moe, bao gồm một bộ lựa chọn màu nâng cao với nhiều cách giải thích về quy luật màu sắc, một chuỗi những đồ thị màu sắc giới thiệu những màu sắc thiết kế theo phong cách phẳng, bảng màu thiết kế vật liệu của Google và những bảng màu cổ điển cho website, và một danh sách những tên và mã màu HTML tiêu chuẩn.
Website này cũng cung cấp nhiều chỉ dẫn và những tài liệu khác cho những nhà thiết kế web, và những tùy chọn để xuất kết quả từ công cụ của nó như mã HEX, HTML, CSS và SCSS.
- W3Schools: Colors Tutorial
Bài hướng dẫn miễn phí này liên kết với một số công cụ màu sắc hữu ích tiện dụng
Nếu bạn đang tìm kiếm một giải pháp tất cả trong một, bao gồm chỉ dẫn màu sắc, cũng như một số những công cụ khác nhau, thì Colors Tutorial là lựa chọn hoàn hảo cho bạn. Bạn không chỉ có thể học về lý thuyết màu sắc, bánh xe màu và những sắc độ màu, mà còn có thể sử dụng những công cụ nó có, như Color Converter. Với công cụ này, bạn có thể chuyển đổi bất cứ màu sắc nào thành tên màu, mã HEX, giá trị RGB, HSL, HWB và CMYK hoặc ngược lại.
- Digital Color Meter (Mac)
Công cụ tích hợp sẵn trong Mac cho phép bạn đưa ra bảng màu cho riêng mình
Với công cụ được tích hợp sẵn trong máy là Digital Color Meter, bạn có thể “tóm lấy” một màu sắc từ bất cứ nơi nào trên màn hình của mình, và sau đó nhận được giá trị cho màu sắc đó dưới dạng hex, thập phân hoặc phần trăm. Thêm vào đó, bạn thậm chí có thể “copy” màu sắc được chọn dưới dạng text hoặc hình ảnh.
Nguồn: creativebloq.com
