15 лучших сервисов для подбора цвета

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

Почему важно правильно подбирать цвета

Цвет — это триггер, который управляет поведением, настроением и решениями пользователя. Как именно цветовая гамма влияет на аудиторию:

• Формирует первое впечатление. Зрительное восприятие — основной источник получения информации. В первые полторы минуты знакомства с продуктом до 90% нашего впечатления основано именно на восприятии оттенков.
• Продает на подсознательном уровне. По статистике, цвет влияет на 85% решений о покупке, при этом 93% потребителей обращают внимание исключительно на внешний вид.
• Управляет вниманием на сайте. Цветовое решение — первое, что бросается в глаза при открытии страницы. От правильных ассоциаций, заложенных в теории и психологии цвета, зависит главное: останется читатель на ресурсе или сразу закроет вкладку.

Подходов к работе с палитрой множество, и за каждым стоит глубокая аналитика. Например, Институт цвета Pantone ежегодно изучает глобальные тренды, показы, соцсети и современное искусство, чтобы обоснованно выбрать цвет года.

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

Генераторы цветовых палитр

Генератор цветовой палитры или цветовое колесо — это программа на основе 12 основных цветов на цветовом круге. Такой инструмент помогает создать определённую палитру вокруг выбранного цвета или оттенка. Я собрала 15 сервисов, которые помогают найти подходящее цветовое сочетание для любого проекта. 

Coolors

Сайт. https://coolors.co/

Версии для работы. Веб-сервиса, мобильные приложения, расширение для Chrome и Adobe, плагин для Figma.

Стоимость. Бесплатно с ограничениями, про-версия — $3 в месяц.

Язык интерфейса. Английский.

Coolors позволяет изучать трендовые палитры и создавать собственные. С помощью дополнительных настроек здесь можно корректировать оттенки, создавать градиенты и даже извлекать палитру из загруженных фотографий. Также в платной версии доступен AI-бот: можно просто описать текстом свою задачу, и нейросеть выдаст готовые варианты.

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

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

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

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

Paletton

Сайт. https://paletton.com

Версии для работы. Веб-версия.

Стоимость. Бесплатно + донаты по желанию.

Язык интерфейса. Английский, чешский.

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

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

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

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

Adobe Color CC

Сайт. https://color.adobe.com/ru/create/color-wheel

Версии для работы. Веб-версия.

Стоимость. Бесплатно — базовый функционал. Дополнительные возможности при авторизации с Adobe ID.

Язык интерфейса. Русский, английский + ещё 17 языков.

Сервис помогает создать палитру с учётом выбранного правила гармонии цветов и цветового режима. Плюс работы с продуктами Adobe: после входу в систему можно сохранить палитру в Creative Cloud и потом использовать её в Photoshop, Illustrator, Fresco и других сервисах Adobe. 

Ещё из интересных возможностей сервиса:

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

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

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

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

Color Hunt

Сайт. https://colorhunt.co/

Версии для работы. Веб-версия, расширение для Chrome.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

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

У Color Hunt есть расширение для Chrome, которое показывает случайную палитру из лучших коллекций при каждом открытии новой вкладки.

Итоги теста. При изучении Color Hunt мне показалось, что создавать палитру здесь не очень удобно — подбирать цвета надо вручную, и без профессиональных навыков здесь не обойтись. Но сервис предлагает огромную библиотеку готовых палитр. Это поможет, если вы пока не понимаете, какую цветовую схему хотите, и вам нужно посмотреть разные варианты. Я отфильтровала палитры по базовому оттенку и выбрала сочетание, которое больше подходило под задачу. 

In Color Balance

Сайт. http://color.romanuke.com/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Русский, английский, немецкий, испанский, польский, французский.

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

Итоги теста. Самостоятельно создать палитру здесь не получится, но можно выбрать что-то из готовых вариантов. Нужно указать один-два цвета или параметры схемы (тёплые, холодные, пастельные или контрастные тона) — и система сама подберёт подходящие варианты. Клик по схеме откроет страницу выбранной палитры с описанием и кодами оттенков.

ColorScheme

Сайт. https://colorscheme.ru/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Русский.

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

Дополнительные возможности ColorScheme:

• просмотр примеров светлой и тёмной страницы в выбранной палитре;
• каталог цветов — можно посмотреть название и код понравившегося оттенка;
• отдельный каталог с названием автомобильных красок и именами цветов в HTML.

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

В итоге получилась довольно обширная палитра, есть из чего выбрать, при этом цвета, на мой взгляд, гармоничные. Жаль, нельзя посмотреть, как оттенки будут выглядеть на конкретной веб-странице сайта.

Palette Generator

Ссылка на сайт. https://palettegenerator.colorion.co/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

Максимально простой генератор с узким функционалом. Palette Generator рандомно создаёт цветовые палитры при нажатии на пробел. Чтобы скопировать код, нужно просто кликнуть по нему или соответствующему цвету.

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

ColorSpace

Ссылка на сайт. https://mycolor.space/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

Для создания палитры в ColorSpace достаточно указать цвет или его код — и запустить генерацию. Система сформирует 25 палитр по разным схемам на основе указанного цвета. Для каждого оттенка в палитре указан код. Также в сервисе можно создавать двух- и трёхцветные градиенты из выбранных цветов.

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

Colormind

Ссылка на сайт. http://colormind.io/bootstrap/

Версии для работы. Веб-сервис.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

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

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

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

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

Palettemaker

Сайт: https://palettemaker.com/

Версии для работы: Веб-версия.

Стоимость: Бесплатно.

Язык интерфейса: Английский.

PaletteMaker — это инструмент для создания цветовых палитр на основе ИИ. Он позволяет проверять сочетание цветов в разных местах: на сайте, в приложении, плакатах и логотипах. Проверять можно случайное сочетание цветов, а можно добавлять свои. Готовые палитры можно экспортировать в разных форматах: Procreate, Adobe ASE, изображение, код.

Итоги теста. Я собрала палитру с нашим темно-зеленым цветом вручную, чтобы протестировать главную фишку сервиса — режим предпросмотра. Заданные оттенки здесь можно примерить на десятки макетов: от UI-интерфейсов и логотипов до паттернов и постеров.

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

А еще на сайте есть палитра цветов с оттенками и описанием, в каких случаях их лучше использовать.

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

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

Color Grid

Сайт. https://0to255.com/

Версии для работы. Веб-сервис.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

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

Brand Colors

Ссылка на сайт. http://brandcolors.net/

Версии для работы. Веб-сервис.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

Здесь можно посмотреть фирменные цвета известных компаний. Список брендов с удобной поисковой строкой доступен на сайте.

Все цветовые схемы, которые показывает сервис, можно скопировать простым кликом или скачать в разных форматах.

Color Drop

Сайт. https://colordrop.io/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

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

Multicolr Tineye

Сайт. https://labs.tineye.com/multicolr/

Версии для работы. Веб-версия

Стоимость. Бесплатно — пробная версия, лицензия — от $200 в месяц.

Язык интерфейса. Английский.

Инструмент помогает подбирать фото по цветам среди 20 млн. изображений с Flickr.

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

Khroma

Сайт. https://www.khroma.co/

Версии для работы. Веб-версия.

Стоимость. Бесплатно.

Язык интерфейса. Английский.

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