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

Какие 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

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

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

Цветовая теория для «чайников»

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Контраст.

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

Дополнение.

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

Резонанс.

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

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

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

Какие эмоции вызывают цвета?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Инструменты для выбора цветовой гаммы веб-сайта

Воплотить теорию на практике и выбрать цвет для сайта можно даже онлайн. Сэкономьте время на создании собственной палитры и воспользуйтесь готовыми: Adobe Color CC, Paletton или Flat UI Color Picker. Если вам не понравятся эти инструменты, можете поискать в интернете другие — их там огромное количество.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

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

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

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

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

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

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

Что нужно знать о сочетании цветов

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

Усложнение цветового кольца: от первичного до третичного

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

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

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

• RGB, построена на трех основных цветах: красном, зеленом, синем. Все прочие оттенки образуются путем смешивания этих цветов.

  В HTML оттенки кодируются символами от 00 до FF, перед которыми вводится символ #.

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

Наглядный пример построения цветового сочетания на базе CMYK для оформления сайта: mirkleya.com.ua.

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

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

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

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

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

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

Цвета и психологические особенности их восприятия

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

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

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

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

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

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

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

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

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

Сколько цветов нужно выбрать для оформления?

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

Оптимальная рабочая палитра для дизайна сайта — это 3-4 цвета:

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

На подбор цвета сильно влияет основная цель сайта.

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

Лучшие цвета для оформления сайта можно подбирать самостоятельно или воспользоваться готовыми решениями сервисов: colourlovers.com, color.romanuke.com, paletton.com, flatuicolorpicker.com и их аналогами. Но учтите, что гармония оттенков не даст вам гарантии того, что сайт понравится целевой аудитории и окупит расходы на разработку.

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

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

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

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

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

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

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

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

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

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

Предлагаем обратить внимание на сервис, где отлично можно узнать цветовой код понравившегося цвета, особенно полезно когда нужен цвет для сайта HTML — https://www.materialui.co/htmlcolors (отличный сервис подбора цветов)

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

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

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

С течением трендов основной цвет ресурса заменили, но синий остался, чтобы разбавить всю «мрачность»:

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

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

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

• Белый цвет – символ чистоты и совершенства.

• Черный цвет характеризует власть, силу, изысканность.

• Серый цвет олицетворяет спокойствие и рассудительность.

• Красный – цвет страсти и импульсивности.

• Коричневый отождествляется с простотой, надежностью и стабильностью.

• Желтый цвет символизирует общительность, жизнерадостность и непринужденность.

• Синий цвет ассоциируется со спокойствием, надежностью и скромностью.

• Зеленый – это цвет независимости и гармонии.

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

Цвета в веб-дизайне

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

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

Белый цвет

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

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

Черный цвет

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

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

Серый цвет

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

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

Красный цвет

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

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

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

Коричневый цвет

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

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

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

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

Желтый цвет

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

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

Синий цвет

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

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

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

Зеленый цвет

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

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

Оранжевый цвет

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

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

Фиолетовый цвет и его оттенки

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

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

________

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

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

Какую цветовую гамму выбрать для сайта – База знаний Timeweb Community

Влияние цвета

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

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

Например, по статистике, 80% людей узнают бренд именно по цвету или нескольким оттенкам, которые используются в логотипе:

Психология целевой аудитории

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

Помимо этого, исследования показывают, что есть оттенки, которые воспринимаются людьми как «бедные» или «недорогие» (эти оттенки частично совпадают с теми, которые люди в целом не любят):

• оранжевый;
• желтый;
• коричневый.

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

Любимые оттенки у обоих полов:

• синий;
• зеленый;
• красный.

Женщинам — как уже было замечено выше — еще нравится фиолетовый цвет.

Хорошие оттенки для сайта

Синий

Самый любимый цвет у обоих полов. Это оттенок, который часто ассоциируется с техникой, технологиями и вебом в целом. У многих компаний и веб-сервисов (Facebook, Вконтакте, Skype, Twitter, LinkedIn и других) логотипы именно в сине-голубой гамме. Этот цвет вызывает доверие, ощущение комфорта и защищенности. Это корпоративный цвет, серьезный и спокойный. Идеальный для бизнеса.

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

Белый

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

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

Зеленый

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

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

Красный

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

Фиолетовый

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

Черный

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

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

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

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

