Xác định bảng màu từ bức ảnh. Lấy cảm hứng từ thiên nhiên

Lựa chọn màu sắc - một trong những các cột mốc quan trọng trong quá trình tạo ra một thiết kế tốt.

Để giúp bạn dễ dàng hơn, chúng tôi quyết định biên soạn một lựa chọn bao gồm dịch vụ tốt nhấtđể tạo bảng phối màu. Chúng sẽ giúp bạn tiết kiệm thời gian mà vẫn có được một kết quả tốt.

01. Adobe Color CC

Adobe đổi tên dự án Kuler của mình thành Color

Bạn có thể quen thuộc với công cụ này theo tên cũ của nó - Adobe kuler... Tuy nhiên, Adobe gần đây đã đổi tên một trong những ứng dụng web phổ biến của mình là Adobe Color CC.

Nó cho phép bạn chọn, tạo và lưu các bảng màu khác nhau, mỗi bảng màu có thể chứa tối đa năm màu. Công cụ này có sẵn trong cả phiên bản trình duyệt và máy tính để bàn. Nếu bạn đang sử dụng phiên bản dành cho máy tính để bàn, thì bạn có thể xuất bảng màu thẳng vào Photoshop, Illustrator và InDesign.

02. Quả cầu màu Mudcube

Nếu bạn không chắc chắn về cách phối màu của mình, Mudcude có phòng trưng bày nội dung làm sẵn của riêng mình.

Mudcube Color Sphere là một tài nguyên thu nhỏ rất tiện dụng cho các nhà thiết kế, không chỉ cung cấp mã hex cho các màu đã chọn mà còn cho phép bạn tạo các bảng phối màu cho các dự án của riêng mình. Cũng cần lưu ý rằng Mudcube có thư viện tài sản làm sẵn của riêng mình mà bạn cũng có thể sử dụng.

03. Kiểm tra màu sắc của tôi

Kiểm tra màu sắc của tôi được thiết kế đặc biệt để đánh giá và đối sánh sự kết hợp màu nền và nền trước cho tất cả các phần tử DOM. Và cũng để tìm hiểu xem các yếu tố có đủ hài hòa với nhau hay không. Tất cả các bài kiểm tra đều dựa trên các thuật toán do World đề xuất Web rộng Consortium ( W3C).

04. Ứng dụng Màu

Ứng dụng sẽ giúp bạn tìm ra các giá trị RGB, HEX và HSLA của các màu đã chọn

Công cụ iOS Ứng dụng màu cho phép bạn xác định màu sắc một cách đơn giản và dễ dàng bằng cách sử dụng một bảng màu lớn. Nó cho phép bạn tìm ra các giá trị RGB, HEX và HSLA của màu sắc, cũng như tạo các sơ đồ màu của riêng bạn cho trang web.

05. Thợ săn màu

Color Hunter tạo bảng phối màu dựa trên hình ảnh đã chọn

Cái này rất là công cụ tiện dụng, đặc biệt nếu bạn cần tìm một màu cụ thể. Chọn một hình ảnh và tải nó lên Color Hunter. Công cụ sẽ tạo một bảng màu dựa trên hình ảnh đã chọn. Đây là một phương pháp tuyệt vời để tạo bảng phối màu của riêng bạn.

06. TinEye

Nếu bạn cần lấy một màu cụ thể, chỉ cần nhập giá trị HEX vào url

Trang web này sử dụng cơ sở dữ liệu gồm 10 triệu hình ảnh có sẵn miễn phí từ thỏa thuận cấp phép Creative Commons do những người sáng tạo từ Flickr tuyển chọn. Chúng có thể được sử dụng để tạo ra các bảng màu thích hợp.

07. Màu sắc

Ứng dụng web thu nhỏ tiện lợi. Di con trỏ chuột qua màn hình và xác định màu bạn muốn, sau đó cuộn một chút để tìm bóng râm. Sau đó, công cụ sẽ hiển thị tất cả các mã HEX cần thiết có thể được sử dụng trong dự án riêng... Một trong những công cụ dễ sử dụng nhất.

08. SpyColor.com

Một trình tạo bảng màu miễn phí cung cấp thông tin về màu sắc và cũng cho phép bạn chuyển đổi nó thành bất kỳ cách phối màu nào ( RGB, CMYK khác ). Có sẵn ở đây các định dạng khác nhau các chương trình màu, bao gồm quá trình, đơn sắc và các chương trình khác.

09. Thời hạn

Designspiration cho phép bạn chọn tối đa năm sắc thái với bảng màu toàn trang tiện dụng giúp bạn dễ dàng tìm thấy các sơ đồ màu HTML mà bạn đang tìm kiếm. Sau đó, trang web sẽ tạo một trang với tất cả các hình ảnh từ cơ sở dữ liệu sử dụng kết hợp màu tương tự. Nó cũng sẽ cung cấp các giá trị HEX mà bạn có thể sử dụng trong các dự án của riêng mình. Và hình ảnh có thể được lưu trong các bộ sưu tập trên trang web.

10. ColorExplorer

