ТОП-40 Программ для Подбора Цвета – Plerdy

Copy

Linear Radial

Set angle to

degree(s)

Нас постоянно окружают тысячи цветов и десятки тысяч оттенков. У многих людей часто возникают задачи, связанные с подбором правильного оттенка. Это дизайнеры, контент-менеджеры, программисты и многие другие. Для облегчения их работы были созданы различные инструменты колор пикеры. Часть из этих сервисов поможет в выборе необходимого оттенка из палитры, другие позволяют узнать код необходимого цвета.
Эта статья посвящена 40 удобным сервисам для работы с цветом, под разные платформы и для различных нужд. Не будем затягивать вступление и переходим к делу.

Содержание

WEB-ориентированные Color Picker
1. Cohesive Colors
2. Сolourco
3. Colorblender
4. Colorsontheweb
5. Webcolourdata
6. Paletton
7. Adobe Color CC
8. Colourlovers
9. Copaso
10. Colorexplorer
11. Colrd
12. Colorhexa
13. Gradients
14. Htmlcolorcodes
15. Color picker
16. Chrome Dev Tools
17. Eye Dropper
18. ColorPick Eyedropper
Десктопные color picker
19. Instant Eyedropper
20. Just Color Picker
21. Colormania
22. ColorPic
23. Pixie
24. GPick
25. Pick
26. Gcolor2
27. ColorSnapper 2
Мобильные color picker
28. iDropper: the color sampling tool
29. Pixel Picker — Image Color Picker
30. ColorAssist Lite
31. Color Mate — Convert and Analyze Colors
32. Pixolor — Live Color Picker
33. Color Grab
34. RAL простой каталог цветов
35. Color Lab
JS color picker
36. Tiny Colorpicker
37. Spectrum
38. Pick-a-Color
39. Eyecon Colorpicker
40. Farbtastic
Вывод

WEB-ориентированные Color Picker

Основным преимуществом этого типа колор пикера является то, что они могут работать на любом устройстве, независимо от типа или операционной системы. Также, это очень удобно для тех, кто часто находится вне дома или рабочего места. Благодаря web-базированым вам не нужно каждый раз снова устанавливать или настраивать систему. Достаточно лишь перейти на сайт. Крупнейшими недостатками, соответственно, является обязательное наличие интернета и возможность вытягивания цветов только из браузера.

1. Cohesive Colors

Простой инструмент для подбора цвета и сочетания различных оттенков. Сначала нужно выбрать цветовую палитру, а затем один из предложенных цветов. Также можно сразу узнать обозначения цвета в различных форматах.

2. Сolourco

Интересный и очень необычный color picker, который представлен в виде web-страницы, меняющей свой цвет в зависимости от позиции курсора. Также на сайте представлены различные палитры и цветные схемы, работающие по схожему принципу. Когда пользователь находит цвет который ему понравился, для дальнейшей работы нужно, всего лишь, нажать на код цвета. После чего мы сможем изменить оттенок, а также увидеть его запись в разных форматах.

3. Colorblender

Еще один колор пикер, с помощью которого можно быстро и удобно подбирать сочетания разных оттенков. Когда пользователь редактирует какой-то определенный цвет, все остальные меняются автоматически. Также под каждым отдельным оттенком отображается его код в разных цветовых моделях. К примеру: rgb или hex.

4. Colorsontheweb

В рамках сайта пользователь может как воспользоваться сервисом для подбора цвета, так и определениям цветовых схем. Также, дополнительно, в пределах ресурса есть большое количество информации о теории цвета.

5. Webcolourdata

Оригинальный сервис, который позволяет получить все цвета интересующего вас веб-сайта. Для примера, на главной странице указаны результаты анализа различных известных ресурсов: Facebook, Instagram, Microsoft. Для того чтобы получить анализ того сайта который нам интересен, нужно вставить его URL в соответствующее поле и, после обработки, получить результат. Кроме перечня цветов и их процентного соотношения, пользователь увидит специализированные диаграммы.

6. Paletton

Это многофункциональная палитра для подбора цвета, в которой можно сразу увидеть и сравнить несколько комбинаций оттенков. Также есть возможность увидеть, как этот цвет будет отображаться на тестовой веб-странице. Отдельной особенностью достойной внимания является наличие симуляции того как пользователи с проблемами восприятия цвета видеть тот или иной оттенок.

7. Adobe Color CC

Этот color picker разработан компанией Adobe и содержит в себе все необходимые инструменты для подбора цвета. В нем есть несколько вариантов встроенной цветовой гаммы, а также возможность сравнения оттенков. Кроме этого есть возможность сохранять цветные темы других пользователей и применять их наработки.

