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

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

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+ рекомендации по разработке структуры

Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.Ru

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

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

Цветовой стандарт RAL начинает свою историю с 1927 года, когда специалистами из «Управления по торговым стандартам» Германии была впервые разработана коллекция, состоящая на тот момент из 40 цветов. С тех пор палитра RAL постоянно расширяется. Компания выпускает каталоги цветов, веера, содержащие примеры красок по RAL, разрабатывает и добавляет новые образцы.

На нашем сайте имеются все три современные цветовые шкалы, таблицы RAL с раскладкой по CMYK и RGB.

Каталог RAL CLASSIC в настоящее время содержит 213 цветов, в том числе 15 перламутровых, 5 люминесцентных, и 2 железных.

Имя цвета в таблице RAL CLASSIC состоит из четырёхзначного числа в сочетании с префиксом «RAL» (например, RAL 1037). Первая цифра является кодом оттенка (1 – желтые, 2 – оранжевые, 3 – красные, 4 – фиолетовые, 5 – синие, 6 – зелёные, 7 – серые, 8 – коричневые, 9 – белые и чёрные). Остальные три цифры выбраны последовательно. Русскоязычное имя цвета (например, «солнечно-жёлтый» для RAL 1037) не является нормативным, для обозначения цвета достаточно запомнить лишь цифры.

Жёлтые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 1000 Зелёно-бежевый	10  10  50  10	0   3  40  10	#CCC58F	204 197 143
	RAL 1001 Бежевый	0  20  50  20	10  20  40   0	#D1BC8A	209 188 138
	RAL 1002 Песочно-жёлтый	0  20  60  10	3  23  60   7	#D2B773	210 183 115
	RAL 1003 Сигнальный жёлтый	5  20  90   0	0  20 100   0	#F7BA0B	247 186  11
	RAL 1004 Жёлто-золотой	5  30 100   0	0  20 100  10	#E2B007	226 176   7
	RAL 1005 Медово-жёлтый	10  30 100   0	10  20  90   0	#C89F04	200 159   4
	RAL 1006 Кукурузно-жёлтый	5  30  90   0	0  30 100   0	#E1A100	225 161   0
	RAL 1007 Нарциссово-жёлтый	0  40 100   0	0  30 100   0	#E79C00	231 156   0
	RAL 1011 Коричнево-бежевый	30  40  70   0	20  50 100  10	#AF8A54	175 138  84
	RAL 1012 Лимонно-жёлтый	10  10  90   0	10  10 100   0	#D9C022	217 192  34
	RAL 1013 Жемчужно-белый	0   5  20  10	10  10  20   0	#E9E5CE	233 229 206
	RAL 1014 Слоновая кость	0  10  40  10	10  10  30   0	#DED09F	222 208 159
	RAL 1015 Светлая слоновая кость	0   5  30  10	10  10  20   0	#EADEBD	234 222 189
	RAL 1016 Жёлтая сера	10   0  90   0	10   0  80   0	#EAF044	234 240  68
	RAL 1017 Шафраново-жёлтый	0  30  70   0	0  30  90   0	#F4B752	244 183  82
	RAL 1018 Цинково-жёлтый	0   0  80   0	0   0  90   0	#F3E03B	243 224  59
	RAL 1019 Серо-бежевый	5  20  40  40	10  20  30   0	#A4957D	164 149 125
	RAL 1020 Оливково-жёлтый	1   5  30  40	10  10  50  25	#9A9464	154 148 100
	RAL 1021 Рапсово-жёлтый	0  10 100   0	0   0 100   0	#EEC900	238 201   0
	RAL 1023 Транспортно-жёлтый	0  10  90   0	0  10 100   0	#F0CA00	240 202   0
	RAL 1024 Охра жёлтая	30  40  70  10	0  20 100  25	#B89C50	184 156  80
	RAL 1026 Флуоресцентный (Fluorescent) Люминесцентный жёлтый	0   0 100   0	0   0 100   0	#F5FF00	245 255   0
	RAL 1027 Карри жёлтый	10  20  90  40	30  30 100   0	#A38C15	163 140  21
	RAL 1028 Дынно-жёлтый	0  30 100   0	0  20 100   0	#FFAB00	255 171   0
	RAL 1032 Жёлтый ракитник	0  30  90  10	0  20 100  10	#DDB20F	221 178  15
	RAL 1033 Георгиново-жёлтый	0  30  90   0	0  30 100   0	#FAAB21	250 171  33
	RAL 1034 Пастельно-жёлтый	0  30  80   0	0  30  60   0	#EDAB56	237 171  86
	RAL 1035 Жемчужный Глянец (Pearl Gloss) Перламутрово-бежевый	16  19  33  26	20  20  33  12	#A29985	162 153 133
	RAL 1036 Жемчужный Глянец (Pearl Gloss) Перламутрово-золотой	33  46  80  18	9  36  97  28	#927549	146 117  73
	RAL 1037 Солнечно-жёлтый	0  40 100   0	0  35  90   0	#EEA205	238 162   5
Оранжевые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 2000 Жёлто-оранжевый	0  50 100   0	0  40 100   0	#DD7907	221 121   7
	RAL 2001 Красно-оранжевый	0  80 100  20	0  70 100   0	#BE4E24	190  78  36
	RAL 2002 Алый	0  90 100  10	0  80 100   0	#C63927	198  57  39
	RAL 2003 Пастельно-оранжевый	0  52 100   0	0  60 100   0	#FA842B	250 132  43
	RAL 2004 Оранжевый	0  70 100   0	0  70 100   0	#E75B12	231  91  18
	RAL 2005 Флуоресцентный (Fluorescent) Люминесцентный оранжевый	0  75  75   5	0  50 100   0	#FF2300	255  35   0
	RAL 2007 Флуоресцентный (Fluorescent) Люминесцентный ярко-оранжевый	0  50 100   0	0  20  90   0	#FFA421	255 164  33
	RAL 2008 Ярко-красно-оранжевый	0  60 100   0	0  50 100   0	#F3752C	243 117  44
	RAL 2009 Транспортный оранжевый	5  70 100  10	0  60 100   0	#E15501	225  85   1
	RAL 2010 Сигнальный оранжевый	0  70 100  10	0  60 100   0	#D4652F	212 101  47
	RAL 2011 Насыщенный оранжевый	0  55 100   0	0  40 100   0	#EC7C25	236 124  37
	RAL 2012 Лососёво-оранжевый	0  60  70   0	0  80  80   0	#DB6A50	219 106  80
	RAL 2013 Жемчужный Глянец (Pearl Gloss) Перламутрово-оранжевый	0  80 100  40	10  80 100  10	#954527	149  69  39