Một trong những công cụ dựa trên web phức tạp nhất, nó cung cấp nhiều tính năng liên quan đến thiết kế, tùy chỉnh và phân tích bảng màu. Dưới đây là các công cụ giúp bạn xác định WCAG hợp lệ của các sơ đồ màu cũng như tạo bảng màu của riêng bạn.

11. Bộ tạo bảng màu Hex

Một công cụ nhỏ tiện dụng để tạo ra sự kết hợp của các màu dựa trên một màu đã chọn. Dán một giá trị màu Hex và công cụ sẽ cung cấp một tập hợp các màu phù hợp có thể được sử dụng cùng với màu cơ bản.

12. COLOURlovers

COLOURlovers là một cộng đồng chia sẻ các cách phối màu. Tại đây bạn có thể lấy cảm hứng từ bộ màu người dùng khác và tạo và chia sẻ của riêng bạn.

13. Trình thiết kế bảng màu

Công cụ trực tuyến này cung cấp những cách thú vị tạo ra các bảng màu, cho phép bạn điều chỉnh độ sáng của chúng và điều chỉnh độ tương phản. Tại đây bạn có thể tạo một số mô hình toán học phối màu, bao gồm cả đơn sắc.

14. COPASO

Một trong những công cụ từ trang COLOURlovers. Nhưng COPASO đáng được chú ý đặc biệt, vì đây là một giải pháp tất cả trong một đáng kinh ngạc và giúp bạn dễ dàng tạo các phối màu sẵn sàng cho trang web. Có rất nhiều công cụ kết hợp màu sắc được trình bày ở đây và tất cả chúng đều được đặt ở vị trí thuận tiện và giao diện đơn giản... Ngoài ra, bạn có thể thêm ghi chú vào bảng màu, tải hình ảnh lên, v.v.

15. Colourmod

Colourmod là phần mềm cho phép bạn lựa chọn màu sắc cá nhân từ khu vực tiện ích, cho dù bạn đang sử dụng Mac hay Konfabulator trên Windows. Đây không phải là một công cụ dễ dàng để làm việc với bảng màu, nhưng nó sẽ giúp bạn nhanh chóng và dễ dàng xác định màu sắc mà không cần phải tải xuống các chương trình nặng.

16. ColorZilla

ColorZilla có sẵn cho cả Chrome và Firefox

Dự án này bắt đầu như một plugin của Firefox, nhưng ngày nay nó cũng có sẵn cho Google chrome... ColorZilla là một tiện ích mở rộng bao gồm một số công cụ để làm việc với màu sắc, bao gồm bảng màu, trình tạo gradient css và bút nhỏ mắt.

17. Colormunki

Một công cụ kết hợp màu trực tuyến tiện dụng từ những người tạo ra Colormunki. Nó cho phép bạn dễ dàng tạo bảng màu hấp dẫn từ các mẫu màu dựa trên Pantone bằng cách sử dụng một số kỹ thuật.

18.colr.org

Colr.org cho phép bạn thiết lập dải màu của bất kỳ hình ảnh nào

Công cụ này cho phép bạn phân tích chi tiết màu sắc của hình ảnh, thường được tự động hóa trong các công cụ khác. Điều này sẽ cho phép bạn chọn màu phù hợp nhất. Chúng tôi khuyên bạn nên tự làm quen với công cụ này, mặc dù giao diện của nó không được chu đáo như trong các ứng dụng khác.

19. ColourGrab

Công cụ tiện dụng này tạo bảng màu từ bất kỳ hình ảnh nào. Chèn URL của hình ảnh bạn muốn phân tích và dịch vụ sẽ tự động tạo đồ thị ba chiều với thông tin về màu sắc được sử dụng. Mặc dù ứng dụng này không hoàn toàn phù hợp để chọn bảng màu cho trang web, nhưng nó có thể được sử dụng để kiểm tra hình ảnh và đặc điểm màu sắc của chúng.

20. ColorBlender

ColorBlender tạo ra một bảng gồm năm màu phù hợp

Một trong những công cụ đơn giản nhất cho phép bạn điều chỉnh màu sắc và có được năm màu phù hợp trong thời gian thực. Bảng màu đã tạo có thể được tải xuống trong Photoshop hoặc Illustrator dưới dạng tệp EPS.

21. GrayBit

GrayBit ​​cho phép bạn phân tích các trang web để hiểu chúng sẽ xuất hiện như thế nào trong thang độ xám

Công cụ này sẽ giúp bạn xem trang web của bạn trông như thế nào với tông màu xám. Dịch vụ tuyệt vời, điều này sẽ cho phép bạn xác định các khu vực có vấn đề ngược lại.

22. LẠNH

Một công cụ có thể được sử dụng như một nguồn cảm hứng hoặc để chia sẻ các cách phối màu. Tất nhiên, tài nguyên này sẽ không giúp ích gì cho việc tạo mạch, nhưng bạn chắc chắn nên lưu ý về nó.

23. Quang phổ Shutterstock