Это же касается и коричневого цвета — «облачать» весь сайт в эту гамму не стоит, но отдельные коричневые элементы сделать можно, особенно если речь идет, например, о шоколаде:

А какой цвет вы выбрали для своего сайта и почему?

Цвета для сайта | Подбор цвета сайта

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

Цветовые предпочтения среди мужчин и женщин

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

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

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

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

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

Цветовые ассоциации

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

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

Для удобства выбора цветов сайта, разрабатывая бриф (см. страницу брифа на картинке слева), специалисты студии RBS-Webmarket учли рекомендации лидеров рынка и собственные наработки в этой области.

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

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

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

Пример	HTML-код	Эквивалентное название	Название цвета
	#000000	black	Черный
	#000080	navy	Темно-синий
	#00008B	darkblue	Темно-голубой
	#0000CD	mediumblue	Умеренно-голубой
	#0000FF	blue	Голубой
	#006400	darkgreen	Темно-зеленый
	#008000	green	Зеленый
	#008080	teal	Чайный
	#008B8B	darkcyan	Темный циан
	#00BFFF	deepskyblue	Темный небесно-синий
	#00CED1	darkturquoise	Темно-бирюзовый
	#00FA9A	mediumspringgreen	Умеренный синевато-серый
	#00FF00	lime	Известковый
	#00FF7F	springgreen	Весенний зеленый
	#00FFFF	aqua	Синий
	#191970	midnightblue	Ночной синий
	#1E90FF	dodgerblue	Тускло-васильковый
	#20B2AA	lightseagreen	Светлый морской волны
	#228B22	forestgreen	Лесной зеленый
	#2E8B57	seagreen	Морской волны
	#2F4F4F	darkslategray	Темный синевато-серый
	#32CD32	limegreen	Зеленовато-известковый
	#3CB371	mediumseagreen	Умеренный морской волны
	#40E0D0	turquoise	Бирюзовый
	#4169E1	royalblue	Королевский голубой
	#4682B4	steelblue	Голубовато-стальной
	#483D8B	darkslateblue	Темный серовато-синий
	#48D1CC	mediumturquoise	Умеренно-бирюзовый
	#4B0082	indigo	Индиго
	#556B2F	darkolivegreen	Темно-оливковый
	#5F9EA0	cadetblue	Блеклый серо-голубой
	#6495ED	cornflowerblue	Васильковый
	#66CDAA	mediumaaquamarine	Умеренно-аквамариновый
	#696969	dimgray	Тускло-серый
	#6A5ACD	slateblue	Серовато-синий
	#6B8E23	olivedrab	Тускло-коричневый
	#708090	slategray	Синевато-серый
	#778899	lightslategray	Светлый синевато-серый
	#7B68EE	mediumslateblue	Умеренный серовато-синий
	#7CFC00	lawngreen	Зеленой травы
	#7FFF00	chartreuse	Фисташковый
	#7FFFD4	aquamarine	Аквамарин
	#800000	maroon	Оранжево-розовый
	#800080	purple	Пурпурный
	#808000	olive	Оливковый
	#808080	gray	Серый
	#87CEEB	skyblue	Небесно-голубой
	#87CEFA	lightskyblue	Светлый небесно-синий
	#8A2BE2	blueviolet	Светло-фиолетовый
	#8B0000	darkred	Темно-красный
	#8B008B	darkmagenta	Темный фуксин
	#8B4513	saddlebrown	Старой кожи
	#8FBC8F	darkseagreen	Темный морской волны
	#9370DB	mediumpurple	Умеренно-пурпурный
	#9400D3	darkviolet	Темно-фиолетовый
	#98FB98	palegreen	Бледно-зеленый
	#9932CC	darkorchid	Темно-орхидейный
	#9ACD32	yellowgreen	Желто-зеленый
	#9CEE90	lightgreen	Светло-зеленый
	#A0522D	sienna	Охра
	#A52A2A	brown	Коричневый
	#A9A9A9	darkgray	Темно-серый
	#ADD8E6	lightblue	Светло-голубой
	#ADFF2F	greenyellow	Желто-зеленый
	#AFEEEE	paleturquise	Бледно-бирюзовый
	#B0C4DE	lightsteelblue	Светло-стальной
	#B0E0E6	powderblue	Туманно-голубой
	#B22222	firebrick	Огнеупорного кирпича
	#B8860B	darkgoldenrod	Темный красно-золотой
	#BA55D3	mediumorchid	Умеренно-орхидейный
	#BC8F8F	rosybrown	Розово-коричневый
	#BDB76B	darkkhaki	Темный хаки
	#C0C0C0	silver	Серебристый
	#C71585	mediumvioletred	Умеренный красно-фиолетовый
	#CD5C5C	indianred	Ярко-красный
	#CD853F	peru	Коричневый
	#D2691E	chocolate	Шоколадный
	#D2B48C	tan	Желтовато-коричневый
	#D3D3D3	lightgray	Светло-серый
	#D8BFD8	thistle	Чертополоха
	#DA70D6	orchid	Орхидейный
	#DAA520	goldenrod	Красного золота
	#DB7093	plaevioletred	Бледный красно-фиолетовый
	#DC143C	cornsilk	Малиновый
	#DCDCDC	fainsboro	Светлый серо-фиолетовый
	#DDA0DD	plum	Сливовый
	#DEB887	burlywood	Старого дерева
	#E0FFFF	lightcyan	Светлый циан
	#E6E6FA	lavender	Бледно-лиловый
	#E9967A	darksalmon	Темный оранжево-розовый
	#EE82EE	violet	Фиолетовый
	#EEE8AA	palegoldenrod	Бледно-золотой
	#F08080	lightcoral	Светло-коралловый
	#F0E68C	khaki	Хаки
	#F0F8FF	aliceBlue	Блекло-голубой
	#F0FFF0	honeydew	Свежего меда
	#F0FFFF	azure	Лазурь
	#F4A460	sandybrown	Рыже-коричневый
	#F5DEB3	wheat	Пшеничный
	#F5F5DC	beige	Бежевый
	#F5F5F5	whitesmoke	Белый дымчатый
	#F5FFFA	mintcream	Мятно-кремовый
	#F8F8FF	ghostwhite	Туманно-белый
	#FA8072	salmon	Оранжево-розовый
	#FAEBD7	antuqueWhite	Античный белый
	#FAF0E6	linen	Льняной
	#FDF5E6	oldlace	Старого коньяка
	#FF00FF	fuchsia	Фуксия
	#FF1493	deeppink	Темно-розовый
	#FF4500	orangered	Красно-оранжевый
	#FF6347	tomato	Томатный
	#FF69B4	hotpink	Ярко-розовый
	#FF7F50	coral	Коралловый
	#FF8C00	darkorange	Темно-оранжевый
	#FFA07A	lightsalmon	Светлый оранжево-розовый
	#FFA500	orange	Оранжевый
	#FFB6C1	lightpink	Светло-розовый
	#FFC0CB	pink	Розовый
	#FFD700	gold	Золотой
	#FFDAB9	peachpuff	Персиковый
	#FFDEAD	navajowhite	Грязно-серый
	#FFE4B5	moccasin	Болотный
	#FFE4C4	bisque	Бисквитный
	#FFE4E1	mistyrose	Туманно-розовый
	#FFEBCD	blanchedalmond	Светло-кремовый
	#FFEFD5	papayaawhip	Дыни
	#FFF0F5	lavenderblush	Бледный розово-лиловый
	#FFF5EE	seashell	Морской пены
	#FFF8DC	cornsilk	Темно-зеленый
	#FFFACD	lemonchiffon	Лимонный
	#FFFAF0	floralwhite	Цветочно-белый
	#FFFAFA	snow	Снежный
	#FFFF00	yellow	Желтый
	#FFFFE0	lightyellow	Светло-желтый
	#FFFFF0	ivory	Слоновой кости
	#FFFFFF	white	Белый

