Сайт

Лучшие цвета для сайта: Какие 3 самых популярных цвета для оформления сайтов?

23.02.1982

Содержание

Какие 3 самых популярных цвета для оформления сайтов?

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

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

Цвет очень важен

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

В интернет-маркетинге ситуация не менее серьезна — цвет существенно влияет на показатели продаж.

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

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

  • Теория цвета — как управлять вниманием пользователя?

1. Голубой символизирует безопасность

Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Но что подразумевается под словом «безопасность» в данном контексте?

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

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

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

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

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

Twitter не отстает.

И, да, даже LinkedIn любит синий цвет.

Wal-Mart — крупнейшая в мире розничная сеть — пошла той же дорогой.

Многие банки используют этот подход. Основной цвет Citibank — синий с ярко-красной дугой.

Bank of America использует красный, но основной цветовой акцент в их логотипе — на синем цвете.

У Chase Bank светло-синий сайт и логотип.

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

USAA, Американская ассоциация автосервисов — основной дистрибьютор страховых полисов. На их сайте преобладает синий цвет.

New York Life, один из лидеров по страхованию жизни, использует хорошо известный синий квадратный логотип.

Среди российских брендов можно выделить Yota:

И, конечно же, социальная сеть ВКонтакте:

Подводя итог: вы не ошибетесь, если выберете оттенки синего для оформления своего ресурса. Даже если его слишком много, он все равно «работает».

Карен Галлер (Karen Haller), специалист в области прикладной психологии цвета, пишет о синем следующее:

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

  • Как цвет влияет на покупательскую активность?

2. Зеленый символизирует рост

Основной посыл зеленого — рост. Причины ассоциации очевидны: большинство растений — зеленые.

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

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

Зеленый используется в оформлении крупнейшего IT блога Techcrunch.

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

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

Российский пример напрашивается сам собой. Разумеется, это Сбербанк:

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

3. Будьте осторожны с оранжевым

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

Охотники носят оранжевые жилеты, чтобы их не подстрелили по ошибке. Строители в опасных ситуациях тоже надевают оранжевые жилеты или каски.

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

Home Depot апеллирует к духу авантюризма у покупателей товаров категории DIY («Сделай сам»). Цвет их логотипа красноречиво отражает эту философию.

Есть риск использования оранжевого цвета — он воспринимается «дешево». Гипотеза, выдвинутая в исследовании Forbes в 1991 г., подтверждает это: почти четверть опрошенных назвали оранжевый «дешевым».

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

Обозреватель Washington Post Джефф Туринтайн (Jeff Turrentine) предпринял мучительную попытку реабилитировать оранжевый цвет. Он отметил, что «нет ничего сомнительного в ярко-оранжевом», но признал, что иногда тот вызывает «вульгарные ассоциации».

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

У HootSuite в логотипе присутствует оранжевый.

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

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

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

  • Влияние цвета на конверсию целевых страниц

Вывод

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

Голубой внушает чувство спокойной уверенности, при этом он наиболее легкий для восприятия. Менее 1% пользователей считают этот цвет раздражающим. Поэтому большинство успешных социальных сетей оформлены в оттенках синего и голубого — люди проводят многие часы своей жизни, читая ленты новостей ВК или Facebook, постоянно проверяют Twitter и т. д. А чтобы человек мог провести в социальной сети действительно долгое время, ее оформление должно минимально отвлекать и не раздражать посетителя.

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

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

А теперь забудьте все, что прочитали выше :). Цвет лишь инструмент в процессе оптимизации конверсии.

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

Высоких вам конверсий!

По материалам: blog.crazyegg.com, image source splitshire 

16-12-2014

Таблица «безопасных» цветов


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


255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0
FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
           
255. 204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0
FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600
           
255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0
FF9900 FF9933 CC9966 CC6600 996633 663300
           
255.204.153 255.153.102 255.102.0 204.102.51 153. 51.0 102.0.0
FFCC99 FF9966 FF6600 CC6633 993300 660000
           
255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0
FF6633 CC3300 FF3300 FF0000 CC0000 990000
           
255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51
FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033
           
204. 153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0
CC9999 CC6666 CC3333 993333 990033 330000
           
255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51
FF6699 FF3366 FF0066 CC3366 996666 663333
           
255.153.204 255.51.153 255.0.153 204.0.102 153. 51.102 102.0.51
FF99CC FF3399 FF0099 CC0066 993366 660033
           
255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102
FF66CC FF00CC FF33CC CC6699 CC0099 990066
           
255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153
FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399
           
204. 153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153
CC99CC CC66CC CC00CC CC33CC 990099 993399
           
204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102
CC66FF CC33FF CC00FF 9900CC 996699 660066
           
204.153.255 153.51.204 153.51.255 153.0.255 102. 0.153 102.51.102
CC99FF 9933CC 9933FF 9900FF 660099 663366
           
153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51
9966CC 9966FF 6600CC 6633CC 663399 330033
           
204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102
CCCCFF 9999FF 6633FF 6600FF 330099 330066
           