Красные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 3000 Огненно-красный	0 100 100  20	0 100  90   0	#AB2524	171  37  36
	RAL 3001 Сигнальный красный	20 100  90  10	0 100  90   0	#A02128	160  33  40
	RAL 3002 Карминно-красный	10 100  90  20	0 100  90   0	#A1232B	161  35  43
	RAL 3003 Рубиново-красный	0 100 100  40	0 100  90  15	#8D1D2C	141  29  44
	RAL 3004 Пурпурно-красный	20 100 100  60	0 100  90  30	#701F29	112  31  41
	RAL 3005 Винно-красный	20 100  80  40	0 100  90  50	#5E2028	94  32  40
	RAL 3007 Чёрно-красный	60 100  70  80	50 100  90  40	#402225	64  34  37
	RAL 3009 Оксид красный	5  90 100  80	20 100  90  30	#703731	112  55  49
	RAL 3011 Коричнево-красный	20 100 100  40	0 100  90  30	#7E292C	126  41  44
	RAL 3012 Бежево-красный	5  50  50  10	20  60  50   0	#CB8D73	203 141 115
	RAL 3013 Томатно-красный	20  90 100  20	0 100 100  15	#9C322E	156  50  46
	RAL 3014 Розовый антик	0  70  30  10	10  70  40   0	#D47479	212 116 121
	RAL 3015 Светло-розовый	0  50  20  10	10  40  10   0	#E1A6AD	225 166 173
	RAL 3016 Кораллово-красный	0  90  90  20	0  90  90  10	#AC4034	172  64  52
	RAL 3017 Розовый	0  80  50  10	0  80  40   0	#D3545F	211  84  95
	RAL 3018 Клубнично-красный	5  90  70   5	0  90 100   0	#D14152	209  65  82
	RAL 3020 Транспортный красный	0 100 100  10	0  90  90   0	#C1121C	193  18  28
	RAL 3022 Лососёво-красный	0  60  70   0	0  70  60   0	#D56D56	213 109  86
	RAL 3024 Флуоресцентный (Fluorescent) Люминесцентный красный	0  80  90   0	0  70 100   0	#F70000	247   0   0
	RAL 3026 Флуоресцентный (Fluorescent) Люминесцентный ярко-красный	0  80 100   0	0  70 100   0	#FF0000	255   0   0
	RAL 3027 Малиново-красный	0 100  70  20	0 100  60  15	#B42041	180  32  65
	RAL 3028 Красный	5 100 100   0	5 100 100   0	#CB3334	203  51  52
	RAL 3031 Ориент красный	20 100  90  20	0  90  60  15	#AC323B	172  50  59
	RAL 3032 Жемчужный Глянец (Pearl Gloss) Перламутрово-рубиновый	10 100  90  50	10 100 100  30	#711521	113  21  33
	RAL 3033 Жемчужный Глянец (Pearl Gloss) Перламутрово-розовый	8  84  72  13	0  93  93   7	#B24C43	178  76  67
Фиолетовые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 4001 Красно-сиреневый	60  70   5  10	50  97  20   0	#8A5A83	138  90 131
	RAL 4002 Красно-фиолетовый	40 100  90   5	0 100  40  30	#933D50	147  61  80
	RAL 4003 Вересково-фиолетовый	10  70  10   0	7  90   0   0	#D15B8F	209  91 143
	RAL 4004 Бордово-фиолетовый	60 100  50  20	10 100   0  50	#691639	105  22  57
	RAL 4005 Сине-сиреневый	60 100   5  10	50  60   0   0	#83639D	131  99 157
	RAL 4006 Транспортный пурпурный	50 100   0  10	30 100   0   0	#992572	153  37 114
	RAL 4007 Пурпурно-фиолетовый	70 100  20  60	90   0  10  25	#4A203B	74  32  59
	RAL 4008 Сигнальный фиолетовый	60  90   0  10	30 100   0   0	#904684	144  70 132
	RAL 4009 Пастельно-фиолетовый	40  40  30   0	17  40  10  15	#A38995	163 137 149
	RAL 4010 Телемагента	10  90  30   0	0 100   0   0	#C63678	198  54 120
	RAL 4011 Жемчужный Глянец (Pearl Gloss) Перламутрово-фиолетовый	47  57   3   7	47  64   0   0	#8773A1	135 115 161
	RAL 4012 Жемчужный Глянец (Pearl Gloss) Перламутрово-ежевичный	50  50  20  23	54  57   3  26	#6B6880	107 104 128
Синие тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 5000 Фиолетово-синий	100  40   5  40	100  70  10  25	#384C70	56  76 112
	RAL 5001 Зелёно-синий	90  20   0  80	100  50  10  20	#1F4764	31  71 100
	RAL 5002 Ультрамариново-синий	100  70   0  40	100  90   0   0	#2B2C7C	43  44 124
	RAL 5003 Сапфирово-синий	100  50   0  80	90   0  10  25	#2A3756	42  55  86
	RAL 5004 Чёрно-синий	100 100  70  40	84  53  47  56	#1D1F2A	29  31  42
	RAL 5005 Сигнальный синий	100  40   0  40	90  60   0   0	#154889	21  72 137
	RAL 5007 Бриллиантово-синий	80  20   0  40	100  40   0  20	#41678D	65 103 141
	RAL 5008 Серо-синий	60   0   0  90	100  50  10  60	#313C48	49  60  72
	RAL 5009 Лазурно-синий	90  30  10  40	100  40  10  20	#2E5978	46  89 120
	RAL 5010 Горечавково-синий	100  40   5  40	100  70   0   0	#13447C	19  68 124
	RAL 5011 Стально-синий	100  60  10  80	96  46  10  40	#232C3F	35  44  63
	RAL 5012 Голубой	90  30  10  10	97  26   0   0	#3481B8	52 129 184
	RAL 5013 Кобальтово-синий	100  60   0  60	90   0  10  25	#232D53	35  45  83
	RAL 5014 Голубино-синий	50  20   0  40	64  41  11  12	#6C7C98	108 124 152
	RAL 5015 Небесно-синий	100  30   0  10	100  20   0   0	#2874B2	40 116 178
	RAL 5017 Транспортный синий	100  20   5  40	90  50   0   0	#0E518D	14  81 141
	RAL 5018 Бирюзово-синий	90  10  40  10	93   7  33   3	#21888F	33 136 143
	RAL 5019 Капри синий	100  50  20  10	100  30   0  20	#1A5784	26  87 132
	RAL 5020 Океанская синь	100   0  40  80	100  30  50  40	#0B4151	11  65  81
	RAL 5021 Водная синь	100  20  50  10	100   0  30  15	#07737A	7 115 122
	RAL 5022 Ночной синий	100 100  40  40	90   0  10  25	#2F2A5A	47  42  90
	RAL 5023 Отдалённо-синий	80  40  10  20	100  60  10   0	#4D668E	77 102 142
	RAL 5024 Пастельно-синий	70  20  10  20	63  17   7   8	#6A93B0	106 147 176
	RAL 5025 Жемчужный Глянец (Pearl Gloss) Перламутровый горечавково-синий	97  48  31  15	100  30  20  20	#296478	41 100 120
	RAL 5026 Жемчужный Глянец (Pearl Gloss) Перламутровый ночной синий	100  80   0  50	90   0  10  25	#102C54	16  44  84