Những nỗ lực để tìm ra cách phối màu hoàn hảo đã bắt nguồn từ sâu trong lịch sử, từ những kiệt tác của các nghệ sĩ vĩ đại. Giờ đây, các nhà thiết kế đang tìm kiếm sự kết hợp hoàn hảo giữa các màu sắc, giống như một viên đá triết học. Như nhà ấn tượng người Pháp Claude Monet đã nói: “Màu sắc là nỗi ám ảnh hàng ngày, niềm vui và nỗi day dứt của tôi”.

Mọi người liên kết màu sắc với các đối tượng như táo đỏ và cỏ xanh. Ngoài ra, chúng tôi coi màu sắc là một cái gì đó không đổi, ngay cả khi chúng tôi biết rằng rượu vang trắng thực sự có màu vàng, thậm chí khá vàng, và nước biển xanh không hề có màu xanh lam, và màu của nó có thể từ xám đậm đến xanh ngọc.

Chúng ta hoàn toàn bỏ qua thực tế rằng việc giải thích màu sắc là một quá trình phức tạp không chỉ liên quan đến mắt mà còn cả tâm trạng trong nhận thức của chúng ta. Khi tạo một trang web, một nhà thiết kế phải đối mặt với một số câu hỏi cần có câu trả lời. Và một trong số chúng là sự kết hợp của nhiều màu sắc, lý tưởng cho một dự án web trong tương lai, cho dù nghe có vẻ tầm thường đến đâu. Sự hài hòa của màu sắc là điều đầu tiên đập vào mắt của du khách, do đó, tốt hơn là bạn nên suy nghĩ về sắc thái này.

Chúng tôi giới thiệu đến bạn mười lăm dịch vụ trực tuyến tuyệt vời để giúp bạn chọn kết hợp màu phù hợp. Nhiều tài nguyên cho phép bạn tải xuống bảng màu làm sẵn để tinh chỉnh chúng sau này. Dịch vụ cho phép bạn tìm kiếm và nhóm các bảng phối màu theo từng từ khóa và sắc thái. Nó sẽ giúp ích rất nhiều khi bạn có một màu và cần sử dụng nó với một số màu khác, tương tự. Nhưng điều quan trọng nhất là tất cả các dịch vụ được cung cấp đều hoàn toàn miễn phí.

4. VỚI ColoRotate bạn có thể dễ dàng tạo và quản lý bảng màu trong không gian thể tích 3D cho kiểm soát tốt hơn văn bản và màu nền. Màu sắc trở nên sống động bởi vì tâm trí của chúng ta cảm nhận màu sắc khác nhau về khối lượng. Các thanh trượt và cần điều khiển trực quan và dễ sử dụng. Ngoài ra, bạn có thể đồng bộ bảng màu giữa các máy tính và chia sẻ các phôi của mình với đồng nghiệp hoặc khách hàng.

5. ColorBlender Là một công cụ dễ sử dụng để tạo bảng màu để phát triển web. Chức năng chính của tài nguyên này là tạo một bảng màu gồm sáu màu. Bạn chọn một màu và chương trình sẽ chọn năm màu phù hợp khác. Điều này giúp tạo bảng màu dễ dàng và nhanh chóng.

6. Colormunki Là một nguồn tài nguyên đa chức năng để làm việc với bảng màu và quản lý màu sắc cho thiết kế đồ họa, công nghiệp và nội thất.

7. ColorExplorer là một công cụ miễn phíđể thiết kế và làm việc với bảng màu. Bộ công cụ trang web không giới hạn lựa chọn màu sắc, bạn có thể xem các thư viện màu phổ biến, thư viện liên kết, xuất bảng màu sang các chương trình phổ biến như AdobePhotoshop, Illustrator và nhiều chương trình khác. Ngoài ra, bạn có thể nhập màu từ hình ảnh. Trang web này đã được thiết kế đặc biệt cho nhà thiết kế chuyên nghiệp... Không có đăng ký, bảng màu đã chọn có thể được lưu một cách đơn giản. Tuy nhiên, nếu bạn muốn bảo vệ bảng màu của mình khỏi đôi mắt tò mò, bạn cũng có thể tạo hồ sơ của riêng mình.

8. ý chính Сolr: Chơi với màu sắc và cách phối màu. Trang web này vừa là một món đồ chơi vừa là nơi tạo ra những ý tưởng nghiêm túc.

9. VỚI ColorCombos bạn sẽ bước vào thế giới màu sắc, trong đó bạn chắc chắn tìm thấy bảng màu lý tưởng của mình. Trang web này được tạo ra để giúp các nhà phát triển và thiết kế web nhanh chóng lựa chọn và kiểm tra kết hợp khác nhau những bông hoa. Thư viện tài nguyên chứa hàng trăm và hàng nghìn mẫu màu. Với sự trợ giúp của tài nguyên này, bạn có thể tạo một trang web đẹp với sự kết hợp màu sắc tuyệt vời.

10. Trên Ficml bạn có thể chọn các sắc thái màu và nhờ vào số được hiển thị, bạn có thể sử dụng các màu này trong AdobePhotoshop hoặc các chương trình khác. Chỉ cần một vài cú nhấp chuột tạo ra ma thuật màu sắc.

11. Trên Сolrd bạn có thể tạo bảng phối màu, mẫu, tải lên hình ảnh để tìm hiểu nó dải màu và nhiều hơn nữa.

