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

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

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

 

Знание ключевых правил колористики поможет выбрать грамотное цветовое решение.

 

 

 

Как цвета влияют на бренд и сайт?

 

 

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

 

 

 

 

 

Использование красного цвета в бренде Кока-Колы имеет два основания:

 

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

 

 

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

 

 

 

Разрабатывая дизайн, нужно обратить внимание на три нюанса:

 

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

 

 

 

Как выбрать ключевой цвет?

 

 

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

 

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

 

 

 

 

 

 

Стоит также учитывать значения цветов

 

1. Зеленый символизирует здоровье, покой, достаток и природу. Этот цвет приятен для восприятия, помогает расслабиться. Кстати, по статистике зеленый – один из самых приятных оттенков как для мужчин, так и для женщин.
2. Красный – символ любви, страсти или опасности и тревоги. В маркетинге часто используется, чтобы подтолкнуть человека к покупке, сообщить о выгодных условиях, о необходимости сделки. В общепите помогает вызвать аппетит.
3. Желтый олицетворяет молодость, свежесть, оптимизм. Популярен для привлечения внимания. Но нужно знать еще, что желтый может стать причиной эмоционального напряжения, так что применять его нужно с осторожностью.
4. Розовый всегда связан с романтикой, женственностью, нежностью и легкостью, поэтому его берут в основном для дизайна сайтов с товарами и услугами для девушек.
5. Оранжевый – это символ творчества, дружелюбия. Он побуждает людей к действию, мотивирует. Такой цвет способен подталкивать к импульсивным покупкам и шагам, поэтому его часто используют для оформления Call-to-action кнопок.
6. Синий вселяет некую уверенность, чувство безопасности, спокойствия и умиротворения. Из-за этого цвет широко используется различными коммерческими организациями и банками.
7. Черный – элегантный и роскошный цвет. Популярен для рекламы и продвижения люксовых дорогих продуктов.
8. Фиолетовый ассоциируется с достатком, успешностью и мудростью. Успокаивает людей, вселяет доверие. Очень популярен для оформления сайтов, связанных с косметикой.
9. Серый – это универсальность, лаконичность и минимализм. Он символизирует осторожность и надежность.

 

 

 

Как воспринимают цвета мужчины и женщины?

 

 

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

 

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

 

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

 

 

 

 

 

 

Где на сайте использовать основной цвет?

 

 

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

 

 

Где лучше всего применить основной цвет?

 

• Логотип;
• Раздел меню;
• Главная кнопка, призывающая к действию;
• Название
• Важные факты.

 

 

 

Как применять акцентные оттенки?

 

 

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

 

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

 

 

 

Где можно употребить акцентные цвета?

 

• Кнопки
• Подзаголовки;
• Дополнительная информация важного характера;
• Кнопка перехода в раздел меню.

 

 

 

 

 

 

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

 

 

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

 

 

 

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

 

 

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

 

 

1. Adobe Color

 

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

 

 

 

 

 

2. Colorscheme

 

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

 

 

 

 

 

3. Hailpixel

 

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

 

 

 

 

 

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

 

 

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

 

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

 

 

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

 

 

> Создать сайт

 

Как правильно выбрать цвета для сайта? Что такие цветовые схемы для сайта?

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

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

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

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

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

Прочитав эту статью, вы узнаете, как:

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

Если я попрошу вас подумать о Кока-Коле, что первым придет вам на ум? Скорее всего, в вашем воображении всплывёт красный логотип Кока-Колы:

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

Красный в цветовой схеме несет в себе два важных послания:

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

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

85% покупателей признают, что основной причиной покупки товара явился его цвет.

Узнаваемость бренда увеличивается на 80% при использовании цвета.

При разработке дизайна сайта нужно:

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

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

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

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

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

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

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

Малиновый, лазурный и розовый привлекают классических покупателей. Распространены в магазинах одежды.

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

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

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

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

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

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

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

Фиолетовый – символ величия, богатства, успеха и мудрости. Часто присутствует в косметике. Влияет на людей успокаивающе.

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

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

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

Ваша целевая аудитория – молодые и энергичные покупатели? Или более опытные люди с солидным заработком? Ваш продукт (сервис) нацелен в большей степени на мужчин или на женщин? Подходит ли он только для определенной возрастной группы?

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

На кого преимущественно рассчитан ваш сайт, на мужчин или на женщин? А может и на тех, и на других?

Мужчины предпочитают яркие цвета, а женщины приглушенные.

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

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

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

Женщины

Наиболее предпочтительные цвета: синий, фиолетовый, зеленый.

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

Мужчины

Наиболее предпочтительные цвета: синий, зеленый, черный.

Наименее предпочтительные цвета: коричневый, оранжевый, фиолетовый.

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

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

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

Часто люди покупают определенные товары или услуги, чтобы произвести конкретное впечатление на других.

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

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

Теперь ясно?

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

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

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

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

Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.

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

• Логотип;
• Вкладки меню;
• Кнопка «Позвонить»;
• Важная информация;
• Заголовки и названия;
• Кнопки.

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

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

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

Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:

Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:

Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.

Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:

Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.

Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.

Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:

• Последовательная;
• Монохромная;
• Треугольная;
• Комплементарная;
• Составная;
• Оттенки.

Выберите цветовую схему

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

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.

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

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

CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.

Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.

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

Шаг 1. Загрузите фотографию:

Нажмите на значок камеры, чтобы загрузить изображение.

Шаг 2. Выберите одно из пяти цветовых настроений:

• Красочное;
• Яркое;
• Приглушенное;
• Насыщенное;
• Темное.

Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:

Выберите цветовое настроение.

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:

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

Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.

Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:

Нажмите на цветное колесико, чтобы увидеть коды цветов:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы.

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

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

• Активная кнопка меню;
• Подзаголовки;
• Выделение второстепенной информации.

Вам когда-нибудь приходилось красить стены в своем доме?

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

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

Выбор фонового цвета для сайта не сильно отличается от выбора краски для вашей комнаты!

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

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

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

Фоновый цвет вашего сайта зависит от того, на что вы хотите обратить внимание пользователей.

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

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

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

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

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

При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.

В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.

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

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

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

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

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

Если вы собираетесь создать сайт, связанной с творчеством (мода, дизайн, ресторанный бизнес, красота и т.д.), для вас нет никаких ограничений.

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

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

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

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

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

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

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