Зелёные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 6000 Патиново-зелёный	80  20  60  20	98   8  68  17	#327662	50 118  98
	RAL 6001 Изумрудно-зелёный	90  30  90  10	100   0 100  15	#28713E	40 113  62
	RAL 6002 Лиственно-зелёный	90  40  90  10	90   0 100  25	#276235	39  98  53
	RAL 6003 Оливково-зелёный	80  50  80  20	50  40 100  40	#4B573E	75  87  62
	RAL 6004 Сине-зелёный	100  50  60  40	100  30  50  40	#0E4243	14  66  67
	RAL 6005 Зелёный мох	100  60  90  20	100  20  90  30	#0F4336	15  67  54
	RAL 6006 Серо-оливковый	90  80  90  20	80  70 100  60	#40433B	64  67  59
	RAL 6007 Бутылочно-зелёный	80  50  80  60	80  60 100  60	#283424	40  52  36
	RAL 6008 Коричнево-зелёный	70  50  70  80	100 100 100  75	#35382E	53  56  46
	RAL 6009 Пихтовый зелёный	90  50  90  60	100  60  80  60	#26392F	38  57  47
	RAL 6010 Травяной зелёный	70  10  80  40	70   0 100  25	#3E753B	62 117  59
	RAL 6011 Резедово-зелёный	70  30  70   5	50  13  70  20	#66825B	102 130  91
	RAL 6012 Чёрно-зелёный	100  80 100  20	100  50  80  60	#31403D	49  64  61
	RAL 6013 Тростниково-зелёный	40  20  60  40	40  40  70  10	#797C5A	121 124  90
	RAL 6014 Жёлто-оливковый	80  50  90  60	50  70 100  50	#444337	68  67  55
	RAL 6015 Чёрно-оливковый	80  60  70  40	100 100 100  75	#3D403A	61  64  58
	RAL 6016 Бирюзово-зелёный	100  30  80   0	100   0  70  15	#026A52	2 106  82
	RAL 6017 Майский зелёный	80  20 100  10	77   0  97   0	#468641	70 134  65
	RAL 6018 Желто-зелёный	70   0  90   0	60   0 100   0	#48A43F	72 164  63
	RAL 6019 Бело-зелёный	35   0  40   0	30   0  30   0	#B7D9B1	183 217 177
	RAL 6020 Хромовый зелёный	90  60  80  20	80  40 100  50	#354733	53  71  51
	RAL 6021 Бледно-зелёный	50  10  50  10	43  13  50   7	#86A47C	134 164 124
	RAL 6022 Коричнево-оливковый	90  80 100  20	70 100  90  75	#3E3C32	62  60  50
	RAL 6024 Транспортный зелёный	90  10  80  10	90 100  70   0	#008754	0 135  84
	RAL 6025 Папоротниково-зелёный	80  30  90  10	50  10 100  25	#53753C	83 117  60
	RAL 6026 Опаловый зелёный	100  30  70  40	100   0  70  15	#005D52	0  93  82
	RAL 6027 Светло-зелёный	60   0  30   0	50   0  20   0	#81C0BB	129 192 187
	RAL 6028 Сосновый зелёный	100  60 100   0	100  30 100  40	#2D5546	45  85  70
	RAL 6029 Мятно-зелёный	100  20 100   5	100   0 100   0	#007243	0 114  67
	RAL 6032 Сигнальный зелёный	90  10  80   0	90   0  70   0	#0F8558	15 133  88
	RAL 6033 Мятно-бирюзовый	80  20  50   0	90   0  40  17	#478A84	71 138 132
	RAL 6034 Пастельно-бирюзовый	60  10  40   0	50   0  20  10	#7FB0B2	127 176 178
	RAL 6035 Жемчужный Глянец (Pearl Gloss) Перламутрово-зелёный	90   0 100  75	90  10 100  30	#1B542C	27  84  44
	RAL 6036 Жемчужный Глянец (Pearl Gloss) Перламутровый опаловый зелёный	100  10  60  50	100  10  60  30	#005D4C	0  93  76
	RAL 6037 Зелёный	90   0 100   0	90   0 100   0	#008F39	0 143  57
	RAL 6038 Флуоресцентный (Fluorescent) Люминесцентный зелёный	100   0 100   0	100   0 100   0	#00BB2E	0 187  46
Серые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 7000 Серая белка	40  10  10  40	33   6   6  36	#7E8B92	126 139 146
	RAL 7001 Серебристо-серый	10   0   0  40	20   7   7  30	#8F999F	143 153 159
	RAL 7002 Оливково-серый	30  30  50  40	37  37  57  15	#817F68	129 127 104
	RAL 7003 Серый мох	30  20  40  40	27  20  40  40	#7A7B6D	122 123 109
	RAL 7004 Сигнальный серый	0   0   0  45	7   4   4  33	#9EA0A1	158 160 161
	RAL 7005 Мышино-серый	30  10  20  60	48  42  39  20	#6B716F	107 113 111
	RAL 7006 Бежево-серый	0  10  30  60	29  43  56  35	#756F61	117 111  97
	RAL 7008 Серое хаки	30  40  70  40	10  30  90  40	#746643	116 102  67
	RAL 7009 Зелёно-серый	20  50  40  80	60  50  70  32	#5B6259	91  98  89
	RAL 7010 Брезентово-серый	20   5  30  80	60  47  50  43	#575D57	87  93  87
	RAL 7011 Железно-серый	40  10  20  80	60  40  30  30	#555D61	85  93  97
	RAL 7012 Базальтово-серый	20   0  10  80	50  20  20  40	#596163	89  97  99
	RAL 7013 Коричнево-серый	10  10  40  80	50  60 100  50	#555548	85  85  72
	RAL 7015 Сланцево-серый	40  10  10  80	80  65  33  45	#51565C	81  86  92
	RAL 7016 Антрацитово-серый	60  30  30  80	100  50  30  60	#373F43	55  63  67
	RAL 7021 Чёрно-серый	50  10   5  95	100  90  70  50	#2E3234	46  50  52
	RAL 7022 Серая умбра	30  20  40  80	80  80 100  75	#4B4D46	75  77  70
	RAL 7023 Серый бетон	40  20  40  40	50  40  40   0	#818479	129 132 121
	RAL 7024 Графитовый серый	80  60  50  40	90  60  30  60	#474A50	71  74  80
	RAL 7026 Гранитовый серый	60  20  30  80	100  40  50  60	#374447	55  68  71
	RAL 7030 Каменно-серый	20  10  20  40	0   0  10  40	#939388	147 147 136
	RAL 7031 Сине-серый	60  30  30  40	68  52  41  18	#5D6970	93 105 112
	RAL 7032 Галечный серый	0   0  20  40	0   0  10  25	#B9B9A8	185 185 168
	RAL 7033 Цементно-серый	30  10  30  40	37  13  37  30	#818979	129 137 121
	RAL 7034 Жёлто-серый	5   5  40  40	0   0  30  40	#939176	147 145 118
	RAL 7035 Светло-серый	5   0   5  20	20  14  14   0	#CBD0CC	203 208 204
	RAL 7036 Платиново-серый	10  10  10  40	30  30  20  10	#9A9697	154 150 151
	RAL 7037 Пыльно-серый	30  20  20  40	11   8   8  46	#7C7F7E	124 127 126
	RAL 7038 Агатовый серый	30  10  20  20	30  22  22   0	#B4B8B0	180 184 176
	RAL 7039 Кварцевый серый	50  40  50  40	60  60  60   0	#6B695F	107 105  95
	RAL 7040 Серое окно	20   5  10  40	30  20  10  10	#9DA3A6	157 163 166
	RAL 7042 Транспортный серый A	30  10  20  40	17   9   9  33	#8F9695	143 150 149
	RAL 7043 Транспортный серый B	30  10  20  80	87  81  74  29	#4E5451	78  84  81
	RAL 7044 Серый шёлк	0   0  15  30	10  10  10  10	#BDBDB2	189 189 178
	RAL 7045 Телегрей 1	20  10  10  40	10   0   0  40	#91969A	145 150 154
	RAL 7046 Телегрей 2	30  10  10  40	31  18  14  25	#82898E	130 137 142
	RAL 7047 Телегрей 4	0   0   5  20	0   0   0  12	#CFD0CF	207 208 207
	RAL 7048 Жемчужный Глянец (Pearl Gloss) Перламутровый мышино-серый	32  32  39  27	18  18  31  34	#888175	136 129 117
