Подбор цвета онлайн: 30 сервисов с красивыми цветовыми палитрами для любых дизайнов

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

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

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

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

Muzli Colors - генератор цветовых палитр

Особенности сервиса:

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

Colors.lol - готовые палитры по принципу 60-30-10

Особенности сервиса:

• простой в использовании сервис,
• на сайте расположены готовые цветовые палитры,
• есть фильтр по основным цветам, он располагается в верхней части страницы справа,
• можно посмотреть названия цветов,
• используется принцип 60-30-10,
• возле каждой цветовой палитры справа есть иконка прямой ссылки на неё,
• есть функция случайного выбора палитры (кнопка random в самом низу страницы).

Farbvelo.elastiq - случайные палитры

Особенности сервиса:

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

Brandcolors - 1600 цветов от 600 брендов

Особенности сервиса:

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

Geenes - генератор палитр с выбором метода

Особенности сервиса:

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

Colorion - выбор палитр по определенному цвету

Особенности сервиса:

• 2914 страниц с палитрами по 30 палитр на странице,
• большое разнообразие цветовых палитр,
• хорошо подобраны сочетания цветов,
• на один цвет выходит много вариантов палитр,
• для примера, для розового цвета #E7C2BB сервис выдал 71 страницу по 30 палитр на каждой,
• благодаря большому разнообразию готовых палитр для одного цвета - один из самых удобных для подбора сервисов.

Mobile Palette Generator - палитры для мобильных приложений

Особенности сервиса:

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

2colors - комбинации из двух цветов

Особенности сервиса:

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

Khroma - цветовые пары из 50-ти цветов

Особенности сервиса:

• индивидуальный подход к подбору цветовых комбинаций - на основе личных предпочтений,
• в начале надо выбрать 50 цветов из списка,
• на их основе генерируются цветовые пары,
• комбинации, которые можно рассматривать как типографику, градиент, палитру или пользовательское изображение,
• фильтр по типу, оттенку, названию (coffee, sun и т.д.), а также значениям hex и rgb,
• возможность сохранять понравившиеся цветовые пары в избранное.

Coolors - генератор цветовых палитр и градиентов

Особенности сервиса:

• разные инструменты для работы с цветом на одном сайте,
• тысячи красивых оттенков для создания палитр,
• можно скопировать прямую ссылку на любую палитру,
• при открытии палитры показывается большое количество похожих (similar palettes),
• фильтр поиска палитр с разнообразными категориями: цвета, стили, темы,
• сохранение цветов и палитр в избранное,
• инструмент определения контраста между двумя цветами,
• для работы с сервисом требуется регистрация,
• плагин, который можно установить для редактора Figma,
• есть платные функции (при оплате за месяц 376р.): удаление рекламы, до 10-ти цветов в палитре, 10+ млн готовых цветовых схем, безлимитное сохранение цветовых палитр и т.д.

In color balance - тысячи палитр из фотографий

Особенности сервиса:

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

Sorted-colors (Enes.in) - цвета с названиями

Особенности сервиса:

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

Cohesive Colors - палитры с помощью overlay

Особенности сервиса:

• создание целостных цветовых палитр,
• возможность случайного выбора с помощью кнопки "random",
• работа в три шага: выбор цвета, добавление overlay (наложения), получение результата (палитры),
• создание оригинальной цветовой палитры,
• при добавлении наложения можно настраивать цвет и интенсивность (непрозрачность),
• получившийся цвет можно скопировать, нажав на него,
• возможность копирования прямой ссылки, с помощью которой можно поделиться получившейся палитрой.

Сolourco - подбор палитры с помощью мышки

Особенности сервиса:

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

Paletton - работа с основными схемами

Особенности http://paletton.com/:

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

Adobe Color - цвета по 10-ти правилам гармонии  

Особенности сервиса:

• цветовой круг для подбора гармоничных сочетаний,
• 10 правил гармонии цветов на основе заданного основного цвета,
• чтобы сохранить подобранные палитры для дальнейшего использования в продуктах Adobe (Photoshop, Illustrator и т. д.) надо создать личный кабинет.