8. Colourlovers

Это не просто колор пикер, а целая платформа для дизайнеров. В ее рамках можно спокойно найти цветные палитры, готовые сочетания оттенков, принты и другие полезные материалы. Также эта платформа имеет собственный инструмент для подбора цвета, о котором пойдет речь ниже.

9. Copaso

С помощью этого color picker можно создать и сохранить собственную цветовую палитру, выбрать цвет из уже существующих или воспользоваться функционалом для подбора цвета.

10. Colorexplorer

С помощью этого color picker можно создать и сохранить собственную цветовую палитру, выбрать цвет из уже существующих или воспользоваться функционалом для подбора цвета.

11. Colrd

Еще один интересный сервис с возможностью как создания собственных цветов, так и просмотра уже имеющихся. На главной странице сайта мы можем пересмотреть список работ других авторов, которые подразделяются на цвета, палитры, градиенты, шаблоны и изображения.

12. Colorhexa

Colorhexa — это color picker который имеет широкий функционал. Используя его можно легко найти всю необходимую информацию о любом оттенке. Дополнительно, цвет будет отображаться так, как его видят люди с различными расстройствами зрения.

13. Gradients

С помощью Gradients можно быстро подобрать нужный вам градиент. На сайте изложены примеры переходов цвета, а также описание начального и конечного оттенка.

14. Htmlcolorcodes

Этот Color picker позволяет подбирать цвета и оттенки. Также благодаря удобному интерфейсу, можно быстро узнать название цвета в различных системах записи, а также увидеть похожие на него оттенки.

15. Color picker

Этот пункт нашего ТОПа, пожалуй, наиболее уникален. Для того чтобы получить простенький колор пикер, нужно, всего лишь, ввести в гугл ключевой запрос «color picker», после этого вам отобразится эта палитра.

16. Chrome Dev Tools

Chrome Dev Tools — это инструменты разработчика для браузера Google Chrome. Однако и в нем можно найти средство для подбора цветов. Для начала нужно вызвать инструменты разработчика. Нажмите комбинацию клавиш Ctrl + Shift + T или кликните правой кнопкой мыши по веб-сайту и в контекстном меню выберите пункт «Просмотреть код». После этого выберите элемент который вас интересует, в окне style вы сможете увидеть цвет этого элемента. Если один раз кликнуть по цвету, можно будет перейти к встроенному color picker.

17. Eye Dropper

Этот Color Picker является ничем иным как расширением для браузера Google Chrome. С его помощью можно как легко подобрать цвет из палитры, так и использовав «пипетку» узнать цвет любого элемента веб-страницы.

18. ColorPick Eyedropper

Еще одно расширение для браузера которое может подобрать цвет любого элемента на веб странице. Для этого достаточно лишь установить приложение и навести на нужную точку, чтобы узнать ее цвет.

Десктопные color picker

Особенностью этого типа программ является привязка к персональным компьютерам и, довольно часто, к определенной операционной системе. Основными преимуществами является возможность работать оффлайн, а также на всех окнах. То есть если с помощью WEB-основанных сервисов мы могли вытянуть цвет только с веб-страниц, то с помощью этого типа программ мы не ограничены окном браузера. Дополнительно мы можем настраивать быстрые клавиши для увеличения удобства работы или добавлять программы в автозагрузку для экономии времени.

19. Instant Eyedropper

Instant Eyedropper — это первый в нашем списке color picker разработан для настольных компьютеров под OS Windows. С его помощью можно быстро извлечь любой цвет, просмотреть его в различных форматах записи и скопировать код.

20. Just Color Picker

Программа Just Color Picker является портативной, то есть не требует установки и готова к использованию сразу после загрузки. С ее помощью можно легко получить любой цвет из окон ПК и увидеть его код в 12 вариантах записи. Дополнительно можно разложить выбранный цвет с помощью цветовых кругов, а быстрые клавиши значительно ускоряют работу.

21. Colormania

Colormania — одна из самых известных программ для работы с цветом для настольных компьютеров. Свою популярность он заслужил благодаря удобному интерфейсу, возможности подбора и сравнения оттенков и большом количестве цветовых моделей. Дополнительной функцией является Zoom пипетки. С его помощью можно увеличить необходимый фрагмент для максимально точного выделения цвета.

22. ColorPic

ColorPic — это десктопная аппликация для подбора цветов. Программа имеет широкий функционал: несколько встроенных палитр, различные режимы подбора цвета, масштабирование, сетку, сравнение оттенков и тому подобное.