Коричневые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 8000 Зелёно-коричневый	50  50  80  10	20  40  90  25	#887142	136 113  66
	RAL 8001 Охра коричневая	40  60  90  10	10  50 100  10	#9C6B30	156 107  48
	RAL 8002 Сигнальный коричневый	60  80  80  10	20  80 100  30	#7B5141	123  81  65
	RAL 8003 Глиняный коричневый	50  70  80  10	0  60 100  40	#80542F	128  84  47
	RAL 8004 Медно-коричневый	40  80  80  10	0  70 100  25	#8F4E35	143  78  53
	RAL 8007 Олень коричневый	60  70  80  20	0  70 100  40	#6F4A2F	111  74  47
	RAL 8008 Оливково-коричневый	50  60  70  20	30  60 100  10	#6F4F28	111  79  40
	RAL 8011 Орехово-коричневый	10  60 100  80	10  90 100  50	#5A3A29	90  58  41
	RAL 8012 Красно-коричневый	5 100 100  80	0 100 100  50	#673831	103  56  49
	RAL 8014 Сепия коричневый	30  60 100  80	40  70 100  50	#49392D	73  57  45
	RAL 8015 Каштаново-коричневый	0  90 100  80	10 100 100  50	#633A34	99  58  52
	RAL 8016 Махагон коричневый	40  80  80  80	30  90  90  50	#4C2F26	76  47  38
	RAL 8017 Шоколадно-коричневый	60  80  80  80	50 100  90  60	#44322D	68  50  45
	RAL 8019 Серо-коричневый	90  90  80  80	70 100  90  75	#3F3A3A	63  58  58
	RAL 8022 Чёрно-коричневый	100 100  80  95	70 100  90  75	#211F20	33  31  32
	RAL 8023 Оранжево-коричневый	20  70 100  20	0  70 100  10	#A65E2F	166  94  47
	RAL 8024 Бежево-коричневый	30  60  70  40	0  60 100  40	#79553C	121  85  60
	RAL 8025 Бледно-коричневый	40  50  60  40	7  60  93  43	#755C49	117  92  73
	RAL 8028 Терракотовый	20  50  70  80	40  80 100  50	#4E3B2B	78  59  43
	RAL 8029 Перламутровый медный	23  80  93  43	0  80 100  40	#773C27	119  60  39
Чёрные и белые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 9001 Кремово-белый	0   0  10   5	0   0  10   0	#EFEBDC	239 235 220
	RAL 9002 Светло-серый	5   0  10  10	3   3  10   7	#DDDED4	221 222 212
	RAL 9003 Сигнальный белый	0   0   0   0	0   0   0   0	#F4F8F4	244 248 244
	RAL 9004 Сигнальный чёрный	100  90 100  80	100 100 100  75	#2E3032	46  48  50
	RAL 9005 Чёрный янтарь	100 100 100  95	87  65  66  58	#0A0A0D	10  10  13
	RAL 9006 Железный блеск (Iron Glimmer) Бело-алюминиевый	0   0   0  40	0   0   0  20	#A5A8A6	165 168 166
	RAL 9007 Железный блеск (Iron Glimmer) Тёмно-алюминиевый	0   0   0  60	17  14  17  29	#8F8F8C	143 143 140
	RAL 9010 Белый	0   0   5   0	0   0   7   0	#F7F9EF	247 249 239
	RAL 9011 Графитно-чёрный	100 100 100  80	90 100  97  75	#292C2F	41  44  47
	RAL 9016 Транспортный белый	3   0   0   0	0   0   0   0	#F7FBF5	247 251 245
	RAL 9017 Транспортный чёрный	100  90 100  95	87  66  66  58	#2A2D2F	42  45  47
	RAL 9018 Папирусно-белый	10   0  10  20	7   4  10   6	#CFD3CD	207 211 205
	RAL 9022 Жемчужный Глянец (Pearl Gloss) Перламутровый светло-серый	21  14  14  31	10   7   7  28	#9C9C9C	156 156 156
	RAL 9023 Жемчужный Глянец (Pearl Gloss) Перламутровый тёмно-серый	8   6   6  57	20  10  10  40	#7E8182	126 129 130

Цвета HTML.

Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

HTML Имя Цвета HEX RGB Красные тона: IndianRed #CD5C5C 205, 92, 92 LightCoral #F08080 240, 128, 128 Salmon #FA8072 250, 128, 114 DarkSalmon #E9967A 233, 150, 122 LightSalmon #FFA07A 255, 160, 122 Crimson #DC143C 220, 20, 60 Red #FF0000 255, 0, 0 FireBrick #B22222 178, 34, 34 DarkRed #8B0000 139, 0, 0 Розовые тона: Pink #FFC0CB 255, 192, 203 LightPink #FFB6C1 255, 182, 193 HotPink #FF69B4 255, 105, 180 DeepPink #FF1493 255, 20, 147 MediumVioletRed #C71585 199, 21, 133 PaleVioletRed #DB7093 219, 112, 147 Оранжевые тона: LightSalmon #FFA07A 255, 160, 122 Coral #FF7F50 255, 127, 80 Tomato #FF6347 255, 99, 71 OrangeRed #FF4500 255, 69, 0 DarkOrange #FF8C00 255, 140, 0 Orange #FFA500 255, 165, 0 Жёлтые тона: Gold #FFD700 255, 215, 0 Yellow #FFFF00 255, 255, 0 LightYellow #FFFFE0 255, 255, 224 LemonChiffon #FFFACD 255, 250, 205 LightGoldenrodYellow #FAFAD2 250, 250, 210 PapayaWhip #FFEFD5 255, 239, 213 Moccasin #FFE4B5 255, 228, 181 PeachPuff #FFDAB9 255, 218, 185 PaleGoldenrod #EEE8AA 238, 232, 170 Khaki #F0E68C 240, 230, 140 DarkKhaki #BDB76B 189, 183, 107 Фиолетовые тона: Lavender #E6E6FA 230, 230, 250 Thistle #D8BFD8 216, 191, 216 Plum #DDA0DD 221, 160, 221 Violet #EE82EE 238, 130, 238 Orchid #DA70D6 218, 112, 214 Fuchsia #FF00FF 255, 0, 255 Magenta #FF00FF 255, 0, 255 MediumOrchid #BA55D3 186, 85, 211 MediumPurple #9370DB 147, 112, 219 BlueViolet #8A2BE2 138, 43, 226 DarkViolet #9400D3 148, 0, 211 DarkOrchid #9932CC 153, 50, 204 DarkMagenta #8B008B 139, 0, 139 Purple #800080 128, 0, 128 Indigo #4B0082 75, 0, 130 SlateBlue #6A5ACD 106, 90, 205 DarkSlateBlue #483D8B 72, 61, 139 Коричневые тона: Cornsilk #FFF8DC 255, 248, 220 BlanchedAlmond #FFEBCD 255, 235, 205 Bisque #FFE4C4 255, 228, 196 NavajoWhite #FFDEAD 255, 222, 173 Wheat #F5DEB3 245, 222, 179 BurlyWood #DEB887 222, 184, 135 Tan #D2B48C 210, 180, 140 RosyBrown #BC8F8F 188, 143, 143 SandyBrown #F4A460 244, 164, 96 Goldenrod #DAA520 218, 165, 32 DarkGoldenRod #B8860B 184, 134, 11 Peru #CD853F 205, 133, 63 Chocolate #D2691E 210, 105, 30 SaddleBrown #8B4513 139, 69, 19 Sienna #A0522D 160, 82, 45 Brown #A52A2A 165, 42, 42 Maroon #800000 128, 0, 0 Основные цвета: Black #000000 0, 0, 0 Gray #808080 128, 128, 128 Silver #C0C0C0 192, 192, 192 White #FFFFFF 255, 255, 255 Fuchsia #FF00FF 255, 0, 255 Purple #800080 128, 0, 128 Red #FF0000 255, 0, 0 Maroon #800000 128, 0, 0 Yellow #FFFF00 255, 255, 0 Olive #808000 128, 128, 0 Lime #00FF00 0, 255, 0 Green #008000 0, 128, 0 Aqua #00FFFF 0, 255, 255 Teal #008080 0, 128, 128 Blue #0000FF 0, 0, 255 Navy #000080 0, 0, 128

