Какие цвета выбрать для сайта: Какие 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

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

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

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

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

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

Зависимость цвета сайта и его стиля от ЦА

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

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

Цветовая гамма для сайта: как выбрать?

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

Принцип выбора цветовой палитры в соответствии с ЦА

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

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

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

Сочетание цветов для сайта

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

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

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

Цветовые контрасты

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

Создавать контрасты цветов можно несколькими способами.

Цветовые тоны

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

Светлота тона

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

Температура тона

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

Интенсивность цвета

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

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

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

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

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

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

Красный

Эмоции: страсть, любовь или опасение, важность.

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

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

Оранжевый

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

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

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

Желтый

Эмоции: радость, счастье, энтузиазм.

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

Зеленый

Эмоции: спокойствие, благополучие, рост, стабильность.

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

Синий

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

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

Фиолетовый

Эмоции: богатство, помпезность, роскошь или тайна, мистика.

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

Темные цвета на сайте навевают романтику и таинственность.

Белый

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

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

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

Черный

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

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

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

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

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

1. Для начала следует определить основной цвет. Этот цвет, как правило, используется в большей мере, им могут выделяться основные заголовки или важная информация;
2. Выбираем вторичный цвет — цвет, которым будет выделяться второстепенная по важности информация;
3. Акцентирующий цвет — самый важный инструмент для привлечения внимания посетителя. Он должен быть контрастным, выделяющемся и на основном, и на фоновом цвете;
4. Фоновый — цвет, который преобладает на сайте, заполняя свободное пространство. Должен взаимодействовать со всеми выбранными оттенками, не привлекать на себя внимание.

Рассмотрим на примере использование всех цветов

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

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

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

Пример 1

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

Пример 2

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

Пример 3

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

Пример 4

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

Пример 5

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

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

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

Colorscheme

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

In Color Balance

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

Design Palette

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

Paletton

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

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

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

Понравилась статья? Ставьте лайки и подписывайтесь на наш блог!

Следующий проект:17 примеров лучших сайтов ресторанов и кафеПредыдущий проект:Правильная структура веб сайта под SEO: примеры, виды и 15+ рекомендации по разработке структуры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Красный

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

Оранжевый

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

Желтый

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

Зеленый

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

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

Синий

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

Фиолетовый

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

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

Розовый

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

Черный

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

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

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

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

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

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

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

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

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

Если говорить, о полезной информации, которая может пригодиться в процессе выбора цвета для сайта, и которой можно будет воспользоваться при оформлении веб-дизайна, то теорию цвета можно разделить на 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 и их аналогами. Но учтите, что гармония оттенков не даст вам гарантии того, что сайт понравится целевой аудитории и окупит расходы на разработку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Adobe Color

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

2. Colorscheme

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

3. Hailpixel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Женщины

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

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

Мужчины

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

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

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

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

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

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

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

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

Теперь ясно?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажмите на цветное колесико, чтобы увидеть коды цветов:
Скопируйте цветовые коды (HEX) для вашей цветовой схемы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как выбрать хорошие цветовые схемы для веб-сайтов (2021)

Как выбрать хорошие цветовые схемы для веб-сайтов (2021)

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

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

Почему важны цвета веб-сайта

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

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

Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий всплеск или снижение конверсии. Например, компания Beamax, производящая проекционные экраны, заметила колоссальный рост числа кликов по красным ссылкам на 53,1% по сравнению с синими ссылками.

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

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

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

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

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

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

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

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

• Красный: Coca-Cola или Nintendo — Подразумевает волнение или счастье
• Оранжевый : Nickelodeon или Fanta — Подразумевает, что впереди дружелюбное, веселое время
• Желтый: Nikon или McDonalds — Подразумевает оптимизм и счастье
• Зеленый: Whole Foods или Animal Planet — Подразумевает свежесть и природу
• Синий: Walmart или American Express — Подразумевает надежность и уверенность
• Фиолетовый: Hallmark или Cadbury — Подразумевает выдающийся бренд, который имеет историю качества
• Коричневый: Nespresso или UPS — Подразумевается, что надежный продукт может использоваться кем угодно
• Черный: Chanel или Adidas — Подразумевает роскошь или элегантность
• Белый: Apple или Nike — Подразумевает гладкие, удобные для пользователя продукты

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

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