23. Pixie

Этот колор пикер является прекрасным представителем минимализма. Его функциями являются отображение цвета согласно позиции курсора и отражение его в различных формах записи.

24. GPick

Первый в нашем списке color picker под операционную систему Linux. Обладает всем необходимым функционалом для подбора оттенков и цветов. Благодаря удобному графическому интерфейсу пользуется высоким спросом.

25. Pick

Этот color picker славится своим минимализмом. С работодателем Pick можно извлечь цвета с позиции курсора и сравнивать их. А также запоминать изображение с которого получаем оттенок.

26. Gcolor2

ColorSnapper 2 — это единственная программа в нашем списке под OS X. Имеет удобный интерфейс и набор горячих клавиш для максимально быстрой работы. Также с ее помощью можно подобрать цвет благодаря многофункциональной пипетке.

27. ColorSnapper 2

ColorSnapper 2 — это единственная программа в нашем списке под OS X. Имеет удобный интерфейс и набор горячих клавиш для максимально быстрой работы. Также с ее помощью можно подобрать цвет благодаря многофункциональной пипетке.

Мобильные color picker

В этом разделе пойдет речь о мобильных колор пикерах. Наиболее популярными сейчас являются две операционные системы: iOS и Android. Поскольку web-базированые сервисы не всегда корректно работают на мобильных устройствах, были разработаны соответствующие приложения.

28. iDropper: the color sampling tool

Этот color picker разработан специально под мобильную операционную систему iOS. В дополнение встроенная функция «пипетки». Также цветовой палитры, которая позволяет подобрать необходимый цвет и оттенок.

29. Pixel Picker — Image Color Picker

Данное приложение подбирает цвета на любом экране iPhone или iPad. Благодаря удобной пипетке это можно сделать максимально просто и быстро.

30. ColorAssist Lite

Еще одно приложение для iOS, благодаря которому можно получить код цвета из любого «экрана» вашего девайса. Благодаря удобному функционалу, большому количеству цветовых моделей и масштабированию пипетки, высоко ценится пользователями.

31. Color Mate — Convert and Analyze Colors

С помощью Color Mate можно как «вытянуть» цвет с помощью пипетки, так и дальнейшем модифицировать его под тот оттенок который нужен пользователю. Также можно сравнивать и искать цвета по гаммах.

32. Pixolor — Live Color Picker

Простенький color picker с помощью которого можно получить цвет из любого «экрана» вашего устройства. Имеет минималистичный интерфейс и удобную пипетку.

33. Color Grab

Оригинальный участник нашего ТОПа. Его особенность заключается в подборе цвета с помощью камеры или палитры. В первом режиме извлекается изображение с камеры, позволяет в реальном времени узнавать цвет предметов, которые нас окружают.

34. RAL простий каталог кольорів

Удобный и простой в использовании каталог цветов под Android. Благодаря приложению можно легко выбрать нужный оттенок из большого перечня вариантов и узнать разные форматы его записи.

35. Color Lab

Color Lab — это приложение для Android который имеет в себе пипетку, палитры и другие инструменты для подбора цвета. Дополнительными преимуществами продукта является возможность сохранять цвета и широкий функционал.

JS color picker

Этот пункт полностью посвящен колор пикерам написанным на языке программирования JavaScript, в том числе и с использованием библиотеки JQuery. Основным преимуществом этого типа продукта является то, что его можно легко интегрировать в свой собственный сайт для дальнейшего использования.

36. Tiny Colorpicker

Этот color picker является ничем иным как JQuery библиотекой которую можно просто встроить на свой сайт. С ее помощью можно как подобрать цвет так, и выбрать вариант с уже готовой палитры.

37. Spectrum

Spectrum базируется на html5 и JQuery, поэтому работает в большинстве современных браузеров. С помощью этого колор пикера можно подбирать и сравнивать оттенки, а благодаря его архитектуре его просто устанавливать на собственный сайт.

38. Pick-a-Color

С помощью этого программного продукта можно легко выбрать любой цвет. Особенностью Pick-a-Color является возможность подбора цветов не только с помощью стандартной манипуляции синим, красным и зеленым, а и другие комбинации.

39. Eyecon Colorpicker

Этот JQuery плагин помогает в подборе цветов и сравнении оттенков. Этот Color Picker похож на инструменте в Photoshop. Основным преимуществом является легкость интеграции на свой сайт.

40. Farbtastic