HTML Имя Цвета HEX RGB Зелёные тона: GreenYellow #ADFF2F 173, 255, 47 Chartreuse #7FFF00 127, 255, 0 LawnGreen #7CFC00 124, 252, 0 Lime #00FF00 0, 255, 0 LimeGreen #32CD32 50, 205, 50 PaleGreen #98FB98 152, 251, 152 LightGreen #90EE90 144, 238, 144 MediumSpringGreen #00FA9A 0, 250, 154 SpringGreen #00FF7F 0, 255, 127 MediumSeaGreen #3CB371 60, 179, 113 SeaGreen #2E8B57 46, 139, 87 ForestGreen #228B22 34, 139, 34 Green #008000 0, 128, 0 DarkGreen #006400 0, 100, 0 YellowGreen #9ACD32 154, 205, 50 OliveDrab #6B8E23 107, 142, 35 Olive #808000 128, 128, 0 DarkOliveGreen #556B2F 85, 107, 47 MediumAquamarine #66CDAA 102, 205, 170 DarkSeaGreen #8FBC8F 143, 188, 143 LightSeaGreen #20B2AA 32, 178, 170 DarkCyan #008B8B 0, 139, 139 Teal #008080 0, 128, 128 Синие тона: Aqua #00FFFF 0, 255, 255 Cyan #00FFFF 0, 255, 255 LightCyan #E0FFFF 224, 255, 255 PaleTurquoise #AFEEEE 175, 238, 238 Aquamarine #7FFFD4 127, 255, 212 Turquoise #40E0D0 64, 224, 208 MediumTurquoise #48D1CC 72, 209, 204 DarkTurquoise #00CED1 0, 206, 209 CadetBlue #5F9EA0 95, 158, 160 SteelBlue #4682B4 70, 130, 180 LightSteelBlue #B0C4DE 176, 196, 222 PowderBlue #B0E0E6 176, 224, 230 LightBlue #ADD8E6 173, 216, 230 SkyBlue #87CEEB 135, 206, 235 LightSkyBlue #87CEFA 135, 206, 250 DeepSkyBlue #00BFFF 0, 191, 255 DodgerBlue #1E90FF 30, 144, 255 CornflowerBlue #6495ED 100, 149, 237 MediumSlateBlue #7B68EE 123, 104, 238 RoyalBlue #4169E1 65, 105, 225 Blue #0000FF 0, 0, 255 MediumBlue #0000CD 0, 0, 205 DarkBlue #00008B 0, 0, 139 Navy #000080 0, 0, 128 MidnightBlue #191970 25, 25, 112 Белые тона: White #FFFFFF 255, 255, 255 Snow #FFFAFA 255, 250, 250 Honeydew #F0FFF0 240, 255, 240 MintCream #F5FFFA 245, 255, 250 Azure #F0FFFF 240, 255, 255 AliceBlue #F0F8FF 240, 248, 255 GhostWhite #F8F8FF 248, 248, 255 WhiteSmoke #F5F5F5 245, 245, 245 Seashell #FFF5EE 255, 245, 238 Beige #F5F5DC 245, 245, 220 OldLace #FDF5E6 253, 245, 230 FloralWhite #FFFAF0 255, 250, 240 Ivory #FFFFF0 255, 255, 240 AntiqueWhite #FAEBD7 250, 235, 215 Linen #FAF0E6 250, 240, 230 LavenderBlush #FFF0F5 255, 240, 245 MistyRose #FFE4E1 255, 228, 225 Серые тона: Gainsboro #DCDCDC 220, 220, 220 LightGrey #D3D3D3 211, 211, 211 LightGray #D3D3D3 211, 211, 211 Silver #C0C0C0 192, 192, 192 DarkGray #A9A9A9 169, 169, 169 DarkGrey #A9A9A9 169, 169, 169 Gray #808080 128, 128, 128 Grey #808080 128, 128, 128 DimGray #696969 105, 105, 105 DimGrey #696969 105, 105, 105 LightSlateGray #778899 119, 136, 153 LightSlateGrey #778899 119, 136, 153 SlateGray #708090 112, 128, 144 SlateGrey #708090 112, 128, 144 DarkSlateGray #2F4F4F 47, 79, 79 DarkSlateGrey #2F4F4F 47, 79, 79 Black #000000 0, 0, 0

Цвета Pantone — Онлайн каталог Pantone. Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

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

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

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

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

Таблица цветов Pantone

В таблице представлен Pantone Color Bridge Coated Process. Данный каталог цветов содержит лишь ближайшие CMYK и RGB аналоги к смесевым цветам. Далеко не каждый цвет из палитры Pantone возможно передать триадными красками, — цветовой диапазон смесевых цветов Pantone гораздо шире, чем у триадных красок CMYK.