12. ColorHunter Là tài nguyên nơi bạn có thể tìm và tạo bảng màu được tạo từ hình ảnh. Để tìm bảng màu trên trang web, bạn cần nhập truy vấn tìm kiếm trong hộp ở đầu trang. Bạn có thể tìm kiếm theo thẻ, mã thập lục phân màu sắc hoặc liên kết hình ảnh. Hình ảnh cũng có thể được tải xuống từ PC.

13. cho phép bạn mô phỏng chín loại mù màu.

14. Etsy Là vui nhất và cách bất thường chọn màu.

15. Trên Archizona có thể chọn sự kết hợp tối ưu của các màu bằng cách di chuyển thanh trượt ở dưới cùng. Nó tương tự như bánh xe màu. Đây là một trong số ít các dịch vụ đối sánh màu bằng tiếng Nga.

Chúng tôi hy vọng những công cụ này sẽ giúp bạn tìm được bảng màu hoàn hảo cho dự án web trong tương lai của bạn.

Tương tác giữa con người và máy tính chủ yếu dựa vào yếu tố đồ họa giao diện và màu sắc đóng một vai trò quan trọng trong quá trình này. Như Pierre Bonnard đã từng nói, "Màu sắc không chỉ làm cho một thiết kế đẹp mắt mà còn củng cố nó."

Bằng cách thiết kế Sản phẩm mới, các nhà thiết kế thường gặp khó khăn trong việc vẽ ra một bảng màu, vì có thể có vô số cách kết hợp. Trong bài viết này, chúng tôi sẽ giới thiệu cho các bạn tám quy tắc cơ bản có thể giúp bạn đưa ra lựa chọn của mình.

1. Giới hạn số lượng màu

Nếu bạn cần các màu bổ sung ngoài những màu đã được thêm vào bảng màu, hãy sử dụng các sắc thái khác nhau.

Cách tạo bảng màu

Một vòng tròn 12 màu như vậy là một trong những nguyên liệu chính để biên soạn một bảng màu.

Tồn tại toàn bộ dòng Sẵn sàng chương trình tiêu chuẩnđiều này có thể giúp quá trình tạo bảng màu dễ dàng hơn, đặc biệt là đối với người mới bắt đầu:

Bảng màu đơn

Các sơ đồ đơn sắc để lại ấn tượng rất dễ chịu (đặc biệt nếu chúng được làm bằng các sắc thái xanh lam hoặc xanh lục). Như bạn thấy trên ví dụ về Facebook, bảng màu trông rất gọn gàng và thanh lịch.

Bảng màu một màu là dễ sử dụng nhất: chúng chỉ chứa một màu với các biến thể khác nhau về màu sắc và độ bão hòa. Tất cả các sắc thái màu phối hợp tốt với nhau và tạo ra hiệu ứng dịu mắt.

Bảng màu liên quan

Các màu có liên quan là những màu nằm cạnh nhau trên hình tròn.

Các thang đo như vậy được xây dựng trên cơ sở các màu có liên quan: một trong số chúng trở thành tham chiếu, và phần còn lại được sử dụng để làm phong phú bảng màu. Ở đây, mọi thứ cũng khá đơn giản, nhưng mẹo là chọn độ sáng phù hợp của màu sắc được sử dụng - nó sẽ thiết lập tông màu cho toàn bộ gam màu. Ví dụ: Clear, một tiện ích danh sách việc cần làm được hướng dẫn bằng cử chỉ, sử dụng màu sắc sặc sỡ để thu hút sự chú ý một cách trực quan đến các công việc mà người dùng đang thực hiện. khoảnh khắc này... Ngược lại, ứng dụng thiền Calm lại thích một cặp màu liên quan là xanh lam + xanh lá cây để tạo cảm giác yên bình và tĩnh lặng cho người dùng.

Bảng màu bổ sung

Bằng cách sử dụng các màu bổ sung (đối lập), bạn có thể dễ dàng làm nổi bật một phần tử một cách trực quan.

Các giống đơn giản nhất thuộc loại này bao gồm hai màu tương phản mạnh với nhau. Đề án này cho phép bạn thu hút sự chú ý của người xem. Khi sử dụng bảng màu bổ sung, bạn cần quyết định màu chính và áp dụng màu bổ sung để nhấn mạnh các yếu tố chính. Ví dụ, khi mắt người nhìn thấy một vật được sơn các sắc thái khác nhau của màu xanh lá cây, một vệt màu đỏ sẽ nổi bật rất mạnh so với nền của nó.

Bảng màu tùy chỉnh

Tạo bảng màu của riêng bạn không khó như nhiều người nghĩ. Có một cách rất đơn giản mà bạn có thể sử dụng để lấy lựa chọn tuyệt vời: chỉ cần thêm điểm nhấn sáng sủa sang một gam trung tính (nghĩa là, những gì thường được gọi là đen và trắng). Bảng màu kết quả sẽ trông rất ấn tượng.

2. Lấy cảm hứng từ thiên nhiên

3. Cố gắng tuân theo tỷ lệ 6/3/1