153. 153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102
9999CC 6666FF 6666CC 666699 333399 333366
           
51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102
3333FF 3300FF 3300CC 3333CC 000099 000066
           
102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0. 0.51
6699FF 3366FF 0000FF 0000CC 0033CC 000033
           
0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102
0066FF 0066CC 3366CC 0033FF 003399 003366
           
153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153
99CCFF 3399FF 0099FF 6699CC 336699 006699
           
102. 204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51
66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333
           
153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102
99CCCC 66CCCC 339999 669999 006666 336666
           
204.255.255 153.255.255 102.255.255 51.255.255 0. 255.255 0.204.204
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC
           
153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153
99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
           
102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51
66CC99 33CC99 00CC99 339966 009966 006633
           
102. 255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51
66FF99 33FF99 00FF99 33CC66 00CC66 009933
           
153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0
99FF99 66FF66 33FF66 00FF66 339933 006600
           
204.255.204 153.204.153 102.204.102 102.153.102 51. 102.51 0.51.0
CCFFCC 99CC99 66CC66 669966 336633 003300
           
51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51
33FF33 00FF33 00FF00 00CC00 33CC33 00CC33
           
102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0
66FF00 66FF33 33FF00 33CC00 339900 009900
           
204. 255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0
CCFF99 99FF66 66CC00 66CC33 669933 336600
           
153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0
99FF00 99FF33 99CC66 99CC00 99CC33 669900
           
204.255.102 204.255.0 204.255.51 204.204.153 102. 102.51 51.51.0
CCFF66 CCFF00 CCFF33 CCCC99 666633 333300
           
204.204.102 204.204.51 153.153.102 153.153.51 153.153.0 102.102.0
CCCC66 CCCC33 999966 999933 999900 666600
           
255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0
FFFFFF CCCCCC 999999 666666 333333 000000
           

Все цвета интернета

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

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

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

Как пользоваться палитрой

Палитра состоит из 36 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 0, 51, 102, 153, 204, 255.

Над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).



лучшие сочетания и правила выбора цветовой схемы

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Интересный факт

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

  • Общепринятые эмоциональные ассоциации
  • Правила сочетания цветов для сайта — ориентируемся на интуицию
  • Подбор цветов для сайта по спектральному кругу
    • Принцип первый — триада
    • Принцип второй — двойная система
    • Принцип третий — аналогия
    • Принцип четвертый — раздельное
    • Принцип пятый — прямоугольник
    • Шестой принцип — квадрат
  • Как подобрать цвета для сайта при помощи программ
  • Фоновый цвет для сайта: выбор и его критерии
    • Еще несколько правил по выбору цветовых палитр для сайта
    • Примеры хороших и плохих сайтов

Общепринятые эмоциональные ассоциации

  • Красный. Возбуждающий тон, ассоциируется с властью, энергией, молодостью, страстью. Больше всех привлекает внимание, при помощи него можно о чем-то предупредить. Если на веб-странице слишком много красного — человек попытается как можно быстрее «убежать» с нее. Когда данный колор необходим, его можно использовать умеренно или применять более нежные оттенки.
  • Розовый. Романтика, женственность, нежность. При неправильном использовании намекает на неформальные отношения, поэтому неприменим для корпоративных порталов или спортивных веб-ресурсов.
  • Оранжевый. Энергия, дружелюбие, интерес, бодрость. Эмоции и ассоциации: открытость, активность, уникальность. Создает ощущение движения, творчества.
  • Желтый. Солнце, радость, счастье. Ярко-желтый прибавляет энергию, нежный — комфорт, темный — погружает в старину, добавляет авторитета.
  • Зеленый. Здоровье, стабильность, рост, природа. Являясь мостом между теплыми и холодными красками (он получается из смешения синего и желтого), обладает расслабляющим влиянием синего, сохраняя энергичность желтого. Темные оттенки говорят о финансах и богатстве.
  • Синий. Спокойствие, открытость, надежность, непоколебимость. Влияние на психику очень зависит от его нюанса. Светлые тона более дружелюбны, а темные вызывают печаль. Нейтральный синий отлично подходит для корпоративных проектов.
  • Голубой. Мирное небо, терпимость, надежность, профессионализм.
  • Фиолетовый. Тайна, романтика, роскошь, мистика и т.п. Это тона королевского величия, предметов роскоши, окутанных тайной. Светлые тона более романтичны, а темные — таинственны.
  • Черный. Нервозность, опасность, власть. Колор считается нейтральным, но он может вызвать совершенно противоположные ассоциации в зависимости от того, с какими цветами гармонирует. Если черного много — он ассоциируется со злом, особенно в сочетании с красным. Если черного в меру, то он говорит об изысканности и элегантности (особенно в сочетании с белым).
  • Белый. Простота, чистота, доброта, воздух. Самый популярный колор для фона веб-проекта. Как правило, текст легко читается с белого листа, и на веб-странице остается много воздуха и легкости. Он выгодно оттеняет другие краски.
  • Серый. Самая нейтральная краска, которая не вызывает отрицательных эмоций. Говорит о меланхолии, спокойствии. Темно-серый может вызвать грусть, но любые его тона при правильных сочетаниях становятся мощными инструментами в руках опытного дизайнера.
  • Коричневый. Уверенность, спокойствие, комфорт, долговечность.
  • Бежевый. Фоновый тон, традиционный, подчеркивает сопровождающие его краски. Он изменяется в зависимости от окружающих его тонов.
  • Слоновая кость, кремовый. Элегантность, комфорт, минимализм. Приравнивается к белому в восприятиях, но тон его намного теплее.

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