Образец	Цвет Pantone	C	M	Y	K	HTML	R	G	B
	PANTONE 100	0	0	56	0	#FCEA76	252	234	118
	PANTONE 101	0	0	68	0	#FCE85F	252	232	95
	PANTONE 102	0	0	95	0	#FEE500	254	229	0
	PANTONE 103	5	5	100	16	#D0BC00	208	188	0
	PANTONE 104	7	13	100	28	#BBA30D	187	163	13
	PANTONE 105	13	18	88	45	#998730	153	135	48
	PANTONE 106	0	0	75	0	#FCE85D	252	232	93
	PANTONE 107	0	0	92	0	#FDE724	253	231	36
	PANTONE 108	0	5	98	0	#F9DA00	249	218	0
	PANTONE 109	0	9	100	0	#F8D500	248	213	0
	PANTONE 110	2	22	100	8	#DBB216	219	178	22
	PANTONE 111	8	21	100	28	#B69920	182	153	32
	PANTONE 112	10	20	100	40	#A48C1A	164	140	26
	PANTONE 113	0	2	83	0	#FAE34E	250	227	78
	PANTONE 114	0	4	87	0	#F9DE45	249	222	69
	PANTONE 115	0	6	87	0	#F8DB46	248	219	70
	PANTONE 116	0	14	100	0	#F5CB08	245	203	8
	PANTONE 117	6	27	100	12	#CDA31F	205	163	31
	PANTONE 118	7	28	100	30	#B48F1F	180	143	31
	PANTONE 119	17	22	100	47	#937F20	147	127	32
	PANTONE 120	0	5	64	0	#F7DD76	247	221	118
	PANTONE 121	0	8	70	0	#F6D86F	246	216	111
	PANTONE 122	0	11	80	0	#F5D258	245	210	88
	PANTONE 123	0	19	89	0	#F2C541	242	197	65
	PANTONE 124	0	30	100	0	#EDB220	237	178	32
	PANTONE 125	6	32	100	24	#BB9121	187	145	33
	PANTONE 126	11	31	100	36	#A7861D	167	134	29
	PANTONE 127	0	4	62	0	#FAE17B	250	225	123
	PANTONE 128	0	7	75	0	#F8D962	248	217	98
	PANTONE 129	0	11	78	0	#F6D15A	246	209	90
	PANTONE 130	0	32	100	0	#EDAC1A	237	172	26
	PANTONE 131	2	39	100	10	#D0941F	208	148	31
	PANTONE 132	9	38	100	32	#AB7F20	171	127	32
	PANTONE 133	19	37	100	59	#775F1F	119	95	31
	PANTONE 134	0	12	60	0	#F5D27A	245	210	122
	PANTONE 135	0	21	76	0	#F1C15C	241	193	92
	PANTONE 136	0	28	87	0	#EFB646	239	182	70
	PANTONE 137	0	41	100	0	#EAA124	234	161	36
	PANTONE 138	0	52	100	0	#E68C28	230	140	40
	PANTONE 139	7	49	100	25	#B27827	178	120	39
	PANTONE 140	19	49	100	54	#7D5A25	125	90	37
	PANTONE 141	0	16	65	0	#F5CD66	245	205	102
	PANTONE 142	0	24	78	0	#F2BF4C	242	191	76
	PANTONE 143	0	32	87	0	#F0B336	240	179	54
	PANTONE 144	0	51	100	0	#EA961C	234	150	28
	PANTONE 145	4	53	100	8	#D08921	208	137	33
	PANTONE 146	7	50	100	34	#A97620	169	118	32
	PANTONE 147	19	38	90	58	#786428	120	100	40
	PANTONE 148	0	17	43	0	#F4D199	244	209	153
	PANTONE 149	0	24	51	0	#F2C688	242	198	136
	PANTONE 150	0	41	78	0	#EDAA50	237	170	80
	PANTONE 151	0	60	100	0	#E88D21	232	141	33
	PANTONE 152	0	66	100	0	#E68523	230	133	35
	PANTONE 153	5	64	100	17	#C17723	193	119	35
	PANTONE 154	8	66	100	41	#9D6120	157	97	32
	PANTONE 155	0	12	34	0	#F5D7A5	245	215	165
	PANTONE 156	0	23	49	0	#F1C382	241	195	130
	PANTONE 157	0	42	74	0	#EBA344	235	163	68
	PANTONE 158	0	62	95	0	#E47E1A	228	126	26
	PANTONE 159	1	72	100	7	#D0651E	208	101	30
	PANTONE 160	6	71	100	31	#AB5A20	171	90	32
	PANTONE 161	16	67	100	71	#66401D	102	64	29
	PANTONE 162	0	25	35	0	#F0C4A0	240	196	160
	PANTONE 163	0	44	52	0	#EBA677	235	166	119
	PANTONE 164	0	59	80	0	#E68A48	230	138	72
	PANTONE 165	0	70	100	0	#E37828	227	120	40
	PANTONE 166	0	76	100	0	#E06C2A	224	108	42
	PANTONE 167	5	77	100	15	#BB5D29	187	93	41
	PANTONE 168	12	80	100	60	#6F3B20	111	59	32
	PANTONE 169	0	30	26	0	#EEBCA8	238	188	168
	PANTONE 170	0	48	50	0	#E89C77	232	156	119
	PANTONE 171	0	61	72	0	#E4834E	228	131	78
	PANTONE 172	0	73	87	0	#E06E37	224	110	55
	PANTONE 173	0	82	94	2	#D7572B	215	87	43
	PANTONE 174	8	86	100	36	#9C4124	156	65	36
	PANTONE 175	18	79	78	56	#77402E	119	64	46
	PANTONE 176	0	35	18	0	#EDB9B4	237	185	180
	PANTONE 177	0	54	38	0	#E7948A	231	148	138
	PANTONE 178	0	70	58	0	#E27865	226	120	101
	PANTONE 179	0	87	85	0	#DD5143	221	81	67
	PANTONE 180	3	91	86	12	#C1433C	193	67	60
	PANTONE 181	21	93	88	50	#80352F	128	53	47
	PANTONE 182	0	31	8	0	#ECBEC5	236	190	197
	PANTONE 183	0	49	17	0	#E79CA6	231	156	166
	PANTONE 184	0	73	32	0	#DF6B7C	223	107	124
	PANTONE 185	0	93	79	0	#D93740	217	55	64
	PANTONE 186	2	100	85	6	#C92A39	201	42	57
	PANTONE 187	7	100	82	26	#AC2B37	172	43	55
	PANTONE 188	16	100	65	58	#7D2935	125	41	53
	PANTONE 189	0	39	10	0	#EBB3BC	235	179	188
	PANTONE 190	0	56	18	0	#E58F9E	229	143	158
	PANTONE 191	0	79	36	0	#DE6276	222	98	118
	PANTONE 192	0	94	64	0	#DB3B50	219	59	80
	PANTONE 193	2	99	62	11	#C32E4C	195	46	76
	PANTONE 194	8	100	55	37	#9D2945	157	41	69
	PANTONE 195	19	90	50	55	#7E3545	126	53	69
	PANTONE 196	0	23	6	0	#EFCAD0	239	202	208
	PANTONE 197	0	46	12	0	#E8A1B0	232	161	176
	PANTONE 198	0	82	37	0	#DC5672	220	86	114
	PANTONE 199	0	100	72	0	#D82949	216	41	73

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

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

 

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

 

 

 

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

 

 

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

 

 

 

 

 

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

 

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

 

 

Грамотно и правильно подобранное цветовое решение не только создаст сам сайт привлекательным и интересным для посетителей, но и сделает бренд в целом узнаваемым и запоминающимся. Согласно статистике, в более чем 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

 

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

 

 

 

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

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

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

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

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

На что влияет выбор цветовой палитры

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

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

50 великолепных цветовых схем для дизайна вашего сайта

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

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

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

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

2. Яркие цвета с сильным акцентом

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

3. Природные и земные цвета

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

4. Свежие и лаконичные цвета

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

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

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

