Цвета для веб дизайна: Трендовые цвета в веб-дизайне

Трендовые цвета в веб-дизайне

При создании сайта нужно особое внимание уделить выбору цветовой гаммы. Подбор доменного имени, хостинга, проработка архитектуры, соблюдение трендов UX/UI-дизайна — конечно, важные моменты при создании сайта, но встречают по обложке, и первое визуальное впечатление закладывает фундамент мнения о компании. Грамотный выбор цветов оказывает определенное влияние на пользователя и формирует его восприятие на бренд. Правильно подобранная веб-дизайнером комбинация цветов и оттенков поможет пользователю лучше понять цели проекта и повысить читаемость веб-сайта.

 

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

 

 

Теплые цвета в веб-дизайне в 2021 году

 

В 2021 году в моду возвращаются насыщенные яркие цвета, которые были очень популярны в 80-90 годах. Ретростиль сейчас преобладает везде — в модной одежде, аксессуарах и даже в дизайнерских оформлениях сайтов. Подобное сочетание цветов для сайта вызывает ностальгию и теплые воспоминания, а это, в свою очередь, формирует позитивную эмоциональную связь с компанией.

 

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

 

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

 

Жидкое золото

 

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

 

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

 

 

 

 

Все оттенки розового

 

В тренде сегодня и розовый цвет, который давно перестал считаться девичьим. Для оформления своих сайтов все чаще розовые тона стали использовать строительные фирмы и интернет-магазины по продаже одежды.

 

 

 

 

Популярность этого цвета обусловлена тем, что при взгляде на розовый у человека возникают ассоциации с детством и спокойствием. Кроме этого, розовый цвет не «режет глаз» и способен снять напряжение. Поэтому при использовании в веб-дизайне этого оттенка можно вызвать у посетителей доверие к бренду на подсознательном уровне.

 

Веб-дизайнеры используют чаще всего при оформлении сайтов розовое с черным или розово-желтое, в зависимости от цели проекта. Яркий пример это сайт Unleashed. Желтые буквы на розовом фоне — это отличное цветовое сочетание, и при рассмотрении не вызывает раздражения.

 

Красно-оранжевые тона

 

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

 

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

 

 

 

 

Фаворитом в этом сезоне считается огненный. Он вызывает бурю эмоций и действует магнетически на посетителей сайта, который оформлен в таком цветовом диапазоне.

 

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

 

 

Цвета, как напоминание о единстве человека с природой

 

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

 

 

 

 

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

 

Бледно-зеленый ассоциируется в новом сезоне не только с темой экологии, но и технологической темой. Дизайнеры используют эту спокойную гамму для создания спокойного настроения у аудитории.

 

 

Холодные цвета в веб-дизайне

 

Серый как основа

 

Дизайнеры раньше использовали серый исключительно как дополнительный. В этом сезоне все кардинально изменилось. Серый в сочетании с желтым и зеленым — это необычное дизайнерское решение. А все, что выглядит необычно, привлекает к себе внимание.

 

 

 

 

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

 

Радикально черный 

 

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

 

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

 

 

 

 

Примером такого сочетания цветов в современном веб-дизайне считается сайт Apple. Его оформление полностью соответствует политике бренда и с первого взгляда видно, что товары предназначены для покупателей премиум-класса.

 

Классический синий

 

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

 

 

 

 

Цвет морской волны и мята

 

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

 

 

 

 

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

 

 

Актуальное сочетание цветов в веб-дизайне в 2021 году

 

Футуристические сочетания цветов

 

Сочетание розового, синего и пурпурного, фиолетового сегодня в тренде у веб-дизайнеров. 

 

Шаблон сайта от Ucraft

 

 

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

 

Трио: голубой, серый и синий

 

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

 

 

 

 

Классика: черный, белый и серый

 

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

 

Шаблон сайта от Ucraft

 

 

Цветовые тренды для разных стран

 

Shutterstock было проведено исследование, с целью изучения популярности тех или иных цветов для сайтов в различных странах. После анализа результатов определилась такая тенденция: жители Германии и Франции предпочитают оттенки фиолетового; для японцев в фаворе белый, а россиянам нравится оформление в бледно-зеленых тонах.

 

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

 

 

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

 

Чтобы дизайнеру облегчить работу по подбору палитры для сайта, созданы специальные сайты и сервисы:

 

• Adobe Color — сервис для формирования палитр.Сделайте собственную цветовую схему, предварительно загрузив изображение. Кроме этого, на сервисе расположены работы других дизайнеров и представлен рейтинг лучших цветовых гамм.

• Color Mixer — инструмент для работы над палитрами. Регулируя параметры оси, формируйте оптимальное цветовое сочетание. 

• Gradient Hunt — бесплатная платформа для формирования собственной коллекции градиентов или собирания удачных решений из представленных. После создания градиентов можно их сохранить себе. 

• Color Leap — сервис поиска из 180 цветовых схем, используемых человечеством на протяжении последних 4000 лет. На сайте легко проследить, как менялись популярные оттенки в каждом веке и столетии.

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

• CoolHue 2.0 — представляет в общее пользование 60 разнообразных градиентов, их можно экспортировать как изображение или скачать кодом.

• Pigment — сервис, который поможет генерировать яркие оттенки. Система отталкивается от определенного пигмента и освещения. 

• Palettable — на этом сервисе можно подобрать цвета по принципу хорошо/плохо. Редактирование происходит вручную, поэтому можно подобрать тон так, чтобы он гармонировал с другими тонами.

• Culrs — на этом ресурсе профессионалами собраны готовые цветовые схемы. Здесь можно найти подходящую палитру для дизайна своего сайта.

• Mesh Gradients — бесплатный сервис, где собрана коллекция фоновых градиентов. Их можно скачать в различных разрешениях.

 

 

Как подобрать цвета для сайта?

 

Прежде чем применить на своей сайте один из трендов цветовой гаммы 2021 года, необходимо понимать, почему это так важно:

 

• Грамотно подобранный цвет сайта, на 80% делает бренд более узнаваемым.

• На 90% первое впечатление, которое появляется у юзера от сайта зависит от выбранной палитры.

• Фирменные цвета стоит неукоснительно использовать на всех страницах сайта, такое дизайнерское решение дает пользователю ощущение целостности проекта.

• При помощи изменения оттенков можно расставить акценты и сформировать путь клиента, который ведет, например, к кнопке с призывом к действию.

• Выбор определенной цветовой палитры упрощает дизайнеру работу при расширении сайта.

 

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

 

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

 

В палитре веб-сайта дизайнер может использовать несколько тонов. Однако во всем должна быть мера: лучше всего выбрать 1 основной и 2-3 дополнительных цвета. 

 

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

Безопасные цвета для Веб. Таблица из 216 цветов, рекомендуемых для экранного дизайна — ColorScheme.Ru

· Инструмент для подбора цветов и генерации цветовых схем ·

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

Если веб-браузер не в состоянии правильно отобразить тот или иной цвет, то он пытается подобрать похожий или смешивает несколько соседних цветов. Может так случиться, что исходный цвет будет замещён чем-то совершенно неподходящим.

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

Безопасные цвета были выведены математически, а не потому, что они кому-то больше пришлись по душе. Для получения безопасного цвета из Красного, Зелёного и Синего, нужно использовать только данные десятичные значения: 0, 51, 102, 153, 204, 255 — и никакие другие. Каждое из трёх шестнадцатеричных значений не должно отличаться от 00, 33, 66, 99, CC, FF.

Таблица

Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

• 255 255 204#FFFFCC
• 255 255 153#FFFF99
• 255 255 102#FFFF66
• 255 255 51#FFFF33
• 255 255 0#FFFF00
• 204 204 0#CCCC00
• 255 204 102#FFCC66
• 255 204 0#FFCC00
• 255 204 51#FFCC33
• 204 153 0#CC9900
• 204 153 51#CC9933
• 153 102 0#996600
• 255 153 0#FF9900
• 255 153 51#FF9933
• 204 153 102#CC9966
• 204 102 0#CC6600
• 153 102 51#996633
• 102 51 0#663300
• 255 204 153#FFCC99
• 255 153 102#FF9966
• 255 102 0#FF6600
• 204 102 51#CC6633
• 153 51 0#993300
• 102 0 0#660000
• 255 102 51#FF6633
• 204 51 0#CC3300
• 255 51 0#FF3300
• 255 0 0#FF0000
• 204 0 0#CC0000
• 153 0 0#990000
• 255 204 204#FFCCCC
• 255 153 153#FF9999
• 255 102 102#FF6666
• 255 51 51#FF3333
• 255 0 51#FF0033
• 204 0 51#CC0033
• 204 153 153#CC9999
• 204 102 102#CC6666
• 204 51 51#CC3333
• 153 51 51#993333
• 153 0 51#990033
• 51 0 0#330000
• 255 102 153#FF6699
• 255 51 102#FF3366
• 255 0 102#FF0066
• 204 51 102#CC3366
• 153 102 102#996666
• 102 51 51#663333
• 255 153 204#FF99CC
• 255 51 153#FF3399
• 255 0 153#FF0099
• 204 0 102#CC0066
• 153 51 102#993366
• 102 0 51#660033
• 255 102 204#FF66CC
• 255 0 204#FF00CC
• 255 51 204#FF33CC
• 204 102 153#CC6699
• 204 0 153#CC0099
• 153 0 102#990066
• 255 204 255#FFCCFF
• 255 153 255#FF99FF
• 255 102 255#FF66FF
• 255 51 255#FF33FF
• 255 0 255#FF00FF
• 204 51 153#CC3399
• 204 153 204#CC99CC
• 204 102 204#CC66CC
• 204 0 204#CC00CC
• 204 51 204#CC33CC
• 153 0 153#990099
• 153 51 153#993399
• 204 102 255#CC66FF
• 204 51 255#CC33FF
• 204 0 255#CC00FF
• 153 0 204#9900CC
• 153 102 153#996699
• 102 0 102#660066
• 204 153 255#CC99FF
• 153 51 204#9933CC
• 153 51 255#9933FF
• 153 0 255#9900FF
• 102 0 153#660099
• 102 51 102#663366
• 153 102 204#9966CC
• 153 102 255#9966FF
• 102 0 204#6600CC
• 102 51 204#6633CC
• 102 51 153#663399
• 51 0 51#330033
• 204 204 255#CCCCFF
• 153 153 255#9999FF
• 102 51 255#6633FF
• 102 0 255#6600FF
• 51 0 153#330099
• 51 0 102#330066
• 153 153 204#9999CC
• 102 102 255#6666FF
• 102 102 204#6666CC
• 102 102 153#666699
• 51 51 153#333399
• 51 51 102#333366
• 51 51 255#3333FF
• 51 0 255#3300FF
• 51 0 204#3300CC
• 51 51 204#3333CC
• 0 0 153#000099
• 0 0 102#000066
• 102 153 255#6699FF
• 51 102 255#3366FF
• 0 0 255#0000FF
• 0 0 204#0000CC
• 0 51 204#0033CC
• 0 0 51#000033
• 0 102 255#0066FF
• 0 102 204#0066CC
• 51 102 204#3366CC
• 0 51 255#0033FF
• 0 51 153#003399
• 0 51 102#003366
• 153 204 255#99CCFF
• 51 153 255#3399FF
• 0 153 255#0099FF
• 102 153 204#6699CC
• 51 102 153#336699
• 0 102 153#006699
• 102 204 255#66CCFF
• 51 204 255#33CCFF
• 0 204 255#00CCFF
• 51 153 204#3399CC
• 0 153 204#0099CC
• 0 51 51#003333
• 153 204 204#99CCCC
• 102 204 204#66CCCC
• 51 153 153#339999
• 102 153 153#669999
• 0 102 102#006666
• 51 102 102#336666
• 204 255 255#CCFFFF
• 153 255 255#99FFFF
• 102 255 255#66FFFF
• 51 255 255#33FFFF
• 0 255 255#00FFFF
• 0 204 204#00CCCC
• 153 255 204#99FFCC
• 102 255 204#66FFCC
• 51 255 204#33FFCC
• 0 255 204#00FFCC
• 51 204 204#33CCCC
• 0 153 153#009999
• 102 204 153#66CC99
• 51 204 153#33CC99
• 0 204 153#00CC99
• 51 153 102#339966
• 0 153 102#009966
• 0 102 51#006633
• 102 255 153#66FF99
• 51 255 153#33FF99
• 0 255 153#00FF99
• 51 204 102#33CC66
• 0 204 102#00CC66
• 0 153 51#009933
• 153 255 153#99FF99
• 102 255 102#66FF66
• 51 255 102#33FF66
• 0 255 102#00FF66
• 51 153 51#339933
• 0 102 0#006600
• 204 255 204#CCFFCC
• 153 204 153#99CC99
• 102 204 102#66CC66
• 102 153 102#669966
• 51 102 51#336633
• 0 51 0#003300
• 51 255 51#33FF33
• 0 255 51#00FF33
• 0 255 0#00FF00
• 0 204 0#00CC00
• 51 204 51#33CC33
• 0 204 51#00CC33
• 102 255 0#66FF00
• 102 255 51#66FF33
• 51 255 0#33FF00
• 51 204 0#33CC00
• 51 153 0#339900
• 0 153 0#009900
• 204 255 153#CCFF99
• 153 255 102#99FF66
• 102 204 0#66CC00
• 102 204 51#66CC33
• 102 153 51#669933
• 51 102 0#336600
• 153 255 0#99FF00
• 153 255 51#99FF33
• 153 204 102#99CC66
• 153 204 0#99CC00
• 153 204 51#99CC33
• 102 153 0#669900
• 204 255 102#CCFF66
• 204 255 0#CCFF00
• 204 255 51#CCFF33
• 204 204 153#CCCC99
• 102 102 51#666633
• 51 51 0#333300
• 204 204 102#CCCC66
• 204 204 51#CCCC33
• 153 153 102#999966
• 153 153 51#999933
• 153 153 0#999900
• 102 102 0#666600
• 255 255 255#FFFFFF
• 204 204 204#CCCCCC
• 153 153 153#999999
• 102 102 102#666666
• 51 51 51#333333
• 0 0 0#000000