Последний в нашем списке JQuery плагин для подбора цвета. Работает в виде цветового круга которое разделено на секторы по оттенкам. После того как выбран нужный сектор, код цвета отображается внизу страницы.

Вывод

На этом и завершается наш список ТОП-40 инструментов для работы с цветом. Надеемся он был полезен как для простых пользователей, так и для дизайнеров и других людей, чья работа непосредственно связана с цветами. Теперь вы с легкостью сможете выбрать необходимый color picker независимо от того, на какой платформе работаете.
Благодарим Вас за прочтение этой статьи. Оставайтесь с нами, впереди еще много интересного!

В помощь веб-дизайнеру: 14 лучших инструментов для работы с цветом

Скриншот: Creativebloq

Вдохновение может настигнуть нас в любой момент. Инструмент HueSnap позволяет фиксировать интересные сочетания оттенков, которые окружают нас в реальной жизни. Декор гостиничного номера или вечерний парк могут подсказать необычные решения для цветовой схемы следующего сайта. Просто сделайте снимок и создайте палитру с помощью HueSnap.

Это приложение доступно только для мобильных устройств, но созданные палитры можно сохранять и делиться ими с другими. Также оно включает в себя множество дополнительных функций, например, параметры для выбора дополнительных и составных цветов.

Скриншот: Creativebloq

Это ИИ-генератор цветовых палитр, который подстраивается под ваши предпочтения. Для начала нужно выбрать 50 понравившихся цветов, а после этого алгоритм сам предложит другие сочетания

Скриншот: Creativebloq

Coolors предлагает широкий спектр инструментов для настройки палитр. Кроме того, результат можно экспортировать в различных форматах. Coolors также позволяет вдохновляться работами других пользователей. В разделе «Обзор» можно найти множество готовых подборок цветов, которые также можно просматривать, сохранять и редактировать.

Coolors доступен для настольных ПК, iOS устройств. Более того этот инструмент можно добавить в качестве расширения для приложений Adobe (PhotoShop, Illustrator, InDesign) и даже в браузер Google Chrome.

Скриншот: Creativebloq

Этот инструмент считается одним из лучших для выбора цветовых подборок. Он позволяет не только создавать собственные схемы, но и вдохновляться работами других. Для создания палитры необходимо выбрать оттенок на колесе (или на изображении) и применить правила гармонии цветов. Например, последовательные, монохромные или оттенки выбранного вами цвета.

Недавно инструмент обзавелся новой функцией. Она подскажет, подойдут ли выбранные цвета для людей, страдающих дальтонизмом, и можно ли использовать их в качестве фона для текста.

Скриншот: Creativebloq

Colordot от Hailpixel — это бесплатный онлайн-инструмент для создания цветовой палитры.

Управление осуществляется с помощью кликов:

• найти оттенок — перемещайте курсор вперед и назад,
• настроить свет — перемещайте курсор вверх и вниз,
• настроить насыщенность — прокрутите  колесо мыши,
• сохранить цвет в палитре — кликните на выбранный оттенок.

Если кликнуть на значок переключателя, вы сможете увидеть значения RGB и HSL каждого оттенка. А мобильное приложение для iOS устройств позволяет захватывать цвета с помощью камеры.

Скриншот: Creativebloq

Этот инструмент предлагает различные идеи градиентов, подобранных профессиональными дизайнерами. Каждый пример имеет довольно забавное название. Например, «разбитое сердце Возняка» и «не облагаемый налогом доход».

Скриншот: Creativebloq

Для создания удобного и читабельного CSS кода иногда лучше использовать стандартные цвета и их названия.

Инструмент 147 Colors в одном месте собрал все цвета CSS, чтобы вы могли выбрать подходящий.  Он содержит 17 стандартных и 130 дополнительных названий оттенков. Вы также можете отфильтровать результаты по оттенкам или выбрать с помощью цветового колеса.

Скриншот: Creativebloq

Этот инструмент идеально подходит для создания цветовой палитры на основе определенного изображения. Canva очень прост в использовании: загружаете изображение, а генератор создает подборку из пяти основных цветов, содержащихся в нем. Кликните на понравившиеся оттенок, чтобы скопировать шестнадцатеричное значение в буфер обмена. Также можно использовать цветовое колесо для создания палитры вручную. К сожалению, данный инструмент не позволяет настраивать цвета созданной подборки.

Скриншот: Creativebloq

С помощью этого простого инструмента вы можете выбрать два цвета, которые затем преобразуются в полную цветовую палитру.

Скриншот: Creativebloq

ColourCode чем-то похож на Colordot, но содержит больше полезных рекомендаций. Кроме этого, он также позволяет выбирать различные категории палитры (аналоги, триада, монохромный и т. д.).

