Идеи

18 сервисов для подбора цвета

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

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

Зрительное восприятие — основной источник получения информации. В первые полторы минуты мы оцениваем внешний вид, форму и цвет — так возникает первое впечатление. При этом до 90% впечатлений основаны на восприятии цветов.

Цвета влияют на поведение, настроение и эмоции. Например, покупатель может подсознательно решиться на покупку за доли секунды, просто потому что ему понравилось сочетание оттенков. По статистике, цвет влияет на 85% решений о покупке. При этом 93% покупателей обращают внимание только на внешний вид.

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

Есть много разных подходов к работе с цветом. Для профессионального подбора палитры нужно учитывать огромное количество факторов. Например, Институт цвета Pantone (Pantone Color Institute) ежегодно анализирует глобальные тренды, модные показы, социальные сети, кинематограф и выставки современного искусства, чтобы выбрать цвет года.

Цвет 2022 года
Pantone объявила цвет 2022 года: PANTONE 17-3938 Very Peri (барвинок)

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

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

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

Я собрала 18 сервисов, которые помогают найти подходящее цветовое сочетание для любого проекта. Рассказываю, как они работают, чем отличаются и для каких задач подходят.

Что нужно сделать Какой сервис подходит
Сгенерировать палитру автоматически Coolors

Paletton

Adobe Color CC

My Brand New Logo

Seo Checker: Color palette and schemes generator

ColorScheme

Color-Wizard

ColorSpace

Colormind

CopyPalette

Color Grid

Создать палитру вручную Color Hunt
Выбрать готовую палитру In Color Balance 

Color Hunt

Palette Generator

Brand Colors

Посмотреть сочетание белого шрифта с фоном выбранного цвета Get UI Colors
Подобрать фотографии в нужной цветовой гамме на Flickr Multicolr Tineye
Найти изображения по цвету на Shutterstock Shutterstock Spectrum

Coolors

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

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

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

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

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

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

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

В бесплатной версии можно создавать палитры до пяти цветов, использовать готовые схемы, сохранять до пяти цветов и десяти палитр. Про-версия без рекламы обойдётся в $3 в месяц. Она значительно расширяет функционал и пригодится тем, кто ежедневно работает с цветами.

Coolors
Помимо кода, возле каждого цвета отображено его название

Paletton

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

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

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

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

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

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

Весь функционал сервиса доступен бесплатно. Есть возможность отправки донатов, но только по добровольному желанию пользователя.

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 для этого есть целый раздел.

Adobe Color CC
Сервис подходит как для профессионального, так и для любительского использования

Color Hunt

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

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

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

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

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

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

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

Color Hunt
Просто листайте каталог, пока не найдёте понравившуюся палитру

In Color Balance

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

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

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

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

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

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

In Color Balance
Не все изображения в In Color Balance — со свободной лицензией. Можно ли использовать выбранную картинку, лучше уточнять в поддержке сервиса

My Brand New Logo

Сайт. https://mybrandnewlogo.com/ru/generator-cvetovoi-palitry 

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

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

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

Сервис My Brand New Logo от одноимённого производителя логотипов предлагает компьютерный подбор схемы. Генератор автоматически выбирает цвета, которые хорошо сочетаются. От пользователя требуется лишь указать вид цветов — яркие, винтажные, серые, гладкие. 

В палитре, которая понравилась, можно скопировать код каждого оттенка по отдельности или получить код CSS для использования в своих веб-проектах.

My Brand New Logo
Подбор цветов основан на многолетнем опыте работы с логотипами

Seo Checker: Color palette and schemes generator

Сайт. https://seochecker.it/color-palette-generator 

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

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

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

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

После генерации палитр Seo Checker покажет описание основного цвета и его градации — как схема будет выглядеть при разных параметрах насыщенности, контрастности, яркости. Коды полученных цветов можно скопировать.

Seo Checker: Color palette and schemes generator
Этот сервис вполне можно применять в профессиональной деятельности

ColorScheme

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

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

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

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

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

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

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

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

Довольно широкий функционал позволяет использовать сервис для разных онлайн- и офлайн-проектов, связанных с дизайном.

ColorScheme.Ru
Пример подобранной палитры в ColorScheme

Color-Wizard

Сайт. http://www.colorsontheweb.com/Color-Tools/Color-Wizard 

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

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

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

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

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

Color-Wizard
Достаточно выбрать базовый цвет, чтобы увидеть разные вариации сочетаний

Palette Generator

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

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

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

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

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

Palette Generator
Практически моментальное создание разных палитр может послужить источником вдохновения

ColorSpace

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

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

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

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

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

ColorSpace
Огромное количество цветовых схем позволяет выбрать наиболее удачное сочетание

Colormind

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

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

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

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

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

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

Colormind
Чтобы не сомневаться в практическом применении палитры, можно посмотреть примеры и прикинуть, насколько это подходит вашему проекту

CopyPalette

Сайт. https://copypalette.app/ 

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

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

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

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

В созданной схеме HEX-код каждого цвета копируется по отдельности. Или готовую палитру можно скопировать в SVG и добавить Figma или Sketch для дальнейшего использования в дизайне.

CopyPalette
Создание монохромных схем — довольно нудное занятие, а в этом сервисе всё быстро и просто

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

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

Color Grid

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

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

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

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

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

Color Grid
Сервис полезен при создании монохромных схем и градиентов

Brand Colors

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

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

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

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

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

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

Brand Colors
Если вам нужен цвет «как у Adidas» — этот сервис вам поможет

Get UI Colors

Сайт. http://getuicolors.com/ 

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

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

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

Get UI Colors помогает проверить, как будет выглядеть текст белого цвета на цветном фоне. Для этого просто выберите цвет и кликните на кнопку, чтобы посмотреть результат. 

Get UI Colors
Минимум функционала, но проверка сочетания фона и текста — штука полезная

Multicolr Tineye

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

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

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

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

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

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

Multicolr Tineye
В Multicolr Tineye можно подобрать визуал для сайта в единой гамме

Shutterstock Spectrum

Сайт. https://www.shutterstock.com/search/spectrum 

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

Стоимость. Бесплатно в течение месяца после подписки с ограничением на 10 фото, далее — $29 в месяц. 

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

Инструмент помогает искать изображения с лицензией royalty-free — она предполагает оплату за использование контента только в момент покупки.

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

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

Shutterstock Spectrum
Подбор фото по цвету поможет соблюсти единое оформление материала или проекта

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

Готовите инфографику или мемчики для соцсетей? Поделитесь, для каких форматов сложнее всего выбирать цвета

В комментарии
unisender

Комментарии