• Выбрать для сайта правильный преобладающий цвет;
• Выбрать для преобладающего цвета правильные вспомогательные цвета;
• Выбрать соответствующий фоновый цвет.

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!

Данная публикация является переводом статьи «How to Choose a Good Color Scheme For Your Website» , подготовленная редакцией проекта.

50 идей от лучших дизайнеров

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

Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших! 

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

 

Цвета для сайта: 50 палитр

1. Active Theory

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

#E27D60 — #85DCB — #E8A87C — #C38D9E — #41B3A3

2. Paypr

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

#242582 — #553D67 — #F64C72 — #99738E — #2F2FA2

3. Resn

Цветовая палитра выглядит очень естественно. Идеально подойдет для сайтов, связанных с природой и “зеленой” тематикой. 

#8D8741 — #659DBD — #DAAD86 — #BC986A — #FBEEC1

4. Grosse Lanterne

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

#05386B — #379683 — #5CDB95 — #8EE4AF — #EDF5E1

5. W&CO

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

#FC4445 — #3FEEE6 — #55BCC9 — #97CAEF — #CAFAFE

6. Stinkdigital

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

#8EE4AF — #EDF5E1 — #5CDB95 — #907163 — #379683

7. Bordel Studio

Элегантная палитра объединяет темные приглушенные оттенки и создает утонченный дизайн. 

#5D5C61 — #379683 — #7395AE — #557A95 — #B1A296

8. ReedBe

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

#2E1114 — #501B1D — #64485C — #83677B — #ADADAD

9. Samsy

Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года. 

#0C0032 — #190061 — #240090 — #3500D3 — #282828

10. Bryan James

Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом. 

#1A1A1D — #4E4E50 — #6F2232 — #950740 — #C3073F

11. Anton & Irene

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

#E7717D — #C2CAD0 — #C2B9B0 — #7E685A — #AFD275

12. Bert

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

#0B0C10 — #1F2833 — #C5C6C7 — #66FCF1 — #45A29E

13. BrightMedia 

В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа.

#5D001E — #E3E2DF — #E3AFBC — #9A1750 — #EE4C7C

14. Julie Flogeac

Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.

#D79922 — #EFE2BA — #F13C20 — #4056A1 — #C5CBE3

15. Epic

Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко. 

#EDC7B7 — #EEE2DC — #BAB2B5 — #123C69 — #AC3B61

16. MediaMonks

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

#2C3531 — #116466 — #D9B08C — #FFCB9A — #D1E8E2

17. eDesign Interactive

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

#272727 — #747474 — #FF652F — #FFE400 — #14A76C

18. HAUS

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

#2F4454 — #2E151B — #DA7B93 — #376E6F — #1C3334

19. Gusto Ids

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

#EAE7DC — #D8C3A5 — #8E8D8A — #E98074 — #E85A4F

20. FCINQ

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

#D83F87 — #2A1B3D — #44318D — #E98074 — #A4B3B6

21. Change Digital

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

#5680E9 — #84CEEB — #5AB9EA — #C1C8E4 — #8860D0

22. Watson/DG

Если вы ищете более классический бизнес-вариант, обратите внимание на эту сдержанную палитру. 

#88BDBC — #254E58 — #112D32 — #4F4A41 — #6E6658

23. Supremo  

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

#25274D — #464866 — #AAABB8 — #2E9CCA — #29648A

24. Umwelt A/S

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

#17252A — #2B7A78 — #3AAFA9 — #DEF2F1 — #FEFFFF

25. Waaark           

Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.  

#F8E9A1 — #F76C6C — #A8D0E6 — #374785 — #24305E

26. Five Hundred 

Игривая и полная жизни палитра отлично дополнит смелые проекты.

#A64AC9 — #FCCD04 — #FFB48F — #F5E6CC — #17E9E0

27. Immersive Garden

И снова яркий цвет на темном фоне, в этот раз в главной роли зеленый. Выглядит элегантно.

#61892F — #86C232 — #222629 — #474B4F — #6B6E70

28. SMFB

Здесь яркий акцентный желтый эффективно привлекает и направляет внимание пользователей. 

#FAED26 — #46344E — #5A5560 — #9D8D8F — #9B786F

29. Nurture Digital 

Палитра — лучший выбор для проектов, в которых объединяется технологичность и натуральность.  

#182628 — #65CCB8 — #57BA98 — #3B945E — #F2F2F2

30. Born05

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

#687864 — #31708E — #5085A5 — #8FC1E3 — #F7F9FB

31. Stinkdigital

Яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости. 

#A1C3D1 — #B39BC8 — #F0EBF4 — #F172A1 — #E64398

32. AILOVE

Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание. 

#59253A — #78244C — #895061 — #0677A1 — #2D4159

33. Superhero Cheesecake

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

#1F2605 — #1F6521 — #53900F — #A4A71E — #D6CE15

34. Burocratik

Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.

#10E7DC — #0074E1 — #1B9CE5 — #6CDAEE — #F79E02

35. Google Brand Studio

Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта.

#4285F4 — #5C2018 — #BC4639 — #D4A59A — #F3E0DC

36. Details

Неожиданное и современное решение поможет любому сайту стать лучшим в своей нише.

#080F5B — #0D19A3 — #15DB95 — #F4E4C1 — #E4C580

37. Cher Ami

Энергичная и оптимистичная палитра создана для ярких проектов.

#FBE8A6 — #F4976C — #303C6C — #B4DFE5 — #D2FDFF

38. Leavingstone

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

#B23850 — #3B8BEB — #E7E3D4 — #C4DBF6 — #8590AA

39. Elespacio

Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм. 

#F78888 — #F3D250 — #ECECEC — #90CCF4 — #5DA2D5

40. SFCD  

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

#19181A — #479761 — #CEBC81 — #A16E83 — #B19F9E

41. Great Works Copenhagen

Бесстрашное сочетание оттенков синего и красного подчеркнет профессионализм и силу проекта. 

#314455 — #644E5B — #9E5A63 — #C96567 — #97AABD

42. Resn

Плоский дизайн в современном небанальном исполнении.

#00887A — #FFCCBC — #FFFFFF — #D3E3FC — #77A6F7

43. Play

Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.  