Трендовые цвета в веб-дизайне 2021 года | Дизайн, лого и бизнес

Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.

Создать логотип онлайн

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

Ниже представлены главные модные цвета в дизайне сайтов на 2021 год. Мы подробно описали их преимущества и рекомендации по использованию.

Розовый

Розовый цвет уже давно не приписывают только к женской аудитории. Сейчас такое цветовое решение используется компаниями различных направлений: от интернет-магазинов одежды до сайтов строительных фирм.

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

Чаще всего розовый сочетают с желтым цветом. Это позволяет сделать текст выразительным и при этом не броским. Также распространенные решение — комбинация розового и черного.

Оранжевый, красный

Многие известные компании используют такое сочетание цветов в качестве расцветки сайта. Данные оттенки относятся к теплой гамме. Также они ассоциируются с 80-ми годами. Поэтому дополнительное воздействие оранжевого, красного и розового в совокупности — вызывание ностальгических чувств.

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

Тотальный черный

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

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

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

Голубой + бирюзовый

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

Популярность такой расцветки обусловлена особенностью ее влияния на психику людей. Голубой (как и все холодные оттенки) оказывает успокаивающее действие, но при этом усиливает концентрацию внимания. Поэтому компании разных сфер выбирают этот цвет.

Серый

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

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

Синий

Классический глубокий синий цвет все еще удерживает лидирующие позиции в качестве основы расцветки сайтов. Многие дизайнеры используют его в исходном виде (без добавления градиента и смешения с другими цветами). Чтобы расставить акценты, обычно используют белый цвет текста.

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

Натуральные оттенки

Последние годы активно освещаются в СМИ и Интернет-источниках проблемы с экологией. Блогеры и представители компаний пытаются привлечь внимание своих клиентов и зрителей к экологическим катастрофам. Они делают это с помощью прямых призывов или косвенно — путем использования «экологичных» цветов в дизайне сайта.

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

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

Как подобрать цветовое решение сайта?

Выше мы описали основные трендовые цвета 2021 года. Однако, вопрос «Как выбрать расцветку для сайта?» остается открытым. Попробуем на него ответить.

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

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

В цветовой гамме вашего сайта могут быть использованы как один, так и несколько тонов. Главное, не переборщить. Лучше выбрать 1-2 основных оттенка и 1-2 дополнительных. Отличным решением будет использование градиента. Тем более, в 2021 году он на пике моды.

Подведем итог

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

Другие статьи

Редактор блога и специалист по контент-маркетингу в Turbologo. Статьи Виктории содержат полезные советы о маркетинге, создании бренда и продвижении его в Интернете.

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

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

Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

У каждого оттенка есть противоположность, так сказать, его «заклятый враг», который составляет самый большой контраст с этим цветом. Чтобы найти такой цвет, вы можете использовать цветовой круг. Просто выберите цвет на противоположной стороне круга.

Цветовое колесо

Дополнение

Эти цвета не всегда конфликтуют между собой. Дополняющие цвета подчёркивают друг друга, в отличие от контрастных. В цветовом круге такие цвета идут друг за другом, например, дополняющие цвета лилового — голубой и розовый.

Резонанс

Каждый цвет вызывает определённое настроение. Яркие тёплые цвета (красный, оранжевый, жёлтый) наполняют человека энергией, пробуждают его, а холодные тёмные оттенки (зелёный, голубой, фиолетовый), наоборот, расслабляют и успокаивают.

Например, BBC News используют красную панель навигации, чтобы пробудить читателя, усилить его возбуждённое состояние. Учитывая специфику сайта — сенсационные новости, — красный цвет выглядит логичным решением.

BBC News

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

Эмоциональное восприятие цвета

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

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.

Использовать много красного цвета в топе страницы — это отличное решение, так как он привлекает внимание к важной информации в сообщении. В то же время люди стремятся побыстрее покинуть «опасную зону» красного цвета и скроллят вниз. А это, в свою очередь, позволяет показать пользователю больше контента.

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность.

Как самый спокойный из тёплых тонов, оранжевый способен вызывать целый спектр разносторонних эмоций. В качестве основного цвета он может вызывать интерес и бодрить, а в качестве вторичного — сохранять эти свойства, но в более ненавязчивой манере.

Сайт Fanta

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

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

Это один из самых универсальных цветов, а эмоции, которые он вызывает, в большей степени зависят от оттенка.

Яркий жёлтый цвет добавляет энергии, но без остроты и резкости, которая присутствует в красном. Средние оттенки жёлтого цвета вызывают ощущение комфорта, хотя всё ещё бодрят. Тёмные оттенки (включая золотой) обеспечивают ощущение старины, наполняют пространство безвременьем, мудростью и любопытством.

Flash Media

Например, на главной странице агентства веб-дизайна Flash Media более тёмные тона жёлтого источают энергию, любопытство и авторитет. Такой цвет отлично подходит для компаний, которые зарабатывают на консультациях и хотят подчеркнуть свой профессионализм.

Зелёный цвет

Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.

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

Ameritrade

В результате этого он создаёт очень сбалансированную и стабильную атмосферу. Более тёмные оттенки зелёного создают впечатление богатства и изобилия, как на сайте Ameritrade.

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

Как и в случае с жёлтым цветом, влияние синего сильно зависит от оттенка. Все оттенки синего универсальны в плане расслабления и безопасности, но светлые тона ассоциируются с дружелюбием, а тёмные — с печалью.

Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные оттенки силы и надёжности.

Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.

Van Vliet & Trap

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

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом, что делает их отличным выбором для модных товаров и предметов роскоши (даже для шоколада, например, как Cadbury, который выбрал его цветом бренда).

Cadbury

Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

Самый сильный из нейтральных цветов — чёрный — появляется практически на любом сайте. Он может вызывать разные ассоциации в зависимости от сопровождающих его цветов или доминировать над ними, если использовать его сверх меры.

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

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Dream + Reach

Белый

Эмоции и ассоциации: чистота, простота, добродетель.

В западной культуре белый цвет ассоциируется с чистотой, добротой и невинностью. Этот цвет часто используют для фона минималистичных и простых сайтов.

Сайт с работами Клоина Тошева

Кроме того, ни один цвет не позволит обратить столько внимания на остальные цвета, как белый. Например, на сайте победителя Awwwards Клоина Тошева все его работы выложены на белом фоне, что только выделяет иллюстрации и создаёт впечатление элегантной галереи.

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

Awwwards

А в сочетании с более яркими цветами в дизайне серый фон кажется современным, а не мрачным, например на Awwwards.

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

Более тёмные оттенки бежевого создают ощущение традиционности и приземлённости, дают ощущение бумажной текстуры, а более светлые оттенки кажутся свежее и современнее.

Dishoom

Например, на сайте ресторана Dishoom светло-бежевый цвет вокруг названия и более тёмные края создают впечатление, что этот ресторан — свежий взгляд на традиционную кухню.

Цвет слоновой кости

Эмоции и ассоциации: комфорт, элегантность, простота.

Цвет слоновой кости, а также кремовый вызывают практически те же эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя при этом минимализм.

Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Art in My Coffee

Цветовая гамма

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

Несмотря на то, что существует множество способов сочетать цвета, мы остановимся на трёх самых успешных и часто используемых.

Триада (тройная гармония, треугольник)

Триада

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

На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.

Двойная комплиментарная система

Двойная комплиментарная система

Эту гамму труднее воплотить, но она может оказаться выгодным решением. Используется четыре цвета: два контрастных и два дополнительных.

Посмотрите, как замечательно выглядит страница Florida Flourish, основанная на такой схеме. Красный и зелёный цвета контрастируют в растениях и блоках с текстом, а голубой фон и оранжевая пустыня эффектно дополняют картину.

Flourish

Аналоги (последовательная система)

Аналоги

Гамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.

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

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

Blinksale

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

Инструменты-помощники для выбора цвета

К счастью, есть несколько инструментов, которые помогают воплотить теорию цвета на практике. Попробуйте эти палитры, чтобы не надо было начинать с нуля в создании своей:

1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

Помните: пользователи редко замечают и оценивают цвет фона, панели навигации, отдельных деталей, но это не значит, что цвет при этом не воздействует на них. Просто это происходит подсознательно.

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

Если у вас есть свои советы, касающиеся использования цвета в веб-дизайне, просьба поделиться в комментариях.

5 трендовых цвета в Веб Дизайне. Цвет может быть одним из самых забавных… | by Mais Tazagulyan

Цвет может быть одним из самых забавных — и наиболее разочаровывающих — частей планирования проекта веб-дизайна. Вы хотите, чтобы цвета отражали ваш бренд, но вы также хотите создать стиль, современный и модный.

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

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

Самыми большим трендом является использование градиентов, светлого или белого фона сайта, а так же, использование цветов из палитры Material Design, цвет года Pantone (многолетний тренд) и золотистые оттенки. Давайте посомтрим, как использовались цвета в ваших проектах и ​​как они использовались в примерах сайтов, которые уже имеют такие цветовые тенденции.

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

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

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

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

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

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

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

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

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

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

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

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

И это хорошо.

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

В проектах больше красных, оранжевых и пурпурных оттенков, что мы и видели в течение долгого времени. И они в паре с ярким голубым, зеленым и фиолетовым цветом. (Цвет дизайна материала также является популярными цветами для градиентов.)

Можно найти полный набор вдохновляющих оттенков для проектов в HEX и RGB из материалов Design Colors .

Pantone назвал Greenery, более конкретно 15–0343, как цвет года в конце 2016 года. То, что мы видели в последние годы, это то, что цвет года является признаком цветного тренда.

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

С точки зрения дизайна зеленый — это отличный выбор цвета. Зеленые оттенки могут быть просты в использовании, не так сильно могут надоесть, как некоторые другие цветовые решения и могут быть очень полезны.

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