Việc biến khái niệm này thành hiện thực rất đơn giản: màu tham chiếu của bạn phải là 60%, thêm 30% và 10% nên dành cho các điểm nhấn. Ý tưởng cơ bản là màu bổ sung nên đóng vai trò hỗ trợ cho cái chính, nhưng đồng thời phải dễ dàng phân biệt với nền của nó. Màu sắc chiếm 10% màn hình để làm nổi bật trực quan các khu vực cụ thể - bạn có thể sử dụng nó cho lời kêu gọi hành động hoặc bất kỳ yếu tố nào khác.

4. Thiết kế màu đen và trắng đầu tiên

Nhập màu cuối cùng và rất có mục đích.

5. Tránh màu đen

Nếu bạn thêm màu đen vào tập hợp các màu được lựa chọn cẩn thận của mình, nó sẽ lấn át tất cả những màu khác. Nó rất ấn tượng bởi vì nó không được coi là tự nhiên. Nhiều ứng dụng chúng ta sử dụng hàng ngày thêm các màu được cho là đen vào giao diện, thực tế là màu xám đen. Ví dụ: màu tối nhất trong bảng điều khiển trên cùngỨng dụng Asos không phải là # 000000 mà là # 242424. Vì vậy, đừng quên điều chỉnh độ bão hòa.

6. Xây dựng hệ thống phân cấp trực quan với độ tương phản

7. Sử dụng màu sắc để tác động đến trạng thái cảm xúc của người dùng.

Khi vẽ bảng màu cho một giao diện, việc chỉ nghĩ đến mọi thứ sẽ trông như thế nào là chưa đủ - bạn cần quan tâm đến việc nó sẽ được nhìn nhận như thế nào. Màu sắc bạn chọn có thể củng cố hình ảnh thương hiệu mà bạn đang cố gắng tạo ra hoặc mâu thuẫn với nó. Để giúp bạn bắt đầu, tôi đã tổng hợp một bảng nhỏ cho bạn với những liên tưởng cơ bản cho từng màu (trong văn hóa phương Tây).

Đỏ, cam, vàng

quả cam(nghịch ngợm, nảy lửa, hấp dẫn, rẻ tiền): Màu cam ấm và màu sáng... Nó tạo ra một bầu không khí vui vẻ và mang lại cảm giác ấm áp, thoải mái cho người sử dụng. Một số nhà nghiên cứu cho rằng màu cam thể hiện ý tưởng rẻ tiền.

Màu vàng(vui vẻ, chào đón, kích thích, bắt mắt): Màu vàng là một màu cực kỳ linh hoạt kết hợp các sắc thái với những nghĩa khác nhau... Vì vậy, màu vàng nhạt được liên kết với mặt trời, nghĩa là, với một cái gì đó tích cực và thân thiện. Màu sắc bão hòa hơn để lại ấn tượng về thời cổ đại và tính di tích. Chúng thường được sử dụng khi bạn cần thể hiện điều gì đó không thể lay chuyển và khôn ngoan.

Xanh lá cây, xanh lam, tím

Màu xanh dương(bình tĩnh, có trách nhiệm, đáng tin cậy, đáng tin cậy): Màu xanh da trời thường được liên kết với cảm giác yên bình và tĩnh lặng, cũng như sức mạnh và độ tin cậy, nói chung mang lại cảm giác chuyên nghiệp và tạo sự tự tin. Blue nói với chúng tôi rằng chúng tôi an toàn. Vì lý do này, nó được sử dụng tích cực bởi các ngân hàng và các công ty CNTT. Nhiều người khổng lồ trên thị trường mạng xã hội(Facebook, Twitter, LinkedIn) màu xanh lam cũng xuất hiện trong giao diện.

Màu tía(Sang trọng, Huyền bí, Lãng mạn, Tâm linh): Màu tím trong lịch sử được coi là màu gắn liền với hoàng gia và gợi ý rằng sản phẩm là tinh hoa.

Hồng, đen, trắng, xám

Màu đen(mạnh mẽ, tinh vi, bí ẩn, thách thức): Màu đen thu hút sự chú ý nhanh hơn bất kỳ màu nào khác, ngay cả màu đỏ. Theo quy định, nó chỉ được sử dụng cho văn bản và dấu.

trắng(sự tinh khiết, khỏe mạnh, ngây thơ, đức hạnh): Màu trắng nhấn mạnh tốt các màu xung quanh nó, vì vậy nó thường được chọn làm màu bổ sung.

xám(trung tính, trang trọng, tinh vi, vô trùng): Màu xám để lại cảm giác trung tính và có thể mang các đặc điểm của cả màu đen và trắng. Đóng vai trò là màu chính, nó tạo ra một bầu không khí trang trọng.

8. Làm cho thiết kế có thể truy cập được

Không sử dụng màu sắc làm chỉ số duy nhất của bạn

Vì mù màu có các dạng khác nhau (một số không phân biệt giữa đỏ và xanh lá cây, một số khác - vàng và xanh lam, và một số khác nhìn thấy mọi thứ bằng các sắc thái xám), nên cần phải sử dụng một số điểm đánh dấu thị giác cùng một lúc để xác định các trạng thái quan trọng nhất trong sản phẩm. Để mô tả hành động hoặc nội dung, ngoài màu sắc, bạn cũng có thể bao gồm kiểu, biểu tượng, mẫu, kết cấu và văn bản.

