Как подобрать цвета для проекта, найти удачные комбинации, не повторяться, не повторять конкурентов, отыскать вдохновение. И подборка из 20-ти онлайн-сервисов, которые могут облегчить эту задачу.
Цвет – это инструмент дизайнера. Это твое послание пользователям. Способ выразить мысль, передать нужное настроение, подчеркнуть позиционирование продукта, помочь заказчику достичь своих целей. И при этом еще остается аспект эстетики.
Учесть нужно многое. И при этом как-то постараться сделать проект оригинальным. Что бывает не так просто, когда есть уже определенные отраслевые стандарты. Ты можешь создать хорошее решение для продукта, выбрать нужные контрасты, вписаться в настроение, но получить что-то схожее с уже известным брендом. Потому что самые крутые сочетания уже где-то были. Но все не так страшно – просто нужно знать правила создания удачных вариантов и, может быть, прибегнуть для вдохновения к современным онлайн-сервисам.
Идеальные комбинации
В колористике давно выделили несколько вариантов удачных сочетаний. Здесь нужно просто понять принцип и подставлять под него свои варианты оттенков. Для этого возьми круг Иттена и поэкспериментируй.
Вот классические варианты составления палитры:
- Монохроматичный – один цвет, но три его оттенка, которые стоят рядом в круге;
- Аналоговый – бери три цвета, которые стоят рядом;
- Комплементарный – два цвета, которые расположены на противоположных сторонах круга;
- Триадический – раздели круг знаком Мерседеса и бери три равноудаленных друг от друга цвета;
- Сплит-триада – первый цвет + второй через один от него + один противоположный на круге;
- Тетрадический – два соседних цвета + два противоположных им;
- Квадратичный – дели круг на 4 и бери все 4 равноудаленных цвета.
Из этой базы рождаются разные комбинации, расширенные версии и доработки. Но достаточно для начала и основных комбинаций.
Важно: использовать тренды нужно (например, цвет года Pantone), но если это касается краткосрочных проектов. Когда создаешь сайт или брендбук, которые будут применяться годы подряд – делай что-то универсальное. Иначе устаревший тренд испортит впечатление о бренде.
Контрасты
Можно не быть художником, подбор цвета – это вопрос грамотного подхода и четкого расчета. Например, всегда работает правило “60-30-10”:
- 60% – базовый цвет, который будет преобладать;
- 30% – вспомогательный цвет, часто схожего оттенка с основным;
- 10% – контрастный цвет, который будет оттенять основной.
И для начала этого достаточно. Дополнительные цвета могут понадобиться, если проект предусматривает сложную навигацию. И то, эти цвета могут быть просто более темными или светлыми вариациями основного.
В любом случае нужно делать контраст. Как минимум, это нужно для обеспечения доступности – слабовидящим людям нужно тоже смотреть сайты. И вообще, это просто красиво. Варианты контраста:
- Бледный + насыщенный.
- Теплый + холодный.
- Противоположность на круге Иттена.
- Дополнения черным и белым.
Помни про темную и светлую темы на смартфонах! Твои цвета должны одинаково хорошо смотреться в любом случае. Ничего не должно теряться, неправильно оттеняться и резать глаз. Проработка требует внимательности. Не упусти этот момент, когда работаешь над адаптивным дизайном.
Примеры реального мира
Человечество придумало много всего, но природа сделала больше. И готовую палитру можно взять с сайта National Geographic. Просто полистай фото дикой природы и примерь эти референсы на свой проект. Коралловый риф, фьорды, тропики, саванна, экзотические пейзажи, азиатские рынки – все пестрит красками, которые в сумме смотрятся хорошо. Просто бери и применяй.
Сервисы для подбора палитры
Существует огромное количество удобных платформ для подбора палитры онлайн. Просто задавай тон, комбинируй, пробуй, проси искусственный интеллект помочь. И забирай результат в свой проект.
1. Paletton.com
Paletton – онлайн-инструмент для создания цветовых комбинаций с учетом различных цветовых моделей. Особенностью этого сервиса является интуитивный интерфейс, позволяющий легко создавать и экспериментировать с различными цветовыми схемами.
Adobe Color (ранее известный как Adobe Kuler) – онлайн-инструмент для создания и исследования цветовых схем. Плюсом этой платформы является возможность создавать цветовые палитры на основе цветовых правил и алгоритмов, а также доступ к готовым палитрам, созданным другими пользователями и экспертами.
Palettable – онлайн-инструмент для создания и сохранения цветовых палитр. Главные преимущества: удобный интерфейс и возможность экспорта палитр в различные форматы, такие как CSS, JSON и другие.
ColorHexa – онлайн-ресурс для исследования и анализа цветов. Особенностью этого сервиса является широкий спектр доступных функций, включая конвертер цветовых моделей, анализатор цветовых кодов, исследование цветовых гармоний и многое другое.
Flat Colors – онлайн-каталог плоских цветов для использования в дизайне интерфейсов и веб-разработке. Большой выбор ярких и насыщенных цветов, удобная навигация по категориям.
6. Hexcolor.co
Hex Color – онлайн-инструмент для поиска и исследования цветов по их HEX-кодам. Широкий выбор цветов и удобный интерфейс для их просмотра и сравнения. Очень удобно, если у тебя есть пожелания клиента или брендбук.
Components AI – онлайн-платформа для автоматизации создания дизайн-компонентов. Особенностью этого сервиса является использование искусственного интеллекта для создания и адаптации компонентов в соответствии с требованиями. Тот случай, когда ИИ не отнимает работу у дизайнера, а помогает ее делать.
Designspiration – онлайн-платформа для поиска вдохновения и исследования дизайнерских работ. Особенностью этого сервиса является большая база изображений и возможность фильтрации по цвету, форме и другим параметрам. Соответственно, тут ты сможешь найти и удачные палитры.
9. Khroma.co
Khroma – онлайн-платформа для создания персонализированных цветовых палитр с использованием машинного обучения. Особенностью этого сервиса является возможность создания палитр на основе предпочтений и стиля пользователя. Умный алгоритм поймет, что именно ты хочешь.
10. Mycolor.space
MyColor – онлайн-платформа для создания и сохранения персонализированных цветовых палитр. Широкие возможности создания палитр с учетом твоих предпочтений. Сохранение – удобная опция, которая поможет сделать сразу много разных вариантов для использования в будущих проектах.
Flat UI Color Picker – онлайн-инструмент для выбора плоских цветов для использования в веб-дизайне. Особенностью этого сервиса является большой выбор популярных цветовых схем и удобный интерфейс для их просмотра и выбора.
12. Material.io
Material Design – онлайн-ресурс от Google, посвященный дизайну интерфейсов в стиле Material Design. Особенностью этого сервиса является обширная документация и руководства по использованию дизайн-элементов.
Material UI Colors – продолжая тему предыдущего пункта, это онлайн-инструмент для выбора цветовых палитр в соответствии с дизайн-гайдлайнами Material Design от Google. Тут большой выбор готовых палитр и удобный интерфейс для их выбора и просмотра.
14. Coolors.co
Coolors – онлайн-инструмент для создания цветовых палитр методом генерации случайных комбинаций. Удобный интерфейс для создания и редактирования палитр, возможность экспорта в различные форматы.
15. Bjango.com
Bjango – онлайн-платформа для создания и исследования цветовых схем. Широкий выбор инструментов для анализа цветовых палитр и просмотра цветовых свойств.
16. Coleure.com
Coleure – онлайн-платформа для создания и сравнения цветовых палитр. Предусмотрена возможность сравнивать различные палитры и анализировать их цветовые характеристики.
17. Colorhunt.co
Color Hunt – онлайн-платформа для исследования и выбора цветовых палитр, созданных и опубликованных пользователями. Большой выбор красивых и вдохновляющих палитр, сортировка по популярности и возможность скачивания в форматах для дизайнерских программ.
18. Colorzilla.com
ColorZilla – это браузерное расширение, которое позволяет анализировать цвета на веб-страницах и создавать цветовые палитры на основе изображений. Там же можно найти сервис для построения градиентов. Особенностью этого инструмента является удобство использования прямо в браузере, а также возможность получения цветовой информации с любой веб-страницы – если нравится чужой дизайн или нужно выудить из готового проекта цвета, то просто пользуйся этим сервисом.
19. Colllor.com
Colllor – онлайн-инструмент для исследования и создания цветовых палитр. Ничего сверхординарного, но сервис удобный, простой и поэтому популярный.
20. Colormind.io
Colormind – онлайн-инструмент для автоматического создания цветовых палитр с использованием нейронных сетей. Ты получаешь возможность генерации уникальных и гармоничных цветовых комбинаций с помощью искусственного интеллекта.
Твори, придумывай, учись
О создании разных удачных цветовых сочетаний, психологии цвета, применении оттенков в веб-дизайне и творчестве можно писать очень много – не просто статьи, а целые диссертации. Но для начала тебе нужно знать базу. Регистрируйся на онлайн-курс «Графический дизайнер: вектор бренда». Там много важной информации о цвете, айдентике, графике, композиции и не только.