Все, что вам нужно знать о Greenery, включая цветовые сочетания, вдохновение в палитрах и ​​даже Pantone Greenery , находится в одном месте.

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

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

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

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

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

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

Источник DesignBomb

Теория цвета для начинающих веб-дизайнеров

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

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

Здесь, впрочем, есть одно но: некоторые из нас с трудом могут подобрать футболку, подходящую по цвету к джинсам, поэтому не совсем понятно, как выбрать подходящую цветовую гамму для своего сайта. И тут на помощь приходит теория цвета. Изучив ее основы, вы сможете создавать красивые и эффективные цветовые комбинации. Опытные веб-дизайнеры смело полагаются на теорию, а значит, вы тоже можете так делать! Давайте поговорим о главных принципах, и вы поймете, что все гораздо проще, чем кажется.

Ваш рабочий инструмент

В основе этой теории лежит цветовой круг. Думаем, вы все его видели, а если нет, то вот он:

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

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

Теплые и холодные цвета

Цветовой круг делится на две половины. В одну попадают теплые цвета — это желтый, оранжевый и красный (включая большинство оттенков коричневого), а в другую — холодные: синий, зеленый, фиолетовый и оттенки серого. Какие цвета лучше — теплые или холодные? Это не совсем правильный вопрос, так как «лучшего» цвета не существует. Ваш выбор должен зависеть от того, какой эффект вам нужен. Теплые цвета считаются жизнерадостными, дружелюбными, стимулирующими, а холодные — успокаивающими и расслабляющими.

Итак, делаем вывод: выбор того или иного цвета зависит от вашего фирменного стиля и от того, какую атмосферу вы хотите создать. Можно смешивать теплые цвета с холодными, просто нужно знать, как это делается.

Учимся смешивать цвета правильно

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

Комплементарная цветовая схема. Согласно этой схеме, вы можете сочетать два цвета, расположенных друг напротив друга. Это, например, красный и зеленый, или желтый и фиолетовый. Для более совершенного сочетания рекомендуем добавить нейтральный дополнительный оттенок — бежевый, светло-коричневый, светло-серый, черный или белый. Напоминаем, что на обычном цветовом круге таких оттенков нет.

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

Цветовая триада. А здесь надо надо будет вспомнить геометрию. Не бойтесь, ничего сложного: вы берете три любых цвета, равноудаленных друг от друга. Если соединить их с помощью линий, получится равносторонний треугольник. Возможные комбинации: желто-зеленый, оранжево-красный и фиолетово-синий; желто-оранжевый, красно-фиолетовый и сине-зеленый. Это очень насыщенная, контрастная схема, поэтому  вам нужно найти баланс и назначить один цвет основным, а два других сделать дополнительными.

Раздельная комплементарная цветовая схема. По этой схеме вы выбираете один цвет как основной и дополняете его двумя другими, идущими сразу за его комплементарным цветом на цветовом круге. Если соединить выбранные цвета линиями, получится равнобедренный треугольник. Варианты могут быть такими: красный, желто-зеленый и сине-зеленый, или фиолетовый, желто-оранжевый и желто-зеленый. Это довольно контрастная схема, однако не такая прямолинейная, как просто комплементарная.

Четвертичная цветовая схема. Здесь вам нужно выбрать две пары комплементарных цветов. Если вы соедините их на круге линиями, получится прямоугольник. Пример: желто-оранжевый, желто зеленый, сине-фиолетовый и красно-фиолетовый. Эта схема — идеальный вариант для необычных сочетаний. Боитесь устроить цветовой хаос? Тогда выберите один цвет как основной, а другие используйте для расстановки акцентов.

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

Ахроматическая схема. Это классика: черный и белый, иногда дополненные серым, но ни в коем случаем не в роли основного цвета.

От теории — к практике

Итак, вы познакомились с главными цветовыми схемами и поняли, в чем их различие. Давайте посмотрим, как использовать это знание на практике. Перед вами несколько Wix-сайтов с разными цветовыми схемами. Думаем, они станут хорошим примером и источником вдохновения.

Комплементарная цветовая гамма от Brown Owl Creative

Изящность в черно-белых тонах от By-Ghost

Монохромность в синем от Realtipix

Цвета влюбленных по аналоговой схеме от Tati e Rodrigo

Идеальный баланс в раздельной комплементарной схеме от Carretel Videos

Изумительная цветовая триада, как демонстрирует этот шаблон для сайта от Wix

Готовы показать миру, на что вы способны? Создайте сайт сами на Wix — это просто и бесплатно!

Автор Команда Wix

#подборцвета #советыповебдизайну #цветоваягамма

особенности использования и основные тренды 2020 ᐉ Веб-студия Brainlab

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

Почему важна цветовая схема сайта

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

Для справки:

• Люди принимают решение о покупке или дальнейшем изучении ресурса в течение 90 секунд первого взаимодействия.
• Именно web-цвета оказывают от 60 до 90% влияния на принятие решения о сотрудничестве.
• Яркие картинки запоминаются лучше черно-белых.
• Мужчины и женщины видят картинки по-разному – ваша задача заинтересовать и тех, и других.
• Синий – наиболее популярный, нейтральный и универсальный оттенок.

Важно! Согласно данным опросов, пользователи не доверяют тем сайтам, которые имеют недостаточно привлекательный дизайн.

Какие цвета привлекают наибольшее внимание

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

1. Цвета, которые привлекают внимание.
2. Нейтральные тона.

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

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

7 шагов для создания собственной цветовой схемы сайта

Цвета для веб-сайта нужно выбирать с учетом ряда рекомендаций. При разработке оформления ресурса нельзя руководствоваться только личными предпочтениями – ресурс будет работать для пользователей. Как правильно определиться с цветовой гаммой – это вопрос понимания психологического влияния разных оттенков на сознание человека и способность использовать такие знания на практике.

Ищем свой основной цвет

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

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

Критерий оценки	Рекомендации
Фирменный стиль	Если фирменный стиль уже есть, оформляйте ресурс в соответствующей цветовой гамме. Не забывайте о взаимосочетаемости разных оттенков. Регулируйте интенсивность, жесткость, прочие параметры.
Аудитория (ЦА)	Мужчинам больше нравятся темные или нейтральные тона, женщины лучше реагируют на сочные, нежные оттенки. Для детей оптимально выбирать яркую цветовую гамму.
Тематика	Соответствие тематике обязательно. Примеры: для еды выбирают зеленый, для парфюмерии сиреневый.

Определяемся с количеством цветов

После подбора основного цвета нужно искать дополнительные. Решите, какое количество необходимо для завершения цветовой схемы. С учетом теории триад, оптимальной будет цифра 3. При этом важно равномерно распределить оттенки вокруг цветового круга. Рекомендации для дизайна:

• 60% площади страниц должно приходиться на основной оттенок;
• 30% отводят для вторичных.

Под вторичными подразумевают акцентные и другие оттенки.

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

Используем вторичные цвета

Подбор цвета для сайта делайте с применением различных цветовых теорий и инструментов. Основные:

Работать «на глаз» тоже можно, но результаты хорошими обычно получаются только у гениев. Хотя почему бы не попробовать?

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

Не забываем о нейтральных цветах

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

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

Нюансы сочетания цветов для сайта

Для получения эффектного дизайна сайта нужно учесть 3 момента:

• Основной оттенок.
• Второстепенные тона.
• Правильное сочетание основного и второстепенного цветов, а также грамотный расчет их пропорций.

Основной цвет применяют в важном пространстве, так называемых «горячих точках». Незаменим он при оформлении заголовков, значков преимуществ, кнопок СТА, форм загрузки. Можно применять основные тона для выделения важной информации.

Вторичные оттенки тоже используют для выделения текста, но менее важного. Сюда относят отзывы, вспомогательное содержимое, подзаголовки, частые вопросы, дополнительные кнопки.

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

Цветовое кольцо Ньютона: 7 схем для вашего сайта

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

1. Монохроматическая – главный цвет один, дополнительные получают из его оттенков (регулируют светосилу, насыщенность).
2. Триада – дизайнер подбирает тройку равноудаленных друг от друга цветов.
3. Прямоугольник – в игру вступает набор из 4 цветов, принцип подбора – контрастный.
4. Комплементарная – останавливаются на паре контрастных тонов, дополняют их производными оттенками.
5. Сплит – аналог комплементарной схемы, но один контрастный оттенок будет заменен на пару схожих из соседних секторов.
6. Аналоговая – нужно выбрать 3 оттенка из соседних сегментов, один будет основным, остальные дополнительными.
7. Квадрат – схема аналогична предыдущей, но все оттенки будут равноудаленными друг от друга.

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

Пару слов о цветовых моделях

Помимо схем сочетания цветов в дизайне сайта, нужно учитывать известные модели. Это:

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

А если непонятно?

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

Важно! Эмоциональное (подсознательное) и визуальное воздействие одинаково важны. Проработаете оба момента – получите максимум посетителей.

Эмоции цвета в web-дизайне: 11 распространенных цветов

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

Красный

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

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

Желтый

Оттенок счастья, радости, детства, энергии, прилива сил. Может ассоциироваться со статусом, солидностью, авторитетом.

Нюансы восприятия желтого разные с учетом насыщенности, температуры, наличия теней и света. Цвет подходит для магазинов детских игрушек, бизнес-сайтов. Ограничений по тематике нет.

Оранжевый

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

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

Зеленый

Зеленый – цвет развития, природы, экологии, достатка, здоровья. Миксовать его можно с холодными и теплыми тонами. Ассоциация – финансовая стабильность.

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

Синий

Поможет расположить, повысить лояльность, завоевать доверие. Оттенок успокаивает, придает уверенность, чувство надежности.

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

Фиолетовый

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

Фиолет нравится не всем – у него своя аудитория. Любят оттенок женщины.

Коричневый

Цвет стабильности, земных ценностей, финансовых благ, энергии земли. Может иметь разную интенсивность.

Делать ставку на коричневый как основной оттенок можно в исключительных случаях. Светлые тона не так привередливы.

Черный

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

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

Белый

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

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

Серый

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

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

Розовый

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

Обилие розового нежелательно. Для «разбавления» можно использовать белый.

Заключительное примечание

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

Колесников Дмитрий

Технический директор, студии BRAINLAB

Как стратегически использовать цвет в дизайне веб-сайтов

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

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

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

1. Учитывайте культурный контекст

Хотя разные цвета имеют разное значение на индивидуальном уровне, определенные цвета также имеют глубоко укоренившееся культурное значение.Например, в западных культурах красный цвет привлекает внимание и означает опасность и срочность (подумайте о знаках остановки). Однако в некоторых восточных культурах, таких как Китай и Индия, красный цвет символизирует удачу. Другой пример: черный — это цвет смерти и траура в западных культурах. В некоторых восточных культурах аналогичный цвет — белый.

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

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

2. Изучение теории цвета

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

Цветовой круг

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

Основные, вторичные и третичные цвета на цветовом круге

Основные цвета

Три основных цвета — красный, желтый и синий. При объединении первичные цвета образуют вторичные цвета.

Дополнительные цвета

Дополнительные цвета: фиолетовый (красный + синий), зеленый (синий + желтый) и оранжевый (красный + желтый).Комбинирование вторичных цветов с первичными цветами создает третичные цвета.

Третичные цвета

Третичные цвета — это комбинации основных и вторичных цветов (например, красно-пурпурный, желто-оранжевый, сине-зеленый и т. Д.)

Оттенки, оттенки и тона

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

Сравнение оттенков, оттенков и оттенков

Теперь, когда вы понимаете, как разные цвета формируются и располагаются на цветовом круге, будет проще создавать визуально привлекательные цветовые палитры. Цветовые палитры более подробно описаны ниже в Шаге 4.

Использование контраста

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

При оценке контраста важно учитывать не только цвета (например, синий и зеленый), но и их тон. Два разных цвета с ровным тоном не создают высокой контрастности. Простой способ определить уровень контрастности двух цветов — преобразовать их в оттенки серого — разница в контрасте будет гораздо более очевидной.

Обязательно используйте средство проверки контраста! Контраст — важная часть доступности

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