Выбор цвета для сайта — какой цвет выбрать для сайта

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

Цветовые круги

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

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

Что такое круг Ньютона?

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

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

• Чтобы выбрать 2 цвета, используется прямой радиус, подбираются 2 спектральных или пурпурных цвета (для более сложных цветовых моделей), расположенных друг напротив друга.
• Если нужно выбрать 3 цвета, рисуется равносторонний треугольник, и отбираются оттенки, которые находятся на вершинах этого треугольника.
• При подборе 4 цветов рисуется квадрат, который захватывает 2 пары оттенков друг напротив друга.

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

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

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

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

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

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

Чем отличается мужское и женское восприятие цвета

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

Особенности восприятия цветов мужчинами и женщинами, которые нужно учитывать при подборе корпоративных оттенков:

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

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

Как использовать эту информацию коммерческой компании?

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

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

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

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

Учитывая специфику бизнеса и основного продукта, подбирайте соответствующие цвета:

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

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

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

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

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

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

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

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

Главный и дополнительный цвета в оформлении сайта

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

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

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

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

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

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

Для подбора гармоничного акцентного цвета рекомендуется использовать полезные сервисы Adobe Color CC Tool и другие.

Вспомогательные цвета

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

Советы по выбору цвета

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

1. Для оформлении ресурса (сайта, интернет-магазина, лендинга, портала) достаточно подобрать 3-4 цвета по цветовым кругам. Один из низ будет основным, другие – вспомогательными и акцентными. Не нужно также выбирать слишком минималистичный вариант – иначе сайт будет выглядеть скучно, и все элементы будут сливаться.
2. Текстовые блоки нужно заливать черным, темно-синим или темно-зеленым цветом. Классический (наиболее привычный и комфортный) вариант – черный. Плохо читаются светлые цвета, особенно на пастельных и белых фонах. Достаточно сложно читать тексты, залитые белым или светлы цветом на черном или другом темном фоне (глаза быстро устают).
3. Цвета и их использование зависит от вида и назначения ресурса. Например, информационные сайты, блоги, медиаресурсы зачастую оформляются в белых или нейтральных тонах – чтобы привлечь внимание пользователей именно к текстовому наполнению. А интернет-магазины, используют яркие изображения продукции, контрастные цвета для форм захвата, корзины и других элементов, мотивирующих к целевому действию. Компаниям по оказанию услуг с яркими портфолио тоже подойдет пастельный или белый цвет фона.

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Похожие новости:

