Палитра цветов для сайта: Названия цветов, от Абрикоса до Янтаря

Содержание

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

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

Зачем нужна палитра цветов?

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

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

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

Палитра цветов для сайта Adobe Color

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

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

Палитра цветов — инструкция по работе в Adobe Color

Теперь разберёмся, как работать с палитрой цветов в программе. Заходим в сервис Adobe Color и регистрируемся. Можно обойтись и без этого, но тогда вы не сможете сохранять палитры в библиотеке. Впрочем, чтобы сэкономить время, можно авторизоваться через Facebook. Итак, пройдёмся по разделам и вкладкам Adobe Color.

Раздел «Создать»:

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

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

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

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

Листаем чуть ниже. Обратите внимание, что слева можно развернуть вкладку и выбрать цветовой режим из RGB, CMYK, HSV и LAB. В зависимости от этого будут меняться бегунки, но цвет остаётся тем же. Передвигая их в среднем столбце, будет меняться цвет посередине. И подходящие к нему тона в левых и правых блоках.

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

Последовательная
Монохромная
Треугольная
Комплементарная
Сплит-комплементарная цветовая схема
Двойная сплит-комплементарная
Квадратная
Составная
Оттеночная
Произвольная (для ваших изменений)

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

Извлечение темы

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

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

Извлечение градиента

Новинка в Adobe Color — извлечение градиента. Загрузка картинки происходит аналогичным образом. А слева обратите внимание на выбор количества точек градиента. Данная функция удобна тем, что при наведении курсора на цветовой блок, можно скопировать его номер. А затем в разделе «Цветовой круг» вставить его в основной столбец и поиграть цветами.

Цветовая игра

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

Раздел «Смотреть»

Если вас ещё не посетили идеи по поводу цветового оформления сайта, зайдите в раздел «Смотреть». Изучайте все источники или разверните вкладку справа. И откройте Цветовые темы, Творческие проекты или Фотографии Stock, чтобы смотреть готовые решения. Наслаждайтесь и вдохновляйтесь красивыми видами, пока не определитесь.

Тенденции

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

Моя библиотека

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

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

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

Дополнение

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

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

Будет зависеть и от целевой аудитории. Например, если это детский портал с развлекательным контентом, то цвета можно подобрать «весёлые». А если посетителями являются взрослые и деловые люди, то подойдёт более сдержанная палитра цветов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание статьи

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

—

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

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

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

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

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

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

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

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

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

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

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

2. Яркие и здоровые цвета

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

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

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

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

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

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

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

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

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

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

5. Яркие цвета для творческих людей

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

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

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

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

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

7. Надежные звуки

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

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

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

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

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

9. Современные модные цветовые решения

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

Фиолетовый, лиловый, мятный и оранжевый:

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

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

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

11. Сильные и женственные цветовые решения

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Студии, агентства (услуги дизайна, фото, полиграфия и реклама, создание сайтов и т.п.)

Главные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор:Stephen.

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

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

Автор: spoon lancer

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

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

Автор: sheva™.

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

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

Автор:Litlast

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

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

Автор: Mithum.

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

2. Бизнес, связанный с производством и/или продажей еды, напитков (бары, рестораны, кафе, доставка и кейтеринг, HoReCa)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: felipe_charria

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

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

Автор: Tomas Miliauskas

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

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

Автор: Holly McAlister

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

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

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

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

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

3. Сфера разработки и продажи программного обеспечения, софта, IT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Ecommerce и ритейл (интернет-магазины любой направленности и масштабов деятельности)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Культура, хобби, образ и стиль жизни (музыкальные, творческие, спортивные, кино-проекты, сообщества по интересам)

Главные

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

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

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

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

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

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

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

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

Блоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цветовые схемы учитываются и в веб-дизайне. Посетители сайтов обращают внимание на особенности ресурса, на то, как оформлены окна, заголовки, кнопки. Разработчики сайтов продумывают внешний вид кнопки Call-To-Action, которая заметна на общем фоне ресурса и мотивирует посетителя к выполнению того или иного действия.

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

Особенности «работы» различных цветовых композиций

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

Синий цвет

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

Красная цветовая палитра

Чаще всего, данный цвет ассоциируется со страстью, огнём, гневом, красотой. Выбирают оттенки красного при оформлении сайтов СМИ.

Желтый цвет

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

Зелёный цвет

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

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

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

Оттенки черного цвета

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

Белый цвет

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

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

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

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

Ограничения

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

палитры из кино ⭐ Блог TemplateMonster

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

Лучшие цвета для оформления сайта
Цвета для сайта на тему мода и красота
Спорт, хобби и развлечения
Бизнес и услуги
Цветовые тренды 2020 года

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

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

Лучшие цвета для оформления сайта

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

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

Холодные цвета отлично передают профессионализм и спокойствие. Теплые цвета — хороший выбор, если ваш бренд отражает энергию, страсть и энтузиазм. Используйте правило, где 60% — доминирующий оттенок, 30% — вторичный цвет, а 10% — акценты (например, СТА).

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

Цвета для сайта на тему мода и красота

Интернет-магазин одежды

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

«Эдвард Руки-ножницы»

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

“Волк с Уолстрит”

Сайт свадебного салона

“Мария-Антуанетта”

Сайт салона красоты

“Волк с Уолл-стрит”

Спорт, хобби и развлечения

Сайт на тему автомобили

Красный — цвет страсти, энергии, скорости. В продуманном сочетании с черным и синим придаст сайту авторитетности.

“Неоновый демон”

Сайт в тематике развлечения

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

“Бегущий по лезвию 2049”

Магазин домашнего декора

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

“Леон-киллер”

Сайт фотографа

“Ребенок Розмари”

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

“Омерзительная восьмерка”

Бизнес и услуги

Сайт ресторана

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

“От заката до рассвета”

Сайт недвижимости

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

“Светская жизнь”

Медицинский сайт

Медицинские сайты должны вызывать доверие и чувство исцеления. Это хорошо выходит у синих оттенков.

“Шоу Трумана”

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

“Бронсон”

Сайт турагентства

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

“Любовь и милосердие”

Бизнес-сайт

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

“Марсианин”

“Оно”

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

“Труп невесты”

Сайт адвоката

“Темный рыцарь”

Интернет-магазин электроники

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

“Афера по-американски”

“Терминатор”

Цветовые тренды 2020 года

                    Информация взята с www.shutterstock.com

Откройте для себя Lush Lava, Aqua Menthe и Phantom Blue — три оттенка, которые будут доминировать в 2020 году и продемонстрировать тенденцию к максимализму и насыщенным оттенкам.

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

Пышная лава

взято с www.shutterstock.com

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

Аква Менте

Взято с www.shutterstock.com

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

Фантомный синий

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

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

Друзья, а какая палитра понравилась вам больше всего? Из чего вы черпаете вдохновение? Поделитесь с нами!

Читайте также:

10+ трендов веб дизайна 2020

Дизайн в пастельных тонах: примеры использования

40 Бесплатных Photoshop градиентов для дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Белый цвет

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

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

Черный цвет

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

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

Серый цвет

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

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

Красный цвет

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

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

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

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

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

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

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

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

Желтый цвет

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

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

Синий цвет

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

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

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

Зеленый цвет

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

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

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

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

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

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

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

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

________

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

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

51 сайт лучших цветных сайтов для дизайнеров — обновлено! — Журнал PRINT

Автор: Джуд Стюарт | 5 июля 2019 г.

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

Источники вдохновения для цветовой палитры и генераторы цветовых схем

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

Более 300 000 дизайнеров и ценителей цвета постоянно делятся цветовыми палитрами на этом сайте, так что всегда готово новое вдохновение. Добавьте этот сайт в закладки как один из лучших цветных сайтов или загрузите бесплатное приложение Adobe AIR, COLOURLovers Desktop Color Finder. И пока вы это делаете, блог COLOURLovers сообщает о цветовых тенденциях и необычных цветовых находках с соответствующими палитрами для каждого сообщения.

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

Design Seeds — это воплощение красок, присущих природе, и эстетики полноценной жизни. Поиск палитр по значению цвета или по теме.

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

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

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

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

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

Colormunki позволяет создавать цветовые схемы из образцов Pantone.

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

ColorBlender: введите цвет, получите автоматически созданный онлайн-инструмент для смешивания для сопоставления цветов и создания палитры с опциями экспорта

Color Wizard: аналогично Color Blender, этот инструмент работает на основе одноцветного ввода и вывода палитры.

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

Также стоит упомянуть: Contrast A, цветовую палитру SlayerOffice, ColorToy 2.0 (единственный инструмент Flash в этом списке), сверхпростой Infohound, Visibone (также простой, плюс доступный на дюжине языков) и SitePro Central. Выбор цветовой схемы.

Извлечь цветовую палитру из URL-адреса или изображения

Tin Eye Labs — Извлечение цвета: загрузите изображение, вставьте URL-адрес изображения или используйте перетаскивание, чтобы извлечь цвета из вашего изображения.Движок отобразит цветовую палитру для всех цветов вашего изображения. Извлечение цвета работает для JPEG, PNG и GIF.

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

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

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

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

Color Vision | Colblinder | Симулятор дальтонизма | Цветовое колесо доступности | Checkmycolors.com

