Подбор идеальной палитры — одна из самых сложных задач для начинающего дизайнера, фотографа, нейронщика, в общем, любого, кто работает с визуалом. Когда не достаёт нужных знаний, когда хочется получить быстрое решение или упростить свою работу, на помощь приходят сервисы по созданию цветовых палитр. Мы рассмотрим 4, на мой взгляд, базовых — два классических и два нейросетевых.
Но перед этим ознакомимся с базой, разберём необходимую теорию простым языком, потому что без анализа не поможет ни один сервис.
Оглавление
Цветовые модели
Цвет создается при поглощении, отражении или передаче объектом световых волн различной длины. В зависимости от того, как воспроизводится цвет, используются разные цветовые модели. Нам важно знать три основных:
RGB — для экранов (сайты, приложения, соцсети). Представьте, что экран вашего телефона или компьютера состоит из миллионов крошечных лампочек: красной (Red), зелёной (Green) и синей (Blue). Смешивая их свет, мы получаем все остальные цвета.
CMYK — для печати (визитки, плакаты, журналы). Это модель для смешивания красок, а не света. Как в обычном принтере, здесь используются четыре цвета: голубой (Cyan), пурпурный (Magenta), жёлтый (Yellow) и чёрный (Key/Black).
HEX — универсальный код для веба. Это просто более короткий и удобный способ записать цвет в формате RGB. Программистам и дизайнерам проще вставить в код один короткий номер (например, #4B0082), чем три отдельных числа для красного, зелёного и синего. По сути, это «паспорт» цвета для интернета.
Важно: Цвета на светящемся экране (RGB) всегда будут насыщеннее, чем на бумаге (CMYK). Всегда уточняйте, для какой задачи вы создаёте проект.
На картинку я дополнительно вписала модель HSB (Hue, Saturation, Brightness — Тон, Насыщенность, Яркость), которая, по сути, говорит о свойствах цвета. В разговорной речи люди часто смешивают между собой понятия яркости и насыщенности, что всё-таки некорректно. Давайте разбираться:
Свойства цвета
Яркость (Brightness) = больше/меньше света в цвете.
Насыщенность (Saturation) = больше/меньше пигмента, краски внутри цвета.
Тон = само название цвета.
Это, в свою очередь, приводит нас к световому и тональному контрасту. Не так давно в тренде было сочетание цветов, недалеко ушедших друг от друга по HSB, например:
Новичкам я всё же рекомендую придерживаться контрастных сочетаний, так можно сакцентировать внимание юзера на нужных элементах.
И хотя на шкале яркости цвета будут иметь одно и то же числовое значение, важно грамотно перевести их в ЧБ, чтобы понять, как их видит наш мозг. Оптимально это сделать в фотошопе. Порядок действий такой: Просмотр (View) — Варианты цветопробы (Proof Setup) — Заказной (Custom). И дальше выбираем в выпадющем окне sGray. Также можно наложить корректирующий слой «Чёрно-белое».
Но фотографии и иллюстрации можно переводить в ЧБ более простым способом — наложением корректирующего слоя «Чёрно-белое». За счёт смешивания цвета акценты так же можно увидеть.
Следующим важным пунктом стоит отметить температуру. Традиционно цвета делятся на условно тёплые (красный, оранжевый, жёлтый) и холодные (зелёный, синий, фиолетовый). Почему условно? Во-первых, потому что каждый цвет может быть как тёплым так и холодным. Например:
А во-вторых, потому что определение теплоты-холодности по большей части (если мы берём не физику, а психологию восприятия) завязано на опыте человека. Лёд голубой, значит голубой — это холодный цвет. Огонь жёлто-красный, а значит, эти цвета тёплые. Безусловно, обобщение очень грубое, но оно необходимо для понимания.
Если мы снова посмотрим на картинку выше, то увидим, что холодные и тёплые оттенки цветов отличаются подтоном. Подтон — это примесь дополнительного цвета в основном цвете. Самое время перейти к цветовому кругу.
Подтонами для цвета всегда служат соседние с ним цвета. Для зелёного это жёлтый и циан. Для жёлтого — оранжевый и зелёный. И вот тут есть интересное исключение. Так как для Оранжевого соседними цветами являются тёплые жёлтый и красный, то у него не бывает холодных оттенков, оранжевый — единственный абсолютно теплый цвет.
Синий также является интересным исключением. Чистый синий цвет максимально холодный, но любые примеси будут делать его более тёплым. Тем не менее, палитру синих можно поделить на условно холодные (с фиолетовым подтоном) и условно тёплые (с зелёным подтоном).
Сочетания цветов и цветовые гармонии
Если коротко — их дофига. Но есть базовые:
Монохромная цветовая схема — близлежащие на цветовом круге оттенки одного цвета, которые отличаются светлотой и насыщенностью.
Комплементарная цветовая схема — Противоположные цвета на цветовом круге. Как использовать: Один цвет основной, второй дополнительный, для акцента.
Аналоговая схема состоит из смежных цветов на круге. В таком случае Один цвет используется как основной, второй как дополнительный и третий в качестве акцента. Напоминает монохром, но спектр оттенков гораздо шире.
Акцент-аналогия она же аналогово-комплиментарная цветовая схема — похожа на предыдущую, однако отличается выбором комплементарного цвета для акцента.
Триада — три цвета, равноудалённых друг от друга на цветовом круге. Считается самой гармоничной палитрой с широким диапазоном возможностей. Часто можно встретить в комиксах или фильмах, снятых по ним. Например, костюм Джокера (оранжевый, фиолетовый, зелёный) в комиксах и играх сделан по триаде цветов.
Тетрада — имеет несколько подвидов и является самой сложной цветовой схемой, не для новичков. На цветовом круге цвета могут располагаться по квадрату, прямоугольнику или трапеции.
Правило 60–30–10
Чтобы палитра из 3+ цветов не превратилась в хаос, используйте следущее правило пропорций:
60% — доминирующий цвет (фон, основные блоки).
30% — вторичный цвет (подзаголовки, второстепенные элементы).
10% — акцентный цвет (кнопки, иконки, то, на что нужно обратить внимание).
Сервисы по созданию и подбору цветовых палитр
Это инструменты, которые порекомендовали подписчики моего телеграм-канала, а я их, стало быть, протестила. Дальше будет только субъективщина.
Примечание: я подбираю палитру, пользуясь стандарным цветовым кругом, например, в Adobe Photoshop. Изредка — сервисами, когда нужно что-то специфическое.
ColorScheme — бесплатный веб-инструмент на русском языке. Юзер выбирает цвет, цветовую схему, а сервис демонстрирует подходящие палитры. В общем, бессмертная классика. Из полезных фич хочу отметить смену цветовой модели (например, на Pantone) и проверку палитры на симуляции разных типов зрения (например, дальтонизм). Помимо этого здесь есть конвертер цветов и экспорт палитры в разные форматы, а также множество материалов на тему цвета.
К нему лично я чаще всего обращаюсь, поскольку он простой и удобный. Приятный вспомогательный инструмент.
Adobe Color — как и все продукты компании, это тоже огромная машина со множеством функций, не все из которых вообще нужны. Но от остальных продуктов Adobe этот отличается своей бесплатностью. Интерфейс приятнее, чем у предыдущего товарища, но он же и сложнее за счёт функционала. Здесь больше цветовых схем, и возможно, это лучше подходит для новичка, для понимания цветовых сочетаний. Итоговая палитра выгружается в Джипег. Можно сменить модель с RGB на HSL и LAB.
Мне лично не нравится здесь регулировка цветов на круге, она неудобна. Ползунки при движении всё время подрагивают, как будто лагают, нет привычной шкалы яркости и вся настройка происходит множеством ползунков внизу под цветами.
Но здесь есть полезные фичи с извлечением палитр из картинки: в виде Темы (набор базовых тонов) и в виде градиента.
Два раздела, Смотреть и Тенденции — по сути являются единым целым, разбитым зачем-то на две страницы. Оба раздела демонстрируют разные палитры в картиночках, по которым можно перейти на проекты Behance. А ещё есть новая функция на нейронках — перекрашивание вектора. И она не работает как полноценное перекрашивание, скорее как рандомное тонирование:
В общем, это не мой любимый сервис, и хотя объективно он неплох, в нём много лишних функций.
Khroma — это открытие для меня. Невероятно интересная штука. Сперва сервис просит выбрать 50 любимых цветов, по ходу выбора подсказывая, какой гаммы не хватает: красной, например. или зелёной. На этом этапе же выясняется, что здесь нет чёрного, белого и близких к ним цветов. Это неприятный момент. После выбора всех тонов сервис генерирует наборы цветовых комбинаций, и вот они выглядят очень свежо, трендово и, что важно, наглядно для дизайна: в виде текста на фоне, в виде постеров или фотографий (можно загрузить свою фотку), а также в виде градиентов. Здесь есть неприятный нюанс в виде того, что цвета на фотографию накладываются довольно однообразно, скажем так, с перебором, без возможности донастройки фильтра.
Можно сгенерировать палитры, но тут надо быть осторожным, т.к. сервис в основном генерит палитры из 4х очень смелых и ярких цветов.
Сервис имеет 4 способа поиска: тип (тёмный, светлый, яркий), оттенок (тёплый, холодный, неоновый), название (кофе, лимон), hex/rgb. И поиск по названиям очень ограничен. Например, я не могу получить цвета травы или молока, а на слово «apple» он выдаёт сугубо зелёные оттенки.
Итог: занятный сервис, мне больше всего зашёл блок с буквами на фоне, это самая наглядная и приятная демонстрация из всех подобных продуктов, что я видела.
Colormind — довольно обширный инструмент для создания своей палитры. По дефолту на главном экране выходит условно «палитра дня», можно её перегенерировать, залочить любой из цветов и генерировать остальные. Также можно отредактировать каждый цвет по своему усмотрению. Все цвета имеют кодировку HEX.
Ниже есть тематические палитры, например, по фильмам и сериалам, для вдохновения, так сказать.
Но самым интересным разделом я считаю Website colors. За счёт функций перемещения и блокировки цветов, можно посмотреть, как они будут выглядеть, что называется, на бою, и как они сочетаются между собой. Конечно, эту функцию можно было бы доработать, иначе расставить акценты, но даже в таком виде это вполне смотрибельно и понятно.
Промптинг
Всё-таки у меня канал про нейросети и нельзя было обойти этот аспект стороной. К сожалению, нейросети ничего за вас не сделают, не подумают и не создадут сами палитры, а на их основе — промпты. Этим необходимо заниматься самостоятельно.
Рассмотрим на примере проекта «Соседи» — это челлендж, который я вела для подписчиков и который выполнила самостоятельно.
Если с сюжетами текстовые нейронки ещё могут помочь, то с колористикой увы. Необходимо чётко ставить задание тому же ChatGPT или Gemini. Часто приходится прописывать вручную, что и какого цвета должно быть, чтобы в дальнейшем нейросеть понимала порядок действий, и делала одни объекты одного цвета, другие — другого.
Без чёткого ТЗ результат хз — правило, работающее и в отношении человека, и в отношении машины.
Пример:
1 картинка — задача для Gemini в духе «Сделай промпт, в котором мужчина дарит женщине коробку с подарком в коридоре, всё в наших цветах».
2 картинка — задача для Gemini примерно следующая: «Вот наша палитра: 1 цвет, 2 цвет, 3 цвет, 4 цвет. Мне нужно получить промпты в разных сюжетах: 1, 2, 3, 4, 5. В первом сюжете сделай ракурс POV, покрась стены, коробку, одежду и детали интерьера в соответствии с нашей гаммой. Используй приглушённые оттенки цветов, пусть акцентным будет только цвет 2 или цвет 1».
Чем чётче ваша задача, тем выше шанс получения необходимого результата. Комбинируя и варьируя промпты между собой мы получаем полноценную консистентную фотосессию в нужных брендовых тонах.
Важно: нейронкам по барабану ваши коды цвета, все цвета и их оттенки прописываются словами. Нежно-голубой, терракотовый, салатовый и т.д.
Пример:
На 1-й картинке абажур цвета охры, а на 2-й — тёмно-оранжевый. Соответственно, в промпте на английском это будет выглядеть как Ochre color или Dark orange color.