С помощью ColourCode вы можете устанавливать различные параметры на цветовом круге для создания оригинальной комбинации. Готовую подборку цветов можно сохранить или экспортировать в формате SCSS, LESS или PNG.

Скриншот: Creativebloq

Это довольно простой инструмент — достаточно выбрать оттенок и параметры цветовой гармонии, а програма подберет рекомендованную цветовую схему. Также на этом сайте предоставлена полезная информация о теории цвета и сочетаний.

Скриншот: Creativebloq

HTML Color Codes — это обширный набор бесплатных инструментов, которые включают множество палитр с комментариями, цветовые диаграммы, схемы Google Material Design, классические палитры безопасных оттенков и список стандартных названий цветов и кодов HTML.

На сайте также можно найти учебные пособия и другие ресурсы для веб-дизайнеров. Результат можно экспортировать в виде HEX, HTML, CSS и SCSS кода.

Скриншот: Creativebloq

Если вы ищете универсальное решение, включающее руководство по цветам и различные инструменты, тогда W3Schools: Colors Tutorial — идеальный выбор. С его помощью вы не только узнаете больше о теории цвета, цветовых кругах и оттенках, но и сможете использовать различные инструменты, например, Color Converter. Он позволяет преобразовывать любые оттенки в HEX, RGB, HSL, HWB и CMYK код.

Скриншот: Creativebloq

С помощью цифрового колориметра, стандартного инструмента MacOs, вы можете «захватить» оттенок из любого места на экране, а затем получить значения этого цвета в десятичном, шестнадцатеричном или процентном значении. Кроме того, он позволяет копировать выбранный цвет как текст или изображение.

Источник.

Фото на обложке: Unsplash

10 инструментов, которые помогут вам разработать цветовую палитру

Создание цветовой палитры — один из первых шагов к созданию привлекательного дизайна или иллюстрации. Цветовые палитры — это основа бренда, они придают вашим работам целостный вид и делают любой дизайн более эстетичным. Правильная цветовая палитра может превратить хорошее произведение в великолепное. Итак, какие инструменты вам нужны, чтобы создать свой собственный?

Цветовые палитры могут сбивать с толку, и иногда трудно понять, с чего начать. Существует множество инструментов, которые помогут вам с цветовыми палитрами, поэтому вам не нужно начинать с нуля. Вы можете начать с любимого цвета, изображения или фотографии, которые вызывают у вас улыбку, или даже случайной палитры.

Добавьте эту страницу в закладки, потому что вы будете возвращаться сюда МНОГО. Вот некоторые из наших любимых цветовых инструментов:

10 лучших инструментов для разработки цветовой палитры

Coolors

В Coolors вы можете просматривать, создавать, уточнять, сохранять и экспортировать палитры. Это один из наших инструментов. Нам нравится, что у нас может быть собственная коллекция палитр, из которой мы можем легко копировать значения в шестнадцатеричном формате, rgb, hsv и т. д. Вариантов экспорта множество, и среди прочего они включают код, svg, изображение и css.

Палеттон

Нет, не велотренажер. Это Paletton, одна из наших главных рекомендаций для студентов, поступающих в Design Bootcamp. Вы можете рандомизировать палитру, используя сходство цветов и стилей. Что действительно впечатляет, так это все параметры предварительного просмотра. Вы можете просмотреть свои палитры на веб-странице, различные макеты иллюстраций и даже некоторые анимированные макеты.

Adobe Color

Adobe Color доступен онлайн, а также версии для мобильных устройств и iOS. Это, вероятно, проще всего использовать с инструментами Adobe, потому что оно встроено в приложения и связано с вашей библиотекой Adobe CC. Страница тенденций отлично подходит для изучения того, что в настоящее время делается с цветом в играх, графическом дизайне, моде и других областях творчества.

Цвета Музли

Цвета Музли — это генератор цветовой палитры. Вы можете создавать и редактировать палитры, просматривать палитры и подбирать цвета. Вы даже можете скачать наборы пользовательского интерфейса для палитр. Или просто загрузите изображение и позвольте Muzli показать вам цвета уже внутри.

Color Designer

Color Designer — это отличный набор инструментов для работы с цветом, включая палитры из изображений, сборщик цветов, генератор градиентов, инструменты преобразования и многое другое. В пользовательском интерфейсе есть ТОННА рекламных баннеров, но контент под ними стоит затраченных усилий.

Canva