Выберите дополнительные цвета

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

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

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

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

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

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

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

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

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

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

Выберите цвет шрифта

4. Выберите цвет шрифта

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

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

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

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

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

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

Используйте постоянную насыщенность

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

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

Используйте тот же цвет, но изменяйте насыщенность.

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

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

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

Дополнительные советы см. В нашей инфографике ниже.

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

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

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

Существует также Color Safe, еще один веб-сайт, который позволяет вам создавать и просматривать цвета по типу, что позволяет вам находить идеальный красный или зеленый цвет. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

Как выбрать цвет для вашего веб-сайта: Сводка

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

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

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

Часто задаваемые вопросы

Сколько цветов должно быть на сайте?

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

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

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

Какие цвета самые распространенные?

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

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

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

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

Введите свой адрес электронной почты

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

О Конни

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

Посмотреть все сообщения Конни →

Мы используем куки. Просматривая наш сайт, вы соглашаетесь на использование файлов cookie.

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

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

Это правда.

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

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

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

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

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

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

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

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

И так далее.

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

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

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

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

Его логотип.

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот о чем я.

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

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

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

4. Рассмотрим возрастную группу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Три.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот о чем я.

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

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

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

Еще бы зеленый и синий.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

6 советов по выбору потрясающей цветовой схемы веб-сайта

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

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

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

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

1. Познакомьтесь с основами психологии цвета
2. Познакомьтесь с теорией цвета
3. Подумайте о смешивании цветовых комбинаций
4. Будьте проще
5. Контрастите свои цвета
6. Добавьте свой брендинг

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

1. Изучите основы психологии цвета

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

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

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

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

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

2. Познакомьтесь с теорией цвета

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

Во-первых, вам необходимо понять первичных , вторичных и третичных цветов.

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

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

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

Во-вторых, давайте поговорим о теплых и холодных цветах.

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

В-третьих, важно понимать цветовых оттенков .

Не все цвета, которые вы видите, являются чистыми. Многие цвета, которые вы видите в Интернете, так или иначе пострадали.

Возможно, вы видите оттенок , (цвет с добавлением белого), оттенок , оттенок (цвет с добавлением черного) или оттенок , (цвет с добавлением серого).

Или вы можете видеть перенасыщенных цветов или ненасыщенных цветов . Насыщенность цвета — это яркость или тусклость цвета.

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

3. Подумайте о смешивании цветовых комбинаций

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

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

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

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

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

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

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

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

4. Будьте проще

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

У простоты есть два больших преимущества.

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

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

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

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

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

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

Эта цветовая схема одинакова для всего сайта.Вот как выглядит одно из сообщений в блоге:

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

Блог

Evernote — еще один отличный пример:

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

Желтый появляется часто, что делает эту цветовую схему аналогичной.

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

5. Контрастите свои цвета

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

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

Еще раз взгляните на сайт WordStream:

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

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

6. Добавьте свой брендинг

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

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

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

Полезно узнать, что сделали и другие бренды.Вот пример с Medium:

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

А теперь приступим к (цветному) проектированию!

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

Все, что осталось, — это пойти и сделать это.

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

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

Об авторе

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

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

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

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

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

–

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

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

Теплые тона

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

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

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

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

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

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

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

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

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

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

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

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

—

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

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

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

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

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

—

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контраст

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

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

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

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

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

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

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

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

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

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

—

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• белого,
• темно-серого,
• светло-серого (необязательно).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Color Guide Final Note

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

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

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

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

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

(rb, jb, ml, al)

Как выбрать один для своего сайта 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%

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

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

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

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

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

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

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

Colordot

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

Colorcode

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

Coolors

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

Canva

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

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

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

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

Adobe Color CC

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

Paletton

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

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

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

Dribbble

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

Khroma

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

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

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

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

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

Material Design

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

Colorsafe

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

Удачи!

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

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

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

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

.