Источник: Raw Studio

Прочтите этот пост , чтобы узнать больше о теории цвета и о том, как применять ее в дизайне веб-сайтов.

3. Используйте психологию цвета для передачи сообщений и ценностей бренда.

Психология цвета означает влияние цвета на наши чувства, эмоции и поведение.Хотя это немного субъективно, психология цвета может помочь нам подсознательно влиять на людей, которые посещают наш веб-сайт, значимым образом. Это делает его мощным инструментом для дизайна и маркетинга.

Цвета вызывают эмоции

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

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

Общие цветовые ассоциации

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

• Красный : страсть, сила, любовь, опасность, возбуждение
• Синий : спокойствие, доверие, компетентность, мир, логика, надежность
• Зеленый : здоровье, природа, изобилие, процветание
• Желтый : счастье, оптимизм, творчество, дружелюбие
• Оранжевый : веселье, свобода, тепло, комфорт, игривость
• Фиолетовый : роскошь, загадочность, изысканность, верность, творчество
• Розовый : забота, мягкость, искренность , тепло
• Коричневый : природа, безопасность, защита, поддержка
• Черный : элегантность, сила, контроль, изысканность, депрессия
• Белый : чистота, покой, ясность, чистота

Проверить этот пост чтобы узнать больше о психологии цвета.

4. Создайте цветовую палитру

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

Coca-Cola с гордостью демонстрирует свой яркий красный цвет

Повторим предыдущий пример: бренд The ​​Coca-Cola Company взял свой основной цвет, яркий красный, и использовал его. Цвета на их веб-сайте и рекламе. Единственные другие цвета в их палитре — черный и белый, которые используются для текста. Красный ассоциирует Coca-Cola с чувствами возбуждения, любви и тепла. Зеленый цвет

Whole Foods идеально сочетается с миссией их компании.

Whole Foods использует землисто-зеленый в качестве основного цвета.Как и Coca-Cola, Whole Foods демонстрирует свой фирменный цвет на всем своем веб-сайте. Зеленый цвет прекрасно сочетается с ценностями и клиентурой Whole Foods: здоровьем, природой и изобилием.

Lowe’s темно-синий символизирует доверие и надежность.

Lowe’s — популярная сеть магазинов товаров для дома, основной цвет которой — темно-синий. Из-за характера их продуктов важно, чтобы бренд и веб-сайт Lowe выражали доверие, компетентность и надежность, которые ассоциируются с синим цветом.

Типы цветовых палитр

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

Аналогичные

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

Аналогичные цвета расположены очень близко друг к другу на цветовом круге

‍

Источник: Emme

Монохроматический

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

Монохроматические цвета в основном связаны с изменением яркости.

‍

Источник: Rosaluna

Triad

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

Триадные цвета равномерно распределены на цветовом круге

‍

Источник: Parse

Дополнительные

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

Дополнительные цвета противоположны друг другу на цветовом круге Источник: Aerial

Разделение дополнительных цветов

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

Тонны премиальных брендов, использующих эту цветовую комбинацию!

‍

Источник: Shelby Kay

Как использовать цветовые палитры в дизайне веб-сайтов

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

Для начала я рекомендую выбрать для вашей палитры три цвета: основной (или основной) цвет , вторичный цвет и акцентный цвет . Затем используйте правило 60/30/10 , чтобы применить эти цвета в дизайне вашего веб-сайта. Согласно этому правилу, 60% используемого цвета должно быть основным, 30% — второстепенным и 10% — акцентным. Имейте в виду, что черный и белый тоже считаются цветами. Ниже приведены несколько примеров потрясающих веб-сайтов, которые используют правило цвета 60/30/10.

Доминирующий фиолетовый с бирюзовым акцентом.

Spendesk использует фиолетовый как основной цвет, белый как вторичный и бирюзовый как акцентный цвет.

Доминирующий зеленый цвет в паре с красивым лососем в качестве акцента.

Greenlist использует зеленый как основной цвет, белый как вторичный и розовый как акцентный цвет.

Demuxed выводит с желтым и пары с черным и белым.

Demuxed использует желтый как основной цвет, черный как вторичный и белый как акцентный цвет.

Важное замечание о правиле 60/30/10 заключается в том, что на самом деле это скорее руководство, чем правило. Например, вы можете включить в свою палитру более трех цветов. Главный вывод — сосредоточиться на основном цвете и использовать другие цвета для разделения элементов, создания контраста и выделения важных деталей.

Освойте использование цвета в дизайне веб-сайтов с помощью нашего курса

В этом посте мы рассмотрели основы теории и психологии цвета, а также то, как они используются для создания впечатляющих цветовых палитр в дизайне веб-сайтов.Но, как вы знаете, один только цвет — не главное в функциональном веб-дизайне; Чтобы создавать ценные веб-сайты для клиентов, нам необходимо сочетать принципы цвета со стратегией, типографикой, макетом, UX и т. д. Наш курс, Процесс создания веб-сайта за 10 тысяч долларов, учит именно этому.

Щелкните здесь, чтобы узнать больше о том, что рассматривается в курсе и как он помогает более 1500 студентам преобразовать свой процесс веб-дизайна и бронировать более крупные проекты.

50 великолепных цветовых схем с потрясающих веб-сайтов

Цвет является такой важной частью нашего восприятия мира, что мы часто принимаем это как должное.Подумайте об этом: от молодого и ярко-оранжевого на чьей-то одежде до серого и мрачного неба над нами — цвета могут влиять на наше восприятие других и даже обстоятельства, в которых мы находимся.

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

Как не дизайнер, мне часто бывает трудно подобрать подходящие цвета для своих любительских проектов.Независимо от того, создаю ли я простое изображение для поддержки своего контента или более сложные проекты, такие как слайд-колода или инфографика, я часто трачу много времени на поиск идеальной цветовой схемы. Я задаю себе такие вопросы: хочу ли я, чтобы мой дизайн был привлекательным? Провокационно и дерзко? Или умно и элегантно?

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

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

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

СВЯЗАННО: 50 красивых цветовых комбинаций (и как их применить к вашим дизайнам)

1 Красочный и сбалансированный

Активная теория

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

2 ярких акцентных цвета

Paypr

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

3 Натуральный и землистый

Resn

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

4 Прохладный и свежий

Grosse Lanterne

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

5 Смелый и яркий

W&CO

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

6 вермиллионов и русская зелень

Stinkdigital

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

7 Стильный и изысканный

Bordel Studio

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

8 фиолетовых оттенков и тонов

ReedBe

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

9 Deep Purple и Blues

Самсы

Эта темная и загадочная цветовая схема с ярким синим акцентом соответствует преобладающей тенденции веб-дизайна: использование темных фоновых цветов с яркими и смелыми акцентными цветами.

10 Современные и смелые

Брайан Джеймс

Очаровательная комбинация розового, красного, черного и серого цветов. Эта современная палитра вызывает ощущение роскоши, изысканности и минимализма.

11 Живые и манящие

Антон и Ирен

Это прекрасное сочетание конфетно-розового, зелено-желтого, лавандово-серого и пастельно-коричневого цветов идеально подходит для создания яркого и привлекательного образа.

12 Поразительно и просто

Берт

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

13 Красный и живой

BrightMedia

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

14 Вычурное и творческое

Джули Флогак

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

15 Элегантный, но доступный

Эпический

Это уникальное сочетание телесных тонов и более элегантных цветов, таких как темно-синий и рубиновый, делает эту цветовую схему идеальной для дизайнов с тонкими сообщениями. Зарезервировано, но доступно; сложные, но забавные: это типы серых сообщений, которые эффективно отправляются с помощью этой приятной для глаз комбинации.

16 Изящный и футуристический

MediaMonks

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

17 Новаторский и смелый

Интерактивный дизайн eDesign

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

18 Текстурированный и динамический

HAUS

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

19 Минимальный, но теплый

Идентификаторы удовольствия

Белая яичная скорлупа, темная ваниль и серо-коричневый с оттенками красного мармелада — все вместе в этом минималистском, но теплом и уютном месте. Всплеск ярких красок по всему дизайну делает этот сайт элегантным и в то же время привлекательным.

20 Яркие и четкие

FCINQ

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

21 Чистый и энергичный

Изменить цифровой

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

22 Корпоративные и традиционные

Уотсон / ДГ

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

23 Синий и освежающий

Supremo

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

24 Чистый и современный

Umwelt A / S

Красивый зеленый мирт и кеппель сочетаются здесь с лазурно-белым и однотонным белым в простой, но эффектной комбинации.

25 Яркий и элегантный

Waaark

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

26 Молодость и веселье

Пятьсот

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

27 Великолепный контраст

Иммерсивный сад

Этот элегантный и ультрасовременный сайт может похвастаться элегантным и привлекательным сочетанием с эффективным контрастом. Яркий желто-зеленый хорошо сочетается с черным и серым фоном.

28 эффективных акцентных цветов

SMFB

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

29 Современность в полном расцвете

Nurture Digital

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

30 Рядом с природой

Родился 05

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

31 Ярко-розовый и пастель

Stinkdigital

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

32 Уникальное сочетание

AILOVE

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

33 ярких цитрусовых цвета

Чизкейк супергероя

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

34 Яркие синие и оранжевые

Бюрократик

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

35 Красная роза и черника

Google Brand Studio

Эта серия розовых и красных цветов с ярко-синей кнопкой с призывом к действию создает большой визуальный интерес и сразу привлекает к себе внимание.

36 Смелый и уникальный

Детали

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

37 Веселая и энергичная

Шер Ами

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

38 Снежный, но теплый

Оставляющий камень

Эта зимняя комбинация красного и синего вызывает одновременно прохладу и тепло, как и изображения, связанные с зимними праздниками.

39 Богатство и красочность

Elespacio

Эта яркая и насыщенная цветовая комбинация объединяет яркий желтый, синий и розовый в этом красивом минималистском дизайне, который можно использовать в ярких, но профессиональных проектах.

40 Модерн и минимализм

SFCD

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

41 Бесстрашный и бесстрашный

Great Works Копенгаген

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

42 Цвета в плоском дизайне

Resn

Даже если вы не знакомы с термином «плоский дизайн», вы, вероятно, видели его раньше: веб-сайты без падающих теней, без градиентов, без скосов; Короче говоря, никаких трехмерных элементов.

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

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

43 Эклектичный и мирный

Играть

Это уникальное сочетание кофейного тона с небесно-голубым и различными оттенками коричневого делает эту цветовую схему успокаивающей и успокаивающей: чем-то напоминающим вашу любимую кофейню или гостиную.

44 Классный и традиционный

details.ch

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

45 ярких акцентных цветов

stinkdigital

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

46 Корпоративное и серьезное

EPIC

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

47 Гламурно и модно

Апартаменты

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

48 Привлекающий внимание и гладкий

ФУТУРАМО

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

49 Громко и прямо в лицо

Паника

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

50 Живых, но успокаивающих

Мадео

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

Цветовые схемы веб-сайтов, которые меняют способ нашего дизайна

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

Давайте посмотрим на:

• Как теория цвета используется в веб-дизайне
• Применение цветового круга в цветовых схемах веб-сайта
• Психология цвета

Что такое теория цвета?

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

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

Словарь цвета

• Оттенок: какого цвета что-то, например синий или красный
• Цветность: чистота цвета; к этому добавилось отсутствие белого, черного или серого
• Насыщенность: сила или слабость цвета
• Значение: насколько светлый или темный цвет
• Тон: создан путем добавления серого к чистому оттенку
• Оттенок: создан путем добавления черного к чистому оттенку
• Оттенок: создается путем добавления белого к оттенку

Как работает цветовое колесо

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

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

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

Дополнительные цвета

Цвета, которые дополняют друг друга, легко найти как противоположные друг другу на цветовом круге, например синий и оранжевый, красный и зеленый и фиолетовый с желтым.

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

На веб-сайте WeWork используются дополнительные цвета: синий и оранжевый.

Аналогичные цвета

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

Недавний редизайн Dropbox

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