Правила сочетания цветов для сайта — ориентируемся на интуицию

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

  • Белый или черный: любые сочетания. Наилучшие пары, которые «дружат»: белый + черный, а также синий или красный. В случае с черным пару составит белый, яркий оранж, нежно-розовый, яркий или темный желтый, а также красный.
  • Серый: нюансы красного, а также фиолетового и синего.
  • Беж: коричневый, бирюза, синий, красный, изумрудный.
  • Коричневый: голубой, беж, роза, изумруд.
  • Розовый: коричневый, мятный, бирюза.
  • Красный: темно- или нейтрально-зеленый, светло-желтый, приглушенно-синий, строгий серый.
  • Зеленый: оранж, желто-коричневый, кремовый.
  • Оранжевый и желтый: синие и фиолетовые краски.
  • Темно-синий: коричневый, серый, светло-желтый, голубой, оранж,
  • Голубой: строгий серый, красный, коричневый, роза, оранж, желтый, рубин, зеленый.
  • Фиолетовый: серый, золотисто-коричневый, светло-желтый, неброские оттенки голубого и зеленого.

Подбор цветов для сайта по спектральному кругу

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

Принцип первый — триада

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

Принцип второй — двойная система

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

Принцип третий — аналогия

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

Принцип четвертый — раздельное

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

Принцип пятый — прямоугольник

Здесь один колор является основным, два — дополнительными, а третий — акцентирующим.

Шестой принцип — квадрат

Самое динамичное сочетание, яркое, энергичное.

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

Существует несколько онлайн-сервисов, которые помогают дизайнерам в работе: Adobe Color, Paletton, Flat UI Color Picker, Color Palette Generator, Color Scheme и другие. Каждый онлайн-сервис работает на основе спектрального круга. Пользоваться инструментарием можно бесплатно. Веб-дизайнер легко и максимально быстро подберет сочетающиеся друг с другом оттенки.


Фоновый цвет для сайта: выбор и его критерии

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

  1. Светлый фон — это больше пространства и воздуха, а черный и темный фон подчеркивают элегантность.
  2. Если вы используете темный фон — не применяйте основной шрифт желтого, голубого, синего, красного оттенков. Текст будет нечитабельным.
  3. Для серьезного веб-проекта следует использовать однотонную подложку.
  4. Для информационных веб-ресурсов с большим количеством информации более приемлемы светлые оттенки (белый, беж, слоновая кость).
  5. На светлой основе хорошо читается текст серых или черных оттенков.
  6. Фон и шрифт на нем должны быть контрастными.
  7. При выборе основного цвета и ему сопутствующих руководствуйтесь тематикой веб-ресурса (зеленый — медицина, природа, финансы; розовый — женская; коричневый и желтый — пищевая промышленность и т.д.). Например, нелепо будет смотреться детский журнал на черном фоне или веб-проект про автомобили Лексус — на розовом.

Еще несколько правил по выбору цветовых палитр для сайта

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

Примеры хороших и плохих сайтов

Основные ошибки: слишком много красного, основной товар не ассоциируется с цветовым решением.

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

Этот вариант без комментариев.

Хорошее, приятное сочетание цветов. Зеленый цвет стандартно ассоциируется с финансами.

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

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

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

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

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

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

Веб-дизайн

28 окт. 2019

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

1. Color Hunt

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

2. Color Leap

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

3. Khroma

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




4. Culrs

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

Нажав на имя конкретной палитры в Culrs, URL-адрес меняется на пользовательский и вы можете поделиться ею с кем угодно!

5. Coolors

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

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

обучайся с нами профессии

UX/UI-дизайнер

Подробнее о курсе

Читайте другие статьи

Тенденции в дизайне Email-рассылок на 2022 год

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

Веб-дизайн

22 февр. 2022

Как изображения помогают пользователям ориентироваться на сайтах?

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

Веб-дизайн

23 июля 2021

Подборка сервисов с бесплатными мокапами, иконками, шрифтами

Один из способов оптимизировать работу веб-дизайнера — выделить время и найти, протестировать, выбрать лучшие сервисы с шрифтами, мокапами, иконками. Мы уже это сделали за вас! Идемте смотреть на результат?

Веб-дизайн

16 дек. 2019

Получайте первыми свежие статьи из нашего блога прямо на вашу почту

Никакого спама. Только ценные и полезные статьи для вас!

Трендовые цвета на 2022 год от Shutterstock для маркетологов и рекламодателей

