Палитра цветов: 15 сервисов для подбора цвета

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

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

Как создаются палитры

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

Генераторы цветов

Такие сервисы чаще всего используют, когда у компании есть основной цвет, например в логотипе, и для него нужно подобрать дополнительные оттенки, чтобы сделать сайт или оформить офис. Основная фишка генераторов в том, что с их помощью можно создать сразу несколько палитр. Вот как это работает на платформе Adobe Color: вы вводите нужный HEX-код и получаете разные сочетания цветов. Это последовательная, монохромная, треугольная, комплементарная и другие комбинации. Что это такое, мы уже рассказывали в статье «Психология цвета в веб-дизайне».

Библиотеки цветов

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

Выглядит большинство библиотек такого рода как на скриншоте ниже: есть сортировка по цветам, поиск, раздел «Популярное» и другие полезные функции. Это сервис Color Hunt, на котором можно подобрать гармоничные оттенки для любых проектов:

Топ сервисов для подбора палитры

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

Paletton

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

Ссылка на сервис: Paletton

Mymind

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

Ссылка на сервис: Mymind

Mybrandnewlogo

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

Ссылка на сервис: Mybrandnewlogo

Colorscheme

Colorscheme визуально похож на сервис Paletton, который мы рассматривали выше, но обладает более обширным функционалом. Например, здесь вы получите не только все популярные цветовые палитры, но и сможете произвести тонкие настройки с корректировкой насыщенности, яркости и контрастности. Также есть симулятор, который позволяет посмотреть как видят оттенки люди с разными заболеваниями глаз: тританопией, дейтеранопией и другими. Полученную палитру можно сразу сохранить в разных форматах – PNG, CSS и прочих.

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

Ссылка на сервис: Colorscheme

ColorSpace

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

Отдельно на ColorSpace можно сгенерировать комбинации из двух и трех оттенков. Таким образом легко получить градиент с указанной направленностью: под углом в 45°, 90° и так далее.

Ссылка на сервис: ColorSpace

ColorExplorer

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

Ссылка на сервис: ColorExplorer

0to255

Немного необычный инструмент, позволяющий получить все оттенки конкретного цвета. На главном экране вы можете выбрать любой цвет и посмотреть полную его гамму в формате HEX, RGB или HSL. Либо же можно сразу указать код и получить желаемые цветовые варианты.

Ссылка на сервис: 0to255

Coolors

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

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

Ссылка на сервис: Coolors

Getuicolors

Getuicolors – небольшая библиотека различных оттенков, которая позволяет посмотреть, как будет выглядеть белый текст на цветном фоне. У каждого цвета есть свое название: если вы хотите, чтобы ваш продукт выглядел как изумруд или фарфор, то этот инструмент определенно то, что вам нужно. Сами оттенки можно получить в 3-х форматах: HEX-код, RGB и RGBA. 

Ссылка на сервис: Getuicolors

Color Palette Generator

Color Palette Generator – простой сервис, который поможет вам сгенерировать бесчисленное количество цветовых палитр, состоящих из 5-ти оттенков. Чтобы получить гамму, достаточно нажать на «Пробел» – так раз за разом будут создаваться новые наборы цветов. Скопировать полученную палитру можно одним действием – клавишей «C». Также вы можете быстро взять отдельный цвет, просто кликнув по нему.

Ссылка на сервис: Color Palette Generator

Khroma

В основе сервиса для подбора цвета Khroma заложено машинное обучение. Оно позволяет генерировать палитры исходя из ваших предпочтений. Работает это следующим образом: вы выбираете 50 наиболее подходящих цветов, после этого ресурс подбирает релевантные для вас палитры. 

Например, вот что получилось у нас: 

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

Ссылка на сервис: Khroma

TinEye Multicolr

TinEye Multicolr – несколько иной сервис в нашей коллекции. Он поможет вам найти изображения для своего проекта по цветовой гамме. Здесь нужно указать 5 цветов, на основе которых инструмент сгенерирует подборку разнообразных картинок. Все изображения будут содержать выбранные цвета, а скачать их можно с Flickr – по клику на картинку произойдет переадресация на этот сервис. Для более персонализированного результата можно добавить несколько тегов. 

Ссылка на сервис: TinEye Multicolr

Colorcombos

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

Ссылка на сервис: Colorcombos

Seochecker

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

Ссылка на сервис: Seochecker

In Color Balance

In Color Balance – последний сервис, о котором мы поговорим. Это библиотека с более чем 500 страницами, на которых есть различные цветовые палитры. Особенность их в том, что все они представлены с фотографиями и краткими описаниями. Здесь также есть фильтр, позволяющий отсортировать цвета по категориям: теплые и холодные оттенки, пастельные и контрастные тона. 

Ссылка на сервис: In Color Balance

Бонус: Плагины для Figma

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

• Color Palettes – включает в себя более 1000 различных палитр цветов;
• Dark Mode Magic – поможет подобрать цветовые решения для темной темы;
• Color Designer – генерирует палитру исходя из выбранного цвета;
• Color scale generator – позволяет получить до 10 оттенков базового цвета;
• Tints and Shades – показывает светлые и темные оттенки указанной расцветки;
• Material palette – создает палитру, в основе которой лежит Material Design; 
• Palette Magic – быстро генерирует цветовую гамму.

Заключение

Сегодня найти подходящую гамму для любого дизайн-проекта можно буквально в несколько кликов. В этом помогают специальные сервисы и плагины, рассмотренные выше. Используйте их, чтобы быстро составить цветовую палитру и получить подходящие под оформление изображения. Рекомендуем обратить внимание на MyMind – сервис предложит потрясающие оттенки, Khroma – составит комбинацию из наиболее подходящих для вас палитр, ColorSpace – сгенерирует не только цвета, но и поможет сделать красивый градиент. 

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