Dropbox использует смелые цвета, которые, кажется, не должны работать вместе, но они работают!

Психология цвета

Еще одна тенденция в дизайне веб-сайтов — использование одного цвета для доминирования в дизайне — и мы не говорим о черном или белом!

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

Психология цвета — это то, как мозг воспринимает то, что визуализирует. Хотя это субъективно, и у каждого лично есть свой любимый цвет, то, как цвета заставляют нас чувствовать себя, несколько универсально. Используя цветовую психологию, дизайнеры (и маркетологи) могут использовать цвет для более эффективной передачи своего дизайна.

Вы можете подробно узнать, что означают разные цвета, в этом посте на Canva.

Красный

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

желтый

Желтый — самый яркий цвет на цветовом круге, который часто ассоциируется со счастьем и радостью. Как сияющий цвет, это означает, что символизирует надежду и уверенность.Творческий дизайн и бренды, использующие желтый цвет, могут передавать настроение и оптимизм.

оранжевый

Оранжевый — это цвет приключений и омоложения. Смесь красного и желтого, он обладает более сбалансированной энергией, чем красный, но по-прежнему полон жизни. Это чрезвычайно общительный цвет, который предпочитают экстраверты.

Синий

Синий успокаивающий, заслуживающий доверия и надежный — хотя технический гигант Facebook только синий, потому что Марк Цукерберг дальтоник к красно-зеленому. Однако вы можете видеть, что банки, страховые компании и другие гиганты программного обеспечения используют синий в качестве цвета бренда, потому что он способствует доверию и лояльности.

зеленый

Зеленый жив! Психология зеленого означает обновление и рост. Природа — самый простой пример действия зеленого цвета. В результате зеленый цвет у нас ассоциируется с гармонией и внутренним спокойствием.

розовый

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

фиолетовый

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

Составление цветовой палитры

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

Доминирующие цвета

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

Дополнительные цвета

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

Акцентные цвета

Когда речь заходит о цветовых акцентах, мы говорим о фонах, пустом пространстве (или нет), ссылках, кнопках и значках. Например, если вы используете монохромную цветовую палитру, вы можете использовать яркие цветные акценты на фоне нейтрального дизайна. Часто бренды используют свой основной цвет только для акцентов, оставляя белый фон.

Бесплатные инструменты для создания цветовой палитры

Если вам нужна бесплатная наглядная помощь для комбинирования цветов, ознакомьтесь с этими бесплатными ресурсами ниже:

• Muzli Colors : Используйте этот инструмент для быстрого создания и редактирования цветовых палитр, сопоставления цветов и даже предварительного просмотра и загрузки индивидуальных наборов пользовательского интерфейса для вашего собственного выбора цвета.
• Coolors.co: Используйте этот инструмент для создания цветовых схем одним щелчком мыши и изучения тысяч палитр, созданных пользователем.
• Генератор цветовой палитры Canva : воспользуйтесь бесплатным инструментом Canva для создания цветовых схем из ваших любимых фотографий. Идеально подходит для создания цветовых схем, идеально подходящих к изображению, которое вам нужно использовать в веб-дизайне.
• Colormind.io : Colormind также позволяет создавать бесплатные цветовые схемы, но также применяет их к фиктивной целевой странице в реальном времени, чтобы вы могли визуализировать дизайн своего веб-сайта с самого начала.

Цветовая палитра современного сайта

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

Аналогичное цветовое решение

Подобно дизайну Dropbox, приведенному выше, в Useless London используется смелая сине-зеленая аналогичная цветовая палитра, которая радует глаз и прекрасно передает их идеи.

Дополнительная цветовая схема

Цвета, противоположные друг другу на цветовом круге, являются дополнительными цветами, такими как фиолетовый и оранжевый.

На веб-сайте

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

Цветовая схема градиента

Градиенты — это когда один цвет плавно переходит в другой. Это отличная идея для объединения аналогичных цветов, таких как синий и зеленый, и отличная цветовая схема для фонов веб-сайтов, которая выводит дизайн из одного однотонного цвета. Компания, которая делает это лучше всего, — это, вероятно, Spotify, с градиентами, используемыми во всей экосистеме их продуктов.

Современная цветовая гамма

Бренды электронной коммерции любят эту цветовую схему. Используйте один фирменный цвет и сочетайте его с четкими изображениями продукта и пустым пространством.Подумайте: его, Outdoor Voices и Casper.

Монохроматическая цветовая схема

Монохроматическая цветовая схема включает все цвета (оттенки, тона и оттенки) одного оттенка. Этот оттенок может быть любого цвета, но цветовая схема придерживается только этого цвета и вариаций его оттенков, тонов и оттенков.

В этом примере от Axiology Beauty в качестве основного оттенка используется мягкий красный цвет с добавлением различных более светлых оттенков.

Палитра приглушенных тонов

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

Основная цветовая схема

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

Bumble в равной мере использует основные цвета в цветовой палитре своего веб-сайта.

Винтажная цветовая схема

Использование винтажных цветов в цветовой схеме вашего веб-сайта — отличная идея для продуктов настоящего винтажного характера (например, Polaroid), а также просто отличный эстетический выбор.Агентство 5/4 использует красные и коричневые тона для создания винтажной цветовой палитры и сочетается с фотографиями, обработанными зерном и сепией, для получения полного эффекта.

7 удивительных цветовых схем веб-сайта 2021 + Color Mood Board

Цветовые схемы веб-сайта имеют большее влияние на убедительность вашего веб-сайта, чем большинство компаний хотели бы признать.

• «Это просто вычурное дополнение»
• «Давайте просто воспользуемся цветами, которые мы использовали в прошлый раз».
• «Позвольте генеральному директору или руководству изменить это так, как они хотят.”

Ниже мы расскажем, почему цветовые схемы имеют значение, и дадим вам 58 цветовых схем веб-сайта на 2020–2021 годы!

Сумасшедшая часть состоит в том, что цветовая схема имеет большее значение, чем вы думаете, а связная и привлекательная цветовая схема — один из главных аспектов веб-дизайна, который сделает ваш сайт БОЛЕЕ ПРИВЛЕКАТЕЛЬНЫМ + КРАСИВЫМ ДИЗАЙНОМ (Шаг первый — Шаг второй = Получите больше трафика. Поисковая оптимизация.)

38 процентов посетителей перестанут взаимодействовать с веб-сайтом, если его содержание или макет непривлекательны.(Blue Corona)
Если дать 15 минут на просмотр контента, две трети людей предпочли бы прочитать что-то красиво оформленное, чем что-то простое. (Источник: Adobe)

• 8 новых цветовых схем на 2021 год
• Color Mood Board на 2021 год
• Вот оригинальный пост! Цветовые схемы веб-сайта 2020-2021
• Обновление лета 2020 — 13 новых цветовых схем веб-сайта на 2020 год
  • 1. Минимальные цвета, мягкий пляж от Думинды Перера
  • 2. Минимальные цвета — пурпурная цветовая схема 90-х от Думинды Перера
  • 3.Яркая сила Думинды Перера
  • 4. Переосмыслить. Цветовая схема от Sajon
  • 5. Цветовые схемы Глобального благотворительного веб-сайта от Cuberto
  • 6. Цветовые схемы веб-сайта о банках и финансах от Juliene Renvoy
  • 7. Интенсивная зеленая, синяя и красная цветовая схема
  • 8. Белое пространство, загар, фиолетовый, желтый цвет, схема веб-сайта
  • 9. Глубокий синий и коричневый — цветовая палитра
  • 10. Желтовато-розовая и красная цветовая схема
  • 11. Розовая, зеленая и фиолетовая цветовая схема веб-дизайна иллюстраций
  • 12.Яркие и красочные — схема на 2020 год
  • 13. Желтый, красный / розовый / оранжевый — Яркая схема