Làm cho văn bản càng tương phản càng tốt

Theo dõi độ tương phản để đảm bảo màu văn bản đủ nổi bật so với màu nền để ngay cả người bị mù màu hoặc thị lực rất kém cũng có thể phân biệt được các từ. Tỷ lệ tương phản là một biểu thức toán học về việc một màu khác với màu khác bao nhiêu (thường được viết như sau: 1: 1, 21: 1). Thế nào khác biệt hơn giữa các con số, các màu càng khác nhau về độ sáng. W3C khuyến nghị các mối quan hệ sau giữa độ sáng của văn bản và hình ảnh:

• Nếu văn bản nhỏ, tỷ lệ ít nhất phải là 4,5: 1;
• Đối với văn bản lớn (tức là 14 pt trở lên cho in đậm, 18 pt trở lên - đối với bình thường), tỷ lệ tối ưu là 3: 1 trở lên.

Phần thưởng: Các công cụ cần thiết cho một UX Designer

Adobe màu cc
Adobe Color CC (trước đây gọi là Kuler) - Giải pháp hoàn hảođể tìm, chỉnh sửa và tạo bảng màu. Bạn có thể sửa đổi từng màu trong gam màu hoặc đặt nó làm tham chiếu chỉ trong một vài cú nhấp chuột. Các bảng màu làm sẵn có thể được lưu và thêm vào thư viện; Bên cạnh đó, trong mở quyền truy cập trên trang web là một số lượng lớn các lược đồ màu do các thành viên khác của cộng đồng tạo ra.

Một thiết kế trang web hiệu quả là không thể tưởng tượng được nếu không có bảng màu. Nó vẫn còn để tìm ra cách làm điều này.

Có lẽ đối với một số dự án, bạn đã chọn một số màu phù hợp với bảng màu của logo hoặc thương hiệu của mình và đang tạo một trang web trong những hạn chế này. Những người khác chỉ là bản phác thảo. Ngoài ra còn có những thứ cần thay đổi nhỏ để có thể làm cho trang web đẹp hơn và thân thiện hơn với người dùng.

Cho dù bạn đang tìm kiếm cơ hội để làm cho mọi thứ dễ dàng và nhanh chóng hơn hay nếu bạn đang xây dựng một trang web lần đầu tiên, những công cụ này sẽ giúp bạn tìm ra giải pháp.

Hãy bắt đầu với Tom lược vào lý thuyết màu sắc.

Dưới đây, bạn sẽ tìm thấy 19 tài nguyên để giúp bạn chọn bảng màu cho trang web của mình.

Sự chuẩn bị

Cần nguồn cảm hứng?

1.

BrandColors giới thiệu cách các thương hiệu hàng đầu sử dụng màu sắc để tạo sự khác biệt cho các doanh nghiệp, kể câu chuyện của họ và đại diện cho các giá trị. Bạn có thể xem danh sách các công ty, tổ chức phi lợi nhuận và các công ty khởi nghiệp tại thứ tự ABC hoặc tìm một thương hiệu quan tâm thông qua tìm kiếm.

Tìm kiếm một bảng màu làm sẵn?

2.

Đây là một diễn đàn về thiết kế bảng màu với gần 2.000.000 tùy chọn do người dùng tải lên. Bạn có thể tải xuống bảng màu chứa một màu cụ thể và đọc những gì nhà thiết kế nói. Theo quy luật, đối với một kết hợp, một số tùy chọn, khác nhau về độ bão hòa, được đưa ra.

Bảng màu đi kèm với những cái tên nổi bật: Storm in Whitsunday (Quần đảo Thái Bình Dương trong Biển San hô), Twilight in Whitsunday, Đảo Whitsunday

3.

Tài nguyên này cho phép người dùng tạo và tải lên các sơ đồ màu của riêng họ. Bạn có thể lọc chúng theo ngày, xếp hạng và số lượt tải xuống hoặc tìm kiếm theo từ khóa.

4.

ColoRotate cung cấp một thư viện các bảng màu mà bạn có thể xem, chọn và thay đổi. Một công cụ 3D đặc biệt (3D công cụ màu). Phối màu bạn tạo có thể được áp dụng ngay lập tức trong PhotoShop hoặc Fireworks bằng cách cài đặt plugin ColorRotate hoặc ứng dụng iPad.

Theo yêu cầu thương hiệu

Điều gì sẽ xảy ra nếu bạn đã có các yêu cầu về hình ảnh, biểu trưng hoặc thương hiệu cần được đáp ứng?

1.

Trang web này không hoạt động tốt như một số trang trong danh sách này, nhưng nó thực hiện một công việc tuyệt vời mà nó đã được tạo ra - nghiên cứu màu cụ thể... Chỉ cần tải lên một bức ảnh và Color Hunter sẽ tạo ra một bảng màu dựa trên nó. Đây là một cách tuyệt vời để đạt được sự hài hòa giữa hình ảnh và màu sắc chính của trang web. Ngoài ra, ở đây bạn có thể mở rộng bảng màu của trang web mà bạn thích.