#844D36 — #474853 — #86B3D1 — #AAA0A0 — #8E8268

44. details.ch

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

#5F6366 — #4D6D9A — #86B3D1 — #99CED3 — #EDB5BF

45. stinkdigital

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

#802BB1 — #2D283E — #564F6F — #4C495D — #D1D7E0

46. EPIC

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

#265077 — #022140 — #494B68 — #1E4258 — #2D5F5D

47. Apart

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

#806543 — #33266E — #111111 — #542F34 — #A6607C

48. FUTURAMO

Бирюзовый и розовый на фоне приглушенных оттенков привлекают внимание и выглядят профессионально.

#501F3A — #CB2D6F — #CCCCCC — #14A098 — #0F292F

49. Panic

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

#C34271 — #F070A1 — #16FFBD — #12C998 — #439F76

50. madeo

Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.

#026670 — #9FEDD7 — #FEF9C7 — #FCE181 — #EDEAE5

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

Как цвет вашего сайта воздействует на психику клиента / Блог компании RedHelper / Хабр

Теория Цвета гласит, что каждый цвет оказывает свое воздействие на психику человека. О том, как подобрать нужные для сайта цвета и что такое «цветовое колесо» — в переводе статьи от выпускника Калифорнийского университета Ника Роджаса (Nick Rojas).

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

Оказывается, красный цвет действует как стимулятор (вызывая аппетит, пробуждая голод) и привлекает к себе внимание, тогда как желтый создает ощущение скорости и срочности. Классические примеры – Макдональдс, KFC, Стардог!s. Теперь подумайте о Вашем собственном сайте и его дизайне. С большой долей вероятности в процессе его создания цвета выбирались без учета Теории Цвета, обходясь привычными цветами Вашего бренда.

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

Что такое Теория Цвета

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

Одна из первых современных трактовок Теории Цвета была написана около ста лет назад Альбертом Манселлом (Albert Munsell). Манселл придумал для описания цветовых свойств трехкомпонентную модель, в которой цвет выявляется с помощью трех понятий – значения/ценности (англ. value), оттенка (англ. hue) и насыщенности/яркости (англ. croma).

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

Зачем применять Теорию Цвета на ваших сайтах

В настоящее время Теория Цвета становится все актуальнее в сфере интернет-маркетинга в связи с ростом значимости показателя отказов и других статистик взаимодействия. Когда посетитель

за доли секунды решает

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

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

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

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

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

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

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

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

Настроение и эмоции

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

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

Оранжевый

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

Желтый

Желтый — цвет молодости. Он символизирует оптимизм и игривость, творческие порывы и спонтанность. Желтый — смелый цвет. Он не агрессивный, но очень заметный. Отличный пример — сайт представительства Nikon в России.

Зеленый

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

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

Синий

Синий — это цвет искренности. Цвет воды и неба, а так же — главный цвет интернета (вспомните, какого цвета ссылки по умолчанию). По этой причине, его уникальность в онлайн-бизнесе не так велика, как у других цветов. В этом цвете по минимуму импульсивности и спонтанности, он связан с логикой и прохладой. Хороший пример — сайт гипермаркета оптовых закупок METRO Cash&Carry.

Фиолетовый

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

Сайт мессенджера Viber отлично демонстрирует, как фиолетовый вызывает ощущение простоты и честности.

Розовый

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

Черный

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

Теория Цвета в дизайне сайта

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

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

Как подобрать гармоничную комбинацию цветов для Web-сайта

Теория цвета:

Как подобрать гармоничную комбинацию цветов для Web-сайта

Learning to Use Color on Your Web Site

автор: 2000, Element K Content LLC и Ron Wilder

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

 

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

 

Это синий

Во-первых, давайте разберемся в терминологии, чтобы убедиться, что вы не потеряете нить рассуждений в процессе чтения статьи. Все мы знаем, что первичными (primary) цветами являются красный, желтый и синий. Для того чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий — пурпурный/лиловый, а синий и желтый — зеленый. А что такое третичные (tetriary) цвета? Просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). Рис. А демонстрирует все описанные цвета во всей их красоте.

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

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

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

 

Подбор цветов с помощью цветового круга

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

Рис. С: на цветовом круге существует четыре возможных триады цветов

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

Рис. D.: цвета, противоположные друг другу на круге, называются комплиментарными/дополняющими

 

Различные варианты