Если вы являетесь пользователем Canva, это колесо интегрируется с другими инструментами Canva, позволяя вам легко создавать графику в созданных вами палитрах. Вы также можете экспортировать палитры для использования в других инструментах. Canva также включает объяснения каждого типа палитры и того, где и когда вы можете захотеть их использовать, что может быть полезно для дизайнеров, особенно начинающих.

Colorcode

Конструктор палитр Colorcode представляет собой уникальный и интуитивно понятный пользовательский интерфейс. Вы можете настроить палитру, перемещая курсор по экрану. Это позволяет вам открывать новые и интересные комбинации, и вы можете использовать циферблаты слева для дальнейшей настройки. Определенно выигрывает забавную награду.

Color Inspire

Вы когда-нибудь мечтали о подборе палитр от талантливого художника? Не смотрите дальше. Алесь Несетрил уже довольно давно делится уникальными цветовыми сочетаниями в своем Instagram, и он собрал все свои еженедельные вдохновения на одной странице. Проверяйте наличие новых обновлений и цветовых узоров всякий раз, когда вам нужен прилив вдохновения.

Pigment от Shape Factory

Pigment создает цветовые палитры на основе освещения и пигмента, а не традиционных математических методов, которые используются в большинстве инструментов палитры. Если вы похожи на нас — всегда пытаетесь исключить математику из уравнения — тогда это отличный сайт для изучения.

Художественный эксперимент Google

Генератор палитр Google создает новые выделения из изображений. Вы можете делать любые фотографии и создавать палитры. Затем Google покажет вам работы, в которых используется та же палитра. Может быть действительно интересно увидеть, как цветовые палитры выглядят по-разному в разных средах. Используете ли вы это в своей работе или нет, это действительно забавная кроличья нора для исследования.

Дополнительные инструменты для создания цветовых палитр

Хотя мы составили список инструментов, которые лучше всего подходят для выбора палитры, эти четыре опции заслуживают почетного упоминания.

Colorable

Используйте Colorable в качестве генератора случайных пар цветов и инструмента оценки контрастности.

Blend

Blend позволяет создавать, смешивать и предварительно просматривать градиенты из разных цветов.

Расширения Chrome для цветовых палитр

ColorZilla

Используйте это расширение для выбора цветов из окна браузера ты знаешь дизайн?

Создание яркой цветовой палитры — это первый шаг к созданию красивой графики и анимации, но все по-прежнему опирается на строгие принципы дизайна. Эти основополагающие элементы являются частью каждого изображения, видео или арт-проекта, который вы когда-либо видели… так хорошо ли вы их знаете? Вот почему мы разработали Design Bootcamp!

Учебный курс по дизайну покажет вам, как применить знания о дизайне на практике, выполняя несколько реальных клиентских заданий. Вы будете создавать рамки стилей и раскадровки, наблюдая уроки типографики, композиции и теории цвета в сложной социальной среде.

14 лучших цветовых инструментов для веб-дизайнеров в 2023 году

(Изображение предоставлено TravelCouples через Getty Images)

Цветовые инструменты помогают веб-дизайнерам сделать один из самых важных выборов, которые мы делаем при создании сайта: выбор цвета. Цвета, которые мы выбираем, могут оказывать психологическое воздействие на тех, кто их просматривает, поэтому важно, чтобы мы все сделали правильно.

Например, красный обычно рассматривается как цвет высокой энергии, а синий означает спокойствие и умиротворение. Чтобы проиллюстрировать этот момент, рассмотрите цвета, которые вы могли бы использовать на веб-сайте, продающем детские игрушки, и на сайте юридической фирмы. Скорее всего, вы выберете яркие, яркие цвета для первого и приглушенные тона синего и серого для второго.

Но как узнать, какие цвета хорошо сочетаются друг с другом? К счастью, вам не нужно быть мастером в теории цвета (откроется в новой вкладке), чтобы составить рабочую палитру. Чтобы помочь с важной задачей выбора цвета, вот 14 лучших инструментов цветного веб-дизайна — и все они бесплатны.

Помимо инструментов для работы с цветом, вы можете воспользоваться лучшими инструментами для веб-дизайна, которые помогут вам работать эффективнее. Еще один способ избавиться от хлопот в веб-дизайне — выбрать любой из наших вариантов лучшего конструктора веб-сайтов. И не забудьте найти дом для своего сайта — вы можете посмотреть наш список лучших платформ веб-хостинга по доступным ценам.

01. HueSnap

Получайте вдохновение на ходу и превращайте его в цветовые палитры