2.

Pictaculous tạo bảng màu từ ảnh. Tất cả những gì bạn phải làm là tải lên một bức ảnh để có được màu sắc phù hợp với nó. Ngoài ra, tài nguyên sẽ cung cấp các bảng màu làm sẵn phù hợp với bạn.

3.

Công cụ này được gọi là Adobe Kuler và dùng để so sánh màu sắc. Bây giờ thì đúng là vậy hệ thống hoàn chỉnh công cụ tạo bảng màu cho phép bạn thử, so sánh và lưu các kết hợp màu sắc. Bạn có thể chọn loại bảng màu và tạo bảng phối màu năm màu tự động hoặc sử dụng cài đặt thủ công.

4.

Paletton tăng tốc quá trình tạo bảng màu. Bạn cần chọn kiểu lược đồ: đơn chất, hợp chất, bộ ba, vở, liên quan, liên quan-tương phản. Ngay sau khi bạn thay đổi một màu, phần còn lại sẽ tự động điều chỉnh.

5.

Color Spire cũng xây dựng một bảng màu dựa trên một màu duy nhất. Bạn chọn một bóng nguồn và nhận các tùy chọn cho các lược đồ phù hợp. Bạn cũng có thể xem bản xem trước của bảng màu đã chọn trông như thế nào trên trang web.

6.

Plugin này dành cho Chrome giúp hài hòa màu sắc, giải quyết tình trạng mù màu và xác định mã HEX. Các bảng màu có thể được xuất trực tiếp sang Illustrator, PhotoShop và CoIRD.com.

7.

Tài nguyên này cho phép bạn thao tác với bảng màu của riêng mình, chọn và thêm các sắc thái. Do đó, bạn nhanh chóng và dễ dàng tạo kế hoạch mới dựa trên cái hiện có.

8.

Công cụ này chọn màu phù hợp với màu của bạn. Nó nguyên thủy hơn một chút so với các tài nguyên khác trong danh sách này. Bạn cần chèn mã HEX của màu vào dòng hoặc chọn nó từ quang phổ được trình bày dưới dạng bánh xe. Máy tạo ra 3 màu phù hợp với bạn và đi kèm với chúng là mã HEX.

Tạo màu của bạn

Nhiều tài nguyên trong danh sách này giả định rằng bạn có màu gốc. Nếu không cần phải đáp ứng các yêu cầu về thương hiệu và BrandColors không giúp được gì trong việc lựa chọn, bạn có thể bắt đầu với một bản phác thảo.

1.

Ứng dụng iOS này giúp bạn chọn từ một số màu được đặt cạnh nhau qua khoảng cách ngắn, thuận tiện hơn nhiều so với biểu diễn gradient, vòng tròn và quang phổ. Lưới màu lớn cho phép bạn sử dụng toàn bộ màn hình (điều này đặc biệt có giá trị đối với chủ sở hữu iPad Pro). Trong ứng dụng, bạn có thể tạo các mẫu màu, tìm các giá trị RGB, HEX và HSLA và vẽ bảng màu từ các bản phác thảo.

3. Màu sắc

Trong Color from HailPixel, không thể không quyết định màu sắc. Bạn sẽ biết chính xác những gì bạn muốn và nhận được mã HEX của bóng râm.

Bạn di chuyển chuột hoặc cử chỉ của mình và màu sắc sẽ thay đổi một chút mỗi lần. Nó trông giống như một quả cầu màu, liên tục có các màu đi kèm với mã HEX. Khi bạn di chuyển sang trái và phải trên màn hình, màu sắc sẽ thay đổi, lên và xuống độ bão hòa.

Nhận mã màu

Nếu bạn nhìn thấy một màu ở đâu đó và muốn biết mã và tên của nó, thì những tài nguyên này là dành cho bạn.

1.

SpyColor sẽ cung cấp thông tin về bất kỳ màu nào, bao gồm Hex, RGB, CMYK và các mã khác, đồng thời hiển thị một loạt các lược đồ cho mỗi bóng, bao gồm bổ sung, bổ sung tách biệt, quy trình, độ tương phản và tương tự.

2.

Mã màu HTML tìm mã HEX cho các màu trong hình ảnh. Bạn chọn một bức tranh, mở nó ra để xem và lấy mã màu bằng cách di chuột vào nó.

Kiểm tra bảng màu của bạn

Sau khi tạo ra một bảng màu, tôi muốn đảm bảo tính hiệu quả của nó.

Kiểm tra Màu sắc của tôi kiểm tra cơ bản và màu nềnđể tuân thủ các yêu cầu về độ tương phản đối với những người có nhận thức về màu sắc có độ lệch so với tiêu chuẩn. Cho dù bạn muốn đảm bảo trang web của mình phù hợp với những người bị mù màu hay để có được sự kết hợp màu sắc trực quan và hiệu quả từ góc độ UX, thì tài nguyên này là không thể thiếu. Chỉ cần nhập địa chỉ trang web để xem báo cáo bằng hình thức bên ngoài là đủ.

