В статье рассказывается:
- Ликбез: что важно учитывать
- Культурный контекст
- Цвет как инструмент управления вниманием и настроением
- 5 модных сочетаний цветов в веб-дизайне
- 8 полезных сервисов
- Немного литературы
- Вместо заключения
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Подбор цвета в веб-дизайне — искусство. Высшее мастерство — когда всё получается по наитию. Но зачастую это дело требует времени и знаний. Цель данной статьи — оптимизировать кропотливый, хоть и увлекательный процесс составления палитры для веб-дизайна.
Ликбез: что важно учитывать
Сочетания цветов в web-дизайне подбираются под задачу. Важна не только гармония, но и правильное визуальное сообщение. Ведь по статистике только одни цвета (без учёта графики и других элементов дизайна) на 90% определяют первое впечатление пользователя.
Цветовой круг: гармония, тёплые и холодные цвета
![Самый примитивный вариант цветового круга](https://gb.ru/blog/wp-content/uploads/2023/08/1-3.png)
Цветовой круг — основа теории цвета в веб-дизайне. Он помогает подобрать сочетаемые цвета — например, те, которые находятся напротив, гармонично соотносятся между собой.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
![Павел Симонов - исполнительный директор Geekbrains](https://gb.ru/blog/wp-content/themes/reboot-child/assets/images/incut-top-it-30-2023-v2/Pavel_Simonov-m.png)
Скачивайте и используйте уже сегодня:
![Павел Симонов - исполнительный директор Geekbrains](https://gb.ru/blog/wp-content/themes/reboot-child/assets/images/incut-top-it-30-2023-v2/Pavel_Simonov.png)
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
![doc иконка](https://gb.ru/blog/wp-content/themes/reboot-child/assets/images/docx-insert-v2.png)
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Это самый простой вариант комбинации — комплементарная цветовая схема. И таких схем очень много.
![Другие варианты гармоничных цветовых схем](https://gb.ru/blog/wp-content/uploads/2023/08/2-3.png)
Также цветовой круг делится на две части — холодная (синий, зелёный, фиолетовый) и тёплая (желтый, оранжевый, красный). Зачастую тёплые оттенки считают стимулирующими, бодрящими, жизнерадостными, энергичными, а холодные — расслабляющими, умиротворяющими, успокаивающими.
Пользуясь лишь этим инструментом уже можно создать гармоничный и довольно точный визуальный месседж. Таблицы сочетаний цветов в веб-дизайне для тех, кто умеет пользоваться цветовым кругом, выглядят весьма ограниченным и статичным помощником. Ведь круги бывают очень сложные, состоящие из множества секторов, а также есть масса удобных сервисов по генерации цветовых схем на их основе.
Культурный контекст
Не надо углубляться в психологию цвета в веб-дизайне, чтобы понимать, что традиции везде разные. Что в Китае значит радость и удачу, то в Израиле может быть символом крови и греха, хотя это всё тот же красный цвет. Или оранжевый, который для большинства людей символизирует положительные эмоции, в США ассоциируется с дешёвыми товарами.
![Танец дракона в Китае](https://gb.ru/blog/wp-content/uploads/2023/08/3-3-1.jpg)
Поэтому нужно обязательно ориентироваться на культурный контекст целевой аудитории, учитывать возможное масштабирование проекта. Зачастую для этого достаточно прогуглить символизм цветов в нужной стране или регионе.
Цвет как инструмент управления вниманием и настроением
Грамотное использование цветов улучшает юзабилити и повышает конверсию, помогает пользователям принимать решения. Но нужно помнить, что цвет — субъективная категория. Зачастую люди понимают цвета индивидуально и это зависит от их личного опыта. Кого-то желтый цвет в веб-дизайне стимулирует к покупке, а кого-то будет раздражать.
Скачать файлПоэтому чтобы создавать интуитивно понятные интерфейсы и не допускать ошибок, не стоит закапываться в психологию цветов, достаточно знать их популярные значения в UI.
Красный. Зачастую так маркируется ошибка в интерфейсе, важное предупреждение или невалидная отработка сценария. Красный отлично подходит для акцентирования внимания, поэтому его используют для скидок и актуальных предложений. Он часто ассоциируется с эмоцией недовольства, поэтому опции «Пожаловаться» и «Заблокировать пользователя» нередко имеют этот цвет.
![Фрагмент интерфейса Telegram](https://gb.ru/blog/wp-content/uploads/2023/08/4-3.png)
Зелёный. Означает успешный результат, завершение процесса. Побуждает к действию, поэтому им часто маркируются кнопки «Зарегистрироваться» и «Купить».
![Сообщение об успешном завершении регистрации](https://gb.ru/blog/wp-content/uploads/2023/08/5-3.png)
Синий. Синий цвет в веб-дизайне по данным исследования Джо Халлока предпочитает 42% пользователей. Он создаёт нейтральный фон и вызывает чувство доверия, спокойствия и безопасности. Именно поэтому многие соцсети и мессенджеры выбирают его в качестве основного. Кроме того, дальтоникам легче увидеть синие оттенки.
![Синий в интерфейсе ВКонтакте](https://gb.ru/blog/wp-content/uploads/2023/08/6-3.jpg)
Чёрный. Черный цвет в веб-дизайне часто используют в качестве фона.
на обучение «Дизайнер» до 04 августа
![](https://gb.ru/blog/wp-content/themes/reboot-child/assets/images/insert-bn/dis.png)
![](https://gb.ru/blog/wp-content/themes/reboot-child/assets/images/insert-bn/dis_mob.png)
Также возможность выбрать dark mode или тёмный режим — признак заботы о пользователе. Ведь он уменьшает нагрузку на глаза, что увеличивает комфорт и эффективность работы, а на некоторых устройствах тёмная тема помогает экономить заряд батареи.
![Тёмный режим в Google Chrome](https://gb.ru/blog/wp-content/uploads/2023/08/7-3.png)
Серый. Серый цвет в веб-дизайне выглядит нейтрально, поэтому серо-голубые оттенки часто используются для второстепенных элементов интерфейсов.
Также отказ от ярких цветов и пёстрых сочетаний — забота о людях с эпилепсией. Ведь они могут вызвать приступ. Поэтому серый — это не скучно, а предусмотрительно.
![Большая часть интерфейса — оттенки серого](https://gb.ru/blog/wp-content/uploads/2023/08/8-1.png)
5 модных сочетаний цветов в веб-дизайне
В 2021 году в тренде яркие естественные тона, неожиданные гармоничные сочетания, приглушенные оттенки и природные палитры.
Выделяющаяся насыщенность
Насыщенные цвета в сочетании с более блёклым фоном, который делает их ещё более яркими — трендовая комбинация этого года.
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/9-2-1.jpg)
автор: Arian Sefy
Оттенки человеческой кожи
В ход идут не только привычные нюдовые цвета, а весь спектр оттенков человеческой кожи.
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/10-3.png)
автор: Ana-Ruxandra Nastase
Плавные градиенты
В этом году люди жаждут гармонии, а трендовые цвета в веб-дизайне отражают эту потребность в палитрах, где оттенки легко перетекают друг в друга. Единство и подобие — одни из наиболее актуальных визуальных сочетаний.
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/11-1.png)
автор: Elvira Ramaldanova
Сюрреалистичность
В 2021 году актуальны неожиданные, напоминающие сновидения или фэнтези палитры цветов в веб-дизайне. Объекты могут окрашиваться в непривычные для них цвета.
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/12-6.jpg)
автор: Lera Nezhdan
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/13-1-1.jpg)
автор: Asma khalid
Монохром плюс один
Старый добрый способ совместить выразительность и экспрессивность снова актуален. Такая схема позволяет создать контрастность, но оставить элегантность и выдержанность.
![5 модных сочетаний цветов в веб-дизайне](https://gb.ru/blog/wp-content/uploads/2023/08/14-1.png)
автор: Zamil Ahamed
8 полезных сервисов
ColorScheme
Удобный цветовой круг с множеством схем. Можно глянуть светлую и тёмную страницу с выбранной палитрой, подобрать гамму для людей с дальтонизмом и особенностями зрения.
![ColorScheme](https://gb.ru/blog/wp-content/uploads/2023/08/15-1.png)
Paletton
Очень напоминает предыдущий сервис, но здесь также можно посмотреть, как будут выглядеть цветовые блоки.
![Paletton](https://gb.ru/blog/wp-content/uploads/2023/08/16-2.png)
Coolors
Очень крутой англоязычный сервис по подбору цветовой палитры. Показывает не только коды цветов, но и их названия.
![](/blog/wp-content/themes/reboot-child/assets/images/incut-strategy-for-beginners-new/pdf.png)
![](/blog/wp-content/themes/reboot-child/assets/images/incut-strategy-for-beginners-new/pdf.png)
![](/blog/wp-content/themes/reboot-child/assets/images/incut-strategy-for-beginners-new/pdf.png)
Есть удобная возможность сохранить и поделиться созданной гаммой, сделать подборку цветов по картинке, а также здесь масса точных настроек.
![Coolors](https://gb.ru/blog/wp-content/uploads/2023/08/17-2.png)
Adobe Color
Ещё один удобный цветовой круг, крутые особенности — можно глянуть схемы, созданные другими пользователями, и, конечно, выбрать нужный цветовой режим.
![Adobe Color](https://gb.ru/blog/wp-content/uploads/2023/08/18-1.png)
DeGraeve
Загружаем картинку — получаем её цветовую палитру для веб-дизайна. На таком сервисе можно с интересом зависать часами!
![DeGraeve](https://gb.ru/blog/wp-content/uploads/2023/08/19-1.png)
Palette Generator
Ещё один подобный сервис, вычленяющий цвета из картинки. Также показывает долю наличествующих на ней оттенков в удобной круговой диаграмме.
![Palette Generator](https://gb.ru/blog/wp-content/uploads/2023/08/20-1.png)
Pallettable
Подбор цветов превращается в увлекательную игру — сервис предлагает выбрать нравится или не нравится вам оттенок.
![Pallettable](https://gb.ru/blog/wp-content/uploads/2023/08/21-1.png)
Flat Color Palettes
Сервис предлагает выбрать модные цвета для веб-дизайна в плоском стиле.
![Flat Color Palettes](https://gb.ru/blog/wp-content/uploads/2023/08/22-1.png)
Немного литературы
Если вы хотите вникнуть поглубже и стать гуру в области колористики, то вот парочка полезных книг:
- «Сочетание цветов на практике», Наоми Куно
- «Искусство цвета», Иоханнес Иттен
- «Диалектика мифа», Алексей Лосев (уровень «со звёздочкой» — для тех, кто хочет понимать всю глубину символизма цвета)
Вместо заключения
Цвет в веб-дизайне — самый красноречивый инструмент, ведь на подсознательном уровне он считывается первым. Форма вторична. Поэтому подбирать палитру цветов для веб-дизайна стоит осознанно.
А в этом помогут:
- Понимание основ теории цвета.
- Учёт культурного контекста.
- Знание актуальных трендов.
- Сервисы для подбора сочетаний цветов в веб-дизайне.
- Наши бесплатные курсы: «Визуальный язык и его элементы» и «Figma. Начальный уровень»