19.11.2021

Оксана Харьковчук, редактор блога Webpromo


Американская компания Shutterstock назвала трендовые цвета на 2022 год. «Зеленый», «Бархатный фиолетовый», «Успокаивающий коралл» и «Тихоокеанский розовый» с наибольшей вероятностью привлекут внимание интернет пользователей и вызовут положительные эмоции в следующем году. Искусственный интеллект определил цветовые палитры 2022 года, а также трендовые цвета в 24 странах мира.

Содержание:

  1. Как и зачем определяют трендовые цвета года?
  2. Какие цвета станут трендовыми и зададут эстетику в 2022 году для маркетологов и рекламодателей?
  3. Лучшие трендовые цвета в мире


Читайте также: Тренды UI/UX дизайна на 2022 год: 15 актуальных инноваций


 

Как и зачем определяют трендовые цвета года?

Платформа бесплатных стоковых ресурсов Shutterstock анализирует разные объёмы данных для определения ключевых цветов, к которым будут стремиться дизайнеры, маркетологи и рекламодатели в новом году. В 2021 компания использовала искусственный интеллект Shutterstock.AI для изучения восприятия цветов и палитр в сети. Для маркетологов, экспертов в области брендинга (бренд-экспертов) и рекламодателей важно понимание тенденций и трендовых цветов, поскольку они формируют эстетику восприятия контента для своих клиентов.

Как искусственный интеллект Shutterstock.AI определяет главные трендовые цвета года? Сперва осуществляется анализ миллиона загруженных изображений, затем сравниваются пиксельные данные (точный оттенок каждого пикселя и кликабельность изображения). В результате формируется список оттенков, которые с большей вероятностью понравятся пользователям онлайна, будут выглядеть эстетично и приведут к большей кликабельности в 2022 году.

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

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

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


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


 

Какие цвета станут трендовыми и зададут эстетику в 2022 году для маркетологов и рекламодателей?

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

Загруженные на Shutterstock сцены природы, где зеленый цвет влияет на визуальную палитру, увеличиваются с каждым годом, например, популярность снимков с воздуха в горах выросла на 1,396%. Согласно данным, добавление в проекты немного зеленого цвета или лесной тематики (нефрит, мята, лайм, изумруд) сможет улучшить эффективность ваших рекламных кампаний, повысить CTR и конверсии.

Зеленый | Цветовые тренды Shutterstock 2022

1. Успокаивающий коралл или Calming coral 

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

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

Успокаивающий коралл | Цветовые тренды Shutterstock 2022

2. Velvet violet или Бархатный фиолетовый

Яркий пурпурный с розовым формируют самый смелый цвет — бархатно-фиолетовый или Velvet violet. Трендовый цвет похож на королевскую орхидею и напоминает о элегантности и роскоши.

Пурпурный оттенок привлекает внимание естественностью. Рекомендуется комбинировать или использовать вместе с зеленым оттенком (цвет изумруда).

Бархатный фиолетовый | Цветовые тренды Shutterstock 2022


Читайте также: Главные тренды UX/UI дизайна 2021 года


 

Лучшие трендовые цвета в мире

Shutterstock также определил лучшие трендовые цвета в 24 странах мира и показал как они выглядят:

  1. Аргентина (Argentina)

#20B2AA

  1. Австралия (Australia)

#FAF0E6

  1. Бразилия (Brazil)

#FFC0CB

  1. Канада (Canada)

#FFE4E1

  1. Чили (Chile)

#FFE4E1

  1. Франция (France)

#FAF0E6

  1. Германия (Germany)

#66CDAA

  1. Индия (India)

#FFC0CB

  1. Италия (Italy)

#FFB6C1

  1. Япония (Japan)

#F5DEB3

  1. Южная Корея (South Korea)

#FFEBCD

  1. Мексика (Mexico)

#FFC0CB

  1. Нидерланды (Netherlands)

#FFC0CB

  1. Норвегия (Norway)

#FFE4E1

  1. Россия (Russia)

#F4AF60

  1. Южная Африка (South Africa)

#FFA500

  1. Испания (Spain)

#F4A460

  1. Швейцария (Switzerland)

#4682B4

  1. Тайвань (Taiwan)

#FFDAB9

  1. Таиланд (Thailand)

#FFE4E1

  1. Турция (Turkey)

#FAF0E6

  1. Объединенные Арабские Эмираты (United Arab Emirates)

#FFC0CB

  1. Великобритания (United Kingdom)

#FFC0CB

  1. США (United States)

#FFE4E1