Tại đây, bạn có thể chọn tối đa 5 sắc thái từ một bảng màu khổng lồ và nhận được những hình ảnh có sự kết hợp màu sắc tương tự và kèm theo mã HEX. Hình ảnh có thể được lưu trên trang web hoặc tải xuống.

Phần kết luận

Tạo bảng màu cho một trang web là một công việc thủ công ở giao điểm của nghệ thuật và khoa học. Những tài nguyên này sẽ giúp bạn tăng tốc và đơn giản hóa hành trình của mình đến một hình ảnh đẹp và hoạt động hiệu quả.

Hôm nay, tôi sẽ hướng dẫn bạn cách tạo nhanh một bảng màu trong Sketch. nó tính năng thú vịđiều đó đã dạy tôi Mark Edwards vài năm trước.

Đầu tiên, tạo ba hình vuông với chiều dài cạnh là bội số của ba. Trong ví dụ của chúng tôi, đây là những hình vuông cao 240pt và rộng 240pt.

Thay đổi tên của các lớp này thành Red, Green và Blue. Hãy tô màu Red layer với # FF6161, xanh lá cây với # 4F953B và xanh lam với # 0076FF. Chọn các lớp này và nhấn phím "A" để chọn công cụ "Artboard". Bây giờ chọn tùy chọn “Xung quanh lựa chọn” trong bảng “Người kiểm tra” ở bên phải. Hãy thay đổi tên của bảng vẽ của chúng tôi: hãy gọi nó là “Bảng màu”.

Bây giờ chúng ta sẽ thêm các sắc thái khác nhau vào các hình vuông, chia chúng theo chiều dọc thành ba phần bằng nhau. Để làm điều này, hãy tạo hai hình chữ nhật phía trên các hình vuông, bằng chiều rộng của toàn bộ bản vẽ. Chiều cao của hình chữ nhật phải bằng ⅓ chiều cao của hình vuông - trong trường hợp của chúng ta là 80pt.

Căn chỉnh một hình chữ nhật với cạnh trên cùng của ardboard và tô nó bằng màu trắng, và hình còn lại với cạnh dưới và tô nó bằng màu đen. Bây giờ đặt độ mờ của các hình chữ nhật thành 20%. Chúng tôi đã kết thúc với ba sắc thái khác nhau là đỏ, xanh lá cây và xanh lam. Hãy đổi tên hai lớp này để không bị nhầm lẫn về chúng sau này.

Bây giờ chúng ta sẽ chia các ô vuông một lần nữa - lần này là theo chiều ngang. Tạo một hình chữ nhật có cùng chiều cao với hình vuông. Chiều rộng của hình chữ nhật này là ⅓ chiều rộng của chính hình vuông. Căn chỉnh hình chữ nhật với tâm của hình vuông màu đỏ. Bây giờ chúng ta hãy nhân đôi hình chữ nhật này và căn chỉnh hình chữ nhật mới với cạnh bên phải của hình vuông màu đỏ.

Bây giờ cuộc vui bắt đầu. Tô hai lớp này với một số màu bouncy. Chúng tôi sẽ sử dụng màu vàng (# FFE200). Đặt độ mờ của hình chữ nhật ở giữa thành 40% và hình bên phải là 80%. Cuối cùng, thay đổi chế độ hòa trộn ( chế độ hoà trộn) để phủ lên.

Bây giờ chúng ta cần chia hình chữ nhật chính cho chín. các phần bằng nhau... Về cơ bản, bạn chỉ có thể nhân đôi hai hình chữ nhật đứng cuối cùng và di chuyển chúng sang các hình vuông màu xanh lá cây và xanh lam để có được một bảng màu hoàn chỉnh.

Kết quả cuối cùng

Cách sử dụng màu trong Sketch

Sketch có chức năng ẩn, nhờ đó bạn có thể xác định các màu thường được sử dụng trong tài liệu. Tính năng này có thể được tìm thấy trong Trình kiểm tra khi bạn chọn màu tô. Ở bên phải, ngay phía trên giá trị alpha, có một hộp màu. Khi chúng ta nhấp vào cửa sổ này, một bảng điều khiển sẽ mở ra, hiển thị các màu thường dùng.

Bảo quản màu trong Sketch đủ dễ dàng. Khi bạn chọn một màu, bạn sẽ thấy hai bảng: Màu toàn cục và Màu tài liệu. Màu phổ biến là màu được lưu trên tất cả các tài liệu. Màu tài liệu chỉ xuất hiện cho tài liệu bạn đang làm việc.

Mẹo: Để nhanh chóng chọn một màu, hãy nhấn “Control + C” và nhấp vào màu sắc mong muốn... nó phím nóng cho công cụ nhỏ mắt.

Plugin Sketch Palettes

Khi bạn làm việc trên dự án quan trọng với nhiều tệp, bạn không phải tạo màu tài liệu theo cách thủ công.

Đây là lúc plugin Sketch Palettes có ích. Nó cho phép bạn lưu bảng màu vào một tệp mà sau này bạn có thể nhập vào tài liệu khác. Bằng cách này, bạn có thể nhanh chóng thêm màu thương hiệu vào bất kỳ tài liệu mới nào.