• 2019 Цветовые схемы веб-сайта:
• Часть вторая — Наблюдения за взаимодействием и цветом в контексте
• Часть третья — Об отсутствии цветов и хорошо выполненных монохроматических цветовых схем
• Часть четвертая — О взаимодействии типографики и цвета
• Несколько слов поддержки
• Часть пятая — Что такое современная цветовая палитра?
• 5 лучших генераторов цветовых схем для веб-сайтов, которые помогут вам начать работу цветовая схема — множество фигурных вырезов из белого и всплеск таких же ярких цветов, которые привлекают внимание, но затем погружают вас в более глубокие — естественные цвета с использованием земных тонов и более глубоких оттенков.

  Во-первых, вот несколько прогнозов цветовых тенденций в 2021 году, основанных на модных дизайнерах и компаниях по производству красок:

  1. Инфракрасный и фиолетовый

  Ярко-красный: # DE354C

  Deep Red: # 932432

  Чистый фиолетовый: # 3C1874

  Сиреневый с оттенком : # 283747

  Облако: # F3F3F3

  2. Земной красный и зеленый

  Красный выделение: # B73225 3 Синий

  : # 004E7C

  Бордовый 6: # 591COB

  Серая вода: # 5C5F58

  Светло-серый: # DCE1E3

  3.Цветовая схема веб-сайта Tan + Green 2021, Gatto Web

  Makeup Tan: # DDAF94

  Румяна: # E8CEBF

  Бесплатный зеленый: # 266150

  Темное выделение: # 4F48246 9000 Слегка не совсем белый: # FDF8F5

  4. Классическая двойная синяя цветовая схема

  Темно-синий: # 12232E

  Светло-синий: # 007CC7

  Самый светлый синий: # 4DA8DA

  Тень темно-синего: # 203647

  Тень светло-синего: #EEFBFB

  5.Оттенки серого + один (желтый) 2021 Цветовая схема веб-сайта

  Черный: # 202020

  Темно-серый: # 3F3F3F

  Средний серый: # 707070

  Яичный желтый: # FFD6C 9000 Белый: #FFFFFF

  6. Цветовая схема веб-сайта Greenery + Gradients 2021 от Анны Сеньковой

  Темно-зеленый: # 164A41

  Средний зеленый: # 4D774E

  4 Светло-зеленый # 9DC88D

  Естественно-желтый: # F1B24A

  Белый: #FFFFFF

  7.Цветовая схема веб-сайта Greenery + Pearl 2021 от Delightful Designs

  Olive: # A3BCB6

  Green Leaf: # 39603D

  Brown Grey: # 3C403D

  Tanly: 3 # DADED2 : #FFFFFF

  Color Mood Board на 2021 год

  Надеюсь, вам понравились эти цветовые схемы и цветовые схемы для сайта 2021.Я знаю, что было очень весело собрать его воедино — и, хотя в нем мало слов, на его составление ушло немало времени.

  ---

  Вот оригинальный пост! Цветовые схемы веб-сайта 2020-2021

  Веб-дизайн может быть забавным!

  Особенно, если у вас правильная цветовая гамма.

  Вот почему мы собрали самые лучшие из лучших 50 эпических цветовых схем из далеких областей Dribbble, Awwwards, Pinterest, Behance и пары отличных блогов.

  После того, как вы найдете цветовую палитру своей мечты — ознакомьтесь с нашими статьями «Основы аналитики», «Основы SEO» и «Современные шрифты», чтобы и дальше делать свой сайт потрясающим. И, конечно же, дайте нам знать, сможем ли мы когда-нибудь помочь вам с нашими услугами по дизайну веб-сайтов для малого бизнеса!

  Обновление лета 2020 года — 13 новых цветовых схем веб-сайта на 2020 год

  1. Минимальные цвета, мягкий пляж от Думинды Перера

  Ярко-синий: # 51e2f5

  Синий зеленый: # 9df9ef

  Пыльно-белый : # edf756

  Pink Sand: # ffa8B6

  Dark Sand: # a28089

  2.Минимальные цвета — пурпурная цветовая схема 90-х годов Думинды Перера

  Ледяной холод: # a0d2eb

  Фиолетовый мороз: # e5eaf5

  Средний фиолетовый: # d0bdf4

  3 Purple

  3 Purple

  Heavy Purple: # a28089

  3. Яркая сила Думинды Перера

  Yass Queen: # ff1d58

  Sister Sister: # f75990

  Crown Yellow: # fff685

  Blue Light
  : # 00DDFF

  Брутальный синий: # 0049B7

  4.Переосмыслить. Цветовая схема Sajon

  Ярко-оранжевый: # ff1e00

  Тускло-синий: # e8f9fd

  Предупреждающий / выделенный зеленый: # 59ce8f

  5. Цветовые схемы сайта Global Charity Cuberto

  Ярко-оранжевый Номер 2: # f43a09

  Дедушка Оранжевый: # ffb766

  Серый Синий Зеленый: # c2edda

  Живой Зеленый: # 68d388

  6.Цветовые схемы веб-сайта «Банки и финансы» от Juliene Renvoy

  Pinky: # fbe3e8

  Blue Greeny: # 5cbdb9

  Teeny Greeny: # ebf6f5

  7. Интенсивный красный и синий. цветовая схема

  Ярко-зеленый: # beef00

  Красный электрик: # ff0028

  Глубокий зеленый: # 657a00

  Синий Power: # 1400c6

  8.Белое пространство, загар, пурпурный, желтый цвет Схема веб-сайта

  Фон: # fceed1

  Purple-y: # 7d3cff

  Желтые перчатки: # f2d53c

  Рыжий: # c80e13

  9. Deep blue and tan — цветовая палитра

  Sand Tan: # e1b382

  Sand Tan Shadow: # c89666

  Night Blue: # 2d545e

  Night Blue Shadow: # 12343b

  10.Цветовая гамма: желто-коричневый, розовый и красный

  Ragin Beige: # fff5d7

  Coral Pink: # ff5e6c

  Sleuthe Yellow: # feb300

  Pink Leaf: #ffa28 11. Pink

  , Зеленая и Фиолетовая цветовая схема веб-дизайна иллюстраций

  Grassy Green: # 9bc400

  Purple Mountains Majesty: # 8076a3

  Misty Mountain Pink: # f9c5bd

  Factory Stone Purple: # 7c677f

  12.Яркий и красочный — схема на 2020 год

  Green Treeline: # 478559

  Фиолетовая базовая линия: # 161748

  Розовая подсветка: # f95d9b

  Bluewater lowlight: # 39a0ca Желтый

  , Красный / Розовый / Оранжевый — Яркая схема

  Желтый фон: # ffde22

  Розовый / красный круг: # ff414e

  Оранжевый круг: # ff8928

  Белый наложение: #ffffff

  Цветовые схемы веб-сайта 2019:

  1.В стиле 70-х — современная цветовая палитра

  Mountain Shadow Blue: # 101357

  Old Makeup Pink: # fea49f

  Goldenrod Yellow: # fbaf08

  Bluebell Light Blue : # 003 9000a0

  Полужирный зеленый 2019: # 007f4f

  2. Голубой-фиолетовый — простая палитра веб-цветов

  Голубой: # 51d0de

  Lightning Purple: # bf4aa8

  Brain Wrinkle White: # d0003d9d9

  3.Синий металлик, фиолетовый, красный — Цветовая палитра веб-сайта

  Blue Popsicle: # 0f2862

  Redline: # 9e363a

  Purple Shadow: # 091f36

  Gray Blue Leaf: # 4f528f 4. Apricot Avalanche — Цветовые схемы веб-дизайна

  Blueberry: # 6B7A8F

  Apricot: # F7882F

  Citrus: # F7C331

  Apple Core: # DCC728AСильный контраст и надежность

  Левый синий: # 1561ad

  Правый синий — приглушенный: # 1c77ac

  Сине-зеленый: # 1dbab4

  Красно-оранжевый: # fc5226

  6. Классическая цветовая палитра веб-сайта Red Gold

  Redder than you: # ff3a22

  Goldi-lot: # c7af6b

  Darker Gold: # a4893d

  Silver Tongue: # 628078

  # 628078
  .Утонченная и сочная цветовая схема Web

  Едва зеленый: # acb7ae

  Коричневые рубашки: # 82716e

  Светло-коричневый: # e4decd

  Светлый: 8. # c2b490 Фотография 9 Память

  Зеленая гора: # 3d7c47

  Голубая гора: # 09868b

  Голубой фон: # 76c1d4

  Едва серый край: # f7f7f7

  9.Футуристический Lightbrite

  Серо-серебристый: #bccbde

  Lightsaber Blue: # c2dde6

  Фиолетовый: # 431c5d

  Оранжевый: # e05915

  # желтый cbrite Trapper Keeper Red & Purple

  Painful Red: # eb1736

  35 Years Old Purple: # 5252d4

  Светло-фиолетовый градиент: # 7575dd

  Shadow Purple Red: # 781a44

  11.Сэндвич с пасхальным яйцом

  Зеленый: # 8bf0ba

  Ironic Blues: # 0e0fed

  Blue Underling: # 94f0f1

  Pinky Ring: # f2b1d8 Eggs

  Yellows

  ---

  Ищете опытную команду веб-дизайнеров? Ниши веб-дизайна, которые мы обслуживаем: Сантехника, HVAC, Строительство и Кровля. От HVAC ведет к строительному подрядчику — мы делимся всеми идеями в нашем блоге!

  ---

  Оригинальный набор цветовых схем сайта:

  1.Интеллектуальная небрежность

  Голубой зеленый: # 6ed3cf

  Мягкий фиолетовый: # 9068be

  Вкусный серый восьмидесятых: # e1e8f0

  Насыщенный красный цвет: # e62739 Palette

  от Awwwards

  2. Extra Snug

  French Laundry Blue: # 3a4660

  Комфортный загар: # c9af98

  Peachy Kreme: # ed8a63

  Brown Bonnet: # 84500000 на рубашке Desi от Филипа Дуэскау на Behance

  3.Dark Horse

  Жёлтый?!: # feda6a

  Silver Fox: # d4d4dc

  Deep Matte Grey: # 393f4d

  Dark Slate: # 1d1e22

  Концепция Creativa Studio на Dribbble

  4. Сонно-зеленые полосы

  Simpler Lime Green: # 7dce94

  Scuffed Dark Grey: # 3d3d3f

  Vanilla Grey: # f6f5000f333 White : # f9f8fd

  Найдено на веб-сайте Книги джунглей Watson D / G для Disney

  5.Драгоценные металлы

  Розовое золото: # bd8c7d

  Мягкое золото: # d1bfa7

  Серебро: # 8e8e90

  Оникс: # 49494b

  Компания Soc 628 Branding . European Bodies

  Yellow Hand: # fbf579

  Lonely Blue: # 005995

  Стационарный Pink Red: # fa625f

  Purpled: # 600473

  Найдено на сайте Mind Insparkiration. Маг

  7.Простые блестящие акценты

  Красный наложенный: # cd5554

  Коричневый на снимке: #

  a

  Водорослевой зеленый: # 00c07f

  Heritage Blue: # 313d4b Website

  Mag

  Все еще хотите большего? Оцените удивительные возможности Mind Spark Mag и просмотрите потрясающие примеры. Такой отличный куратор современного веб-дизайна, часто вдохновленного швейцарцами.

  ---

  Часть вторая — Наблюдения за взаимодействием и цветом в контексте

  ---

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

  8. Синий красный

  Deep Red: # b11a21 — В наложении, наложенном на плоский синий, фотографический фон придает глубину.

  Зажигалка красный: # e0474c — Улыбающееся лицо, проходящее сквозь красный цвет, делает его ярким.

  Blue Beans: # 7acfd6 — плоский синий цвет создает контраст с фотографией за красным.

  Light Classy Grey: # f1f0ee — Простой светло-серый цвет используется для обеспечения глубины позади более поздней части фотографии, а белый — внизу.

  Найдено на веб-сайте Вдохновение от Mind Sparkle Mag

  9. Солнечное и спокойное

  Утреннее небо: # CAE4DB — Никогда не недооценивайте цветовую палитру, созданную по фотографии, чтобы задать тон вашему дизайну.

  Мед: # DCAE1D — в этом случае палитра устанавливается вместе с фотографией, а затем отображается в субтитрах.

  Cerulean: # 00303F — Cerulean невероятно классный как черная или темно-серая альтернатива, если использовать ее постоянно.

  Mist: # 7A9D96 — Этот чистый, естественный цвет хорошо виден на фотографии, но также может быть использован на нижнем блоке или кнопках во всю ширину.

  Найдено на Canva Цветовые схемы на вдохновляющем веб-сайте

  9. Темный и оранжевый

  Темно-серый: # 393939 — Темный дизайн требует немного большей предусмотрительности, но при правильном использовании может обеспечить большую контрастность.

  Deep Orange: # FF5A09 — с разными оттенками апельсина, есть глубина и градиент, не отваживаясь на совершенно новые цвета.

  Светло-оранжевый: # ec7f37 — Использование иллюстративных элементов требует некоторой гибкости для естественной светлоты и темноты для контуров объектов.

  Оранжевый желтый: # be4f0c — Использование на цветовом круге поверх цвета может сделать палитру стильной, жирной и сдержанной.

  Обнаруживается на больших цветовых схемах одним дополнительным пикселем

  10.Писклявый

  Свежий: # 4ABDAC — снова цвет, наложенный на фотографические элементы, придает стильный современный вид

  Vermillion: # FC4A1A — Фигура на переднем плане прорабатывается в контексте, все еще обращая внимание на как он дополняет общую структуру дизайна. Фактически, можно было даже предположить, что дизайн был ниже этой цифры.

  Sunshine: # F7B733 — Желтый обеспечивает только совмещенный призыв к действию и выделяет важные части

  Clean: # DFDCE3 — Чистый серый цвет, использованный на фотографии, сохраняет структуру, не загроможденную большим количеством цветов или узоров в этих резких выстрелах в голову.

  Найдено на Canva Цветовые схемы на вдохновляющем веб-сайте

  11. Базовый сине-зеленый

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

  Зеленый цвет акцента: # 7ebc59 — Корпоративный синий + Экологичный зеленый = Каждый веб-сайт когда-либо.Но не забывайте об использовании общих цветовых схем только потому, что они общие. Совместно используйте знакомые цвета, когда это служит вашей цели — вы чувствуете, что вам доверяют.

  Темный сланец: # 33363b — Разделение белого пространства более темным верхним, нижним колонтитулом или полноразмерными разделами помогает избавиться от слишком повторяющихся вещей.

  Светло-серый: #eaeaea — Это действительно одна из наиболее распространенных цветовых схем на веб-сайте, особенно для технологических компаний.Тебе это еще надоело? Мне это нравится.

  Найдено на потрясающих бесплатных темах WordPress от ColorLib

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

  ---

  Часть третья — Об отсутствии цвета и хорошо выполненных монохроматических цветовых схемах

  ---

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

  Эта концепция и тон также присутствуют на веб-сайтах, где используется только один цвет и различные оттенки этого цвета, позволяя глазам отдыхать и наслаждаться всем синим, или всем зеленым, или тремя оттенками фиолетового. Я также включу несколько монохромных + 1 цветовых схем , которые означают черный, белый, любые оттенки серого плюс еще один цвет, и он закрашен. В каждом из этих сценариев действуют одни и те же общие принципы. Удалив все другие цвета, кроме нескольких избранных, вы действительно можете улучшить то, как несколько оставшихся цветов играют вместе, и увеличить драматическую напряженность веб-сайта — если все сделано хорошо.

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

  12. Резкий контраст

  Slate: # 262626 — Повторяйте за мной, все оттенки серого не равны

  Secondhand Gray: # 3f3f3f

  Whitish: # f5f5f5 — Повторяйте за мной, все белые не равны

  Светло-серый: #dcdcdc

  Найдено на One Page Love, создано Питером Тотом

  13.Настоящее черно-белое изображение + фотография

  Черный: # 000000

  Белый: #ffffff

  Найдено в книге веб-дизайна — 20 красивых портфолио, работа Майкла Шмида

  14. Goldifox

  Золотая пшеница: # a39274

  Мягкая пшеница : # dfd8c8

  Глубокий серый: # 252523

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

  15. Мятный обновленный

  Монетный двор: # 4cb69f

  Серый оттенок: # f5f5f5

  Глубокий фиолетовый: # 201d3a — Не совсем черно-белый + 1 — Намек на фиолетовый в углу фотография

  Найдена в Dapper Ink Джоэлом Ридом на Dribbble

  16. Синий + белый

  Синий Оптимизм: # 269ccc

  Голубые водоросли: # 9ed2c5

  Плоский серый: # 7b70002b Найдено на fltdsgn.com

  И еще пара веб-сайтов с оттенками серого, чтобы прояснить, что оттенки серого могут быть очень красивыми.

  16. Экспериментальная простая фотография — квадратное разделение

  Найдено на InspirationDE, Сэм Тис

  17. Плавающий объект, разделение угловых секций, простая редакционная типографика

  Найдено на flatdsgn.com Роландом и «We Ain’t Plastic»

  18. Прямоугольник вокруг букв, креативная блокировка букв

  Найдено на Behance, Diana Polar

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

  ---

  Часть четвертая — О взаимодействии типографики и цвета

  ---

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

  19. Угольно-черный, золотой и много белого пространства

  Золотой верх: # d8ab4e

  Золотой нижний: # b48c36

  Угольно-черный: # 040404

  19B. Подбор шрифтов для дополнения выбора цвета — Gin Rough и Amiri

  Gin Rough — от Fort Foundry, доступный на MyFonts — Взяв высококачественный золотой градиент и соединив его с типографскими элементами очень преднамеренной формы, дизайнеры этого сайт противопоставил грубоватому и элегантному.
  

  Amiri Rough — Доступно через Google Fonts — Великолепно выглядит как отзыв или цитата.

  Найдено на веб-дизайне Вдохновение для джентльменских парикмахерских клубов (вы должны увидеть сайт полностью)

  20. Чистый красный хаки

  Красный хлопок: # c53211

  Чистый глубокий серый: # 2e3830

  Хаки: # e6dbc9

  20B. Пары шрифтов, дополняющие выбор цвета — Futura Bold и Museo Slab

  Futura Bold — столь же классичны, сколь и просты.Общие похожие шрифты, такие как Gotham Black, Montserrat или Proxima Nova, могут дать вам похожий, но другой вкус. Тем не менее, Futura Bold будет полезен во многих ситуациях — и хорошо сочетается с этой простой красно-серой и коричневой цветовой схемой в качестве заголовков в верхнем регистре.

  Museo Slab — Как и вес 100 в цитате выше, так и текст абзаца (font-weight: 400), Museo Slab обеспечивает удобочитаемость, будь то большой или маленький. Futura, Museo Slab поверх этих удобных простых цветов кажутся не обязательно классическими, но современными и оригинальными.Сдержанность как в выборе цвета, так и в типографике приводит к очень сплоченному ощущению, которое оставляет весь веб-сайт интегрированным и фирменным.

  21. Модные пастельные тона

  Пастельный персик: # dea6af

  Небесно-голубой: # 8cbcd0

  Пастельно-розовый: # e6dbc9. Подбор шрифтов в дополнение к выбору цвета — Калибр — Европейский дизайн Кетчуп

  Калибр — Мне нравится внешний вид, который многие современные европейские веб-сайты достигают с помощью этого зрелого, швейцарского шрифта.Его будут использовать в Америке гораздо больше, прежде чем здесь начнут переусердствовать. Приложение без излишеств, представленное ниже, демонстрирует уверенность, с которой его используют многие европейские дизайнеры. Безупречно сыграно.

  Дизайн, представленный на CSS Design Awards — Купите шрифт Caliber

  Независимо от того, какие цвета вы используете, ваш веб-сайт будет лучше, если на нем будет использоваться очень хорошо продуманный шрифт или два. Поиск баланса между цветом и шрифтом не обязательно является научным — для этого требуется определенная поэтическая ассоциация, но это не означает, что это полностью субъективно.Цвета могут быть либо диаметрально противоположными индивидуальности шрифта (ов), либо находиться в прямом соответствии с ними.

  Несколько слов ободрения

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

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

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

  [bctt tweet = »« Величайшие дизайнеры тоже гадали и пробовали что-то новое ».]

  Признайте свои скрытые способности, доверяйте своим творческим инстинктам и запачкайте руки.

  Часть пятая — Что такое современная цветовая палитра?

  Что ж, я скажу вам одну вещь, в современной цветовой палитре не используются сверхпростые версии тех цветов, о которых мы традиционно думаем: синий, зеленый, желтый и т. Д. Независимо от того, можете ли вы заставить простые цвета хорошо смотреться вместе или нет. — кажется незамысловатым и относительно мягким. Я помню, как мой учитель рисования в колледже говорил всегда с намерением смешивать краски в начале сеанса — потому что люди, которые просто выдавливают их из тюбика, действительно найдут вид своей живописи унылой.

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

  22. Элегантная современная цветовая палитра

  Темно-синий / фиолетовый: # 111c30

  Темно-розовый макияж: # 9a4d55

  Комфортный бежевый диван: # 80756b

  23. Приглушенный современный Цветовая палитра

  Tiny Sweet Blue: # b5e9e9

  Creamy Light Tan: # fef6dd

  Pinkie Pie: # ffe1d0

  Yellow Horse: # fff1b5 # Green

  dcf3d0

  24.Свежая современная цветовая палитра

  Deep Purple: # 1d1145

  Trapper Keeper Green: # 0db4b9

  Pink Boot: # f2a1a1

  Modern Pink Backpack: 25. Палитра землистых современных цветов

  Красные ветви: # de493c

  Зеленые деревья: # 608074

  Синий / зеленый туман: # daefd9

  26. Ржавая современная цветовая палитра

  Deep Ржавый красный: # c1432e

  Серебряный головной убор: # 4b6777

  Ржавое золото: # ce9e62

  Черный для контраста: # 2c2c2c

  5 лучших генераторов цветовых схем для начала работы

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

  Плоские цвета пользовательского интерфейса

  С помощью простой функции копирования одним щелчком мыши вы можете вставлять HEX-коды в существующие цветовые схемы, которые у них уже есть.

  Color Supply

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

  Кулеры

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

  Генератор палитры

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

  Paletton

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

  62 процента опрошенных предприятий заявили, что, по их мнению, веб-сайт следует обновлять каждые 2-3 года! Источник: Hook Agency

  Часто задаваемые вопросы о цветовых схемах веб-сайта

  Какой цвет лучше всего подходит для веб-сайта?

  Blue — определенно самый безопасный вариант, так как у него больше всего людей, считающих его фаворитом — 35%.Однако — очевидно, что если все ваши конкуренты используют синий цвет, возможно, имеет смысл «дифференцировать» ваше предложение и бренд. Цвета вашего бренда должны быть привлекательными, и «белое пространство» является важной частью этого. Убедитесь, что вы даете место включенным элементам, имеете контраст между текстом и фоном и не ошеломляете посетителя — пытаясь быть слишком ярким или оригинальным только ради новизны.

  Сколько цветов должно быть на сайте?

  Учтите, что 51% брендов выбирают монохромные логотипы, 39% используют двухцветные логотипы и только 19% компаний выбирают полноцветные логотипы.Помимо фотографий, веб-сайты с 1, 2 и 3 цветами, кажется, легче сделать хорошо, чем пытаться создать веб-сайт с радугой цветов. При этом, если у вас есть профессиональный дизайнер, очевидно, что Microsoft и Google считают, что есть преимущество работы с большим количеством цветов, поскольку они оба используют как минимум 4 сплошных цвета в своем дизайне.

  Почему я могу рассмотреть вопрос о найме профессионального дизайнера веб-сайтов?

  Выбрать цветовую схему сложно, но в дизайне веб-сайта есть гораздо более серьезные проблемы, которым может помочь помощь опытного дизайнера.Профессиональные веб-дизайнеры перепробовали сотни вещей и поняли, какие методы работают, а какие нет — в идеале, если вы работаете с такой командой, как Hook Agency, они также тестируют веб-сайты A / B, вносят изменения на основе аналитики и знают, как сделайте ваш сайт более доступным для поиска в Google.

  Вы открыли секретный люк во внутренние механизмы Интернета! 😉

  Мы знаем, как делать такие удивительные вещи, как это очень интересное дополнение FAQ к нашему списку здесь, в Google. Мы знаем, как использовать ваш веб-сайт в Google с помощью практики, называемой «поисковой оптимизацией». Итак, помимо цветовых схем веб-сайта, мы знаем, как УПРАВЛЯТЬ БИЗНЕСОМ от трафика Google.Если вы хотите работать с командой профессиональных веб-дизайнеров, отправьте нам сообщение по адресу [email protected]!
  Еще одна тактика, которую мы используем для оптимизации рейтинга, — это так называемое создание взаимных ссылок. Так что, если вы когда-нибудь задумывались, кто самый сексуальный мужчина в Миннесоте, или хотели прочитать руководство по SEO для сантехников, прочтите их!

  Социальные сети для подрядчиков Курс + ежедневные подсказки

  Мы потратили 3 месяца, чтобы собрать это только для подрядчиков — и это совершенно бесплатно!

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

  🎥 10 оригинальных видео

  📝 6 недель ежедневных подсказок в социальных сетях

  Есть ли вы или кто-то из вашей команды, кто хотел бы это сделать? Введите их (или свои) данные ниже!
  

  Взгляд на теорию цвета в веб-дизайне

  Бесспорно один из наиболее важных аспектов любого дизайна — это его цвета .. Дизайнеры создают стиль сайта, а также его движения и эмоции, которые он создает , и его цель во многом зависит от выбора цвета, который они делают.Цвета — мощные инструменты и важная вещь, которую все дизайнеры должны понимать при создании веб-сайтов.

  Цветовые термины

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

  Основные группы цветового круга

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

  Три основных цвета — красный, синий и желтый. Эти цвета являются базовыми цветами, составляющими все остальные цвета на цветовом круге.

  Смешайте основные цвета вместе, и вы получите вторичных цветов . Это оранжевый, зеленый и фиолетовый.

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

  Взаимоотношения цветов

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

  Дополнительные цвета — это цвета, которые хорошо дополняют друг друга и расположены напротив друг друга на цветовом круге. Это такие цвета, как синий и оранжевый, фиолетовый и желтый, красный и зеленый.

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

  Цветовые группы, основанные на эмоциях

  Есть цветовые группы, которые связаны с эмоциями: теплый , холодный и нейтральный .

  Теплые цвета вызывают тепло, как красный, желтый и оранжевый.

  Холодные цвета заставляют людей думать о холодных и холодных цветах, таких как синий, зеленый и фиолетовый.

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

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

  Типы цветов в дизайне

  Существует две разные цветовые системы, и обе используются в зависимости от того, для чего вы разрабатываете.

  RGB — это сокращение от Red Green Blue, которые являются тремя основными цветами системы и производятся с помощью света.RGB используется на телевизорах, компьютерных мониторах и экранах любого типа.

  CMYK , что является сокращением от Cyan Magenta Yellow и Key (Black), создается пигментами и используется в печати.

  Дизайн в Интернете должен создаваться с использованием системы RGB .

  Разумный выбор цвета для передачи смысла

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

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

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

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

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

  Что цвета означают для пользователей

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

  Вот несколько общих значений популярных цветов.

  Красный

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

  Негативные коннотации красного цвета — это ярость, чрезвычайная ситуация и гнев, которые проистекают из страстных и агрессивных качеств красного.

  Оранжевый

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

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

  желтый

  Ярко-желтый цвет — это счастливый цвет, представляющий положительные желтые качества: радость, ум, яркость, энергию, оптимизм и счастье.

  Тускло-желтый цвет вызывает негативные чувства: осторожность, критику, лень и ревность.

  Зеленый

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

  С другой стороны, зеленый цвет символизирует деньги, показывая жадность или ревность. Его также можно использовать для обозначения отсутствия опыта или новичка, нуждающегося в росте («зеленый цвет за ушами»).

  Синий

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

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

  фиолетовый

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

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

  Более темный пурпур может вызывать уныние и печаль.

  Черный

  Хотя черный цвет не является частью цветового круга, его все же можно использовать для обозначения чувств и смысла. Его часто ассоциируют с силой, элегантностью, изысканностью и глубиной. Говорят, что надевание черного на собеседовании может показать, что собеседник — влиятельная личность, и то же самое касается веб-сайтов.

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

  Белый

  Белый — тоже не часть цветового круга — символизирует чистоту и невинность. Это также свидетельствует о чистоте и безопасности.

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

  Примеры цветов на сайтах крупных компаний

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

  Nike

  Nike часто меняет свой сайт, но обычно он темный, в основном с черными и серыми оттенками. Черный цвет показывает силу их продукта, создавая впечатление, что они продают качественные продукты спортивным людям.

  Белый дом

  Веб-сайт Белого дома в основном белый и светло-серый с некоторыми синими и красными акцентами. Белый цвет символизирует надежду и свободу, показывая ценность безопасности и чистоты. Красный и синий, конечно, другие цвета США, но синий показывает стабильность и мир, а красный показывает страсть и энергию.

  Amazon

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

  Verizon

  Основной цвет корпоративного бренда

  Verizon — красный, который используется на всем сайте. Это помогает стимулировать интерес пользователей, показывая компанию, которая продает интересный и быстро развивающийся продукт.Белый фон используется аналогично Amazon, помогая пользователям перемещаться по сайту, отображая чистый и упорядоченный сайт.

  Лучшая покупка

  Сайт

  Best Buy демонстрирует темно-синие оттенки, демонстрируя их стабильность и мощь на рынке электроники. Покупатели совершают крупные покупки в Best Buy и должны чувствовать себя на своем сайте в безопасности и спокойствии. Желтый цвет излучает счастье и помогает людям чувствовать себя взволнованными и радостными при совершении покупок.

  Чарльз Шваб

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

  Додж

  Сайт

  Dodge в основном черный, что позволяет их изображениям всплывать. Для акцентов используют ярко-красный цвет. Черный цвет придает сайту мощное качество, демонстрируя свою продукцию в изысканном и мужественном свете.Черный — отличный цвет, чтобы продукты выглядели дорогими и достойными. Красный цвет показывает страсть и азарт, а также надежду побудить потребителей покупать автомобили у компании, которая ценит приверженность и качество.

  Целые продукты

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

  Как использовать цвета на веб-сайтах

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

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

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

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

  Ресурсы для развлечения с цветами

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

  COLOURlovers

  Найдите дополнительные сочетания цветов и цветовые палитры с помощью этого веб-инструмента.

  Дизайн Meltdown

  Этот сайт классифицирует сайты по разным жанрам, включая множество цветовых категорий.

  Найдите идеальные цвета для своего веб-сайта — блог Vandelay Design

  В этом замечательном посте перечислено множество цветных ресурсов и инструментов.

  Палитра цветов JavaScript

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

  Список литературы

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

  Связанное содержимое

  7 правил выбора потрясающей цветовой схемы веб-сайта

  Для веб-разработчиков инвестирование в визуальную иерархию является естественным шагом в нашем рабочем процессе проектирования.В прошлом году в блоге Shutterstock была опубликована статья «6 правил визуальной иерархии, которые помогут вам разрабатывать лучше». Эти правила, объясняют они, основаны на всеобъемлющей цели — упорядочении компонентов дизайна на основе важности, что «направляет зрителя через дизайн и гарантирует, что сообщение будет ясным и кратким».

  Из шести правил Shutterstock первое и главное правило относится к цветовой схеме веб-сайта, и они формулируют это правило следующим образом: «Сделайте фокус с помощью цвета.«Что мы можем понять из этого, так это то, что когда вы обращаетесь к визуальной иерархии своего веб-сайта, ваша цветовая палитра является одним из наиболее важных вариантов дизайна, которые следует учитывать. Это верно для цветов, которые вы выбираете для текста, цветов кнопок, фона и т. Д.

  Согласно этому образу мышления, когда у вас есть основной текст, а затем описание под ним, ваш выбор цвета шрифта имеет решающее значение, как и ваш выбор цвета фона. Например, на изображении выше различить заголовок и подзаголовок гораздо проще, если им присвоены два разных цвета.Таким образом, более «важный» текст будет темным цветом, а «менее важный» текст — более светлым контрастным цветом. Глаз обращается к h2 перед подзаголовком просто потому, что он очень выделяется и каждый легко увидеть в отдельном свете. Во втором визуале оба текстовых элемента имеют один и тот же цвет, поэтому глаз инстинктивно видит их как одно целое и медленнее разделяет их на два разных объекта.

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

  Создайте стиль CSS для радиуса границы, шрифтов, преобразований, фона, окон и теней текста с помощью онлайн-генераторов кода CSS.

  Лучшие инструменты для работы с цветом для веб-дизайнеров в 2021 году

  Инструменты

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

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

  Но как узнать, какие цвета хорошо сочетаются друг с другом? К счастью, вам не нужно быть мастером теории цвета, чтобы составить работоспособную палитру.Чтобы помочь с важной задачей выбора цвета, вот 14 лучших инструментов цветного веб-дизайна — и все они бесплатны.

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

  01. HueSnap

  Создавайте вдохновение на ходу и превращайте его в цветовые палитры

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

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

  02.Khroma

  Khroma использует AI, чтобы предлагать цвета, которые вам понравятся.

  Khroma — это инструмент цвета AI, который помогает вам легко просматривать и сравнивать исходные цветовые комбинации. Вы тренируете алгоритм ИИ, чтобы он действовал как расширение вашего мозга. Начните с выбора 50 понравившихся вам цветов; эти цвета используются для обучения нейронной сети, которая может распознавать сотни тысяч других похожих цветов.

  03. Coolors.co

  Раздел «Обзор» включает сотни, если не тысячи, вариантов палитры.

  Coolors предлагает широкий спектр инструментов для настройки палитры так, как вы этого хотите.Кроме того, вы можете экспортировать свое окончательное творение во множество различных форматов, чтобы использовать его практически везде, где захотите. Coolors — это не просто инструмент для создания цветовой палитры, он также позволяет вам просматривать другие завершенные творения других пользователей, чтобы вы могли черпать вдохновение. В разделе «Обзор» есть сотни (если не тысячи) палитр, которые вы можете просматривать, сохранять и редактировать самостоятельно.

  Coolors доступен на настольных компьютерах. Более того, в нем также есть приложение для iOS, надстройка Adobe (PhotoShop, Illustrator, InDesign) и даже расширение Google Chrome для легкого доступа.

  04. Adobe Color CC

  Это было давно, но все еще невероятно полезно.

  Бесплатный инструмент Adobe Color CC существует уже давно, и это один из лучших инструментов для выбора цветовой палитры. . Вы можете не только создавать свои собственные цветовые схемы, но и исследовать то, что создали другие. Выберите цвет на колесе (или на изображении) и примените правила цвета, такие как использование только дополнительных цветов, монохроматических цветов или оттенков выбранного вами цвета, для создания цветовой палитры.(Или щелкните каждый цвет и исследуйте цветовое колесо, чтобы настроить выбор.)

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

  05. Colordot

  Используйте простые жесты мыши для создания цветовой палитры

  Colordot от Hailpixel — отличный бесплатный онлайн-инструмент для создания цветовой палитры. Используя простые жесты мыши, вы можете выбирать и сохранять цвета.Перемещайте указатель мыши вперед и назад для определения оттенка; вверх и вниз для легкости; прокрутите для насыщенности и щелкните, чтобы сохранить цвет в палитре. Щелкните значок переключателя, чтобы увидеть значения RGB и HSL каждого цвета. Есть даже приложение для iOS, которое позволяет снимать цвета с помощью камеры.

  06. Eggradients

  Градиентное вдохновение и заставляющие задуматься имена

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

  07. 147 цветов

  Этот бесплатный инструмент включает стандартные цвета CSS.

  Когда вы отвечаете за создание легко читаемых CSS, иногда лучше использовать стандартные цвета и названия цветов. Благодаря 147 цветов от Брайана Майера-младшего, вы можете взглянуть на них всех и выбрать те, которые вам подходят.Он содержит 17 стандартных цветов плюс 130 других названий цветов CSS. Отфильтруйте результаты по оттенкам синего, зеленого и т. Д. Или выберите из полной радуги.

  08. Генератор цветовой палитры Canva

  Создание цветовой палитры на основе изображения

  Генератор цветовой палитры от Canva идеально подходит, если вы хотите создать цветовую палитру на основе определенного изображения. Хотя другие инструменты предлагают аналогичные возможности, Canva очень проста в использовании: вы загружаете изображение, и генератор возвращает палитру из пяти основных цветов, содержащихся в нем.Вы можете нажать на понравившиеся вам цвета и скопировать шестнадцатеричное значение в буфер обмена.

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

  09. Палитра дизайна материалов

  Создайте палитру на основе принципов дизайна материалов Google.

  С помощью палитры дизайна материалов вы можете выбрать два цвета, которые затем преобразуются в полную цветовую палитру для загрузки вместе с предварительным просмотром.Компания также предлагает Material Design Colors, которые позволяют дизайнерам видеть различные оттенки цвета вместе с соответствующими им значениями HEX.

  10. ColourCode

  Сохранение и экспорт цветовых палитр в виде файлов SCSS, LESS или PNG

  ColourCode Тамино Мартиниус и Андреас Сторм похож на Colordot, но предлагает немного больше рекомендаций. Этот бесплатный инструмент ударяет вас прямо в лицо, демонстрируя фон, меняющий цвет при движении курсора. Кроме того, этот инструмент предлагает различные категории для палитры (аналоговая, триада, четырехугольник, монохромный, монохромный свет и т. Д.).

  С помощью ColourCode вы можете установить различные параметры на цветовом круге для создания оригинальной комбинации. Вы также можете сохранить свою палитру или экспортировать ее как файл SCSS или LESS. Вы даже можете экспортировать в PNG, если хотите.

  11. Калькулятор цвета

  Выберите цвет и цветовую гармонию, и этот инструмент сгенерирует цветовую палитру.

  Калькулятор цвета от Sessions College прост: вы выбираете цвет и опцию цветовой гармонии. Взамен вы получите обратно результаты рекомендованной цветовой схемы.Однако что хорошо в этом сайте, так это то, что на нем также подробно рассказывается о теории цвета и о том, как она соотносится с вашим выбором цвета. (Кажется уместным, учитывая, что это сайт образовательного учреждения.)

  12. Цветовой код HTML

  Этот набор инструментов включает список стандартных названий цветов.

  Цветовые коды HTML — это большой бесплатный набор инструментов от Dixon. & Moe, который включает в себя подробный палитру цветов с множеством объяснений цветовых правил; серия цветовых диаграмм с плоскими цветами дизайна, схемой дизайна материалов Google и классической палитрой безопасных для Интернета цветов; и список стандартных названий цветов и кодов HTML.

  Этот сайт также предлагает учебные пособия и другие ресурсы для веб-дизайнеров, а также варианты экспорта результатов из его инструментов в виде HEX-кодов, стилей HTML, CSS и SCSS.

  13. W3Schools: Учебник по цветам

  Это бесплатное руководство включает ссылки на ряд удобных инструментов для работы с цветом.

  Если вы ищете комплексное решение, включающее руководство по цветам, а также ряд различных инструментов, то Учебник по цветам на W3Schools — идеальный выбор. Вы можете не только узнать о теории цвета, цветовых кругах и цветовых оттенках, но также сможете использовать другие инструменты, которые у него есть, например, Color Converter.С помощью этого инструмента вы можете преобразовывать любые цвета в имена и обратно, HEX-коды, значения RGB, HSL, HWB и CMYK.

  14. Цифровой измеритель цвета (Mac)

  Встроенный инструмент Mac позволяет получать цвета с экрана.

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

  Подробнее:

  .

  No related posts.