Как выбрать один для своего сайта WordPress

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

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

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

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

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

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

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

• Цвета, которые приятно дополняют и / или контрастируют друг с другом, улучшают впечатление от использования вашего сайта.
• Различные цвета имеют определенный оттенок и психологический эффект. Это означает, что вы можете использовать их, чтобы помочь людям почувствовать или думать определенным образом.
• Использование цветов для создания преднамеренного контраста для ваших призывов к действию (CTA) может помочь увеличить конверсию. Многочисленные тематические исследования показали, что определенные цветовые контрасты играют значительную роль в увеличении конверсии от 10% до более чем 50%.

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

Как выбрать цветовую схему для веб-сайтов (за 3 шага)

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

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

Выбор здесь будет зависеть от вашей темы. У нас установлена ​​тема Twenty Seventeen прямо сейчас, и мы можем изменить базовую цветовую схему с Light на Dark и отредактировать цвет текста заголовка.Мы также можем создать индивидуальную схему, выбрав определенный цвет.

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

Шаг 1. Выберите основной цвет для своего веб-сайта

Преимущественно белая цветовая гамма вызывает ощущение чистоты и эффективности.

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

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

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

Например, вот несколько наиболее распространенных цветов и их ассоциаций:

• Белый: Изысканность, эффективность, чистота.
• Черный: Гламур, безопасность, мощь.
• Синий: Доверие, открытость, спокойствие.
• Зеленый: Баланс, рост, финансы.
• Красный: Тепло, азарт, молодость.
• Фиолетовый: Романтика, тайна, качество.

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

Шаг 2: Выберите цветовую схему

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

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

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

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

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

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

.

Если вы ищете контрастные цвета, но хотите работать с более чем двумя или тремя вариантами, цветовая схема Compound станет хорошей золотой серединой:

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

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

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

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

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

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

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

Заключение

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

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

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

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

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%

, просто следуя простым советам.

Как выбрать отличную цветовую палитру для вашего веб-сайта (9 шагов)

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

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

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

Вот что мы расскажем:

1. Ускоренный курс теории цвета
2. Что такое палитра цветов?
3. Почему цветовая палитра важна для вашего сайта?
4. Как выбрать цветовую палитру за 9 шагов
5. Заключительные мысли

Приступим!

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

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

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

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

Давайте подведем итоги некоторых основных принципов теории цвета:

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

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

2. Что такое цветовая палитра?

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

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

Какие бывают типы цветовых палитр?

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

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

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

• Дополнительные: Дополнительные цветовые палитры, предназначенные для создания контраста, состоят из цветов, помещенных друг перед другом на цветовом круге.

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

• Triadic: Triadic цветовая схема основана на трех отдельных цветах, которые равноудалены на цветовом круге.

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