Отточите свои навыки теории цвета

Color Theory from Paper Leaf: вот ваша одностраничная шпаргалка по концепциям теории цвета. (Вы тоже можете его скачать!)

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

Мгновенное определение цветов с помощью плагинов браузера

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

Найди убийственные фоновые рисунки

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

Выкройки

BG | DinPattern | Ava7Patterns | Паттерны EveryDayIcons | Patterrific

Играйте с цветом подробнее

Tin Eye: этот сайт извлек цвета из 20 миллионов изображений Creative Commons на Flickr, чтобы сделать изображения доступными для поиска по цвету.

Color-Hex: этот сайт включает шестнадцатеричные коды для каждого из перечисленных цветов.

SpyColor: бесплатный сервис, который предоставляет информацию о любом цвете, включая преобразование во многие цветовые модели (RGB, CMYK, HSL, HSV, XYZ, xyY, CIELAB, CIELUV, CIELCH, Hunter Lab и YIQ). Схемы (гармонии), такие как дополнительные, раздельно-дополнительные, триадные, тетрадические, пятицветные, конфликтующие, аналогичные и монохроматические цвета, можно найти на каждой цветной странице.

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

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

Color Run: Простая игра о цветах. Просто нажмите на более светлый цвет.

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

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

Shutterstock Spectrum: поиск в базе изображений Shutterstock по цвету.

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

Online Color Challenge: насколько хорошо вы видите цвета? ФАКТ: 1 из 255 женщин и 1 из 12 мужчин имеют ту или иную форму нарушения цветового зрения. Примите участие в онлайн-тестировании цвета на основе теста Farnsworth Munsell 100 Hue Test.

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

Назовите этот цвет: Хотите узнать название определенного оттенка? Найдите здесь.

Интернет-тезаурус цветов HP IdeaLab: специалисты по цвету Hewlett-Packard тщательно подбирают названия цветов в рамках этого совместного проекта.

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

Неизвестные цветовые термины Phronistry: наконец, вы можете узнать, как выглядит «smargadine» или «luteolous». Какое наказание!

И последнее, но не менее важное: большое спасибо SpyreStudios, DesignReviver и MogDesign за их превосходные списки цветовых ресурсов.

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

Как вернуть WordPress к предыдущей версии
16 ноября 2020 г.

Как исправить «Ошибка синтаксического анализа: неожиданная синтаксическая ошибка» в WordPress
18 ноября 2020 г.
Цвет может быть мощным инструментом маркетинга и общения с потребителями.Это визуальное представление этикетки. Это влияет на то, как воспринимается бренд — что он представляет и кто является целевой аудиторией.
Помимо повышения узнаваемости бренда, он поддерживает интерес посетителей к вашей странице. Первые пару секунд определяют, останутся они или уйдут.
Выбранная цветовая палитра может улучшить восприятие пользователем. Это способствует организации сайта, его ясности и удобочитаемости. Это позволяет посетителям быстро находить нужную информацию.
Хорошо известно, что цвета также вызывают эмоциональную реакцию. Поэтому выбор правильного цвета для вашего веб-сайта — это больше, чем вопрос личных предпочтений или вкуса.
Теплые цвета ассоциируются с энергией, страстью, энтузиазмом и жизненной силой. Они включают красный, желтый и оранжевый. Эти цвета яркие и выделяются. Знание того, как работают цвета, является обязательной частью каждой учебной программы по веб-дизайну, и все хорошие дизайнеры знают, как большинство цветов влияет на наши эмоции.
Спокойные цвета более успокаивающие и умиротворяющие.Примеры успокаивающих цветов: синий, зеленый и фиолетовый. Они более сдержанны по сравнению с теплыми цветами.
Многие сайты используют спокойную цветовую палитру. Вот некоторые из них.
Moz
Этот веб-сайт является отличным примером чистого макета. Белый фон делает информацию удобочитаемой и хорошо организованной. Синие тона успокаивают, вызывают доверие и уверенность в бренде. Желтый цвет привлекает внимание к кнопкам с призывом к действию, но не требует применения силы. Выбор контрастных, но спокойных цветов делает посещение этого сайта очень приятным.
Работайте ответственно
Основная цель этого сайта — поделиться набором ресурсов для здорового и сбалансированного подхода к работе. Бренд представлен в спокойной цветовой палитре. Зеленые и черные буквы на белом фоне не вызывают чрезмерного возбуждения. Отдельные статьи выделяются. В статьях не используются отвлекающие или ненужные цвета. Расслабляющая обстановка на сайте побуждает посетителей остаться и продолжить чтение.
Squilla Fund
Этот бренд помогает делать инвестиции в криптоиндустрию.Создает чувство доверия за счет использования спокойной цветовой палитры. Различные оттенки зеленого на бежевом фоне делают информацию прозрачной и удобной для чтения. Чтобы создать контраст, кнопки CTA оранжевого цвета.
Монетный двор
Монетный двор предлагает совет и помощь в отношении ваших финансов. Таким образом, используемые цвета должны вызывать доверие к бренду. Мята использует разные оттенки зеленого и синего на белом фоне. Эти цвета выражают профессионализм, успех и благополучие.
Evernote
Evernote продвигает приложение, которое помогает пользователям быть лучше организованными.Внешний вид сайта является адекватным представлением бренда. На белом фоне изображены черные буквы и зеленые кнопки CTA. Успокаивающая цветовая гамма помогает посетителям расслабиться и расслабиться. Это также может помочь им осознать, что им нужно навести порядок в своих многочисленных проектах.
Andris Gauracs
Этот веб-разработчик выбрал сочетание синего и белого фона с черным шрифтом. Цвета вызывают доверие. Выглядит очень чисто, прозрачно, профессионально и дружелюбно.Он передает личность, стоящую за брендом.
Jebsen Careers
Кредо Jebsen Careers гласит: «Успех рождает успех». Они выбрали успокаивающую цветовую палитру, которая заставляет посетителей поверить в бренд. Синий и зеленый символизируют именно процветание и успех. Для текста и фона используются разные оттенки. Белый прекрасно дополняет остальные цвета.
Lucas Group
Этот бренд HR обещает предоставить исключительных кандидатов, которые гарантируют успех компании.Спокойные цвета отражают эту миссию, включая синий, серый и белый. Посетители могут почувствовать их профессионализм через визуальную интерпретацию своего сообщения. Синяя надпись становится оранжевой при наведении курсора мыши. Он предлагает зрителю исследовать, что еще там есть.
Taproot Foundation
Это веб-сайт национальной некоммерческой организации. Белый фон выделяет желтые, синие и зеленые элементы. Желтый ассоциируется со счастьем и надеждой. Он используется для передачи радости, в чем и заключается суть этого бренда.Синий и зеленый цвета дополняют это сообщение чувствами доверия и спокойствия.
Дэн Палмер
Дэн Палмер — художник-фрилансер и аниматор. Его веб-сайт сочетает в себе синий и белый цвета, создавая атмосферу доверия. Спокойные цвета не подавляют и удобны для пользователя. Сообщение выглядит профессионально и правдоподобно.
Brooke Cormier
Этот художник знает силу цвета! Фон — мутный светло-голубой оттенок. Все цвета и особенности очень мягкие, идеально дополняют профиль художника.Этот сайт — отличный пример успокаивающей цветовой гаммы.
Аня Элленбергер
Этот графический дизайнер выбрал минималистичный подход. Сайт передает легкие прикосновения художника. В нем сочетаются расслабляющие и мягкие оттенки.
Studio Sahil
Еще один пример минимализма — бренд Studio Sahil. Используемые цвета — серый, горчично-желтый и ярко-синий логотип на белом фоне. Выбор палитры не затмевает фотографии их дизайнерских изделий.
Школа цифровой фотографии
Неудивительно, что этот бренд также использует отличное сочетание цветов на своем веб-сайте. Синий фон на заднем плане укрепляет доверие к сервису. Зеленый успокаивающий и естественный. Кнопки CTA выделяются оранжевым, что делает визуальную навигацию простой и понятной.
Libenar
Продвижение детских товаров требует мягких и вдохновляющих цветов. На этом веб-сайте представлены пастельные розовые и голубые оттенки фона. Выбор палитры ориентирован на основную аудиторию бренда — родителей, которым нужны чистые и безопасные этикетки.
Pico
Бренд Pico заботится об окружающей среде. Спокойная палитра их веб-сайта определенно способствует созданию этого органичного ощущения. Светло-бежевый, зеленый и коричневый обычно ассоциируются с природой и здоровьем. Выбор цвета очень хорошо передает их миссию.
Moorhouse
Пурпурный тоже относится к спокойной цветовой гамме. Moorhouse хорошо использует это на своем веб-сайте. Помимо расслабляющего оттенка, фиолетовый также передает мудрость, элегантность и творчество.В сочетании с белым он придает бренду элегантный вид.
Appbot
На сайте Appbot бренд представлен в бело-голубых тонах. Это классическая комбинация, элегантная и профессиональная. Темно-синий цвет особенно обозначает силу, надежность, интеллект и доверие. Неудивительно, что это один из самых любимых цветов среди веб-дизайнеров!
Zendesk
Альберт lusarczyk
Как соавтор Be Theme, я твердо верю в то, что проектирование требует осторожности и терпения.Я вкладываю свою энергию, время и знания в совершенствование темы для наших более чем 230 000 клиентов.
40 потрясающих дизайнов веб-сайтов с великолепными цветовыми схемами
Выбрать цветовую схему для конкретного проекта веб-дизайна не всегда легко. Иногда продукт или услуга помогают определить базовый или основной цвет, но что делать дальше — это обычно вопрос воображения и вдохновения дизайнера.
Прежде чем вы начнете беспокоиться о цветовых схемах, вам нужно решить, на какой платформе вы собираетесь создавать свой веб-сайт.Если вы не знаете, как создать или настроить блог, вы всегда можете нанять фрилансера или изучить его самостоятельно на сайте онлайн-обучения.
Есть сайты, которые предлагают огромный выбор цветовых комбинаций, где вы можете искать определенный цвет или просто просматривать по категориям, таким как самые новые, самые популярные и т. Д., Но иногда просто нет замены просмотру других сайтов в поисках вдохновения, где дизайнеры использовали цветовые схемы, которые, как палитра, могут не быть очевидными соседям по кровати.
В этом обзоре мы отобрали 40 сайтов с выдающимися и / или необычными цветовыми сочетаниями, на которых дизайнеры проявили большую изобретательность.
Веб-сайты с выдающимися или необычными цветовыми схемами
Каждый избранный сайт имеет цветовую палитру из 5 цветов под снимком экрана. Эти палитры представляют собой просто представление о цветах, используемых в дизайне, и есть несколько моментов, которые следует учитывать при их использовании:
Цвета взяты со скриншота в Photoshop, поэтому они предназначены только для ознакомления
Некоторые цвета, включенные в некоторые палитры, не видны на странице скриншота, но они будут где-то на сайте
SecretKey
Scott McCarthy Design
El Designo
Melonfree
Glue Pro
SquareFactor
Hyundai Veloster
77
Фитц Фитцпатрик
Barni Design 90 234
SoftwareMill
The Enterprise Foundation
RS Collab
Paw Studio
7