HueSnap (открывается в новой вкладке) готов помочь, когда приходит вдохновение. Это может быть декор гостиничного номера или свет в парке однажды вечером, который натолкнет на идею цветовой схемы вашего следующего веб-сайта. Сделайте снимок и используйте HueSnap, чтобы извлечь цвета из изображения и превратить их в палитру.

Приложение предназначено для мобильного использования, и вы можете сохранять свои палитры (до шести цветов в каждой) и делиться ими с другими. Существует множество функций, которые помогут вам изменить палитру, например, варианты выбора дополнительных и составных цветов.

02. Khroma

Khroma использует искусственный интеллект, чтобы предложить цвета, которые вам понравятся

Khroma (открывается в новой вкладке) — это инструмент управления цветом с помощью искусственного интеллекта, который помогает вам легко просматривать и сравнивать исходные цветовые комбинации. Вы тренируете алгоритм ИИ, чтобы он действовал как расширение вашего мозга. Начните с выбора 50 понравившихся вам цветов; эти цвета используются для обучения нейронной сети, которая может распознавать сотни тысяч других похожих цветов.

• Подробнее: Генерируйте бесконечные цветовые палитры с помощью Khroma

03. Coolors.co

Раздел «Обзор» включает сотни, если не тысячи, вариантов палитры

(открывается в новой вкладке)

Coolors (открывается в новой вкладке) предлагает широкий набор палитра именно такая, как вы хотите. Кроме того, вы можете экспортировать свое окончательное творение во множество различных форматов, чтобы вы могли использовать его практически где угодно. Coolors — это не просто инструмент для создания цветовой палитры, он также позволяет вам просматривать другие завершенные творения других пользователей, чтобы вы могли черпать вдохновение. В разделе «Исследование» есть сотни (если не тысячи) палитр, которые вы можете просматривать, сохранять и редактировать самостоятельно.

Coolors доступен на настольных компьютерах. Более того, у него также есть приложение для iOS, надстройка Adobe (PhotoShop, Illustrator, InDesign) и даже расширение Google Chrome для быстрого доступа.

04. Adobe Color CC

Это было давно, но все еще невероятно полезно

Бесплатный инструмент Adobe Color CC (открывается в новой вкладке) существует уже некоторое время, и это один из лучших инструментов для работы с цветом там для выбора цветовой палитры. Вы можете не только создавать свои собственные цветовые схемы, но и исследовать то, что создали другие. Выберите цвет из круга (или из изображения) и примените правила цвета, например, используя только дополнительные цвета, монохроматические цвета или оттенки выбранного цвета, чтобы создать цветовую палитру. (Или нажмите на каждый цвет и просмотрите цветовой круг, чтобы настроить выбор.) 

Новейшая функция Adobe Color CC — это инструменты специальных возможностей, которые сообщают вам, являются ли выбранные вами цвета безопасными для дальтоников и могут ли использоваться в качестве фона для читаемого текста.

05. Colordot

Используйте простые жесты мыши для создания цветовой палитры

Colordot (открывается в новой вкладке) от Hailpixel — отличный бесплатный онлайн-инструмент для создания цветовой палитры. Используя простые жесты мыши, вы можете выбирать и сохранять цвета. Двигайте мышью назад и вперед для оттенка; вверх и вниз для легкости; прокрутите для насыщенности и нажмите, чтобы сохранить цвет в вашей палитре. Щелкните значок переключателя, чтобы увидеть значения RGB и HSL для каждого цвета. Есть даже приложение для iOS, которое позволяет захватывать цвета с помощью камеры.

06. Eggradients

Вдохновляющие градиенты и наводящие на размышления названия

Eggradients (открывается в новой вкладке) предлагает идеи для красивых градиентов для использования в ваших дизайнерских работах, составленные кем-то, кто обладает прекрасным чутьем к цвету и интересным чутьем юмора. Каждый градиент, отображаемый в форме яйца, имеет собственное название, наводящее на размышления. Примеры включают «Разбитое сердце Возняка» для бледно-голубого и бордового градиента под названием «Не облагаемый налогом доход».

07. 147 Цвета

Этот бесплатный инструмент включает в себя стандартные цвета CSS

Когда вы отвечаете за создание легко читаемого CSS, иногда лучше использовать стандартные цвета и названия цветов. Благодаря книге Брайана Майера-младшего «147 цветов» (открывается в новой вкладке) вы можете увидеть их все и выбрать те, которые подходят именно вам. Он содержит 17 стандартных цветов плюс 130 других названий цветов CSS. Отфильтруйте результаты по оттенкам синего, зеленого и т. д. или выберите из всей радуги.