На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплиментарных цветов, что называется «двойной комплемент» (double complement). Скажем, желтый и пурпурный/лиловый, синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый — пример такой комбинации. Также существует «расщепленный комплемент» (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

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

Рис. Е.: эти схемы вдохнут жизнь в любой Web-сайт

 

Все семейство

Итак, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании эта схема может придать Web-сайту аккуратный, чистый вид. Сходственная схема цветов, с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. сходственная схема весьма похожа на монохроматическую.

Рис. F.: сходственная схема очень напоминает монохроматическую

 

Итак, все вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придется кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведенные здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь, в конечном счете, решающим фактором будет читаемость текста на Web-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Рис. G.: не всякая комбинация годится в дело

 

Заключение

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

 

Подробнее!

Теории цвета можно посвятить множество выпусков, но мы опасаемся жалоб со стороны тех, кто ее уже знает. Если вы хотите научиться большему, посетите Web-сайт Color Matters (www.colormatters.com) *. Этот сайт охватывает такие темы, как цвет и Web, цвет и изобразительное искусство, цвет и наука, и даже цвет и еда (непременно почитайте статью о синих спагетти!)

 

Источник: www.webmascon.com

 

---

* Статьи ресурса Color Matters (www.colormatters.com) доступны на нашем сайте в английском разделе Articles.

 

Facebook

Twitter

Вконтакте

Pinterest

Как подобрать цвета сайта — 1C-UMI

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

Значения цветов

Желтый

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

Красный

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

Фиолетовый

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

Голубой
Любимый цвет мужского пола. Связан с миром, стабильностью, надежностью, спокойствием и профессионализмом.
Черный
Цвет символизирует изысканность, опытность, роскошь, элегантность и власть. Подходит для реализации люксовых товаров. Но помните, что большое количество черного цвета может вызвать у посетителей чувство тяжести, поэтому не перебарщивайте с ним.
Зеленый
Один из самых любимых цветов обоих полов. Олицетворяет здоровье, богатство, исцеление, правильное питание и природу. Способен расслабить любого человека.

Оранжевый
Ассоциируется с творческим началом, игривостью, восторгом и дружелюбностью. Цвет способен побудить человека к действию ― например, отправить заявку или совершить покупку.
Серый
Данный цвет олицетворяет спокойствие, нейтральность, логичность и простоту. Ассоциируется с производством, контролем, аккуратностью и т. д.
Белый
Символизирует чистоту, невинность, свежесть и доброту. Неплохой выбор для свадебных агентств или религиозных организаций.
Розовый
Очень женственный и романтичный цвет, который преобладает на женских ресурсах, наподобие товаров для женщин или услуг для прекрасных дам.

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

Как выбрать цвета ― подборка инструментов

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

• На вкладках меню.
• В шапке и подвале сайта.
• В боковых панелях страниц.
• В логотипе.
• На кнопках.
• В названиях и заголовках.

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

Рассмотрим процесс подбора цветов на примере сервиса ColorScheme. Он русскоязычный и обладает удобным интерфейсом. Это не единственный подобный инструмент, и если вам больше нравятся другие, пользуйтесь ими без угрызений совести.
Прежде всего, нам нужно узнать код основного цвета. Это можно сделать посредством ресурса ColorPiker или браузерного расширения Eye Dropper.

Скопированный код вставляем в значение RGB на сайте ColorScheme.

Цвет поменяется, а рядом с ним будут показаны комплементарные цвета. При нажатии на любой из них или на вкладку «Список цветов» отобразятся соответствующие им коды.

Цветовые схемы

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

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

Цвета, находящиеся на противоположных сторонах цветового круга.

Данные цвета соединяются вершинами равностороннего треугольника.

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

Цвета, располагающиеся рядом в цветовом круге.

• Акцент аналогия.

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

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

В первом случае будет показана версия со светлым оттенком.

 
Во втором — с темным оттенком цвета.

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

Несколько важных советов

• Используйте контрастные цвета, чтобы тексты на сайте легко читались.
• Не нужно задействовать слишком много цветов. Достаточно будет 2 или 3.
• Для привлечения покупателей применяйте интенсивные цвета (красный).
• Используйте цвета своего фирменного стиля, если он у вас уже есть.
• Если вы не разбираетесь в веб-дизайне, доверьте выбор цветовой гаммы профессиональному дизайнеру.

В шаблонах 1C-UMI цвета подобраны по всем правилам дизайнерского искусства. Создайте сайт на любом из наших шаблонов, и вам не придется задумываться о самостоятельном подборе цветов!

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

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

Смотрите на целевую аудиторию

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

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

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

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

веб-сайта от аудитории

Есть ряд точек, от которых можно отталкиваться:

1. Детские сайты – яркие мультяшные цвета, явные контрасты.
2. Девушки и женщины – нежные светлые тона.
3. Мужчины – брутальные оттенки, темные, нейтральные.

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

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

Сочетание цветов

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

Резкие цветовые переходы распыляют внимание, правильные контрасты – помогают продавать.

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

Примеры сервисов:

• Adobe Color CC – продукт от компании, подарившей миру Photoshop, Illustrator их видению цветов можно доверять.
• Colormind – онлайн-инструмент для генерации палитры и настройки оттенков.
• Colors – бесплатный онлайн-генератор цветовой палитры для сайта и других целей.

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

12 основных советов по выбору цветовой схемы веб-сайта

Знаете ли вы, что 85 процентов покупателей принимают решение о покупке товара на цвете?

Это правда.

Сначала я обнаружил, что этот показатель просто потрясающий.

Но если учесть, насколько мы управляемы визуально, как люди, это имело смысл.

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

Так почему же все должно быть иначе, когда дело доходит до покупки?

И только подумайте о некоторых из крупнейших мировых брендов.

Большинство из них, как правило, имеют четкую цветовую схему, связанную с их фирменным стилем.

В «Макдоналдсе» — красно-желтый.

Для Dell он синий.

И так далее.

Цвет и брендинг

Как мы все знаем, создание прочного бренда жизненно важно.

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

А что является неотъемлемой частью бренда?

Его логотип.

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

Согласно исследованию, «Цвет увеличивает узнаваемость бренда на 80 процентов».

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

Есть еще кое-что, о чем нужно помнить. Цвет бренда коррелирует со значением бренда .

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

Ценные бренды заботятся о своих цветах.Много!

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

Взгляните на эти примеры с сайта TheLogoFactory.com

Вы можете мгновенно обнаружить искусственные логотипы, и вы почувствуете нечто иное, окружающее этот бренд!

Цветовая схема веб-сайта

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

Вы не хотите выбирать цветовую схему наугад или основывать ее на том, «что вам нравится».

Конечно, вам нужна потрясающая эстетика и «сделать это популярным», но цветовая схема — это то, о чем вы хотите хорошенько подумать.

Почему?

«Люди подсознательно судят об окружающей среде или продукте в течение 90 секунд после первого просмотра. От 62 до 90 процентов этой оценки основано только на цвете ».

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

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

1. Понять, как цвет влияет на эмоции

Первое, что я рекомендую, — это ознакомиться с тем, как цвет влияет на человека на эмоциональном уровне.

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

Обратите внимание, что влияние цвета может варьироваться в зависимости от географического положения.

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

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

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

2. Учитывайте общую демографию

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

С кем вы пытаетесь связаться и продать?

Какие эмоции вы пытаетесь вызвать?

Это чрезвычайно важные вопросы, которые стоит задать себе.

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

Учитывайте личность и эмоции вашей целевой аудитории.

Затем выберите лучший цвет, который будет основным цветом для цветовой схемы вашего веб-сайта.

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

3. Учитывать пол

Хотя это не относится ко всем, некоторые компании в основном обслуживают людей определенного пола.

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

Исследование, проведенное Джо Хэллоком « Color Assignments », показало, что в среднем каждый пол имеет определенные цветовые предпочтения.

Вот о чем я.

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

Женщины любят синий и фиолетовый и не любят коричневый и оранжевый.

Это еще один фактор, о котором следует помнить.

4. Учитывать возрастную группу

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

Знаете ли вы, что цветовые предпочтения человека могут меняться с возрастом?

Согласно исследованию Джо Хэллока, это правда.

Вот любимые цвета людей по возрастным группам.

Вот наименее любимый цвет людей по возрастным группам.

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

5. Пройдите «Цветную викторину»

Если вам нужна небольшая помощь в выборе основного цвета, вы можете пройти тест от Grasshopper.

Вас спросят, например, «что лучше всего описывает ваших клиентов» и «какой тип продукта вы предлагаете».”

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

6. Избавьтесь от предубеждений

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

И это на основании их личных предпочтений, а не психологии.

Если ваш любимый цвет — синий, очень заманчиво сделать его основным цветом.

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

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

7. Решите, сколько цветов использовать

Итак, на этом этапе вы должны иметь в виду основной цвет.

А теперь пора выяснить, сколько всего цветов вы хотите использовать.

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

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

Вот как все это ломается.

• 60 процентов доминирующего цвета
• 30 процентов вторичного цвета
• 10 процентов основного цвета

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

Если вам нужен пример правила 60-30-10, не ищите ничего, кроме Quick Sprout.

Обратите внимание, что зеленый является основным цветом, белый — второстепенным, а черный — основным.

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

Три.

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

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

8. Выберите цветовую гамму

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

Я не эксперт по дизайну, но одна вещь, которую вы определенно захотите достичь, — это контраст.

Лично я предпочитаю сайты со светлым фоном и более темными контрастами на переднем плане.

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

Вот хороший пример.

Однако есть сайты, которые неплохо справляются с темным фоном.

Возьмем, к примеру, «Чудо-хлеб».

9. Проконсультируйтесь с цветовым кругом

Помните, в классе рисования вы узнали о «цветовом круге»?

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

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

Вот о чем я.

Один из возможных вариантов дополнительных цветов — желтый и фиолетовый.

Еще бы зеленый и оранжевый.

Один из вариантов аналогичных цветов — оранжевый и красный.

Другой будет зелено-синим.

10. Используйте вспомогательные средства

Вот совет по оптимизации процесса.

Используйте такой инструмент, как Colorspire.

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

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

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

11. Примите участие в конкурсе

Вы также можете многому научиться у конкурентов в вашей отрасли.

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

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

Оттуда у вас есть один из двух вариантов.

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

Я лично сторонник второго варианта, если вы хотите создать свой собственный бренд.

12. Сравните несколько различных цветовых схем

Вот в чем дело.

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

На самом деле, это может быть очень ограничивающим фактором.

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

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

Затем сузьте его, пока не найдете цветовую схему, подходящую для вашего бренда, до T.

Заключение

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

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

Вы также захотите получить базовое представление о правиле 60-30-10 и о том, как работает цветовое колесо.

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

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

Все это может иметь огромное влияние на ваш бизнес.

Какие факторы вы учитываете при выборе цветовой гаммы?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Простое руководство по цветам для веб-разработчиков — Smashing Magazine

Краткое резюме ↬ В этой статье Лаура Элизабет рассказывает о простом процессе работы с цветом, который вы можете использовать в своем следующем веб-проекте.

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

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

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

Вы, конечно, будете подсознательно изучать теорию по пути. Так что, просто для шуток (да, я сказал «шутки»), я рекомендую вернуться через несколько месяцев и еще раз попробовать теорию.

Клянусь, тогда все будет иметь гораздо больший смысл.

Больше после прыжка! Продолжить чтение ниже ↓

Навигация часто бывает слишком сложной и сложной в использовании. Давай исправим это! В книге « Designing The Perfect Navigation » Виталий исследует сотни практических примеров улучшенных мега-выпадающих меню , гамбургеров, каруселей, модальных окон и фильтров. Онлайн, а живут . 31 августа и 1 сентября 2021 г.

Перейти в мастерскую ↬

Выбор основного цвета

Мы можем видеть что-то нелепое, например, 10 миллионов цветов в любой момент времени.Подумайте об этом на секунду. 10 миллионов.

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

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

Как выбрать начальный цвет

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

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

Советы по выбору начального цвета

• Используйте то, что у вас есть.
  Если у клиента есть логотип с установленным цветом, обычно это будет ваш начальный цвет.
• Избавьтесь от цветов конкурентов. Если у одного из ваших основных конкурентов ярко выраженный фирменный цвет, не копируйте его, если можете. Найдите цвета своих конкурентов, чтобы исключить их из ваших собственных цветовых схем.
• Подумайте о своей целевой аудитории.
  Цвета веб-сайта похоронного бюро, вероятно, будут сильно отличаться от цветов для детского клуба. Подумайте о том, кто будет пользоваться сайтом и как вы хотите, чтобы они чувствовали себя (взволнованные, серьезные, о которых заботятся и т. Д.).).