3. Почему цветовая палитра важна для вашего сайта?

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

Цветовые палитры составляют основу вашего бренда

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

Брендинг Airbnb от Design Studio

Цветовые палитры необходимы для хорошего взаимодействия с пользователем

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

Цветовые палитры обеспечивают единообразие

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

Цветовые палитры делают дизайн более эффективным

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

Цветовые палитры выгодно отличают вас от конкурентов

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

4. Как выбрать цветовую палитру за 9 практических шагов (с примерами)

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

Шаг 1. Познакомьтесь со своей пользовательской базой

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

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

Шаг 2. Вдохновляйтесь

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

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

Шаг 3. Используйте психологию цвета

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

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

.

• Апельсин энергичный и теплый. Некоторые общие ассоциации с оранжевым включают творчество, энтузиазм, беззаботность и доступность.
• Красный — цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и силой, но также и страстью, желанием и любовью.Некоторые общие ассоциации с красным включают действие, приключения, агрессию и азарт.
• Желтый вызывает позитив, молодость, радость, игривость, солнечный свет и тепло.
• Pink вызывает чувство невинности и нежности, благодарности, романтики, мягкости и признательности.
• Blue считается авторитетным, надежным и заслуживающим доверия. Общие ассоциации с синим включают спокойствие, безмятежность, уверенность, достоинство и безопасность.
• Зеленый — это цвет природы.Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление.
• Черный олицетворяет силу, элегантность и авторитет. Общие ассоциации с черным также включают класс, различие, формальность, тайну, секретность и серьезность.

Шаг 4. Начните с оттенков серого

Я знаю, о чем вы думаете; «Как использование оттенков серого поможет мне в выборе цветовой палитры?» но выслушай меня! Создание черновика в оттенках серого (с использованием различных оттенков серого для обозначения более светлых и темных цветов) позволит вам убедиться в удобстве использования, а не отвлекаться на общую эстетику веб-сайта.Начните с каркаса каждой страницы, тщательно продумайте макет каждого элемента и подумайте, как вы оптимизируете пустое пространство. В сочетании с хорошей цветовой палитрой четкая иерархия типов и элементов будет способствовать удобству использования.

Шаг 5. Подумайте, какие цвета подходят друг другу

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

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

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

Шаг 6: Добавьте немного контраста

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

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

Шаг 7. Используйте правило 60-30-1

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

Шаг 8: Соблюдаете ли вы соглашения о дизайне пользовательского интерфейса?

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

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

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

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

Шаг 9: Время пользовательского тестирования!

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

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

Источник: Анураг Гоял

5.Заключительные мысли

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

Чтобы узнать больше о цвете, ознакомьтесь с этими сообщениями в блоге:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Красный

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

желтый

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

оранжевый

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

Синий

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

зеленый

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

розовый

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

фиолетовый

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На веб-сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полное руководство, которое вам нужно

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

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

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

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

Что нужно учитывать при выборе цветовых схем веб-сайта

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

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

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

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

• Выбирайте цвета, которые гармонируют друг с другом.Прежде чем приступить к дизайнерской работе, узнайте о теории цвета.
• Люди не могут обрабатывать слишком много информации за один раз, поэтому используйте цвет для организации вашего веб-сайта
• Используйте контрастные цвета, чтобы текст был читабельным (например, королевский синий и желтый или любое сочетание сине-желтого цвета)
• Простая формула: использовать один светлый цвет на темном фоне и один яркий цвет, или наоборот, плюс акцентный цвет
• Еще одно правило — использовать один цвет для 60% веб-сайта, другой для 30% и третий для 10%

Перейти к разделам статьи

1. Синие цветовые схемы веб-сайта
2. Красные цветовые схемы веб-сайта
3. Желтые цветовые схемы веб-сайта
4. Зеленые цветовые схемы веб-сайта
5. Черно-белые цветовые схемы веб-сайта
6. Пастельные цветовые схемы веб-сайта
7. Сочетание цветов Цветовые схемы веб-сайта
8. Генераторы цветовых палитр

Синие цветовые схемы для веб-сайтов

Крошечный

Компания, стоящая за этим элегантным веб-сайтом, покупает интернет-бизнес.Он имеет синий фон с контрастным белым текстом. Цвет акцента — темно-синий.

iFly 50

Целевая страница iFly 50 встречает посетителей ярким изображением голубого неба и голубой воды. Этот веб-сайт — хороший пример сайта фотографа-натуралиста.

