Подбор палитры в веб-дизайне: 17 онлайн-сервисов

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

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

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

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

Цвет – это послание. Аудитория должна считывать его верно. И суть продукта, и позиционирование бренда, все это должно отображаться в твоей палитре. Но кроме этого есть элементарный вопрос эстетики. Как сделать так, чтобы используя нужную гамму, подобрать гармоничные дополнительные цвета, создать красивый контраст и при этом выдать в результате нечто оригинальное? Только подбирать палитру со знанием дела.

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

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

Идеальные комбинации

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

В веб-дизайне используется несколько видов классических комбинаций:

• Монохроматические – 3 оттенка одного цвета один за другим.
• Аналоговые – три соседних цвета. 
• Комплементарные – 2 противоположных цвета.
• Триадические – 3 равноудаленных цвета.
• Сплит-триада – один противоположный, два цвета с интервалом в один шаг.
• Тетрадические – 4 цвета: два рядом/два противоположных им.
• Квадратичные – 4 равноудаленных цвета.

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

Контрасты и правило 60-30-10

Есть простое универсальное правило подбора цвета 60-30-10:

• 60% – основной цвет;
• 30% – второстепенный цвет;
• 10% – акцент/контраст.

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

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

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

Вдохновляйся природой

Природа уже давно создала все возможные комбинации цветов. И даже самые дикие из них – посмотри на окраску хищных тропических рыб, на бабочек и змей. Загугли сайт с фотографиями в макро: цветы, насекомые, птицы, экзотические фрукты. Тут уже готовые варианты палитры – просто бери и применяй. 

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

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

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

Тепло/холод/фон

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

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

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

Любая выбранная палитра может смотреться совершенно по-разному в зависимости от фона. И это особенно важно сегодня, когда темные темы на мобильных устройствах захватывают мир. Если твой дизайн предусматривает смену фона, то проработка решений вдвойне важна и требует внимательности. На темной теме могут потеряться те элементы, которые хорошо выделены в светлом исполнении. И наоборот. А еще может быть просто несовпадение посыла. Согласись, желтый с белым и желтый с черным – это совершенно разные настроения. Не упусти этот момент, когда работаешь над подбором оттенков. 

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

Если у тебя под рукой веер Пантон – это хорошо. Тренирует восприятие, помогает наглядно подобрать оттенки. Но в 21 веке уже не нужно иметь физическое воплощение цветового круга, тем более вручную его вертеть в поисках “того самого” цвета. Есть масса интересных сервисов, которые помогут выбрать палитру онлайн. И большинство из них не ограничиваются одной функцией – есть варианты с автоподбором, демонстрацией шаблона и прочими плюшками. 

1. color.adobe.com
2. paletton.com
3. palettable.io
4. flatcolors.net
5. materialpalette.com
6. hexcolor.co
7. designspiration.com
8. components.ai
9. khroma.co
10. material.io
11. mycolor.space
12. flatuicolorpicker.com
13. coolors.co
14. bjango.com
15. materialui.co/colors
16. coleure.com
17. colllor.com

БОНУС! Сервисы для создания и подбора крутых градиентов:

1. grabient.com
2. noiseandgradient.com
3. webgradients.com
4. cssgradient.io

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

Подробно про цвет и подбор палитры можно узнать на онлайн-коучинге «‎Графический дизайнер: вектор бренда». А еще там будет про создание айдентики, иллюстраций, векторной графики, изучение инструментов и техник, правила композиции, подбор шрифтов, рисовка бесшовных узоров и паттернов и много чего еще. В процессе ты научишься создавать шикарный дизайн, пополнишь свое портфолио и найдешь работу! Присоединяйся к ближайшему потоку.