• Но не верьте стереотипам.
  Если вы разрабатываете веб-сайт для молодых девушек, вам не обязательно использовать розовый цвет. Избегайте клише, чтобы завоевать доверие.
• Сыграйте в словесную игру.
  Если вы испытываете затруднения, запишите все слова, которые у вас ассоциируются с бизнесом клиента. Этот список должен дать вам некоторые идеи для цветов. Если вы действительно испытываете трудности, зайдите на любой веб-сайт, посвященный значениям цветов, и посмотрите, какой из них подходит лучше всего.

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

Допустим, вы выбрали синий. (Кстати, отличный выбор!)

Выбор основного цвета A (приятный)

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

Сначала перейдите в Dribbble и Designspiration и щелкните ссылку «Цвета» в обоих.

Они должны представить вам похожие экраны:

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

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

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

Разные оттенки синего имеют разные характеристики.Выбирай с умом! (Просмотр большой версии)

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

Так много синего! Ваша задача — выбрать тот, который, по вашему мнению, лучше всего подходит вашему бренду. Очень просто! (Просмотр большой версии)

Вы не только увидите разные варианты основного цвета, но и легко увидите совпадающие цвета.

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

Хорошо, теперь у вас должно быть HEX-значение для вашего цвета.Мой — # 30c9e8 . Теперь мы собираемся сделать палитру из этого цвета. И это проще, чем вы думаете.

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

Виды палитр, которые вы, вероятно, привыкли видеть. (Изображение предоставлено: палитры ColourLovers от manekineko и сахара!) (Просмотреть увеличенную версию)

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