Ankr

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

Ahrefs

Ahrefs использует синий цвет на 60% веб-сайта.Белый цвет используется в 30% случаев и контрастирует с синим. А на оранжевый цвет акцента приходится 10%.

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

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

Наслаждайтесь образованием

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

Уайттейл Джин

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

NHS

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

Темно-синий

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

Ткацкий станок

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

Выемка

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

Любовь к Исландии

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

Grand Matter

Grand Matter — хороший пример двухцветной цветовой схемы веб-сайта.Цветовая палитра включает темно-синий и светло-розовый.

Андрис Гауракс

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

BlueReceipt

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

Точечное легкое

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

Готово

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

Тим Гровер

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

Бенедиктас Гилис

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

Креативные монетные дворы

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

Красный Цветовая схема веб-сайта

NUGGS

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

Sourisseaux Partners

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

Kloaq

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

Brand Aid

Brand Aid использует на своем веб-сайте ярко-красный цвет. Красный — это цвет фона при первом входе на сайт. Он также используется для кнопок анимации и призыва к действию.

вверх

Up — цифровой банк. Он использует коралловый цвет фона и ярко-желтый цвет акцента для текста и CTA.

Полевое руководство по веб-дизайну

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

Эмме

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

Эй, лапша

Hey Noodles использует смелые цвета. Красный и желтый цвета логотипа отображаются по всему сайту.

Партнеры по обработке данных

Data Partners предоставляет маркетинговые решения компаниям из списка Fortune 1000.Ярко-оранжевый подчеркивает важные аспекты и призывы к действию веб-сайта.

развернуть

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

Пицца Пицца

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

MKJ Creative

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

Сплайн

На целевой странице Spline на ярко-красном фоне отображаются черные буквы. По мере прокрутки вниз красный цвет превращается в черный фон с белыми буквами.

Портал CVI Холодильники

Красный цвет на этом сайте яркий. Он выделяет призывы к действию и добавляет яркости.

Прогресс Парад

Progress Parade предоставляет специализированных наставников.Красный оживляет анимацию этого сайта. Он также используется для CTA и текстовых заголовков. Использование цвета на этом веб-сайте создает организованный и привлекательный вид.

Дизайн Trionn

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

KitKat

Все узнают KitKat по красной упаковке. Соответственно, этот сайт весь красный.

Завуалированная судьба

Veiled Fate представляет собой стратегическую игру.Целевая страница имеет розово-красный цвет. При прокрутке вниз основными цветами становятся серый и светло-коричневый.

Зеленый лук

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

Кафе Руж

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

Work & Co

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

Желтые цветовые схемы для веб-сайтов

Разъёмная комплектация 2020

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

Синдикат ICO

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

Сделайте лимонад

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

думаю медведь

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

Алдай

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

Путевая точка

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

youbringfire

Youbringfire — это веб-сайт независимого дизайнера Скотта Бирсака. Целевая страница включает ярко-желтый фон и черные буквы.

Шелби Кей

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

Lordz

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

Лунная выставка

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

Адам Хартвиг ​​

На этом веб-сайте представлено портфолио дизайнера Адама Хартвига. Он имеет желтый фон и белые буквы с эффектами параллакса.

Проект «Крутой»

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

Ритуал

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

Малый Кос.

Small Cos. Перечисляет вакансии в небольших компаниях. Дизайн сайта прост. Бледно-желтый цвет привлекает внимание к анимации. При прокрутке вниз список вакансий выделяется светло-розовым цветом. Внизу страницы снова отображается бледно-желтая анимация.

Croscon

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

MateCaps

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

Creative Spark

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

Pebble Naturals

Pebble Naturals использует несколько цветов. Желтые, голубые и розовые полосы на страницах сайта.

Дизайн Identix

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

Лимонный пирог

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

eeerik

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

Mooze Design

Mooze Design — веб-сайт портфолио агентства. Огромный логотип по центру целевой страницы приветствует посетителей.Ярко-желтый цвет заполняет фон всего веб-сайта.

WØRKS

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

Зеленый Цветовые схемы веб-сайтов

Отходы Нет

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

Природа делает нас счастливыми

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

Обучаемый

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

Гекокард

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

Гели

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

Hopewell Brewing

Hopewell Brewing — это крафтовая пивоварня. На сайте преобладает темно-зеленый цвет.Светло-розовый акцентный цвет создает приятное сочетание цветов.