6. Черные с ярким акцентом

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

7. Стильные и утонченные

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

8. Оттенки красновато-коричневого

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

9. Мистические темные цвета

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

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

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

11. Живые и привлекательные цвета

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

12. Поразительно простые цвета

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

13. Оттенки живого красного

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

14. Вычурные и креативные

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

15. Элегантные и доступные

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

16. Футуристические цвета

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

17. Инновационные и смелые

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

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

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

19. Теплые оттенки и минимализм

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

20. Яркие и контрастные цвета

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

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

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

22. Традиционная бизнес-классика

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

23. Глубокий сдержанный синий

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

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

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

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

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

26. Веселые и задорные цвета

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

27. Минималистичные контрастные цвета

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

28. Эффектные цвета с четким акцентом

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

29. Современные и актуальные цвета

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

30. Природные естественные цвета

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

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

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

32. Уникальная необычная комбинация цветов

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

33. Яркие цитрусовые цвета

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

34. Энергичные голубые и апельсиновые цвета

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

35. Оттенки бородово-красного и и синего

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

36. Дерзкие, смелые и современные

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

37. Веселые и энергичные

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

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

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

39. Богатство насыщенных красок

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

40. Элегантный минимализм

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

41. Простые и бесстрашные цвета

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

42. Плоские и простые цвета

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

43. Комфортный и спокойный

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

44. Классический и традиционный

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

45. Популярные акцентные цвета

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

46. Серьезный корпоративный

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

47. Гламурные и стильные цвета

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

48. Привлекательный и насыщенный

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

49. Контрастные кислотные цвета

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

50. Оптимистичные, живые успокаивающие цвета 

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

Публикация адаптирована в веб-студии АВАНЗЕТ на основе опыта гуру индустрии дизайна и статьи Найоми Чибана. Вдохновляйтесь вместе с visme и найдите для себя идеальную цветовую палитру!

11.07.2021

← Поделиться с друзьями !

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

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

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

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

 

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

1. Active Theory

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

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

2. Paypr

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

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

3. Resn

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

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

4. Grosse Lanterne

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

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

5. W&CO

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

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

6. Stinkdigital

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

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

7. Bordel Studio

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

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

8. ReedBe

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

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

9. Samsy

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

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

10. Bryan James

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

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

11. Anton & Irene

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

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

12. Bert

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

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

13. BrightMedia 

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

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

14. Julie Flogeac

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

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

15. Epic

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

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

16. MediaMonks

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

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

17. eDesign Interactive

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

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

18. HAUS

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

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

19. Gusto Ids

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

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

20. FCINQ

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

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

21. Change Digital

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

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

22. Watson/DG

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

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

23. Supremo  

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

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

24. Umwelt A/S

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

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

25. Waaark           

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

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

26. Five Hundred 

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

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

27. Immersive Garden

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

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

28. SMFB

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

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

29. Nurture Digital 

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

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

30. Born05

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

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

31. Stinkdigital

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

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

32. AILOVE

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

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

33. Superhero Cheesecake

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

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

34. Burocratik

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

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

35. Google Brand Studio

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

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

36. Details

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

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

37. Cher Ami

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

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

38. Leavingstone

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

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

39. Elespacio

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

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

40. SFCD  

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

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

41. Great Works Copenhagen

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

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

42. Resn

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

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

43. Play

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

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

44. details.ch

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

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

45. stinkdigital

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

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

46. EPIC

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

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

47. Apart

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

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

48. FUTURAMO

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

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

49. Panic

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

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

50. madeo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Об авторе

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

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 — эффективные платные стратегии с четкой окупаемостью инвестиций.

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

Лучшие цветовые палитры для повышения вовлеченности веб-сайтов (2020)

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

Вы ошеломлены количеством возможных цветовых палитр веб-сайта?

У всех есть любимые цвета, к которым они стремятся, когда дело касается работы или чего-то еще.

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

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

Хороший выбор цвета требует тщательного планирования.

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

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

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

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

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

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

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

Вот как:

1. Повышение узнаваемости бренда

Ваш сайт — это, по сути, дом вашей компании в Интернете.

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

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

К счастью, цвет повышает узнаваемость бренда на 80%.

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

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

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

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

Конечно, веб-дизайн — это гораздо больше, чем просто цвет.

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

2. Сформируйте отношение посетителей к вашему сайту

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

В определенной степени причина этого ясна.

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

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

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

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

Это напрямую связано с «индивидуальностью» вашего бренда.

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

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

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

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

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

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

На самом деле 57% мужчин и 35% женщин считают, что это их любимый цвет.

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

Также стоит отметить, что синий цвет также часто ассоциируется с чувством доверия, авторитета и надежности.

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

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

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

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

3. Развивайте чувство порядка

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

Лучший способ сделать это — изучить несколько основных принципов теории цвета.

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

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

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

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

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

При этом аналогичные цветовые схемы также являются одними из самых ярких.

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

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

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

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

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

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

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

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

Триадная цветовая схема — один из основных вариантов.

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

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

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

4.Выделение определенных элементов

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

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

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

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

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

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

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

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

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

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

5. Упростите конструкторские решения

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

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

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

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

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

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

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

Сколько цветов нужно добавить?

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

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

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

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

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

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

16 отличных цветовых палитр для повышения заинтересованности веб-сайтов (2020)

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

1. Меа Чаппа

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

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

2. Большая вершина

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

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

3.Глаз Тори

Наш третий пример взят из инструмента визуализации Twitter Tori’s Eye. Это отличный пример преимущественно монохромной цветовой схемы. Здесь мы видим эффекты простой, но мощной цветовой палитры, сосредоточенной вокруг оттенков зеленого.

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

4. BarkBox

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

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

5. Набор для выживания с сыром

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

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

6. Северный рубин

У конференции

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

7. Озеро Нона

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

8. Лимонная стойка

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

9. Монетный двор

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

10. Одопод

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

11. Fiverr

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

12. Школа цифровой фотографии

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

13. Ahrefs

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

14. Millo.co

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

15.Брайан Гарднер

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

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

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

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

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

Во-первых, нужно ли вам вдохновение?

1: BrandColors

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

Ищете готовую палитру?

2: ColourLovers

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

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

3: ColoRotate

ColoRotate поставляется с библиотекой цветовых схем, которые вы можете просматривать, выбирать и изменять.Если вы хотите создать свой собственный с нуля, вы можете это сделать с помощью инструмента 3D-цвета. И вы можете использовать схему, созданную вами прямо в PhotoShop или Fireworks, с плагином ColorRotate и приложением для iPad.

Соответствие вашему бренду

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

4: Охотник за цветом

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

5: Живописный

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

Эти инструменты будут генерировать целые цветовые палитры.

6: Цветовое колесо Adobe Color CC

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

7: Палеттон

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

8: Color Spire

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

9: Цветовая сфера MudCube