Детальнее посмотреть информацию о трендовых цветах в мире по решетке и номеру (например #20B2AA) можно на сайте ColorHexa.

 

Также читайте другие статьи в блоге Webpromo:

  • Ремаркетинг как инструмент мотивации. Основные преимущества и недостатки функции;
  • Тренды digital-маркетинга на 2022 год. Как подготовиться и что должен знать каждый маркетолог?;
  • 10 полезных трендов в контент-маркетинге на 2022 год. Какие инструменты использовать для продуктивного сотрудничества с клиентами?;

И подписывайтесь на наш Telegram-канал про маркетинг.

51 пример для вдохновения, разбор и предложения

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

Информационная вкладка Вы знали, что 93% покупателей считают, что именно цвет определяет их выбор, а 52% не вернутся на сайт, не удовлетворяющий требованиям эстетики. При этом, лучшими цветами для кнопки целевого действия («Подписаться», «Скачать» или «Отправить заявку») традиционно считаются красный, оранжевый и зеленый. Они увеличивают на 13.5% коэффициент конверсии мобильных пользователей, а в целом на 9%. На 6.5% чаще добавляется товар «В корзину». Компании BMI, HubSpot, Ript, и VegasSlotsOnline добились улучшения конверсии с 2,5% до 175%, поменяв лишь цвет CTA-кнопок.

Ссылка на источник

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

Главные 

Hum (ссылка http://humcreative.com/) 

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

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

Цветовое решение: 

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

Bubble (ссылка https://followbubble.com/) 

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

Цветовое решение: 

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

Huge (ссылка https://www.hugeinc.com/) 

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

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

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

Цветовое решение 

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

Born (ссылка Borngroup.com) 

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

Информационная вкладка. Вам также может быть интересно: 

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

 

Si Digital (ссылка https://sidigital.co/) 

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

Цветовое решение

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

Reestart (ссылка https://reestart.com/) 

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

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

Цветовое решение

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

Лендинги и посадочные страницы

Impact (ссылка https://www.impactbnd.com/) 

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

Цветовое решение 

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

SmartBug (ссылка https://www.smartbugmedia.com/)

Простая в оформлении, посадочная страница от SmartBug Media демонстрирует, как следует управлять вниманием и вовлеченностью посетителя. Мало текста, одна мысль на один экран прокрутки. Каждый элемент этой страницы – часть единой выстроенной логики. 

Цветовое решение 

Оранжевый CTA, как и в предыдущем примере, ясно и четко дает пользователю понять, куда нужно нажимать. Бирюзовый – вдохновляет. 

Campaign Creators (ссылка https://www.campaigncreators.com/)

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

Цветовое решение 

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

Pyxl (ссылка https://pyxl.com/) 

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

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

Цветовое решение 

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

Tomorrow People (ссылка https://www.tomorrow-people.com/)

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

Цветовое решение 

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

Блоги 

The Next Web (ссылка https://thenextweb. com/) 

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

Zazzle Media (ссылка https://www.zazzlemedia.co.uk/blog) 

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

Цветовое решение

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

Start Up Quote (ссылка https://startupquote.com/)

Start Up Quote – самый яркий пример в подборке. Простой для восприятия контент, который сильно напоминает формат Instagram Stories подан одновременно привлекательно и стильно. Нестандартный прием, который позволяет выделяться на фоне других ресурсов.

Цветовое решение

На черном фоне яркая плитка цитат смотрится еще эффектнее. Благодаря этому контрасту внимание посетителя моментально привлечено к главному – заголовкам. 

Adventure Digital Agency (ссылка http://blog.adventures.do/)

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

Цветовое решение

Классическое сочетание теплых желтого и оранжевого с холодным бирюзовым успокаивает и улучшает настроение. Они одновременно говорят 1) настройся на рабочий лад и 2) не переживай, тут не будет скучно! 

Выводы: ТОП 5 выигрышных цветовых сочетаний 

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

Палитра №1: #e2d810 – #d9138a – #12a4d9 – #322e2f.  

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

Автор:Stephen. 

Палитра №2: #1e3d59 – #f5f0e1 – #ff6e40 – #ffc13b. 

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

Автор: spoon lancer 

Палитра №3: #316879 – #f47a60 – #7fe7dc – #ced7d8

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

Автор: sheva™.

Палитра №4: #d13ca4 – #ffea04 – #fe3a9e

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

Автор:Litlast

Палитра №5: #408ec6 – #7a2048 – #1e2761

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

Автор: Mithum.

Поможем разработать современный сайт. Отправить заявку.

Главные страницы 

Mah Ze Dahr (ссылка https://mahzedahrbakery.com/) 

Главная страница пекарни Mah Ze Dahr – торжество элегантности и больших красивых фотографий хлебобулочных изделий. Именно эти фото отвечают за привлечение внимания (и, надо признать, аппетита!). При прокрутке страницы вниз навигационное меню и логотип, размещенный в центре, остаются на месте. Это упрощает навигацию по сайту, а бренд запоминается и ассоциируется с вкусной выпечкой. 

Цветовое решение

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

Blue Apron (ссылка https://www.blueapron.com/) 

Главная страница службы доставки еды сразу задает нужное настроение: «Закажите лучшее, что у нас есть, прямо сегодня!» При прокрутке страницы Blue Apron вниз, мы видим интерактивные визуальные изображения, которые с первых секунд передают основное послание бренда. 

Цветовое решение 

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

Orangina (ссылка http://orangina.eu/) 

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

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

Как результат – отлично оформленный контент, в который можно просто «позалипать». Очевидно, разработчики сайта позаботились о том, чтобы пользователям на сайте было весело (что вполне соответствует основному посылу бренда). 

Цветовое решение

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

Lighthouse Brewing Co (ссылка https://www.lighthousebrewing.com/) 

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

Цветовое решение 

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

Tio Luchin (ссылка http://tioluchin.com/) 

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

Цветовое решение

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

Chikenbot (ссылка https://www.chickenbot.it/) 

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

Цветовое решение

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

Посадочные, лендинги 

Bon appetit (ссылка https://www.bonappetit.com/)

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

У странички есть интересная фишка: если вы нажмете кнопку призыва к действию под любым из вариантов подписки, вы увидите, что текст кнопки поменяется на «Отличный выбор!». Маленькая деталь, но она работает на создание имиджа – вам это нравится, и вы чувствуете, что настроены к бренду уже чуть более дружелюбно. 

Misfit Juicery (ссылка https://misfitfoods.com/)

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

Цветовое сочетание 

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

HelloFresh (ссылка https://www.hellofresh.com/)

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

Форма удобная, понятная и простая для заполнения. 

Цветовое решение

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

RXBAR (ссылка https://www.rxbar.com/)

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

Больше ведь пользователям ничего не нужно. 

Цветовое решение

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

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

Сохраните себе эти пять топовых сочетаний, это самые актуальные палитры 2020 года: 

Палитра № 1: #efb5a3 – #f57e7e – #315f72. 

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

Автор: felipe_charria

Палитра №2: #edca82 – #097770 – #e0cdbe – #a9c0a6. 

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

Автор: Tomas Miliauskas

Палитра №3: #cf1578 – #e8d21d – #039fbe – #b20238

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

Автор: Holly McAlister

Палитра №4: #EAE7DC – #D8C3A5 – #8E8D8A – #E98074 – #E85A4F

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

Палитра №5: #844D36 – #474853 – #86B3D1 – #AAA0A0 – #8E8268

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

Поможем разработать красивый и аппетитный сайт. Отправить заявку.

Главные страницы 

Slack (ссылка https://slack.com/intl/en-ru/?eu_nc=1) 

Главная страница Slack – простейший дизайн с четким описанием того, на что направлено их решение, какие задачи решает и ясным призывом к действию «Начать работу». Для демонстрации качества и преимуществ компания указывает перечень своих заказчиков. 

Цветовое решение

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

Litmus (ссылка https://litmus.com/) 

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

Цветовое решение

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

Basecamp (ссылка https://basecamp.com/) 

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

Цветовое решение

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

Prezi (ссылка https://prezi.com/) 

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

Цветовое сочетание

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

Mint (ссылка https://www.mint.com/)

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

Цветовое решение

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

Boords (ссылка https://boords.com/)

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

Цветовое решение

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

Airtable (ссылка https://airtable. com/)

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

Цветовое решение

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

Intercom (ссылка https://www.intercom.com/)

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

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

Цветовое решение

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

Later (ссылка https://later.com/)

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

Блоги 

Engadget (ссылка https://www.engadget.com/)

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

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

TechCrunch (ссылка https://techcrunch.com/) 

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

Цветовое решение 

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

Adobe Spark (ссылка https://blog.adobespark.com/)

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

Цветовое решение

Яркие и красочные изображения эффектно смотрятся на максимально нейтральном светлом фоне. 

The Verge (ссылка https://www.theverge.com/) 

Яркие неоновые цвета – вот стиль блога The Verge. Палитра смотрится эффектно как на черном фоне (первый экран и подвал сайта), так и на белом фоне (основная часть блога). 

Цветовое решение

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

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

Палитра №1: #FBE8A6 – #F4976C – #303C6C – #B4DFE5 – #D2FDFF

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

Палитра №2: #F8E9A1 – #F76C6C – #A8D0E6 – #374785 – #24305E         

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

Палитра №3: #0B0C10 – #1F2833 – #C5C6C7 – #66FCF1 – #45A29E

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

Палитра №4: #1A1A1D – #4E4E50 – #6F2232 – #950740 – #C3073F

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

Палитра №5: #25274D – #464866 – #AAABB8 – #2E9CCA – #29648A

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

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

Главные страницы 

Hard Graft (ссылка https://www.hardgraft.com/) 

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

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

Цветовое решение

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

Pure Fix (ссылка https://www.purecycles.com/) 

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

Грамотно организованная верстка и чистый дизайн, что вполне соответствует бренду (pure – чистый)

The Born (ссылка https://www.bornshoes.com/) 

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

Sanctuary T Shop (ссылка https://www.shopsanctuaryt.com/) 

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

Цветовое решение

Отражает близость к природе, пробуждает аппетит. 

Посадочные страницы / лендинги 

Soko Glam (ссыдка https://sokoglam.com/)

Страница корейского салона красоты Soko Glam с первого экрана рассказывает о том, какие продукты и почему нужно приобрести. Дополнительные вкладки в процессе прокрутки о подборе средств, фото в стиле «до» и «после», а также лента из Instagram подогревают интерес и убеждают посетителей совершить покупку. 

Цветовое решение

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

Hubble (ссылка https://www.hubblecontacts.com/pages/home)

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

Цветовое решение 

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

Birchbox (ссылка https://www.birchbox.com/)

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

Цветовое решение

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

Цветовое решение для интернет-сайтов в сегменте E-commerce сильно зависит от того, в какой именно отрасли представлена компания. Мы постарались подобрать цветовые сочетания, подходящие самым разным направлениям: 

Палитра №1: #806543 – #33266E – #111111 – #542F34 – #A6607C

Гламурный и свежий взгляд на дизайн сайтов, цвета подчеркнут статус владельца. Отлично подойдет для fashion-индустрии (одежда, обувь, аксессуары…). Автор Apart

Палитра №2: #d9a5b3 – #1868ae – #c6d7eb

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

Палитра №3: #e3b448 – #cbd18f – #3a6b35

Комбинация цветов ассоциируется с деревьями и природой. Отлично подойдет для эко-ниши и органических продуктов. Автор: Martis Lupus

Палитра №4: #1F2605 – #1F6521 – #53900F – #A4A71E – #D6CE15

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

Палитра №5: #d72631 – #a2d5c6 – #077b8a – #5c3c92

Комбинация цветов, основанная на триаде, – отличное решение для цветочных мотивов и создания винтажного настроения. Автор: Mad pepper

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

Главные

Jeff Bridges Sleep Tapes (ссылка http://www.dreamingwithjeff.com/) 

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

Цветовое решение 

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

Justin Timberlake (ссылка https://justintimberlake.com/)

Страница Джастина Тимберлейка – пример адаптации артиста под самые актуальные свои работы (Man of the Woods). Используйте этот прием, если ваш продукт или бренд сильно зависит от времени года или каких-то важных отраслевых событий. 

Цветовое решение 

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

Блоги

Carbone (ссылка https://carbone.ink/) 

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

Цветовое решение

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

Brit + Co (ссылка https://www.brit.co/)

Отличный пример чистого и свободного от лишнего шума дизайна.

Каждая статья помечена темой-рубрикой (образ жизни, здоровье, дом и т. д.), что позволяет сузить фокус интересов. 

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

Цветовое решение

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

Apartment Therapy (ссылка https://www.apartmenttherapy.com/) 

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

Dwell (ссылка http://dwell.com/)

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

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

Палитра №1: #2E1114 – #501B1D – #64485C – #83677B – #ADADAD. 

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

Палитра №2: #2C3531 – #116466 – #D9B08C – #FFCB9A – #D1E8E2. 

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

Палитра №3: #D83F87 – #2A1B3D – #44318D – #E98074 – #A4B3B6

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

Палитра №4: #4285F4 – #5C2018 – #BC4639 – #D4A59A – #F3E0DC

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

Палитра №5: #b85042 – #e7e8d1 – #a7beae

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

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

7 потрясающих цветовых схем веб-сайтов 2022 + Color Mood Board

Веб-дизайн

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

Расчетное время чтения:   25 минут

Поделиться: 

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

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

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

Ниже приведены еще более удивительные инструменты, но вот самые крутые инструменты цветовой палитры Design, которые я видел в 2022 году — Happy Hues!

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

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

Содержание

7 новых цветовых схем на 2022 год

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

1. Синий электрик – Цветовая схема веб-сайта Cleo

Источник: WWD.
com Весна 2022 г. Как в моде, так и в цветовых тенденциях веб-дизайна вы можете ожидать увидеть множество традиционных оттенков (например, этот классический синий), а также яркие и смелые тона, которые оживляют любую цветовую схему, в которую они включены. 

Electric Blue: #373E98

Ярко-розовый: #F16775

Шокирующий желтый: #FEE36E

. Ярко-оранжевый – цветовая схема веб-сайта Bonjour Paris

Источник: Stylecaster.com

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

Black: #000000

Medium Gray: #565656

Light Gray: #9e9e9e

Hot Orange: #fba92c

White: #FFFFFF

3. Muted Green – Цветовая схема веб-сайта The Cool Hunter

Источник: Sherwin-Williams.com

Better Homes and Gardens курирует список всех «цветов 2022 года», объявленных на данный момент малярными компаниями. Безусловно, некоторые вариации этого приглушенного зеленого цвета кажутся наиболее популярными. Этот веб-сайт электронной коммерции включает этот популярный оттенок очень простым способом, используя фоновое изображение, показывая, что дизайн вашего веб-сайта не обязательно должен быть слишком сложным, чтобы выглядеть сплоченным и профессиональным, особенно при использовании правильных цветов.

Бежевый: #C8B7A6

Perriwinkle: #7D94B5

Dusty Rose: #C29591

Maroon Brown: #703F37

Maroon Brown: #703F37

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

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

Световой известь: #ABD699

Свежий лимон: #FFE26A

Тил: #75C9B7

MINT: #C7DDCC

3 MINT: #C7DDCC

3 MINT: #C7DDCC

9002 MINT: #C7DDCC

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

Источник: Pantone.com

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

Mauve: #A96762

Deep Blue: #2F5C8F

Мандарин: #D85C27

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

Источник: Fashionista.com

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

Крем: #F4D8AE

Tangerine: #DC7027

Pistachio: #B6C48E

PACHY: #8A81

9002 PACHY: #8A81

. Цветовая схема

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

«Цветок орхидеи обладает интенсивным, сверхреальным и заряжающим энергией качеством, которое будет выделяться как в реальной жизни, так и в цифровом окружении», — Джоанн Томас, руководитель отдела контента Coloro Soft Lilac: #f6ebf4

Purple: #482673

Orchid: #ed0b70

Digi Denim: #301008

Color Mood Board for 2022

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

8 новых цветовых схем на 2021 г.

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

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

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

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

Deep Red: #

29

Deep Red: #

2

. Pure Purple: #3C1874

Фиолетовый оценочный серый : #283747

Облако: #F3F3F3

2.

РЕВОД Earthtone и зеленый

RED.0042 #B73225

Blue Minded: #004E7C

Maroon 6: #591COB

СЕРЕДА: #5C5F58

LIGE от Gatto Web

Макияж Тан: #DDAF94

Blush: #E8CEBF

Бесплатный зеленый0042 #FDF8F5

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

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

СИНЕГО БЛИНА: #007CC7

СЛИЦА: # #007CC7

СЛИЦА: # #007CC7

СЛИЦА: #4DA8DA

ONDAREST: # #007CC7

ON. : #203647

Shadow of Light Blue: #EEFBFB

5. GreyScale + One (Yellow) 2021 Цветовая схема веб -сайта

Blatchshish: #2020203

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

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

Яйцо желтое: #ffd6c

Белый: #fffffffffff

6.

Greenerer warecient witer wite Smaw

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

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

светло -зеленый: #9DC88D

Натуральный желтый: #0,00003

: .0042 #ffffff

7. Зеленое + Жемчужное веб -сайт.

#DADED4

Белый: #ffffff

Цветовая плата настроения для 2021

9000 2

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


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

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

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

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

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

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

1. Минимальные цвета, мягкий пляж от Duminda Perera

Bright blue: #51e2f5

Blue Green: #9df9ef

Dusty White: #edf756

Pink Sand: #ffa8B6

Dark Sand: #a28089

2 . Минимальные цвета — фиолетовая цветовая схема 90 -х годов от Duminda Perera

ICE Cold: #A0D2EB

FREEZE PURPLE: #E5EF5

Средний Purple: #D0BDF4

9002 . #D0BDF4

: #D0BDF4

: #D0BDF4

: #D0BDF4 9000 2

: #D0BDF4 9000 2

.0042 #8458B3

Тяжелый фиолетовый: #A28089

3. Bright Power By Duminda Perera

YASS Queen: #FF1D58

Сестра сестра: #FF1D58

Сестра: #FF1D58

.

Синий свет: #00DDFF

Жестокий синий: #0049B7

 

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

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

Dimly Blue: #E8F9FD

Alert/Highlight Green: #59CE8F

5. Глобальный благотворительный сайт. :

#ffb766

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

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

0041 Pinky:

#FBE3E8

Blue Greeny: #5CBDB9

Teeny Green

Electric Red: #FF0028

Deep Green: #657A00

Сила синего: #1400C6

8.

Белое пространство, коричневый, пурпурный, желтый цвет схема веб -сайта

9002 9002 9002 9002 900 2 9002 9002 9.0041 Background Tan:
#fceed1

Purple-y: #7d3cff

Yellow Gloves: #f2d53c

Redhead: #c80e13

9. Deep blue and tan – color palette

Sand Tan: #e1b382

Sand Tan Shadow: #c89666

Night Blue: #2d545e

Night Blue Shadow: #12343b

10.Tan, pink and red color scheme

Ragin Beige: #FFF5D7

CORAL PINK: #FF5E6C

Sleathe Yellow: #Feb300

Pink Leaf: #Fffaaab

11. Pink Illazure, и Purse Weblemab

11. Pink Prink и Prine Illafortion, и Pury Prine

Grassy Green: #9BC400

Фиолетовые горы Величество: #8076A3

Гумая горная розовая: #F9C5BD

FACTORY PURPLE: #7C5BD

FACTORY Stone PURPLE: #7C67777770040 12. Яркая и красочная — схема для 2020 года

Зеленая трапа: #478559

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

. 13. Желтый, Красный/Розовый/Оранжевый – Яркая схема

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

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

Оранжевый кружок:

83 999042 #0ff882830002 White Layover: #ffffff

2019. Goldenrod Yellow:

#fbaf08

Bluebell Light Blue : #00a0a0

Bold 2019 Green: #007f4f

2. Lightning Blue Purple – Simple Web Color Palette