Смиренно здоровый

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

Фактор

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

Ferrumpipe

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

Взлетно-посадочная полоса, ML

RunwayML имеет в основном черный фон, но зеленые вкрапления оживляют этот веб-сайт.

Веб-разработка | Диего Диас

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

Практика

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

Бязь

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

RipePlanet

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

Кодибокс

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

WUNDER

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

Маркус

Маркус — рекламное агентство. Целевая страница открывается на желтовато-зеленом фоне с черными буквами.

Отделение тростникового искусства

У Reed Art Department простой веб-сайт. У него сероватый фон с зеленой окантовкой по всему периметру. При наведении курсора пункты меню выделяются зеленым.

Цветовые схемы черно-белого веб-сайта

Хорошая мера

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

Студия Bjork

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

Зыбучие пески

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

Duft & Co.

Duft & Co. продает домашнюю выпечку, обеды и кофе. Белый фон с черным текстом привлекает внимание к изображениям еды. Следуя обычной практике цветовой схемы веб-сайтов, конец веб-сайта меняется на черный фон и белый текст.

Статус

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

Обычный

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

натуральный

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

Креативное агентство G2K

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

Хохбург. Дизайн Force

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

Стекло

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

Maddad

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

ТВОРЧЕСКИЙ ПАРК

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

Воррел Прендергаст младший

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

Routalempi

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

Boynton Yards

При входе на веб-сайт Boynton Yards отображается белый текст на черном фоне. При прокрутке вниз цвета меняются местами. Черно-белая цветовая схема веб-сайта поддерживает простой и чистый веб-дизайн.

Пастельные цветовые схемы для веб-сайтов

Northstar

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

HETIME

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

Mailchimp представляет

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

Rideshur

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

Гаджинский

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

Ефрем Иосиф

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

Точечный

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

Очки Lunet

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

Ла Пьер Куи Турн

У этого сайта простой и приятный дизайн.Использование пастельно-зеленого, розового и желтого цветов делает этот сайт ярким.

Перелив

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

Студия создания двух

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

Эль Райо Текила

El Rayo Tequila использует множество пастельных тонов, чтобы сосредоточить внимание на текиле.

Происхождение

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

РуэдаФильм

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

Кроссовки Freaker

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

Санне Вейбенга

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

Сочетание цветов для веб-сайтов Цветовые схемы

Керамика Helbak

На этом сайте продается керамика от Malene Helbak. Цвета фона подчеркивают и дополняют цвета продаваемой керамики.

Факультет

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

Промышленный город

На веб-сайте

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

Аяка Б. Ито

На сайте

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

уровень

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

Bizzon

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

Вина Моллидукер

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

Ресторан на набережной

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

Базиевые ароматы

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

Под

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

Tens Солнцезащитные очки

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

Анимация

Animade — анимационная студия. Видео с их анимацией воспроизводится после входа на сайт.Каждая анимация полна цветовых комбинаций и развлекает посетителей.

Пабло Фламинго

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

Финн

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

Bonhomme

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

Rainbo

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

Шейпфест

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

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

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

Adobe Color CC

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

Охладитель

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

Colormind

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

Палетон

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

Color Hunt

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

ColorDrop.io

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

ColorSpace

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

Завершение мыслей об этих цветовых схемах веб-сайта

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

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

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

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

И это еще не все.

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

---

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

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

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

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

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

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

Так как же определить, какие цвета и какой ответ вы ищете?

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

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

Другие вещи, на которые следует обратить внимание

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

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

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

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

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

Видеоурок

Подписаться на WPBeginner

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

Создание цветовой схемы

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

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

1. Adobe Color CC

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

2. Фотокопия COLORLovers

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

3. Палитра материалов

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

4. Coolors.co

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Инфографика от The Logo Company

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

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

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

1. Как думать о цветовых схемах и своем бренде
2. Определение вашего целевого рынка (и их реакции на цветовые схемы)
3. Психология цвета
4. Как выбрать цветовую схему
5. Инструменты для выбора цветовой палитры
6. Как применить ваши цвета на вашем веб-сайте
7. Цветовые схемы для вдохновляющих веб-сайтов в 2019 году

---

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

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

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

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

Pro-tip: Чтобы избежать сюрпризов в будущем, попробуйте использовать анкету для клиентов, которая охватывает все, что вам нужно знать о бренде и существующих цветовых схемах. Эти 9 основных вопросов (плюс бесплатный шаблон!) Помогут вам начать с правильного пути.

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