(Источник: http://htmlcolorcodes.com/resources/best-color-palette-generators/)

MudCube’s Color Sphere — это плагин для Chrome, который помогает гармонизировать цвета, контролировать дальтонизм и определять шестнадцатеричные коды. Вы также можете экспортировать цветовые схемы прямо в Illustrator, PhotoShop и CoIRD.com.

10: Сплошные цвета

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

11: Генератор шестнадцатеричных цветовых схем

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

Создайте свои цвета

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

12: Цветное приложение

Этот инструмент iOS позволяет принимать точные решения между похожими цветами, четко распределяя их с некоторым промежутком между ними, а не градиентами, как в цветовых кругах и сферах. Большие цветные сетки позволяют использовать весь экран (пользователи iPad Pro, радуйтесь!), А также позволяют выбирать цвета, находить значения RGB, Hex и HSLA и создавать цветовые палитры с нуля.

13: Цвет

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

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

Получить коды для цвета

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

14: SpyColor

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

15: цветовые коды HTML

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

Проверьте свою палитру

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

16: Проверь мои цвета

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

… который в основном просматривает весь код вашего сайта и оценивает все визуальные элементы на нем по видимости.

Соответствующие изображения

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

17: TinEye

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

18: Дизайн

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

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

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

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

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

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

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

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

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

Вы не узнаете, пока не протестируете.

Начать использовать Crazy Egg

Создайте бесплатную учетную запись Crazy Egg, чтобы начать бесплатную пробную версию, или войдите в систему, чтобы настроить отчеты о поведении пользователей.

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

Заключение

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

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

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

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

Дэвид Чжэн — выпускник и бывший сотрудник The Daily Egg.

Последние сообщения Дэвида Чжэна (посмотреть все)

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

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

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

Учет психологии цвета для цветовых схем веб-сайта

—

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

Взаимодействие цвета. Йозеф Альберс через Phillips

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

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

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

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

1. Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем на веб-сайтах электронной коммерции, а также в ресторанах и приложениях для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Апельсин : оптимизм и счастье.Оранжевый цвет повсеместно считается «забавным», и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленый: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании дизайна для здорового бренда.Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
6. Purple : креативность, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет для использования в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
7. Розовый : креативность и изобилие.Pink сейчас радуется своей жизни, и больше, чем когда-либо, его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и внедряют его в различные отрасли.
8. Коричневый : доброта, тепло и честность. Коричневый цвет удобен в использовании в веб-дизайне. Это придает веб-сайтам естественную, приземленную атмосферу и часто сочетается с традиционным винтажным дизайном.
9. Черный: современность, гладкий, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды выбирают черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
11. Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.

Мы только что отправили вам ваш первый урок.

Автор OrangeCrush

11 красивых цветовых схем веб-сайта, которые вдохновят вас

—

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

1. Цвета для продуманных экологически чистых продуктов

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

Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:

Цветовая схема сайта с тонировкой конопли от Tonitrix: # f5eec2 # 416a59 # 39395f # 73a24e # a9c25d

2. Яркие и полезные для здоровья цвета

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

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

Бледно-персиковый, апельсиновый, мятный и темно-зеленый:

Эко-тона тысячелетия от Your Daye: # f6c453 # fefbe9 # f0a04b # 183a1d # e1eedd

3. Стильные, тщательно подобранные цветовые схемы

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

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

Сирень, ржавчина, крем и уголь:

Цветовая схема Contemporary Lilac от Collagerie: # e4ddf4 # 943d24 # fffbf0 # 2d2d2d # 282612

4.Веселые, юные цветовые палитры

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

Нежно-розовый, зеленый, оранжевый и фиолетовый:

Цветовая схема полихроматического веб-сайта от Brent & Jo Studio: # 397754 # f0a3bc # 70be51 # eb6b40 # 9b45b2

5.Цвета для креативщиков, кружащие голову

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

Желтый, неоновый синий и черный:

Контрастная цветовая схема сайта от e2infinity: # 5bccf6 # fcde67 # 030e12

6.Успокаивающие и оптимистичные нейтральные палитры

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

Персик, сливки и уголь:

Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: # ef9273 # fef9f8 # 0d0d0d

7.Надежные тона

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:

Надежные бирюзовые тона через N26: # 2b6777 # c8d8e4 #ffffff # f2f2f2 # 52ab98

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

Медитативная цветовая схема Spoon Lancer: # fae5df # f5cac2 # ed7966 # 303179 # 141850

9. Современные модные цветовые схемы

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

Фиолетовый, лиловый, мята и апельсин:

Via Saluto: # 5f2c3e # d1adcc # c2d2bd # c65032 # f6e9d7

10. Веселые и благотворительные цветовые палитры

.

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

Синий, желтый, шалфейно-зеленый и белый:

Веселые некоммерческие цвета от Lovely Grit Studio: # 1b4d89 # f9e45b # 6db784 #ffffff

11. Сильные и женственные цветовые схемы

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

Пудрово-розовый, фуксия и нефрит:

Цветовая схема Fuschia и Green для Fertility Tribe от Lovely Grit Studio: # eddcd9 # f2ebe9 # de5499 # 264143 # e99f4c

Поиск цветовых схем веб-сайта начинается сейчас

—

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

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

Ищете единственную в цветовой гамме?

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

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

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

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

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

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

–

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

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

Теплые тона

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

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

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

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

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

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

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

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

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

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

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

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

—

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

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

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

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

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

—

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контраст

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

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

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

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

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

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

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

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

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

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

—

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

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

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

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

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

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

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

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

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

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

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

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

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

Перейти к содержанию ↬

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

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

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

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

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

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

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

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

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

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

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

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

Вместо того, чтобы возиться с палитрой цветов 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)

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

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

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

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

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

Выбор цвета для вашего сайта?

Когда вы размещаетесь на DreamHost, вы получаете бесплатный доступ к нашему инструменту WP Website Builder и более чем 200+ отраслевым стартовым сайтам!

Что оттенки сообщают нашему мозгу: психология цвета

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

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

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

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

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

Пол, возраст и культурное воспитание могут изменить наше восприятие

Мы знаем, что цвет влияет на наш мозг, но часть земного шара, на которой вы выросли, — вместе с вашим возрастом и полом — скорее всего, влияет на то, как вы воспринимаете цвет.

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

Точно так же желтый цвет в золотых арках McDonald’s, который встречается в 120 странах и территориях по всему миру, ассоциируется со счастьем практически во всем мире. Однако, в зависимости от того, где расположены более 36 000 ресторанов, McDonald’s создает свою цветовую схему, чтобы удовлетворить культурные предпочтения своих посетителей.

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

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

Спектр тем для разных целей: выбор цвета веб-сайта

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

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

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

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

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

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

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

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

Цветовая схема: вы выбрали доминирующий цвет — что дальше?

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

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

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

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

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

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

Учитывайте оттенки и оттенки при выборе цветов, дополняющих

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

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

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

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

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

Сделайте цвета яркими там, где это наиболее важно для конверсий

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

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

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

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

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

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

Дайте волю своему внутреннему гуру дизайна без кода с помощью инструментов для самостоятельного проектирования

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

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

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

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

С конструктором веб-сайтов, таким как DreamHost’s WP Site Builder, никто не должен быть экспертом по графическому дизайну или мастером программирования, чтобы создавать красивые веб-сайты.Даже самые нерешительные из нас могут начать с профессионально созданной темы, а затем настроить такие элементы, как цвета и шрифты, в соответствии с историей, которую мы хотим рассказать.

Информация в вашем почтовом ящике

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

Что можно и чего нельзя делать при выборе цвета для вашей веб-страницы

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

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

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

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