• белый,
• темно-серый,
• светло-серый (по желанию).

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

• базовый цвет (в нашем случае # 30c9e8 ),
• — акцентный цвет (мы скоро вернемся к этому).

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

Как и Thoughtbot и TedTodd, вам не нужна сложная цветовая схема, чтобы иметь красивый веб-сайт.(Просмотр большой версии)

Найдите свой акцент

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

Ваш следующий шаг — перейти в Paletton и ввести свой HEX-код в цветовое поле:

Введите свой основной цветовой код в Paletton. (Просмотр большой версии)

Отсюда вы можете найти свой акцент одним из двух способов.

Во-первых, вы можете нажать кнопку «Добавить дополнение» и wham ! Этот апельсин там? Это твой акцент.

Paletton автоматически подберет для вас подходящий цветовой акцент. (Просмотр большой версии)

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

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

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

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

Наша цветовая палитра уже формируется. (Просмотр большой версии)

Сейчас не хватает только серого.

Добавление серого

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

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

Вы можете выбрать оттенки серого одним из двух способов:

• Вы можете снова использовать Dribbble и Designspiration, чтобы найти приятный серый цвет из ваших предыдущих результатов, который соответствует вашему базовому цвету. Но обычно проще ввести синий веб-сайт в строку поиска, чтобы в результатах было больше серого.
• Если у вас есть Photoshop или что-то подобное, вы можете использовать технику Эрики Скунмейкер, чтобы согласовать серые тона с основным цветом.

Создание гармоничных серых оттенков

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

1. Создайте две формы и залейте их цветами # 424242 и #fafafa .
2. Вставьте слой с цветной заливкой над двумя фигурами.
3. Измените эту заливку на свой основной цвет ( # 30c9e8 ).
4. Установите режим наложения на наложение и уменьшите непрозрачность до 5–40% (в приведенном ниже примере установлено значение 40%).
5. Воспользуйтесь палитрой цветов и скопируйте новые значения.

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

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

Вуаля! Мы сделали это!

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

Наша замечательная цветовая гамма готова к применению. (Просмотр большой версии)

Применение вашей цветовой схемы

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

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

Размещение вашего веб-сайта в оттенках серого поможет вам применить цветовую схему. (Посмотреть большую версию) Наша цветовая схема в действии. (Просмотр увеличенной версии)

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

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

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

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

Важно отметить, что при использовании цвета и текста необходимо обеспечить достаточный контраст между фоном и копией. Это поможет людям с дальтонизмом или слабым зрением читать текст на вашем сайте. Есть много инструментов, которые вы можете использовать для поиска цветов, соответствующих рекомендациям WCAG. Двумя популярными из них являются программа проверки контрастности цвета WebAim и функция Contrast Ratio от Lea Verou.

Руководство по цветам Заключительное примечание

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

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

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

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

Дополнительная литература по SmashingMag:

(rb, jb, ml, al)

11 бесплатных инструментов, которые помогут выбрать цвета для вашего веб-сайта

Клод Моне сказал знаменитую фразу: «Цвет — моя дневная одержимость, радость и мучения.”

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

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

Начать создание цветовой схемы!

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

Colordot

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

Colorcode

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

Coolors

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

Canva

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

Вращение цветового колеса

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

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

Adobe Color CC

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

Paletton

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

Вдохновите свой выбор

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

Dribbble

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

Khroma

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

Цветовое пространство

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

Делайте ваши слова удобочитаемыми

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

Material Design

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

Colorsafe

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

Удачи!

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

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

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

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

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

Для веб-разработчиков инвестирование в визуальную иерархию является естественным шагом в нашем рабочем процессе проектирования. В прошлом году в блоге Shutterstock была опубликована статья «6 правил визуальной иерархии, которые помогут вам разрабатывать лучше». Они объясняют, что эти правила основаны на общей цели — упорядочить компоненты дизайна на основе важности, что «направляет зрителя через дизайн и гарантирует, что сообщение будет ясным и кратким.”

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

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

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

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

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

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

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

Что означают цвета?

–

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

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

Теплые тона

Красный цвет может пробуждать страсть. Веб-дизайн от Aneley

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

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

Холодные цвета

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

• Зеленый — свежий, спокойный, расслабленный, доверительный, умиротворенный, обнадеживающий, исцеляющий
• Синий — комфорт, ясность, спокойствие, доверие, порядочность, верность, надежность
• Пурпурный — гламур, сила, ностальгия, роскошь, амбиции, духовность

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

Нейтральные цвета

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

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

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

Психология цвета и узнаваемость бренда

—

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

Цвет — это наука. Иллюстрация Ненада Максимовича

Помимо общего значения каждого цвета, упомянутого выше, существуют также определенные тенденции, которым бренды часто следуют, чтобы добиться узнаваемости. Например, рестораны обычно красного и оранжевого цвета, банки и финансовые учреждения часто синего цвета, предметы роскоши обычно упаковываются в черный цвет, отели обычно белые, синие, черные или зеленые.Некоторые знаковые бренды, известные своими цветами, включают CNN для красного, белого и черного цветов, желтый от National Geographic и McDonald’s для сочетания красного и желтого цветов.

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

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

—

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

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

Хорошая реализация трехцветной цветовой схемы через MercClass

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

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

Выбор основного цвета

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

Этот веб-дизайн заимствует свой основной цвет из логотипа бренда. Веб-дизайн: Iconic Graphics

Разработка оттенков и оттенков

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

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

Оранжевый основной цвет используется в разных оттенках для создания акцентов. Дизайн: UI Maniac

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

Правило 60-30-10

Хороший пример реализации правила 60-30-10.Дизайн JPSDesign

Этот метод прост, но эффективен для смешивания разных цветов. Чтобы создать гармонию, цвета обычно следует комбинировать в пропорции 60% —30% —10%. Не обязательно использовать три цвета, но это хорошее число, чтобы быть безопасным и сбалансированным. Используя этот метод, 60% должны быть доминирующим цветом, 30% второстепенным цветом и 10% акцентным цветом. Эта пропорция приятна для человеческого глаза, поскольку позволяет визуальным элементам проявляться постепенно.

Контраст

Высокая контрастность, но приятная для глаз.Дизайн JPSDesign

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

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

Работа с изображениями

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

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

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

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

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

Цвета оживляют веб-дизайн

—

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

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

Хотите создать идеальный веб-сайт?

Наши дизайнеры могут создать уникальный веб-дизайн именно для вас.

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

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

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

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

Посмотрите видео Рана Сегалла ниже, где вы найдете 12-минутное введение в использование цветов в веб-дизайне.

‍

‍

Почему так важен выбор правильных цветов

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

‍

Разборчивость

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

‍

Пример веб-сайта, на котором используется соответствующая контрастность. Источник: Vault

‍

Визуальная привлекательность

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

‍

Пример сайта с гармоничной цветовой гаммой. Источник: Тарас Мигулко через Dribbble

‍

Узнаваемость бренда

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

‍

У Coca-Cola, Ikea и Starbucks есть узнаваемые фирменные цвета

‍

Использование теории цвета для выбора цветов

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

‍

‍

Цветовые схемы

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

‍

‍

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

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

‍

Пример сайта с монохромной цветовой схемой. Источник: Аник Деб через Dribbble

‍

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

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

‍

Синий и оранжевый — дополнительные цвета. Источник: Алиса Майборода через Dribbble

‍

Аналогичные

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

‍

Желтый и оранжевый — аналогичные цвета. Источник: Webinsane через Dribbble

‍

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

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

‍

Использование психологии цвета для выбора цветов

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

‍

Значения цвета

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

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

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

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

‍

Пример веб-сайта с монохромной красной цветовой схемой. Источник: Катерина Кайда через Dribbble.

‍

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

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

‍

Как создать цветовую палитру для веб-сайта

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

Вот простой трехэтапный процесс выбора цвета для веб-сайта на профессиональном уровне.

‍

1. Выберите основной цвет

Лучше всего начать создание цветовой палитры с основного цвета. Главный цвет палитры — звезда шоу. Если мы следуем правилу 60/30/10 , основной цвет занимает около 60% цвета на веб-сайте.

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

‍

Основной цвет в этом примере — светло-розовый.Источник: Facebook Дизайн

‍

P.S. Прочтите , этот пост , чтобы узнать больше о правиле 60/30/10 и других советах по стратегическому выбору цветов.

‍

2. Выбор дополнительных цветов

После выбора основного цвета выберите один или несколько дополнительных цветов. Согласно правилу 60/30/10 вторичные цвета занимают около 30% веб-сайта. Чтобы выбрать второстепенные цвета, вам нужно сначала определить, какой тип цветовой схемы лучше всего подходит для веб-сайта: монохроматический, дополнительный или аналогичный.

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

‍

Фиолетовый является второстепенным цветом на сайте Powder .

‍

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

‍

3. Выберите акцентный цвет

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

‍

В этом примере акцентный цвет ярко-желтый.Источник: tubik через Dribbble

‍

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

‍

Изучите искусство и стратегию создания ценных веб-сайтов

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

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

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

Примеры лучших цветовых схем для веб-сайтов

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

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

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

Что такое цветовая схема веб-сайта?

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

Почему цветовые схемы сайта так важны?

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

Эстетика

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

Восприятие бренда

Знаете ли вы, что цвет связан с психологией? Разные цветовые схемы вызывают разные чувства: например, красный — уверенный, желтый — забавный, а синий — надежный. Согласно Buffer, более 90% нашей оценки продукта основывается только на цвете, и это касается и вашего веб-сайта. Это означает, что вы можете задать тон своему веб-сайту, выбрав цветовую схему, которая отражает то, как вы хотите, чтобы ваши посетители чувствовали себя.

Преобразование

Цветовая палитра вашего веб-сайта также может определить, действительно ли посетители вашего веб-сайта покупают у вас. Фактически, цвет настолько силен, что одно недавнее тематическое исследование показало, что выбор правильных цветов может увеличить конверсию до 24%! Например, многие люди считают, что красная кнопка CTA на вашей странице продаж приносит больше продаж, чем синяя или фиолетовая. Точно так же реклама с зеленым баннером будет давать другие результаты, чем та же реклама с желтым или красным фоном.

Какие известные примеры цветовых схем веб-сайтов?

Via G Hacks

Когда вы думаете о платформе социальных сетей Facebook, скорее всего, на ум приходит один цвет: синий! Оказывается, на самом деле это так по интересной причине: основатель Марк Цукерберг не различает красно-зеленый цвет. «Синий для меня самый богатый цвет; Я вижу весь синий цвет », — сказал он однажды.

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

eBay

Через eBay

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

Примеры цветовых схем веб-сайтов, чтобы вдохновить вас.

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

Цветовая схема веб-сайта №1: Веселая и профессиональная

Mark Dearman

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

Цветовая схема веб-сайта № 2: Неоновые тона и резкий контраст

Play.agency

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

Цветовая схема веб-сайта № 3: Теплый и жирный

Lush Digital

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

Цветовая схема веб-сайта # 4: Чистая и выделенная

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

Цветовая схема веб-сайта # 5: Теплые тона

Studio Recode

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

Цветовая схема веб-сайта # 6: Четкий и современный

Frost Festival

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

Цветовая схема веб-сайта № 7: Смелая и яркая

Magoz

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

Цветовая схема веб-сайта № 8: Вдохновение истории искусства

Fabrique

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

Цветовая схема веб-сайта № 9: Оттенки и тона

Ромен Бушеро и Винсент Фреман

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

Цветовая схема веб-сайта # 10: Всплеск цвета

Magnium Themes

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

Эта цветовая схема более тонко включена в шаблон Waffle Blog Banner. Оцените это в Canva уже сегодня!

Цветовая схема веб-сайта # 11: Элегантная и утонченная

Julian Damy

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

Цветовая схема веб-сайта № 12: Летнее вдохновение

StrADegy Advertising

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

Цветовая схема веб-сайта № 13: Профессиональная и современная

Avondale Type Co.

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

Цветовая схема веб-сайта # 14: Яркие черные и яркие акценты

Cantina dei Colli Ripani

Если вам нужен более яркий современный дизайн, попробуйте объединить смелые черные и белые пятна с некоторыми яркими яркие цвета, как в этом примере для Cantina dei Colli Ripani.Контраст между выделенными цветами и черным создает эффектный, смелый и забавный эффект.

Цветовая схема веб-сайта № 15: Чистые градиенты и свежий синий цвет

SHIBUI

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

Цветовая схема веб-сайта # 16: Веселая и элегантная

Huemor

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

Цветовая схема веб-сайта № 17: Современная и чистая

Benedict Leicht

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

Цветовая схема веб-сайта № 18: Роскошный и современный

Zach Klein

Эта цветовая палитра Зака ​​Кляйна привносит мир роскоши, изысканности и характера в дизайн веб-сайта. Благодаря сочетанию темно-синего, теплого загара и ярко-красного оттенка этот сайт остается современным, минималистичным и изысканным.

Цветовая схема веб-сайта №19: Симпатичные пастели

B / C Designers

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

Цветовая схема веб-сайта # 20: Уникальная и яркая

Great Works Copenhagen

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

Цветовая схема веб-сайта # 21: Неожиданные сочетания цветов

Intesys S.r.l.

Фиолетовый и зеленый — это не два цвета, которые часто смешивают, но этот сайт Intesys S.r.l. доказывает, что, возможно, они должны быть! Насыщенный фиолетовый цвет разительно контрастирует с ярким лаймовым и резким белым цветом, создавая уникальный и запоминающийся дизайн сайта.

Цветовая схема веб-сайта # 22: В стиле ретро

Lowdi

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

Цветовая схема веб-сайта № 23: Античный и чистый

Pier-Luc

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

Цветовая схема веб-сайта # 24: Ярко и энергично

Hyperakt

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

Цветовая схема веб-сайта № 25: Свежая и яркая

Baesman

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

Цветовая схема веб-сайта № 26: Чистая и четкая

BrightMedia

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

Цветовая схема веб-сайта № 27: Красочная без колличества

Ярко

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

Цветовая схема веб-сайта # 28: Приглушенная и минималистичная

Инга Гудоньен / MIOS

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

Цветовая схема веб-сайта № 29: Прохладный и спокойный

Roll Studio

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

Цветовая схема веб-сайта № 30: Современная и приглушенная

Расслабьтесь, мы хорошие ребята

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

Цветовая схема веб-сайта № 31: Землистый и свежий

AQuest

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

Цветовая схема веб-сайта # 32: Высокая насыщенность и высокая энергия

El Burro

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

Цветовая схема веб-сайта # 33: Теплая и прекрасная

Fieldwork

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

Цветовая схема веб-сайта # 34: Винтажный шарм

Cafe Frida

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

Цветовая схема веб-сайта # 35: Холодные тона драгоценных камней

GrowCreate

На этом веб-сайте Business Benchmark on Farm Animal Welfare от GrowCreate используются красивые фиолетовые и синие тона драгоценных камней с тонкими градиентами для создания простой, но привлекательной цветовой палитры.Случайные всплески ярко-розового цвета делают дизайн привлекательным, свежим и привлекательным.

Цветовая палитра веб-сайта № 36: Яркие оттенки

Cinco Design

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

Цветовая схема веб-сайта # 37: Холодное против теплого

Cinco Design

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

Цветовая схема веб-сайта # 38: Чистый и коллегиальный

details.ch

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

Цветовая схема веб-сайта # 39: Простая и свежая

MadeByShape

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

Цветовая схема веб-сайта # 40: Тропические тона

Thomas Schrijer

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

Цветовая схема веб-сайта # 41: Полужирные основные цвета

Joy Intermedia

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

Цветовая схема веб-сайта # 42: Античные тона

Leibowitz Branding & Design

Веб-сайт Athena Art Finance, созданный Leibowitz Branding & Design, использует красивые старинные тона для создания элегантного и утонченного дизайна с большим шармом. Черпая вдохновение в истории искусства и используя темно-фиолетовый, синий, зеленый и теплый золотой, вы можете превратить любую веб-страницу в изысканное потрясающее зрелище.

Цветовая схема веб-сайта # 43: Неоновый и жирный

Calvi on the Rocks

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

Цветовая схема веб-сайта # 44: Приглушенные тона

The Martin Agency

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

Цветовая палитра веб-сайта # 45: Простая, но смелая

Mambo Mambo

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

Цветовая схема веб-сайта # 46: Корпоративный и элегантный

Райан Боркер, Джермейн Крейг, Майк Парсонс и Кайл Миллер

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

Цветовая схема веб-сайта # 47: Современная и минималистичная

Huemor

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

Цветовая схема веб-сайта # 48: Веселая и веселая

Marie Catribs

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

Цветовая схема веб-сайта # 49: Солнечно и спокойно

TRAFFIC

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

Цветовая схема веб-сайта # 50: Поп-арт

Visualsoft

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

Как выбрать цветовую схему для своего сайта

Итак, как создать свою цветовую схему с нуля? Вот несколько советов, которые помогут вам в этом процессе.

Воспользуйтесь цветовым кругом

Вам не нужно изобретать колесо, когда вы выбираете цвета для своего бренда — просто воспользуйтесь нашим! Цветовой круг Canva — удобный инструмент, используемый в теории цвета, чтобы определить, какие оттенки смотрятся вместе. Есть два типа цветовых кругов — RYB и RGB. Первый — это красный, желтый, синий цветовой круг, который обычно используется художниками для комбинирования цветов краски. Затем есть красный, зеленый и синий цветовой круг, который используют графические дизайнеры, поскольку он включает смешивание света для использования в Интернете.

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

Рассмотрим демографию

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

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

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

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

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

Создаете что-нибудь для более молодой аудитории? Шаблон веб-сайта Canva для малого бизнеса Pink and Blue Pet Care отличается забавной и свежей эстетикой, которую можно легко перенастроить для вашего собственного бренда.

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

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

Веб-сайт Фаррелла Уильяма красочный и динамичный

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

Как использовать цветовую палитру из фирменного набора

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

Активы ThisThatApp от Хелены. Изображение через Dribbble.

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

Благодаря тому, что ваша цветовая палитра будет легко доступна в вашем фирменном наборе, вы гарантированно получите точное соответствие цветов каждый раз, когда вы создаете somedeskg new для своего бренда. Функция Brand Kit в Canva Pro позволяет вам установить цвет и коды вашего бренда для облегчения доступа при разработке дизайна в приложении.

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