«Выбор цвета всегда должен соответствовать ценностям бренда. ”

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

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

Например, возьмите Coca-Cola, один из самых популярных брендов в мире. Какой цвет приходит на ум?

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

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

Совет по новым брендам

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

Ознакомьтесь с 13 главными тенденциями дизайна

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

---

Определение вашего целевого рынка (и их реакции на цветовые схемы)

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

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

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

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

---

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

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

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

Вот обзор психологии цвета и того, что означают разные цвета:

• Красный: Яркий цвет, вызывающий сильные эмоции. Своей интенсивностью он создает ощущение безотлагательности.
• Оранжевый: Жизнерадостный и уверенный оранжевый передает идею энтузиазма. Однако это также может показаться цветом предостережения.
• Желтый: Как и оранжевый, желтый дает ощущение бодрости. Он олицетворяет оптимизм и обычно привлекает внимание. Однако следует учитывать, что некоторые оттенки могут утомлять глаза.
• Зеленый: Символизирует рост и природу. Это означает здоровье, безмятежность и умиротворение. Это связано с богатством.
• Синий: Этот цвет ассоциируется с водой и дает ощущение спокойствия и безмятежности. Синий создает чувство безопасности и доверия и часто используется в корпорациях.
• Бирюза: Изысканный, а также связанный с исцелением.
• Фиолетовый: Цвет богатства и успеха. Это яркий цвет, но он также олицетворяет творчество.
• Коричневый: Дружелюбный, землистый, обычно изображающий на открытом воздухе.
• Черный: Цвет, создающий изысканное ощущение. Мы часто думаем о «элегантных» брендах из-за их исключительности и загадочности.
• Серый: Обеспечивает ощущение безопасности, надежности и интеллекта.
• Белый: Придает ощущение чистоты или нейтральности. Это ключевой цвет, потому что он добавляет пространство для передышки и то, что называется «белым пространством».

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

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

---

Как выбрать цветовую схему

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

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

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

---

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

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

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

Палетон

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

Охладители

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

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

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

---

Как применить ваши цвета на вашем веб-сайте

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

Контрастность и доступность

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

Есть несколько инструментов, которые помогают с этим типом тестирования, но Contrast Checker довольно прост в использовании.

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

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

Хорошая отправная точка — разбить вещи на основной цвет, второстепенные цвета и нейтральные цвета.

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

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

---

Вдохновляющие цветовые схемы веб-сайтов в 2019 году

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

Wokine

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

Студия Style Maker

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

Джейсон Эндрюс

Сайт-портфолио

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

Кайл Рибант

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

Для еще большего вдохновения вы всегда можете взглянуть на доску цветовой схемы на Pinterest!

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

---

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

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

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

Знайте, какие эмоции вызывают цвета

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

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

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

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

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

Выберите свои доминирующие цвета

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

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

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

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

• Оттенки: Смешивание серого с чистым цветом
• Оттенок: Смешивание белого с чистым цветом
• Оттенки: Смешивание черного с чистым цветом

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

Выберите свой акцентный цвет (-а)

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

Акцентные цвета привлекают внимание к ключевым элементам (здесь оранжевый CTA)

Для вашего веб-сайта акцентные цвета лучше всего применять к таким элементам, как меню навигации, призывы к действию и другие важные элементы, которые вы хотели бы продемонстрировать.Отличный пример успешного применения акцентного цвета можно найти в шаблоне Design Conference от Wix.com (см. Больше шаблонов веб-сайтов здесь, и обязательно выберите лучший конструктор веб-сайтов). Красные акценты в меню показывают, в каком разделе страницы вы находитесь, а яркий призыв к действию «Купить билеты» требует нажатия.

Применитесь с правилом 60-30-10

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

Это хорошее практическое правило при применении вашей цветовой палитры.

Один хороший способ визуализировать это правило исходит от MMI Creative: «Представьте себе мужчину в деловом костюме: 60 процентов — брюки и пиджак, 30 процентов. это рубашка, а 10 процентов — это галстук ».Следуя этому правилу, вы сможете достичь баланса как по цвету, так и по содержанию для вашего сайта.

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

Эта статья была впервые опубликована в журнале net за 2017 год. Подпишитесь здесь .

Подробнее:

.

No related posts.