08. Генератор цветовой палитры Canva

Создание цветовой палитры на основе изображения

Генератор цветовой палитры Canva (открывается в новой вкладке) идеально подходит, если вы хотите создать цветовую палитру на основе определенного изображения. Хотя другие инструменты предлагают аналогичные возможности, Canva очень прост в использовании: вы загружаете изображение, и генератор возвращает палитру из пяти основных цветов, содержащихся в нем. Вы можете щелкнуть по понравившимся цветам и скопировать шестнадцатеричное значение в буфер обмена.

К сожалению, на этом полезность этого предложения заканчивается. Вы не можете настроить цвета сгенерированной палитры. Единственные другие варианты, которые у вас есть, — это скопировать предоставленные шестнадцатеричные значения или загрузить другую фотографию. Кроме того, вы можете использовать цветовой круг Canva (открывается в новой вкладке), чтобы создать собственную палитру вручную.

Создайте палитру на основе принципов Google Material Design

С помощью палитры Material Design (открывается в новой вкладке) вы можете выбрать два цвета, которые затем преобразуются в полную цветовую палитру для загрузки с предварительным просмотром. Компания также предлагает Material Design Colors (открывается в новой вкладке), что позволяет дизайнерам видеть различные оттенки цвета вместе с соответствующими им HEX-значениями.

10. ColourCode

Сохранение и экспорт цветовых палитр в виде файлов SCSS, LESS или PNG

ColourCode (открывается в новой вкладке) Тамино Мартиниуса и Андреаса Сторма похож на Colordot, но предлагает немного больше рекомендаций. Этот бесплатный инструмент бьет вас прямо в лицо, демонстрируя фон, который меняет цвет при движении курсора. Кроме того, этот инструмент предлагает различные категории для палитры (аналоговый, триадный, четырехъядерный, монохромный, монохромный свет и т. д.).

С помощью ColorCode вы можете установить различные параметры цветового круга для создания оригинальной комбинации. Вы также можете сохранить свою палитру или экспортировать ее в виде файла SCSS или LESS. Вы даже можете экспортировать в PNG, если хотите.

11. Калькулятор цвета

Выберите цвет и цветовую гармонию, и этот инструмент сгенерирует цветовую палитру. . Взамен вы получаете результаты рекомендованной вами цветовой схемы. Что хорошо на этом сайте, так это то, что он также подробно описывает теорию цвета и то, как она связана с вашим выбором цвета. (Кажется уместным, учитывая, что это сайт образовательного учреждения.)

12. Цветовой код HTML

Этот набор инструментов включает список стандартных названий цветов.

Цветовые коды HTML (открывается в новой вкладке) — обширный бесплатный набор инструментов от Dixon & Moe, который включает в себя расширенную палитру цветов. с большим количеством объяснений цветовых правил; серия цветовых диаграмм с цветами плоского дизайна, схемой дизайна Google Material и классической цветовой палитрой, безопасной для Интернета; и список стандартных названий и кодов цветов HTML.

Этот сайт также предлагает учебные пособия и другие ресурсы для веб-дизайнеров, а также варианты экспорта результатов своих инструментов в виде кодов HEX, стилей HTML, CSS и SCSS.

13. W3Schools: Учебное пособие по цветам

В этом бесплатном учебном пособии содержатся ссылки на ряд удобных инструментов для работы с цветом. различные инструменты, то Учебник по цветам в W3Schools (откроется в новой вкладке) — идеальный выбор. Вы не только узнаете о теории цвета, цветовых кругах и цветовых оттенках, но также сможете использовать другие имеющиеся в нем инструменты, такие как преобразователь цветов (откроется в новой вкладке). С помощью этого инструмента вы можете преобразовывать любые цвета в названия и из них, HEX-коды, значения RGB, HSL, HWB и CMYK.

14. Цифровой измеритель цвета (Mac)

Встроенный инструмент Mac позволяет захватывать цвета с экрана

Хорошо, пользователи Mac, это для вас. С помощью встроенного в вашу машину инструмента Digital Color Meter (открывается в новой вкладке) вы можете «захватить» цвет из любого места на экране, а затем получить значения для этого цвета в десятичном, шестнадцатеричном или процентном виде. Кроме того, вы даже можете «скопировать» выбранный цвет в виде текста или изображения.

Подробнее:

• Лучшие онлайн-курсы веб-дизайна
• Лучшие (и худшие) тенденции веб-дизайна 2021 года
• Руководство веб-дизайнера по устранению простоев

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас для неограниченного доступа

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Подпишитесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future.