Hexcolorpedia - подробная информация о цвете

Особенности сервиса:

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

Materialpalette - палитры в стиле Material Design

Особенности сервиса:

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

Colorhexa - подробные данные по любому цвету

Особенности сервиса:

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

Picular - цвета по ассоциациям со словами

Особенности сервиса:

• для подбора цвета надо ввести в строку поиска на первой странице сайта ключевое слово на английском языке (winter , summer, banana и т.п.),
• на получившихся цветах есть коды, которые копируются при нажатии на них,
• чтобы собрать палитру, надо нажать на иконку кнопки и тогда цвет появится в верхнем ряду,
• также есть возможность скопировать ссылку (например, https://picular.co/p/UZOj) на получившуюся палитру (до 4-х цветов) и поделиться ею в социальных сетях,
• чтобы посмотреть на основе чего выбран цвет, в связи с какой ассоциацией, надо нажать на иконку изображения в правом нижнем углу области с цветом,
• можно вводить более сложные ключевые слова, например, названия блюд, фильмов и так далее, и сервис предложит цвета-ассоциации.

Klart colors - просмотр палитры в готовом дизайне

Особенности сервиса:

• коллекция цветовых палитр,
• основатель сервиса год курировал дизайны в Pixels,
• при нажатии на палитру она разворачивается на весь экран,
• при клике на цвет он копируется в буфер обмена,
• при нажатии "See in action"(увидеть в действии) сервис показывает как цвета из палитры выглядят в готовом проекте.

Shade Generator - простой генератор цвета и оттенков

Особенности сервиса:

• есть возможность случайного выбора с помощью кнопки "random",
• в поисковой строке сервиса можно вставить код любого цвета (Hex, RGB) или название цвета на английском языке (red, yellow и т.п.),
• есть формат двойного экрана, включается с помощью кнопки "split view" - разделенный вид.

Random Color - генератор случайного цвета

Особенности сервиса:

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

Getcolor - широкий спектр инструментов

Особенности сервиса:

• русскоязычный сайт,
• определение сочетания цветов по методу Иттена,
• подбор гаммы из 2/3/4 цветов,
• коллекция готовых палитр,
• основные цвета и их оттенки,
• градация цветов,
• смешивание цветов,
• таблица смешивания цветов (примеры),
• пипетка онлайн,
• каталог цветов RAL CLASSIC  с названиями,
• градиенты можно скачать в формате JPG,
• простой фоторедактор.

Maketintsandshades - создание оттенков для заданного цвета

Особенности сервиса:

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

Happyhues - готовые цветовые палитры

Особенности сервиса:

• сайт, на котором можно посмотреть цветовые палитры, реализованные на примере сайта и элементов на нем,
• в палитрах использованы трендовые цвета,
• можно скопировать коды цветов.

Colordot - выбор цвета перемещением курсора

Особенности сервиса:

• для выбора цвета надо перемещать курсор по экрану сайта,
• каждый клик по экрану создает новый дополнительный оттенок,
• есть мобильное приложение для Айфона.

Goodpalette - примерка готовых палитр на шаблонах сайтов

Особенности сервиса:

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

Colorlet - подборка готовых цветовых палитр

Особенности сервиса:

• много цветовых палитр,
• простой экспорт,
• коды цвета по разным системам,
• готовые градиенты,
• редактор палитр,
• генератор оттенков,
• простой, понятный интерфейс.

Colorsinspo - многофункциональный сервис подбора цвета

Особенности сервиса:

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

Основные выводы

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

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

Можно создавать проекты с использованием готовой палитры или подбирать цвета, исходя только из своего вкуса. Лично я часто подбираю цветовую палитру с применением некоторых сервисов, а бывает обхожусь и без сервисов. Но в идеале, как мне кажется, это связка сервис + опыт + вкус.

А на этом сегодня всё. Желаю вам успехов!