0002
77 NAF — The Daily Commute
TCM — Лето под звездами
Spektrum Media
Cheval Blanc
003
TV Safety
Лоренцо Верзини
Будто завтра нет

Gubb & Mackie 902
Kikk Festival
Это вещи
Шихаб
Duplos 9002

Дашаг
Sqd
MeetInnov
Masha Studio
7
Masha Studio
7
Masha Studio
7
Masha Studio
7
Masha Studio
7
Masha Studio
7

Josef Kjaergaard
Activate Media
Heimplanet Zelte
d в этой витрине и, возможно, даже удивлен используемыми цветовыми палитрами.
Какой из этих сайтов был вашим любимым и что вас в нем привлекает? Создавали ли вы сайты с разными или необычными цветовыми решениями? Пожалуйста, поделитесь с нами своими мыслями и ссылками в разделе комментариев ниже.
Модные цветовые палитры и инструменты Material Design
Последние тенденции веб-дизайна выявили ожесточенное соперничество между цветом и типографикой за доминирование в визуальном восприятии.Все рады восхищаться блестящими и яркими цветовыми палитрами 🌈, они стимулируют чувства, а их качества выходят за рамки простого визуального восприятия.
Как мы обсуждали в нашей статье Исследование цвета в веб-дизайне, Дизайн-системы внесли свой вклад в тенденцию важности цвета и продвинули палитру еще дальше, чем это было раньше (палитры ранее состояли только из основного цвета бренда с цветом подсветки и несколькими нейтральными). Теперь цветовые палитры содержат больше элементов и часто представляют собой не просто визуальное исследование, а семиотическое исследование, будучи гораздо более сложным и побуждающим нас исследовать такие концепции, как сильные контрасты, хроматические последовательности, цветной фон, цвета, модулированные нейтральными оттенками, гипернасыщенные палитры, кислотные цвета и др.
В этой статье мы выбрали последние яркие цветовые схемы с сайтов Awwwards и набор элементов из нашей коллекции Color Exploration.Наслаждаться!
………
1. Места дня с отличными цветовыми схемами
Во второй части этой статьи мы составили список цветовых палитр, которые использовались чаще всего за последние несколько месяцев.
# c1f20f # ff00a1 # 252626 # 0b30fb
MyLinkIsYourLink Авторы Андре Мецзомо, Бернардо Таварес, Родриго Роча и Марко Корреа
## F7f639 # fd92a6 # f267a0 # 1b1464
Освобождено WorkSmiths & Enjoythis
# ed7b49 # f6bde8 # b8afff # 8cc1a7
Wild Souls By Big Horror Athens & No Matter
# 607262 # e5b9b0 # f4e3d1 # faf9f4
Энид Натан Тейлор
# 1d1d1d # 0053e1 # fef335 # ff4617
ПОЛА По креплению
# d0d1ad # 84c53 # f7ea49 # 104de9
Hauska By Hauska
# f9c5d1 # f46e6f # 148c8a # 2e3359
Чай Bennett от студии Tubik
# cea5ad # cbff00 # 000000 # 72aabb
Rouser Автор ED.
# aea2f0 # fed040 # 1bb476 # 0b43dc # fc3f21 # 000000
LM Chabot Авторы Пьер-Люк Коссетт, Девен Карон и Деманда Спесиале
△ 🌈 △ 🌈 △ 🌈 △
2. Генераторы цветовых палитр и полезные инструменты
Нам повезло иметь доступ к многочисленным генераторам цветовых палитр и другим инструментам, которые помогают нам играть со всеми цветовыми вариациями, а также к цветовым схемам . Эти инструменты помогают нам начать со случайного цвета или выбрать основной цвет и получить вторичные комбинации, дополнительные цвета, оттенки и т. Д.Мы можем понимать и изменять физические свойства цвета, применять вариации тона, яркости или даже создавать градиентных палитры .
Скоро мы покажем вам самые интересные инструменты, и если они вам нравятся, не забудьте регулярно проверять нашу коллекцию Handy Tools and Apps for Designers, где вы можете найти новые приложения с отличными идеями. чтобы помочь вашему творческому процессу.
ОХЛАДИТЕЛИ
Coolors — это сверхбыстрый генератор цветовых схем, позволяющий создавать ваши палитры, обмениваться палитрами, экспортировать их в различные форматы, такие как SVG, PDF или SCSS, и вдохновляться тысячами цветовых схем.
HUE SNAP
Hue Snap — это генератор цветовой палитры, который позволяет вам использовать существующую коллекцию цветов палитры или создавать свои собственные, загружая изображение и используя палитру цветов для создания индивидуальной цветовой палитры.
ДИЗАЙН МАТЕРИАЛОВ — ИНСТРУМЕНТ ДЛЯ ЦВЕТА
Этот инструмент позволяет вам создавать, публиковать и применять цветовые палитры к вашим дизайнам пользовательского интерфейса, а также видеть, как выбранные вами цвета будут выглядеть на реальных примерах проектов.
HAPPY HUES
Посмотрите реальные примеры того, как параметры цветовой палитры будут работать на веб-сайте.Этот инструмент предназначен для тех, кто не уверен в цветах в своем проекте и хочет увидеть примеры цветов, используемых в дизайнерском проекте. Happy Hues также содержит информацию о психологии цвета и цветовой терминологии.
HAIL PIXEL — ЦВЕТ
Этот простой инструмент — интересный способ создать дополнительную палитру цветов: вы просто перемещаете курсор вверх и вниз, чтобы выбрать цвет, нажмите, чтобы сохранить, затем перемещайтесь по горизонтали к следующему цвету, в конечном итоге создавая полную палитру.
KRHOMA: ИНСТРУМЕНТ AI COLOR
Khroma — это инструмент цвета AI для дизайнеров, который учится на ваших предпочтениях, чтобы создавать неограниченные палитры.
ПИГМЕНТ ПО ФОРМУ ФАБРИКИ
Создавайте свои любимые цвета, используя две настройки пигмента и освещения. Pigment также предоставляет вам шестнадцатеричный код, значения RGB и код Pantone для каждого цвета, который вы хотите, также он прост в использовании и бесплатен.
ПАЛИТРА
Этот инструмент переназначения и редактирования цветовой палитры, разработанный Габриэлем Адорфом, позволяет вам создавать базовую палитру для дизайна пользовательского интерфейса с функцией плавного перетаскивания для увеличения или уменьшения оттенка, а также позволяет импортировать, анализировать и редактировать существующие цветовые схемы.
ЦВЕТ
Перемещайте указатель мыши по экрану и просто щелкните мышью, чтобы начать создавать свои собственные палитры цветов. Этот инструмент позволяет сохранять цвет в нескольких форматах, таких как Less, SCSS, PNG и т. Д.
HTML ЦВЕТОВЫЕ КОДЫ
Имеет шестнадцатеричные цветовые коды, значения RGB и HSL с их палитрой цветов, цветовую диаграмму и полный список из 140 названий цветов HTML.
РАЗРАБОТКА
Инструмент, полезный для выбора цвета текста и фона для вашего дизайна. Вы можете поиграть с настройками или просто нажать кнопку «случайный выбор», чтобы получить хорошо готовые цветовые композиции.
COLOR HUNT
Бесплатная и открытая платформа для всех, кто ищет вдохновение в цвете, содержит более тысячи модных, подобранных вручную цветовых палитр.
ADOBE COLOR
Классический инструмент для создания цветовых схем с помощью цветового круга или просмотра тысяч цветовых комбинаций от сообщества Adobe.
ПАЛИТОН
Еще один классический инструмент для создания цветовых сочетаний. Paletton — отличный инструмент для обучения, помогающий нам понять основы теории цвета.
МАСШТАБ
Генератор цветовой палитры с забавными настройками, который позволяет вам по-настоящему экспериментировать, когда вы ищете свои цветовые схемы.
ЦВЕТА МАТЕРИАЛА
COLOR DESIGNER — COLOR TOOLS
5 сайтов для поиска цветных тем
Работаете ли вы над созданием нового краудфандингового веб-сайта или собираете рекламный бюллетень или брошюру, вы уже знаете, что отличный дизайн является ключом к созданию и укреплению позитивной идентичности бренда. А когда дело доходит до красивого и визуально привлекательного дизайна, вы также знаете, что есть ряд вещей, о которых нужно помнить.Вам нужно обратить внимание на свое пространство, баланс и расположение. Нужно тщательно выбирать формы и шрифты. Но что именно может спрыгнуть со страницы и схватить вас? Цвет.
Верно, подбор привлекательной цветовой схемы — один из основных элементов высококачественного дизайна. Но независимо от того, являетесь ли вы поклонником графического дизайна или новичком в дизайне, поиск идеальной цветовой палитры может стать проблемой.
К счастью, вам не нужно тратить время на тестирование каждого цвета радуги, чтобы определить подходящую цветовую тему для вашего проекта.Эти инструменты помогут вам быстро подобрать идеальную палитру!
Генератор шестнадцатеричных цветовых схем
Возможно, у вас есть общее представление о том, какие цвета вы хотите использовать. Например, вы знаете, что хотите, чтобы фон вашего проекта был успокаивающим, бледно-голубым. Но вы не знаете, что делать дальше. Какие цвета использовать для шрифтов? Какой акцентный цвет подойдет?
Hex Color Scheme Generator — полезный инструмент, который вам нужен! Просто введите шестнадцатеричный код выбранного цвета, и он сгенерирует палитру оттенков, которая идеально дополнит выбранный оттенок.Просто ищете вдохновения? Вы также можете щелкнуть по цветовому кругу, чтобы увидеть несколько готовых палитр!
Adobe Color CC
Adobe производит огромный ассортимент программного обеспечения и программ для дизайнеров и творческих профессионалов. Поэтому неудивительно, что их ресурс для поиска цветовых тем великолепен.
Adobe Color CC предлагает множество вариантов цветовых схем, оставаясь при этом простым и интуитивно понятным в использовании. Для начала вы можете использовать раскрывающийся список, чтобы выбрать одну из семи различных общих категорий для вашей палитры, включая монохроматические, триадные или дополнительные темы.Затем перетащите циферблат вокруг универсального цветового круга, чтобы создать множество различных цветовых схем, каждая из которых состоит из пяти цветов. С ним легко работать, но при этом он может похвастаться почти безграничными цветовыми вариантами!
Pictaculous
Вдохновение может исходить из самых разных мест и источников. Например, возможно, вы нашли великолепную фотографию, цвета которой действительно вам нравятся. С помощью Pictaculous вы можете загрузить изображение со своего компьютера в генератор.Этот удобный инструмент обработает изображение, а затем выдаст шестнадцатеричные коды основных цветов, включенных в эту фотографию.
Я опробовал инструмент, используя снимок цветов на местном фермерском рынке. Мне было любопытно посмотреть, что платформа будет делать с фотографией, содержащей множество цветов. Pictaculous дал мне яркую палитру с яркими зелеными и желтыми оттенками с примесью нескольких землистых оттенков. Под основной палитрой, созданной генератором, есть множество других предлагаемых палитр, которые следует учитывать.Это отличный вариант, если у вас уже есть образец вдохновения, который вы хотите использовать для своего дизайна!
Охладители
Если вы задумали конкретный цвет или начинаете с нуля, Coolors может помочь вам создать идеальную цветовую палитру. Интерфейс невероятно удобный и увлекательный!
Нажмите пробел, чтобы начать просмотр различных цветовых палитр. Если цвет действительно бросается в глаза, щелкните по нему, чтобы зафиксировать его на месте.Затем продолжайте нажимать клавишу пробела, чтобы просмотреть оттенки, которые хорошо сочетаются с этим заблокированным цветом.
Если у вас уже есть определенный цвет, который вы хотите использовать, введите шестнадцатеричный код, чтобы начать щелкать по палитрам, которые дополняют выбранный вами цвет. С помощью инструмента вы также можете настроить параметры цвета и изменить порядок оттенков. Определившись с палитрой, вы можете либо скопировать ссылку, либо экспортировать ее в файлы различных типов — так что вы всегда будете иметь ее для справки!
Кольрд
Может быть, вы не хотите создавать свою собственную цветовую палитру, а просто просматриваете кучу различных готовых вариантов, из которых можете выбирать.Colrd предлагает широкий ассортимент палитр, созданных их пользователями.
Вы можете сортировать по различным категориям, включая палитры и градиенты. Как только вы увидите понравившуюся палитру, щелкните ее, чтобы просмотреть свои параметры. Оттуда у вас есть возможность просматривать коды в форматах HEX, RGB и HSL. Вы также можете загрузить всю палитру как образец цвета Adobe Illustrator, Adobe Photoshop, InDesign или GIMP.
Возможности выбора цветовой палитры для ваших дизайнерских проектов практически безграничны.Но эти варианты должны вдохновлять, а не подавлять. Эти полезные инструменты и генераторы помогут вам отсортировать все варианты, чтобы найти идеальную цветовую палитру — с минимальными усилиями!
Заглавное фото Эми Яньеса.
Как создать лучшие цветовые схемы для веб-дизайна
Цвет может сигнализировать о многом. Синий может успокоить людей. Зеленый может успокаивать людей. Фиолетовый показывает креативность.Серый цвет демонстрирует изысканность. Оранжевый, красный и желтый передают энергию и тепло.
Color — это инструмент, который вы можете использовать, чтобы создать образ вашего бренда в сознании посетителей веб-сайта, прежде чем они прочитают хотя бы одно слово из вашего текста. Выбор правильных цветов и цветовой схемы для вашего веб-сайта дает вам возможность зацепить своих клиентов с момента завершения загрузки экрана.
Что такое цветовая схема веб-сайта?
Набор цветов, которые вы выбираете для дизайна своего веб-сайта, известен как «цветовая схема.Этот выбор цвета также может быть известен как «цветовая палитра». Хотя цветовые схемы и цветовые палитры включают более одного цвета, нет ограничения на количество цветов, которые могут быть включены.
(Тем не менее, это определенно та область, где меньше — обычно больше. Потенциальные клиенты могут быть поражены слишком большим количеством цветов и быстро перейдут к вашим конкурентам, если им не нравится внешний вид вашего веб-сайта.)
Самое замечательное в цветах, которые вы выбираете, заключается в том, что их можно многократно использовать для различных элементов на вашем сайте.Не каждый элемент должен быть разного цвета. При этом цветовые схемы обычно делятся на два набора: первичный и вторичный.
В данном случае термин «основные цвета» не означает красный, желтый и синий. Речь идет об основных цветах, которые будут использоваться для цветов фона вашего сайта, цветов логотипа, цветов меню и других доминирующих элементов страницы. «Вторичные цвета» — это набор цветов, которые используются в качестве акцентных цветов на всем сайте.
При создании цветовой палитры для веб-сайта вашей компании важно, чтобы она оставалась единообразной для всего сайта.Это поможет усилить индивидуальность вашего бренда, о чем мы говорим в нашем Плане совершенствования в Интернете. Использование одних и тех же цветов снова и снова помогает создать ассоциации и укрепить ожидания между вашим брендом и вашей аудиторией.
Почему важны цветовые схемы веб-сайта?
Что вы в первую очередь замечаете, когда сайт загружается? Скорее всего, это не копия, потому что, сколь бы мощной ни была копия, нашему мозгу требуется больше миллисекунды, чтобы обработать слова, которые мы читаем.Первое, что вы замечаете при загрузке веб-сайта, — это цвет.
Исследования снова и снова показывают, что цвет оказывает большое влияние на то, как мы себя чувствуем, и может влиять на то, как мы думаем о конкретном продукте, компании или бренде.
Цвета имеют разные значения, связанные с ними. Выбранные вами цвета могут многое сказать о вашем бизнесе. (Сделано в Canva.)
Но что это значит для дизайна вашего веб-сайта?
Исследование Университета Виннипега выявило две важные вещи, связанные с цветовыми схемами веб-сайтов:
Люди делают свои первоначальные суждения о веб-сайте / компании / продукте в течение первых 90 секунд после первого взаимодействия.
62-90% этого первоначального суждения основано на цвете.
Понимание психологии цвета и того, как ваша цветовая палитра влияет на посетителей, может улучшить дизайн веб-сайта, а посетители будут проводить больше времени на вашей странице, что приведет к большему количеству потенциальных клиентов.
Топ-5 цветовых схем для веб-сайтов на 2021 год
Простые цветовые схемы сейчас популярны как никогда. Поскольку все больше и больше людей используют свои мобильные устройства для просмотра веб-страниц, использование простых, но эффектных цветов — лучший способ найти отклик у вашей целевой аудитории.
Простые нейтральные цвета с ярким текстом
Серый цвет считается изысканным. Приглушенные земные тона воспринимаются как заземленные и спокойные. Но если ваша палитра ограничена этими цветами, некоторым она покажется скучной. Добавление яркого основного цвета в качестве основного цвета в текст — это способ привлечь внимание к важным элементам, не перегружая их цветом.
Цветовые градиенты с белым текстом
Не в каждой палитре должно быть несколько цветов.Монохромные цветовые схемы могут быть такими же мощными, особенно если вы используете цветовые градиенты. Смешивание одного основного цвета создает динамический фон, который позволяет вашему тексту спрыгивать со страницы. Это создает больше текстуры для фона и делает ваш сайт более интересным для посетителей.
Сигналы возврата
Все старое снова новое, по крайней мере, когда речь идет о популярных цветовых палитрах. Дизайн с использованием неоновых оттенков 80-х, ржаво-землистых тонов 70-х или цветов 90-х, вдохновленных поп-артом, находит отклик у большего числа людей, чем когда-либо прежде, особенно если они выполнены в современном стиле.
Добавление современных элементов, таких как цветовые градиенты или переход цветов в пастельные, — отличный способ обновить эти палитры для более современной аудитории.
Приглушенные тона с ярким цветовым акцентом
Посетители веб-сайта хорошо отзываются о дизайне с использованием приглушенных тонов и нейтральных тонов. Они приятны для глаз и позволяют легко читать любой текст. Но дизайнеры также могут эффективно использовать яркий и смелый основной цвет в этих цветовых схемах, чтобы привлечь внимание к важным элементам, таким как кнопки «Купить» или контактные формы.
Оттенки основного цвета, подчеркнутые его дополнением
Использование более одного оттенка основного цвета вашей палитры — отличный способ получить большую отдачу от одного цвета, который может иметь значение для вашего бизнеса. Когда вы используете дополнительный цвет, вы получаете отличный контраст в своем дизайне, который привлекает внимание и отлично смотрится.
Как выбрать цвета для веб-дизайна
Так как же выбрать цвета, которые вы или ваши дизайнеры должны использовать в дизайне своего веб-сайта? Чтобы не звучать бойко, здесь всего два шага.
1. Выберите основные цвета.
Основной или доминирующий цвет в цветовой палитре вашего веб-сайта является якорем вашего бренда и должен вызывать те эмоции, которые вы хотите, чтобы ваши клиенты ассоциировали с вашим брендом. Если вы уже создали логотип, цвет, который выделяется больше всего, должен быть основным цветом вашего веб-сайта.
Если вы еще не создали логотип, посмотрите на график с психологией цвета выше и используйте его, когда вы думаете о том, что вы хотите, чтобы ваши клиенты ассоциировали с вашим брендом.
2. Выберите второстепенные цвета.
Это та часть, где в игру вступает теория цвета. Теория цвета — это то, что вы узнали в классе рисования в начальной школе о том, как цвета соотносятся друг с другом на цветовом круге. Дизайнеры используют теорию цвета для создания дизайна, который находит отклик у вашей аудитории. Вот четыре наиболее распространенных цветовых схемы:
Аналогичные цветовые схемы: В аналогичных цветовых схемах используются цвета, расположенные рядом друг с другом на цветовом круге.Эти цветовые комбинации вызывают ощущение гармонии, но важно выбрать только один оттенок в качестве основного цвета и использовать другие в качестве акцентов.
Монохроматические цветовые схемы: Как упоминалось ранее, в этих цветовых схемах используется только один цвет или оттенки одного цвета. Использование только одного цвета может затруднить вызов эмоционального отклика, но при этом передает авторитет и стабильность.
Триадные цветовые схемы: Если в монохроматических цветовых схемах используется один цвет, в трехцветных цветовых схемах используются три, которые равномерно распределены по цветовому кругу (например, оранжевый, зеленый и фиолетовый).Это, как правило, смелые динамические цветовые схемы, даже если вы используете бледные или ненасыщенные версии цветов.
Дополнительные цветовые схемы: Дополнительные цвета — это те цвета, которые находятся напротив друг друга на цветовом круге. Эти цветовые комбинации могут очень привлекать внимание, но также могут раздражать и неприятно воспринимать зрителя. Используйте их осторожно.
Если вам нужна небольшая помощь в сокращении количества цветов в этих общих цветовых схемах, у Canva есть отличный инструмент, который поможет вам найти идеальные цвета для нужной вам цветовой схемы.
Последнее слово
Ваш веб-сайт может сказать столько же цветом, сколько и текстом. Важно тщательно выбирать цвета для своего веб-сайта, чтобы получить красивые цветовые схемы, а не общий или хаотичный беспорядок, отпугивающий ваших зрителей. CanvaPro — отличный инструмент с множеством одобренных дизайнерами цветовых палитр, которые вы можете использовать как есть или просто для вдохновения. Если вам потребуется дополнительная помощь, мы можем вместе с вами подобрать наиболее подходящую цветовую схему для вашего бренда, вашего бизнеса и вашего веб-сайта.
–
Thrive Design — клиентоориентированная компания по веб-дизайну из Сиэтла. Свяжитесь с нами сегодня, чтобы узнать, как мы можем улучшить ваш бизнес в Интернете! Найдите нас в Clutch, UpCity, LinkedIn, Facebook и Twitter.
Как создать идеальную цветовую палитру для веб-сайта
Выбор собственной цветовой палитры для веб-сайта — не что иное, как прогулка по парку, особенно если вы не уверены в своих способностях выбирать цвета. Это может быть кошмар, когда миллионы цветов вспыхивают на вас, делая вас временно слепым и подавленным.
Ага! Я понял!
Но прежде чем я поделюсь несколькими советами и формулами, которые помогут вам сделать этот опыт приятным, позвольте мне рассказать вам небольшую историю…
Примерно в то время, когда я учился в старшей школе, моя мама хотела владеть красная машина.
Она хотела, чтобы он был настолько красным, насколько это возможно. Вроде… действительно красный.
В итоге финансы позволили семье позволить себе новую машину для мамы, и, конечно же, красную.
Автомобиль был подарком на Рождество, и я хорошо помню, как перелез через него, чтобы повесить на него большой огромный лук.Было весело сделать сюрприз, а увидеть ее счастливое лицо? было более чем того стоило!
Забавно, машина приехала двумя неделями раньше, и мы оставили ее в гараже. Нам приходилось сохранять невозмутимое выражение лица каждый раз, когда мама парковала свою грязную старую белую машину рядом с этой великолепной новой красной машиной. О боже, она понятия не имела, что машина будет ее через несколько недель!
Красная машина — лишь одно из многих моих детских и юношеских воспоминаний, связанных с любовью моей мамы к красному цвету.Ей также нравится зелено-синий цвет, который я считаю сине-зеленым, но я сохраню эту историю для другого поста.
Эти счастливые воспоминания никогда не перестают вызывать у меня улыбку. Они часть личного опыта , который влияет на то, как я отношусь к красному цвету.
The Power of Color
Color — мощный инструмент коммуникации. Он способен привлекать или отталкивать людей любого возраста, пола и культуры, вызывая эмоции и психологические реакции. На предпочтение цвета может повлиять личный опыт, личные вкусы, чувства или мнения.
Наше восприятие цвета также зависит от генетики. Мы не все видим цвета одинаково. В мире каждого 12-го мужчины и каждая 200-я женщина страдают какой-либо дальтонизмом . И многим другим трудно увидеть разницу между похожими оттенками одного цвета, особенно если они расположены рядом друг с другом. Поэтому, если ваша целевая аудитория — мужчины, помните об этом при создании цветовой комбинации.
Некоторые исследования также показали, что разные пола привлекают разные цвета кожи.Исследования показывают, что женщины предпочитают пастель и теплые цвета, а мужчины — холодные. Это также показывает, что женщинам не нравится коричневый и оранжевый, а мужчинам не нравится фиолетовый.
Помните, однако, что это исследования. Это не правила, по которым нужно жить и дышать!
Вот небольшой мой секрет:
Я склонен тяготеть к землистым цветам, а черный / коричневый — постоянное место в моем шкафу. Несмотря на это, когда я в джинсах, оранжевые, желтые и красные обычно оказываются на высоте.Для цветовой схемы своего сайта я также выбрала яркие цвета. Единственная разница в том, что я использую их экономно и больше полагаюсь на нейтральные цвета, такие как кремовый, белый и черный. Так что да … Меня не консультировали для исследования выше. 🙂
Цвета во всем мире
Цвет также имеет разные значения во всем мире. В Америке и Европе красный цвет используется для обозначения любви, страсти и огня. В Китае и Индии он используется для обозначения плодородия и удачи и является предпочтительным цветом для платья невесты.
Красное свадебное платье в Китае
В этой части света, в западной культуре, синий цвет обычно ассоциируется с властью, мудростью, миром и депрессией. В Греции и Турции считается, что синий борется со злом; однако в Корее темные оттенки синего — это цвет траура.
Blue Turkish Evil Eye
Помните об этих различиях при выборе цветовой палитры для своего веб-сайта. Чтобы избежать путаницы и недоразумений, быстрый поиск в Интернете подскажет вам, что означает каждый цвет в разных частях мира.
Какой цвет выбрать?
Типичный вопрос, который мне часто задают: «Какие цвета мне выбрать? Те, которые мне нравятся, или те, которые понравятся моим пользователям? »
Короткий трехсекундный ответ — выбрать цвета, которые вам нравятся.
Но подождите !!
Давайте уточним немного подробнее и подумаем о ваших любимых цветах, не так ли?
Когда я сажусь с новым клиентом во время процесса «Обнаружения веб-сайтов», я задаю нескольких вопросов, которые я задаю перед тем, как приступить к работе с цветовыми палитрами веб-сайта.Иногда у них есть один или два цвета, которые они уже используют на своем логотипе и других предметах бренда. Иногда они проводят ребрендинг, а иногда начинают новый бизнес. Итак, где бы вы ни находились, ответы на эти вопросы станут руководством к выбору цветовой палитры для веб-сайта:
Какие слова и прилагательные отражают индивидуальность вашего бренда?
(Женское или мужское? Игривое или серьезное? Роскошное или доступное? Современное или классическое? Молодое или зрелое? Громкое или приглушенное?)
Каковы ценности вашего бренда?
(Изобилие, сострадание, надежность, равенство, веселье, рост, честность, новаторство, доброта, мастерство, уравновешенность, стойкость, стабильность, доверие, видение и т. Д.)
Какой цвет подходит под характеристики вашего товара / услуги?
Кто ваш идеальный клиент?
Как вы хотите, чтобы ваш идеальный клиент чувствовал себя, когда он взаимодействует с вашим брендом?
После того, как вы ответите на эти вопросы , вы обнаружите, что некоторые слова, которые вы используете, совпадают с описанием и настроением цвета или группы цветов в таблице ниже.
Психология цвета
Для большинства из нас, жителей западной части этого мира, цвет имеет следующее положительное значение:
Разрешение нарушать правила
Есть некоторые отрасли, в которых определенные цвета имеют большее значение. чаще, чем другие.Вы можете услышать, как эксперты говорят, что вам следует выбирать цветовую палитру своего бренда и веб-сайта только на основе вашей целевой аудитории. На самом деле, вы можете осторожно, без страха нарушать правила, и это может быть отличительной чертой вашего бренда.
Одним из примеров является Wells Fargo. В то время как большинство банков и финансовых учреждений остаются «в безопасности» благодаря своим синим цветам, Wells Fargo выделяется. Его бренд является хорошим примером нарушения правил, используя цвета, связанные с едой, оформлением и срочностью, например красный и желто-оранжевый.
Другой пример — идея о том, что, поскольку фиолетовый в США означает богатство и королевскую власть, его не следует использовать для продажи недорогих ковриков для йоги. Ну, я не знаю, как вы, но я вижу, что фиолетовый и йога всегда хорошо сочетаются друг с другом!
Как насчет свадьбы? Какой цвет приходит тебе на ум? Белый? Белый с оттенком? Кремовый цвет? Мягкая пастель? Что ж, у меня для вас новость: есть МНОГО других возможных цветов для блаженства в день свадьбы счастливой, энергичной пары. То же самое и с независимыми подрядчиками, предоставляющими свои услуги, от дизайнеров приглашений до стилистов приемных.
Поэтому я настоятельно рекомендую вам не зацикливаться на психологии цвета toooooo .
(Я слышу, как боги цвета кричат на меня прямо сейчас…)
Психология цвета поможет вам сузить круг вариантов. Секрет здесь в том, чтобы понимать правила, но сознательно нарушать их, если они не поддерживают индивидуальность вашего бренда, ценности, нишу и послание.
Назад к основам: теория цвета
Человеческий глаз может различать около 7 миллионов различных цветов.Одна эта информация может показаться устрашающей, когда вы пытаетесь найти правильные цвета для своего веб-сайта. Но это становится менее пугающим, если вспомнить, что все 7 миллионов цветов являются результатом трех цветов.
Цветовое колесо
Помните, как в школе изучали основные и второстепенные цвета? Как насчет третичных цветов?
Хорошо, может, я зашел слишком далеко…
Если вы помните хотя бы первые две группы, у вас уже есть базовые знания теории цвета! Ура!
Основные цвета включают желтый, красный и синий.Эти цвета нельзя смешивать с другими цветами, что делает их источником всех цветов.
Дополнительные цвета представляют собой смесь двух основных цветов. Они бывают: оранжевые, зеленые и пурпурные.
Третичные цвета — это комбинации основных и дополнительных цветов. Есть шесть третичных цветов: желто-зеленый, сине-зеленый, сине-фиолетовый, красно-фиолетовый, красно-оранжевый, желто-оранжевый. Хороший способ запомнить имена — всегда использовать основное имя перед другим цветом.
Единственное, что вам нужно знать о теории цвета, это то, что существует три основных категории: цветовое колесо , , изображенное выше, цветовой контекст и цветовая гармония .
Цветовой контекст
Знаете ли вы, что цвет ведет себя иначе по сравнению с другими цветами и формами? Цветовой контекст — это то, как мы видим изменение цвета в зависимости от того, что вокруг него. Один и тот же оранжевый оттенок «выглядит» по-разному в сочетании с желтым фоном, а затем с красным фоном.
Но… какие цвета хорошо смотрятся вместе?
На этом этапе вы можете подумать, что перед выбором цвета нужно учесть множество вещей. И вы даже не уверены, какие цвета хорошо смотрятся вместе!
Не бойся, друг мой!
Введите…
Color Harmony!
Прежде чем мы перейдем к деталям цветовой гармонии, рекомендуется сделать краткий обзор нескольких терминов, используемых для описания различных типов цвета и их вариаций.Эта информация поможет вам при создании цветовой палитры вашего сайта. Это:
Оттенок : другое слово, обозначающее «цвет»; относится к одному из двенадцати цветов на цветовом круге
Оттенок : оттенок, затемненный черным (хороший трюк для поиска темных цветов фона)
Оттенок : оттенок, осветленный белым (хороший трюк для поиска света фоновые цвета)
Значение : насколько темным (он же оттенок) или светлым (он же оттенок) является цвет, в диапазоне от черного до белого.
Насыщенность : относится к интенсивности, независимо от того, выглядит ли цвет более тонким или более ярким. Чем ближе цвет к серому, тем он более ненасыщенный, приглушенный.
Тон : оттенок, приглушенный серым
Цвета в цветовом круге можно комбинировать с помощью одной из шести формул цветовой схемы, что позволяет достичь гармонии в любом дизайне. Все эти шесть схем могут создавать сбалансированные и визуально приятные или высококонтрастные и яркие комбинации .
Итак, поехали! Существуют настоящие формулы , которые можно использовать по формуле , чтобы создать комбинацию цветов, которые хорошо смотрятся вместе. Они бывают монохроматическими, аналогичными, дополнительными, расщепляюще-дополнительными, триадными, тетрадными и дважды-дополнительными.
Я почти слышу, как вы говорите «Ура!» затем сделайте небольшой цветной танец. 💃🏻🕺🏻
Монохроматический
В этой формуле используется один оттенок, что позволяет вам исследовать различную насыщенность и значение для создания вариаций этого цвета.
Эта формула гарантированно соответствует, создавая визуально целостный вид. Также считается самым легким для глаз . Он не привлекает к себе внимания и помогает ассоциировать бренды с определенным запоминающимся цветом.
Монохромная цветовая палитра бесспорно шикарна и консервативна. Он также может стать жертвой скуки, в зависимости от использования. Вы можете немного изменить правила — и при этом сохранить монохромную схему — используя дополнительный или акцентный цвет.Дополнительный оттенок можно найти прямо напротив выбранного вами цвета, и, если его использовать экономно, это поможет.
Аналог
В аналогичной комбинации используются цвета, расположенные рядом друг с другом на цветовом круге, например синий и зеленый или красный и оранжевый. Они очень хорошо сочетаются с и создают приятные для глаза схемы. Вы часто встретите это очень универсальное сочетание в природе — изобразите красные, оранжевые и желтые листья осенью или небо во время заката.
Аналогичная схема отлично подходит для очень спокойного, мирного дизайна, где вы хотите, чтобы ваша аудитория чувствовала себя комфортно и расслабленно. Это не значит, что вы не можете использовать одну и ту же цветовую схему для создания других ощущений, таких как изобилие и энергия, особенно при использовании теплых оттенков.
Дополнительные
Это цвета, расположенные напротив друг друга на цветовом круге, например красный и зеленый или синий и оранжевый. Эта комбинация, когда они имеют одинаковое значение (оттенок / оттенок), составляет чрезвычайно яркая и динамичная , и поэтому они постоянно используются в спорте.Его высокая контрастность и высокая интенсивность создают «вибрирующие границы», когда цветовая вибрация происходит по краям, разделяя оттенки одного и того же значения.
Эту схему трудно применить гармонично, если использовать ее в чистом виде. Решение здесь — добавить оттенок, оттенок или ненасыщенные тона к одному из цветов или добавить нейтральный цвет к смеси. Это добавит разнообразия и устранит вибрирующие границы, сохранив контраст.
Split-Complementary
В этой цветовой схеме используется любой цвет плюс два, которые граничат с его дополнением.Он по-прежнему дает вам контраст, как в дополнительной схеме, но добавляет больше цветов для работы и более интересных результатов.
Triadic
В триадной схеме используются три цвета, которые расположены равномерно, образуя идеальный треугольник на цветовом круге. Эти комбинации, как правило, поразительны, а стимулируют, особенно если вы используете основные или второстепенные цвета. Поиграйте с оттенками и оттенками, чтобы создать схему с меньшим контрастом. Используйте один в качестве основного цвета, а два других в качестве акцентов.
Самая сложная часть этой формулы — получить три цвета, соответствующие описанию индивидуальности вашего бренда. Я предлагаю вам сначала ознакомиться со списком вопросов и таблицей цветовой символики, прежде чем вы решите использовать эту схему.
Тетрадик или дважды комплементарный
Эта схема образует прямоугольник на колесе с использованием двух дополнительных цветовых пар. Это очень привлекательная комбинация , но ее сложнее применить в вашем дизайне, поскольку большее количество цветов сложнее сбалансировать.
Эта комбинация работает лучше, если вы выбираете один цвет в качестве основного оттенка, в то время как другие могут служить в качестве акцентных цветов с отрегулированной насыщенностью и значением некоторых или всех цветов.
СОВЕТ ПРОФЕССИОНАЛА: Если вы не уверены в своих способностях к выбору цвета, я предлагаю вам держаться подальше от этой формулы цветовой гармонии.
Другие инструменты, которые вы можете использовать для своего веб-сайта Цветовая палитра
Приведенные выше формулы цветовой гармонии — отличный инструмент, отправная точка для руководства, но это не единственный способ сделать это.Вот несколько других способов сделать это:
Цвета могут быть объединены в пары по температуре , насыщенности , настроению и теме .
Используйте изображение с вашим любимым цветом, индивидуальностью вашего бренда и его посланием и создайте на его основе палитру.
Найдите существующую цветовую палитру , которая пробудит ваше воображение или ту, в которую вы влюбитесь, и сделайте ее своей собственной.
Взгляните на некоторые из перечисленных ниже инструментов.Вы можете использовать их для создания цветовой палитры с нуля, из изображения или для проверки других существующих палитр.
Adobe Color CC для создания цветовой палитры веб-сайта с нуля или из изображения, щелкнув ссылку «импортировать изображение».
Coolors для создания цветовой палитры веб-сайта с нуля, из изображения, щелкнув значок камеры, или просто щелкнув ссылку «исследовать», чтобы найти существующие цветовые палитры.
Палитра и 0to255 для создания цветовой палитры веб-сайта с нуля
Семена дизайна и цветовые палитры для поиска существующих палитр
Pinterest — еще один отличный инструмент, который вы можете использовать, просто выполните поиск по запросу «Цветовые палитры веб-сайта»
Создайте свой собственный веб-сайт Цветовая палитра
Теперь пришло время провести мозговой штурм и сузить собственную цветовую палитру.
Важно понимать, что эти правила не являются строгими. Чтобы получить правильную цветовую палитру для вашего веб-сайта, нужно проработать множество различных шагов и аспектов, и вы, безусловно, можете использовать разные пути. Однако в следующих строках я расскажу о пути, который я использую при создании цветовых палитр веб-сайтов для моих клиентов и даже для себя.
Взгляните на существующие элементы дизайна. Если у вас уже есть цвет для вашего логотипа или любого другого существующего элемента бренда, вы можете использовать его, чтобы начать этот процесс.Вы также можете добавить его позже, если не хотите, чтобы он был основным цветом.
После того, как вы просмотрите свои ответы из списка вопросов выше, вы обнаружите, что некоторые (или многие!) Из них совпадают с описанием и настроением каждого цвета в психологии цветовой таблицы.
STEP ONE
Выберите цвета, которые вам нравятся, и представляйте ваш бренд
Это цвет, который будет самым запоминающимся, самым интересным, поэтому он привлечет к себе наибольшее внимание.
Давайте возьмем пример бренда, который описывает свою личность и ценности словами «стабильность, доверие, креативность и оптимизм».Затем мы сужаем выбор цвета до синего (стабильность и доверие) и оранжевого (креативность и оптимизм).
У бренда также есть выбор «отказаться от одного из цветов», если он предпочитает сосредоточиться на одной конкретной ценности или чертах личности. В нашем примере мы будем придерживаться обоих и перейдем к следующим шагам.
Помните, что вы также можете выбрать понравившийся цвет, если он соответствует некоторым словам, которые вы используете для описания вашего бренда. Если одно из описаний вашего бренда — «тепло», у вас есть несколько вариантов: красный, оранжевый и желтый (и все что угодно в этом диапазоне).То же самое и с другими цветами.
«А сколько цветов?» вы спрашиваете…
Это действительно зависит от вас, от того вывода, который вы придете после того, как ответите на эти вопросы и решите, какую цветовую формулу вы хотите использовать. Однако в большинстве случаев для не дизайнеров я предлагаю меньше цветов: максимум один или два . Чем больше у вас цветов, тем сложнее сбалансировать их все в своем дизайне. При создании цветовой палитры своего сайта придерживайтесь концепции «меньше значит больше».
Пока вы просматриваете цветовую диаграмму, цветовое колесо и шесть приведенных выше формул, подумайте о своей цветовой палитре, содержащей примерно от 3 до 7 цветов.
ШАГ ВТОРОЙ
Решите, какую формулу цветовой схемы вы будете использовать
В нашем примере, когда мы сузим цвета, мы увидим, что синий и оранжевый противоположны на цветовой диаграмме. Это дает нам возможность использовать дополнительную формулу или дополнительную формулу.
Бренд любит оранжевый, но предпочитает работать с двумя разными оттенками синего. Итак, давайте выберем дополняющую формулу: цвет плюс два, которые граничат с его дополнением.
ШАГ ТРЕТИЙ
Отрегулируйте оттенки по своему усмотрению
На этом этапе мы можем перейти к цветовому кругу и изменить оттенок, оттенок, насыщенность и тон по своему вкусу.
В нашем примере бренд предпочитает более темный синий цвет и чуть более светлый оранжевый, почти желтый. Затем мы добавляем больше оттенка (черный) к синему и больше оттенка (белый) к оранжевому. Для более светлого синего цвета мы переместили «стрелку» ближе к зеленому, но все еще в синем спектре.
Теперь у нас есть три цвета, которые хорошо смотрятся вместе благодаря формулам цветовой гармонии.
На следующих этапах мы сосредоточимся на том, какой из этих цветов будет нашим основным или акцентным. Мы также выберем другие цвета, которые уравновесят и дополнят их в этой цветовой палитре.
СОВЕТ ОТ ПРОФЕССИОНАЛА: Вы можете работать с любым конкретным цветовым спектром в цветовом круге, чтобы найти тон / значение, которое вам больше всего нравится.
На следующих этапах цвета будут разделены на четыре отдельные группы:
Основной
Акцентный
Нейтральный
Оттенки и / или оттенки
ШАГ ЧЕТВЕРТЫЙ
Выберите основные цвета
На этом этапе вы можете выбрать , один или два цвета для первой группы: основной цвет (а), иногда называемый «жирным», «основным» или «доминирующим» цветом (цветами).
Основной, основной, жирный или доминирующий цвет является «доминирующим» либо из-за того, сколько он проявляется в вашем общем дизайне, либо из-за того, как он выделяется по сравнению с другими цветами.
В большинстве случаев доминирующий цвет является основным цветом вашего бренда. Он также привлечет к себе наибольшее внимание и станет самым запоминающимся. Вспомните красный цвет Coca-Cola ™, желтый McDonald’s ™, оранжевый Amazon ™, розовый Barbie ™, синий GE ™, серый Mercedes ™, черный Chanel ™. Другими словами, основной цвет — это ваша главная звезда. ⭐️
В нашем примере мы выберем два основных цвета: более светлый оттенок синего будет нашим первым основным цветом, а более темный «темно-синий» будет вторым основным цветом.
Мы можем использовать светло-оранжевый и один из синих оттенков в качестве основных цветов или даже один цвет в качестве основного. Этот выбор зависит от нескольких вещей. Если:
бренд уже создан
уже есть цвет логотипа
хотите использовать цвета вашего логотипа в качестве основных цветов
вы начинаете с нуля (тогда у вас будет больше гибкости)
ценности бренда сильнее в одном цвете, чем в другом (в нашем примере: стабильность и доверие сильнее, весят больше, чем креативность и оптимизм)
ГДЕ ИСПОЛЬЗОВАТЬ : Используйте эти цвета, чтобы привлечь внимание вашей аудитории, или выделите важную информацию, такую как логотип , вкладки меню, кнопки призыва к действию, заголовки, заголовки, ссылки, номера телефонов и т. д.
СОВЕТ ПРОФЕССИОНАЛА : выберите универсальный основной цвет, который хорошо подходит как для светлого, так и для темного фона. Если ваш основной цвет — белый / очень светлый или черный / очень темный, возможно, вы захотите, чтобы один из ваших акцентных цветов был универсальным.
ШАГ ПЯТЬ
Выберите акцентные цвета
Затем выберите один или два цвета , которые контрастируют или дополняют ваш основной цвет. Это цвет, который вы используете чаще всего после основного цвета.
Акцентные цвета выделяют другие важные части вашего веб-сайта, помогая создать иерархию и единый дизайн.В свою очередь, они помогут привлечь внимание аудитории к наиболее важной информации на ваших страницах.
В зависимости от вашего бренда и сообщения, вы можете выбрать более двух цветов акцента, например, красочный стиль бренда, ориентированный на детей, или забавные темы. Однако в большинстве случаев идеальным числом является один или два.
Акцентный цвет не обязательно означает, что это яркий или яркий, сверхнасыщенный цвет. Это просто означает цвет, который контрастирует с вашим основным цветом или дополняет его. Если вы сомневаетесь, вернитесь к цветовому кругу и выбранной вами формуле, чтобы просмотреть доступные варианты.
В нашем примере мы выберем светло-оранжевый в качестве основного цвета.
Помните, что вы можете выбрать любой оттенок в качестве акцентного цвета. Единственная разница в том, как вы будете использовать его на своих страницах.
СОВЕТ ПРОФЕССИОНАЛА: Ограничьте себя двумя или тремя цветами между основным и акцентным цветами . Выберите один основной цвет? Выберите два акцентных цвета. Если вы выберете два основных цвета, придерживайтесь одного акцента. Вы хотите, чтобы это было очень просто? Выберите один основной цвет и один цвет акцента.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета могут выделять важную или второстепенную информацию на вашей странице, например CTA (призыв к действию), цитаты, субтитры или текущие вкладки меню.
ШАГ ШЕСТОЙ
Выберите нейтральные цвета
Эти цвета уравновешивают ваш дизайн и создают «белое пространство», а также обеспечивают темные цвета для основного текста и светлые цвета, чтобы различать фон, текстуры и узоры. Все цветовые схемы должны иметь минимум 2 нейтральных цвета .
Если вы используете нейтральный цвет в качестве фона, убедитесь, что он достаточно контрастирует с цветом вашего текста, чтобы не напрягать глаза и его было легко читать. Если сомневаетесь, используйте белый, бежевый и разные оттенки серого. Черный вариант — вариант, но он имеет тенденцию преобладать в цветовой схеме, если используется в нескольких элементах, поэтому будьте осторожны.
В нашем примере мы выберем два нейтральных цвета: бежевый для фона и почти черный для текста.
СОВЕТ ПРОФЕССИОНАЛА : Старайтесь держаться подальше от чистого черного (# 000000).Черный преобладает, и на самом деле нет ничего черного на 100%. Добавьте немного тонких оттенков в ваш черный, и это будет легче для глаз.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета в основном используются в качестве фона, текстуры, тонких узоров, текста и как баланс между основным и акцентным цветом.
ШАГ СЕДЬМОЙ
Вам могут понадобиться оттенки и оттенки
Иногда вы обнаруживаете, что вам понадобится дополнительная версия или две вашего основного или акцентного цвета. Хорошее решение — добавить его оттенки или оттенки. Это необязательный шаг , но я считаю, что он помогает, когда вам нужно изменить один или несколько цветов из вашей палитры.
В нашем примере мы выберем очень светлый вариант оранжевого акцентного цвета (оттенок) и более темный вариант цвета фона, который мы выбрали выше. Эти комбинации дадут нам большую гибкость.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти варианты можно использовать для фона, падающих теней, эффектов свечения, наложений и вспомогательных элементов. Обычно они остаются вне поля зрения, но дают вам больше возможностей, не меняя созданную вами цветовую схему.
Хорошим примером использования оттенков и оттенков является длинная страница с разделами, где вы можете использовать цвета фона, контрастирующие между темным и светлым, или когда у вас есть контактные формы, которые разработаны с рамкой и цветом фона.
Вы застряли?
Семь миллионов цветов на выбор.
Различные формулы и номенклатуры.
Непреодолимое чувство.
Ага, знаю! 🤦🏻‍♀️
Но вот что я узнал, повторяя это снова и снова: следуйте инструкциям и позвольте себе изменить несколько цветов здесь и там, как только вы начнете их применять, особенно нейтральные, оттенки и оттенки.
Даже новый дизайнер нередко сталкивается с потребностью в дополнительном цвете или другой версии оттенка, когда цветовая палитра веб-сайта готова и внедряется в макеты.
Так что не будьте так строги к себе!
Вы делаете палитру своими руками и достигли этой точки в этом посте, поэтому вы уже на сотню шагов впереди того места, где были раньше! Похлопайте себя по спине! ??
Подведем итоги
Первое ✓
Ответьте на вопросы, которые я задавал ранее в этом посте.Если у вас уже есть цвет, который вы используете для логотипа или графики вашего бренда, подумайте о том, чтобы использовать его в качестве отправной точки.
Второй ✓
Сравните ваши вопросы с психологией цветовой карты. Найдите те, которые описывают личность и ценности вашего бренда, и запишите их вместе с соответствующими цветами.
Третий ✓
Шаги 1-3: Просмотрите формулы цветовой гармонии и найдите, какие из них лучше подходят для цветовых результатов, полученных вами из ваших ответов и цветовой таблицы.Поиграйте с комбинациями, используя несколько инструментов, которые я предоставил, чтобы «научиться».
Четвертый ✓
Шаги 4-7: Определитесь с основным, акцентным, нейтральным и оттенками и оттенками для окончательной цветовой палитры вашего веб-сайта.
Заключение
Самый важный урок из этого поста, помимо нескольких хороших идей и формул для выбора идеальной цветовой палитры веб-сайта, — это согласованность !
После того, как вы выберете свои цвета, решите, где они будут использоваться, и придерживайтесь этого, сохраните их согласованность! Если вы решите, что ваши кнопки будут одного цвета (акцентный или основной) или будут иметь два типа цветов кнопок, оставьте это на всех этапах.То же самое касается заголовков, подзаголовков, фона и т. Д.
Как я уже упоминал выше, это всего лишь руководство, которое поможет вам создать цветовую палитру для вашего веб-сайта. Это не конкретные правила, высеченные в камне. Используйте свои инстинкты и не забывайте всегда учитывать триггеры и цвета эмоциональной связи, которые приносят вам, вашему бренду и вашей аудитории. Я надеюсь, что это руководство поможет вам создать цветовую палитру, которую вы действительно любите и готовы двигаться вперед.
Если вы находитесь в затруднительном положении, создавая цветовую палитру своего веб-сайта, дайте мне знать в комментариях, как у вас дела.
Давайте подключимся!
Присоединяйтесь ко мне в этом блоге, на Facebook или YouTube, где я делюсь другими советами по цвету и другими советами, связанными с брендами и веб-сайтами.
PS: Если вы пролистали здесь до конца, просматривая весь этот пост, прочтите раздел резюме и присоединитесь ко мне на Facebook.

Палитра цветов для сайта: Названия цветов, от Абрикоса до Янтаря — ColorScheme.Ru

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

Зачем нужна палитра цветов?

Палитра цветов для сайта Adobe Color

Палитра цветов — инструкция по работе в Adobe Color

Раздел «Создать»:

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

Извлечение темы

Извлечение градиента

Цветовая игра

Раздел «Смотреть»

Тенденции

Моя библиотека

Дополнение

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

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

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

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

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

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

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

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

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

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

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

1. Студии, агентства (услуги дизайна, фото, полиграфия и реклама, создание сайтов и т.п.)

2. Бизнес, связанный с производством и/или продажей еды, напитков (бары, рестораны, кафе, доставка и кейтеринг, HoReCa)

3. Сфера разработки и продажи программного обеспечения, софта, IT

4. Ecommerce и ритейл (интернет-магазины любой направленности и масштабов деятельности)

5. Культура, хобби, образ и стиль жизни (музыкальные, творческие, спортивные, кино-проекты, сообщества по интересам)

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

Особенности «работы» различных цветовых композиций

Синий цвет

Красная цветовая палитра

Желтый цвет

Зелёный цвет

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

Оттенки черного цвета

Белый цвет

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

Ограничения

палитры из кино ⭐ Блог TemplateMonster

Лучшие цвета для оформления сайта

Цвета для сайта на тему мода и красота

Спорт, хобби и развлечения

Бизнес и услуги

Цветовые тренды 2020 года

Пышная лава

Аква Менте

Фантомный синий

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

51 сайт лучших цветных сайтов для дизайнеров — обновлено! — Журнал PRINT

Источники вдохновения для цветовой палитры и генераторы цветовых схем

Извлечь цветовую палитру из URL-адреса или изображения

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

Отточите свои навыки теории цвета

Мгновенное определение цветов с помощью плагинов браузера

Найди убийственные фоновые рисунки

Играйте с цветом подробнее

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

Как вернуть WordPress к предыдущей версии

Как исправить «Ошибка синтаксического анализа: неожиданная синтаксическая ошибка» в WordPress

Moz

Работайте ответственно

Squilla Fund

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

Evernote

Andris Gauracs

Jebsen Careers

Lucas Group

Taproot Foundation

Дэн Палмер

Brooke Cormier

Аня Элленбергер

Studio Sahil

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

Libenar

Pico

Moorhouse

Appbot