Оттенки бирюзового в веб-дизайне
Сегодня мы с вами будем вдохновляться потрясающими модными оттенками бирюзового цвета в веб-дизайне. В тренде яркие голубые и зеленоватые цвета, ими особенно части оформляют кнопки и элементы призыва к действию. Смотрите на примеры использования бирюзовых цветов и собирайте в собственную копилку наиболее удачные сочетания оттенков.
streamlineicons.com
prosjektfantasi.no
linkdigital.co.uk
coinsfoundation.org
hypebeast.com
uplug.me
michelrefatti.me
mevato.com
drawithpixels.com
dennismarkgraf.com
mentel.com
grundig.no
kriek.co.uk
jakubkaspar.cz
publications.wfp.org
nextmatch.us
blu20.com
goodpatch.com
medienstadt.koeln
swanforlife.com
Автор подборки — Дежурка
Смотрите также:
- Модный мятный цвет в веб-дизайне
- Кроваво-красный цвет в веб-дизайне
- Оттенки желтого в веб-дизайне
Коментарии запрещены.
Какие цвета используют самые популярные сайты / Хабр
Цвет является важным фактором при выборе продукта. Это может подтвердить большинство покупателей различных товаров – от автомобилей до обуви.
Цвет существенно влияет на показатели продаж в интернете и посещаемости сайтов в целом. Почти половина пользователей формируют мнение о веб-сайте на основе его дизайна. Цветовая гамма играет здесь далеко не последнюю роль.
Дизайнер Пол Хеберт проанализировал 10 популярных сайтов. Он собрал статистику распределения цветов, используемых на главной странице сайта и в таблице стилей.
«Я часто испытываю проблемы при создании цветовых схем, и мне стало любопытно как поступают в этом случае другие компании», рассуждал он.
Для начала Пол изучил рейтинг Alexa и произвольно выбрал 10 из числа самых посещаемых сайтов – Google.com, Youtube.com, Facebook.com, Baidu.com, Yahoo.com, Wikipedia.org, Amazon.com, Google.co.in, Qq.com и Twitter.com.
Дизайнер разработал скрипт, который возвращает значения всех цветов, используемых на каждом сайте в формате CSV. Получился набор из 10 записей такого формата:
http://www.Google.com|#fff|#000|#767676|#2d2d2d|#bebebe|rgba(0,0,0,.2)|#ccc|#c0c0c0|#36c|#4c4c4c|#dd4b39|#dd8e27|#900|#eee|black|#f5f5f5|rgba(0,0,0,.12)|#666|#fef9db|#4d90fe|rgba(255,255,255,0.5)|rgba(0,0,0,.1)|#3079ed|#dcdcdc|#444|#4787ed|#2f5bb7|#357ae8|rgba(0,0,0,0.3)|#f1f1f1|#f8f8f8|#fbfbfb|#ffffff|#c6c6c6|#222|rgba(0,0,0,.8)|rgba(0,0,0,0)|#ebebeb|rgba(0,0,0,.3)|#00c|#11c|#551a8b|#999Исходный код данного скрипта он разместил на Github. Проект с этим и другими скриптами доступен здесь.
После этого Хеберт проанализировал полученную выборку и наглядно отобразил разброс значений на графиках.
Оказалось, что при оформлении сайтов было использовано вдвое больше оттенков синего, чем желтого или красного, и втрое больше, чем зеленого. Для упрощения расчетов прозрачный цвет Хеберт не учитывал.
Изображение сайта Пола Хеберта
Засилье синего цвета в глобальной сети настолько явно, что дизайнеру пришлось выделить бирюзовый цвет в отдельную категорию.
Изображение сайта Пола Хеберта
Расстояние от центра круга до точки, показывающей тот или иной цвет, показывает степень его насыщенности. Чем жирнее точка, относящаяся к цвету, тем чаще он появляется на десяти самых популярных сайтах.
«Магия» цвета
Цвет, по данным исследований нейробиологов и психологов, обладает способностью влиять на определенные сегменты аудитории.
Голубой цвет символизирует безопасность
Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Синий — любимый у большинства людей, независимо от пола, возраста и прочих параметров.
Некоторые психологи полагают, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.
Многие сайты используют цвет «безопасности». За примерами далеко ходить не нужно.
И, конечно же, социальная сеть «ВКонтакте»:
Зеленый цвет символизирует рост
Основной посыл зеленого — рост. Для большинства исследователей причины такой ассоциации очевидны: большинство растений — зеленые.
Прочие выводы
Каждому пользователю известно, что в дизайне сайта популярной социальной платформы Facebook много синего цвета. Однако, наряду с ним на сайте достаточно широко используется диапазон других цветов, которых, к примеру, на сайтах Baidu, Google и Wikipedia в три раза меньше.
Тем не менее, разработчики Amazon стараются как можно меньше использовать в оформлении сайта синий цвет, предпочитая ему более теплые оттенки, а на сайте Yahoo Хеберту, вообще, не удалось определить доминирующий цвет.
Дизайнер намерен провести повторный анализ палитры ведущих веб-ресурсов, включив в выборку 100 или даже 1 000 сайтов. Хеберт выразил убеждение в том, что результаты более масштабного эксперимента помогут ему найти ответы сразу на несколько фундаментальных вопросов, которые его давно волнуют.
Например, он хотел бы узнать, являются ли цветовые предпочтения того или иного индивидуума врожденной особенностью или же они способны меняться в зависимости от времени и культуры.
Ознакомиться с анализом цвета каждого из сайтов можно на этой странице.
КАК: Бирюзовый цвет и значения для графических дизайнеров
«Сочетание синего и зеленого, бирюзового оттенка имеет приятное женское чувство, в то время как темные оттенки тианов добавляют живую изощренность».
Сочетание синего и зеленого, оттенков бирюзы имеет одинаковые успокаивающие эффекты этих цветов и разделяет символику и характеристики обоих цветов. Aqua, aquamarine, beryl, blue-green, cerulean, teal и ultramarine — все названия для бирюзовых цветов.
Значение бирюзы
Этот промежуточный цвет представляет собой воду, таким образом, названия aqua и aquamarine. Как и все еще вода, это проект мира и спокойствия. Это открытый и дружелюбный цвет, который обеспечивает баланс и стабильность. Бирюза связана с эмоциональным балансом и спокойствием.
Положительные оттенки, связанные с бирюзовым цветом, — это изысканность, исцеление, защита и духовность. Отрицательные коннотации — зависть и — с точки зрения дизайна со светлыми яркими оттенками — женственность.
Цвет бирюзовый, несомненно, берет свое название от ценного и популярного минерала с тем же названием, который часто используется в ювелирных изделиях. Бирюза тесно связана с Ближним Востоком и американским Юго-Западом. Ювелирные изделия. Бирюза тесно связана с Ближним Востоком и американским Юго-Западом.
Использование бирюзы в файлах дизайна
Бирюза одинаково популярна среди мужчин и женщин. Хотя темные оттенки бирюзы воспринимаются как мужские, вы можете создать женскую привлекательность в своем дизайне с легкими оттенками бирюзы. Некоторые оттенки бирюзы имеют ощущение ретро 50-х или 60-х годов. Тил имеет более темный, несколько более сложный вид. Как и минерал, бирюзовые оттенки варьируются от почти голубого до глубокого зеленоватого блюза.
Сохраняйте мягкие, женские качества в дизайне, комбинируя бирюзу с лавандой или бледно-розовым. Яркий бирюзовый и розовый создают блестящий, ретро-вид. Сделайте это арт-деко, соединив бирюзовый с белым и черным. Бирюза с серым или серебристым, а также терракота и светло-коричневого цвета имеет американский юго-западный вкус. Бирюза в сочетании с оранжевым или желтым создает новый, спортивный вид. Цвет часто используется в тропических проектах.
Бирюзовые цветовые выделения
Если ваш проект графического дизайна направлен для печати, используйте формулировки CMYK для выбранного цвета бирюзы или укажите цвет пятна. Если ваш проект будет просмотрен на экране, используйте значения RGB. Используйте Hex-коды, если вы работаете с веб-сайтами. Бирюзовые цвета включают:
- Бледная бирюза: Шестигранник #aeeeee | RGB 174 238 238 | CMYK 27,0,0,7
- Бирюзовый: Шестигранник # 00c5cd | RGB 0,197,205 | CMYK 100,4,0,20
- Яркий бирюзовый: Шестигранник # 00e5ee | RGB 0,229,238 | CMYK 100,4,0,7
- Средняя бирюза: Шестигранник # | RGB 72,209,204 | CMYK 66,0,2,18
- Аквамарин: Шестигранник # 7fffd4 | RGB 127,255,212 | CMYK 50,0,17,0
Бирюзовые цветные чернила
Когда вы используете бирюзу в одно- или двухцветной печати, выбор цвета пятна является более экономичным выбором, чем сочетание CMYK. Когда цветное совпадение имеет решающее значение, цветные чернила могут использоваться с полноцветным принт-проектом. Вот ближайший цвет пятна цвета к бирюзовым цветам, упомянутым в этой статье:
- Бледно-бирюзовый: Pantone Solid Coated 317 C
- Бирюзовый: Pantone Solid Coated 319 C
- Яркий бирюзовый: Pantone Solid Coated 3242 C
- Средний бирюзовый: Pantone Solid Coated 325 C
- Аквамарин: Pantone Solid Coated 3375 C
Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции
На протяжении человеческой истории мастера-художники получали всеобщее признание благодаря умению работать с цветом. В современном мире не меньшее признание получают специалисты, умеющие сочетать цвета в коммерческих и бизнес-целях — в рекламе и веб-дизайне.
Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.
Мы расскажем об основах цветовой теории и цветовой схеме, а затем поговорим об эмоциональном воздействии некоторых цветов.
Теория цвета
Теме цвета можно посвятить целую книгу, так что мы не будем брать её целиком, а ограничимся только полезной информацией, которой можно воспользоваться при разработке дизайна интерфейса.
Можно разбить теорию цвета на три части:
Контраст
У каждого оттенка есть противоположность, так сказать, его «заклятый враг», который составляет самый большой контраст с этим цветом. Чтобы найти такой цвет, вы можете использовать цветовой круг. Просто выберите цвет на противоположной стороне круга.
Цветовое колесоДополнение
Эти цвета не всегда конфликтуют между собой. Дополняющие цвета подчёркивают друг друга, в отличие от контрастных. В цветовом круге такие цвета идут друг за другом, например, дополняющие цвета лилового — голубой и розовый.
Резонанс
Каждый цвет вызывает определённое настроение. Яркие тёплые цвета (красный, оранжевый, жёлтый) наполняют человека энергией, пробуждают его, а холодные тёмные оттенки (зелёный, голубой, фиолетовый), наоборот, расслабляют и успокаивают.
Например, BBC News используют красную панель навигации, чтобы пробудить читателя, усилить его возбуждённое состояние. Учитывая специфику сайта — сенсационные новости, — красный цвет выглядит логичным решением.
BBC NewsТеория цвета в веб-дизайне — это больше, чем просто украшение. Цвет может изменить восприятие вашего сайта и сыграть решающую роль в вашем бизнесе.
Эмоциональное восприятие цвета
Никто не будет отрицать тесное взаимодействие цвета и эмоций. И, разумеется, любой веб-дизайнер хочет использовать это влияние, чтобы создавать верную атмосферу для каждого сайта.
На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.
Важно запомнить, что разные культуры по всему миру по-разному воспринимают цвета. Мы опишем эмоциональные ассоциации, характерные только для западной культуры.
Красный
Эмоции и ассоциации: власть, важность, молодость.
Наиболее стимулирующий цвет, настолько энергетически заряженный, что может даже увеличить кровяное давление. Красный цвет представляет страсть и силу, он больше остальных цветов привлекает внимание, поэтому часто используется для важных предупреждений и объявлений.
Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.
Использовать много красного цвета в топе страницы — это отличное решение, так как он привлекает внимание к важной информации в сообщении. В то же время люди стремятся побыстрее покинуть «опасную зону» красного цвета и скроллят вниз. А это, в свою очередь, позволяет показать пользователю больше контента.
Но этот цвет может работать и против вас, поскольку он может вызывать агрессию или сверхстимуляцию. Если вы хотите создать более расслабляющую атмосферу, старайтесь использовать красный умеренно и выбирайте более светлые оттенки красного.
Оранжевый
Эмоции и ассоциации: дружелюбие, энергия, уникальность.
Как самый спокойный из тёплых тонов, оранжевый способен вызывать целый спектр разносторонних эмоций. В качестве основного цвета он может вызывать интерес и бодрить, а в качестве вторичного — сохранять эти свойства, но в более ненавязчивой манере.
Сайт FantaКроме того, оранжевый помогает создать ощущение движения и энергии. Например, он отлично смотрится на мультяшном сайте компании Fanta, который наводит на мысли о молодости и движении. Цвет ассоциируется с творчеством, при этом сохраняется ощущение знакомого бренда.
Жёлтый
Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).
Это один из самых универсальных цветов, а эмоции, которые он вызывает, в большей степени зависят от оттенка.
Яркий жёлтый цвет добавляет энергии, но без остроты и резкости, которая присутствует в красном. Средние оттенки жёлтого цвета вызывают ощущение комфорта, хотя всё ещё бодрят. Тёмные оттенки (включая золотой) обеспечивают ощущение старины, наполняют пространство безвременьем, мудростью и любопытством.
Flash MediaНапример, на главной странице агентства веб-дизайна Flash Media более тёмные тона жёлтого источают энергию, любопытство и авторитет. Такой цвет отлично подходит для компаний, которые зарабатывают на консультациях и хотят подчеркнуть свой профессионализм.
Зелёный цвет
Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.
Зелёный цвет — это мост между тёплыми и холодными оттенками, хотя больше склоняется к холодным. Это значит, что зелёный обладает расслабляющим действием синего цвета, но также имеет и толику энергичности от жёлтого.
AmeritradeВ результате этого он создаёт очень сбалансированную и стабильную атмосферу. Более тёмные оттенки зелёного создают впечатление богатства и изобилия, как на сайте Ameritrade.
Синий цвет
Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).
Как и в случае с жёлтым цветом, влияние синего сильно зависит от оттенка. Все оттенки синего универсальны в плане расслабления и безопасности, но светлые тона ассоциируются с дружелюбием, а тёмные — с печалью.
Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные оттенки силы и надёжности.
Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.
Van Vliet & TrapЭто имеет большое значение, поскольку они работают с событиями, для которых очень важна визуальная часть, например со свадьбами.
Фиолетовый
Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).
Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом, что делает их отличным выбором для модных товаров и предметов роскоши (даже для шоколада, например, как Cadbury, который выбрал его цветом бренда).
CadburyБолее светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.
Чёрный
Эмоции и ассоциации: власть, изысканность, нервозность.
Самый сильный из нейтральных цветов — чёрный — появляется практически на любом сайте. Он может вызывать разные ассоциации в зависимости от сопровождающих его цветов или доминировать над ними, если использовать его сверх меры.
Сила и нейтральность чёрного делают его отличным выбором для больших блоков текста, но как основной цвет он может создать ощущение нервозности или даже ассоциироваться со злом.
Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.
Dream + ReachБелый
Эмоции и ассоциации: чистота, простота, добродетель.
В западной культуре белый цвет ассоциируется с чистотой, добротой и невинностью. Этот цвет часто используют для фона минималистичных и простых сайтов.
Сайт с работами Клоина ТошеваКроме того, ни один цвет не позволит обратить столько внимания на остальные цвета, как белый. Например, на сайте победителя Awwwards Клоина Тошева все его работы выложены на белом фоне, что только выделяет иллюстрации и создаёт впечатление элегантной галереи.
Серый цвет
Эмоции и ассоциации: нейтральность, формальность, меланхолия.
Несмотря на то, что в некоторых ситуациях серый может создавать мрачную и грустную атмосферу, он всё же часто используется профессиональными дизайнерами.
Всё дело в оттенках: чередуя их, можно получить все эмоции, вызываемые как чёрным цветом, так и белым. В общем, серый — это мощный инструмент в умелых руках.
AwwwardsА в сочетании с более яркими цветами в дизайне серый фон кажется современным, а не мрачным, например на Awwwards.
Бежевый
Эмоции и ассоциации: передаёт характер остальных цветов.
Сам по себе бежевый цвет довольно тусклый и невыразительный, но у него есть одно замечательное свойство: бежевый принимает характер цветов, которые его окружают. Поэтому, если он предназначен не для выражения сдержанности, бежевый служит в качестве фона или второго цвета.
Более тёмные оттенки бежевого создают ощущение традиционности и приземлённости, дают ощущение бумажной текстуры, а более светлые оттенки кажутся свежее и современнее.
DishoomНапример, на сайте ресторана Dishoom светло-бежевый цвет вокруг названия и более тёмные края создают впечатление, что этот ресторан — свежий взгляд на традиционную кухню.
Цвет слоновой кости
Эмоции и ассоциации: комфорт, элегантность, простота.
Цвет слоновой кости, а также кремовый вызывают практически те же эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя при этом минимализм.
Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.
Art in My CoffeeЦветовая гамма
У каждого сайта есть цветовая гамма, в которой основные цвета используются для заполнения большего пространства. Как мы говорили раньше, использование этих цветов воздействует на разум и настроение человека в основном подсознательно. Так что выбирайте их тщательно.
Несмотря на то, что существует множество способов сочетать цвета, мы остановимся на трёх самых успешных и часто используемых.
Триада (тройная гармония, треугольник)
ТриадаТриада — основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из-за чего триада является самой надёжной гаммой.
На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.
Двойная комплиментарная система
Двойная комплиментарная системаЭту гамму труднее воплотить, но она может оказаться выгодным решением. Используется четыре цвета: два контрастных и два дополнительных.
Посмотрите, как замечательно выглядит страница Florida Flourish, основанная на такой схеме. Красный и зелёный цвета контрастируют в растениях и блоках с текстом, а голубой фон и оранжевая пустыня эффектно дополняют картину.
FlourishАналоги (последовательная система)
АналогиГамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.
Например, сочетание красного, оранжевого и жёлтого цветов подчёркивает энергичность и жизненную силу. Использовать такие гаммы очень просто, но сложно выбрать, какие именно цвета войдут в сочетание. Эффект от них будет преувеличен, так что ошибаться нельзя.
Например, использование голубого, бирюзового и зелёного цветов в дизайне сайта Blinksale создало атмосферу спокойствия и умиротворения. Обратите внимание, как использовали жёлтый цвет, чтобы подчеркнуть важные моменты.
BlinksaleЭто только основы цветовой теории, которая может помочь в создании впечатляющего пользовательского дизайна, и нет предела тому, как далеко вы можете зайти в плане цвета на своём сайте.
Инструменты-помощники для выбора цвета
К счастью, есть несколько инструментов, которые помогают воплотить теорию цвета на практике. Попробуйте эти палитры, чтобы не надо было начинать с нуля в создании своей:
- Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
- Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
- Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.
А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.
Прямая зависимость между цветом и эмоциями
Помните: пользователи редко замечают и оценивают цвет фона, панели навигации, отдельных деталей, но это не значит, что цвет при этом не воздействует на них. Просто это происходит подсознательно.
У пользователя возникают какие-то эмоции, складывается отношение к сайту или бренду, он совершает определённые действия: скроллит вниз, нажимает на кнопки, побуждающие к действию, или, наоборот, не замечает их. И цвет играет во всём этом огромную роль.
Если у вас есть свои советы, касающиеся использования цвета в веб-дизайне, просьба поделиться в комментариях.
Психология цвета и веб-дизайн
Синий цвет
Эмоциональная окраска синего существенно зависит от тона. Так светлые оттенки синего способны вызывать чувство спокойствия, открытости и безопасности, в то время как темные тона ассоциируются с надежностью, незыблемостью, опытом, которым можно доверять, и неким сплином. Это позволяет отнести синий цвет к универсальным цветам.
Фиолетовый цвет
Фиолетовый — цвет величия, роскоши, романтики, передаваемых светлыми оттенками, а также тайны и мистики, с которыми ассоциируются более темные насыщенные тона фиолетового. Так пурпурный оттенок вызывает эмоциональное ощущение атмосферы щедрости и богатства. От более нежного лавандового веет романтичностью.
Черный цвет
Черный — нейтральный, но очень сильный цвет, ассоциирующийся с изысканностью, сдержанностью, властью. Присутствуя на любом сайте и сочетаясь с другими цветами, черный способен вызывать разные или подчеркивать эмоции и ассоциации. Также черный может выступать доминирующим цветом в дизайне, однако опасность его чрезмерного использования состоит в том, что страница может ассоциироваться у посетителя со злом и нервозностью.
Умеренное использование черного для оформления отдельных блоков и элементов сайта создает у посетителей ресурса ощущение изысканности, лаконичности, минимализма, элегантности, стиля.
Белый цвет
Белый — традиционно считается цветом добродетели, чистоты, простоты. Отличный вариант для фона сайтов, выполненных в минималистическом дизайне.
Существенной особенностью, свойственной только белому цвету, выступает то, что белый наиболее выгодно и эффектно подчеркивает все остальные цвета, эмоционально резонируя с ними.
Серый цвет
Нейтральность серого не отменяет того эмоционального эффекта, на который он способен. Серый ассоциируется с формальностью, меланхолией, нейтральностью, грустью, сдержанностью.
Серый в различный его оттенках представляет собой удивительную игру белого и черного, дающую тот или иной интересный эффект. Кроме того, интересно смотрятся в дизайне несколько различных оттенков серого цвета, а сочетание серого с сочным ярким цветом палитры выглядит заметно, ярко, свежо и стильно.
Бежевый цвет
Бежевый цвет также можно отнести к нейтральным, так как сам по себе он довольно невыразительный и тусклый. Вместе с тем бежевый хорошо сочетается с другими цветами, принимая их характер, но позволяя разбавить общую картину, избежав чрезмерности и излишней насыщенности.
Бежевый хорош как в качестве фонового, так и в качестве второго цвета. Светлые тона бежевого смотрятся современно и свежо, более темные передают чувство традиционности и приземленности.
Цвет слоновой кости
Неординарный цвет в палитре от молочного до кремового способен передавать те же эмоции, что и белый, только придавая им больше мягкости. Цвет слоновой кости ассоциируется с простотой, элегантностью и комфортом, а в дизайне веб-страниц, используемый вместо белого, способен смягчать контраст между темными цветами.
Выбор цветовой гаммы
Дизайн любого сайта предполагает подбор цветовой гаммы, или сочетания цветов и тонов с целью достижения того или иного эмоционального подсознательного эффекта на посетителя. Существуют различные способы подбора цветов, однако наиболее эффективными, гармоничными и используемыми считаются триада, двойная комплиментарная система и выбор цветов-аналогов.
Триада
Триада, как следует из самого названия, представляет собой систему из 3 гармонирующих цветов. Выбор цветов осуществляется по цветовому кругу, содержащему 12 вариантов цветов, по принципу равностороннего треугольника. Это наиболее сбалансированная система, сочетающая в себе преимущества резонанса и эффекта дополнения без сложных контрастов.
Двойная комплиментарная система
Данная система предполагает использование уже 4-х цветов, также подбираемых по цветовому кругу. Из них 2 цвета контрастируют, и 2 выступают дополняющими. Найти гармоничный вариант воплощения такой гаммы на практике сложнее. Найти же цвета не сложно. Для этого необходимо выбрать первый цвет, а второй будет для него контрастным. Третий цвет будет расположен рядом с первым, выступая дополняющим. Четвертый — контрастным для третьего.
Цвета-аналоги
Это так называемая последовательная система, предполагающая выбор трех, как правило, дополняющих цветов по цветовому кругу. Сочетание цветов аналогов и игра на тонах позволяет экспериментировать с вызовом необходимого эмоционального эффекта у пользователей.
10 самых популярных цветовых трендов в веб-дизайне весной 2010 | DesigNonstop
10 самых популярных цветовых трендов в веб-дизайне весной 2010
5
Приближающиеся весна и лето вызывают у людей естественное чувство спокойствия и предвкушения отдыха и развлечений. Дизайнеры из The Web Squeeze, на основании трендов в мире моды, составили рейтинг 10 самых актуальных цветов на весенний сезон 2010. Все представленные ниже 10 цветов являются легкими, воздушными и утонченными оттенками базовых цветов.
Весна 2010. Цветовая палитра.
Так выглядит цветовая палитра для этой весны. Разберем каждый цвет поподробнее.
Бирюзовый (Turquoise)
Бирюзовый — один из самых многообразных цветов. Он подходит как мужчинам, так и женщинам. Он не слишком синий и не слишком зеленый. Пример ниже показывает, насколько драматичным может быть бирюзовый цвет в сочетании с черным.
Цвет томатной пасты (Tomato Puree)
На цветовом круге цвет томатной пасты — это красный цвет, тяготеющий к синему. Одно только присутствие этого цвета добавляет страсти в любой дизайн. В сочетании с белым, черным и серым он все-равно будет доминировать, как видно из примера ниже.
Коралловый (оттенок Fusion Coral)
Этот цвет не часто используется как самостоятельный цвет. Но как гармоничное дополнение к другим цветам из коричневой палитры он может привнести дополнительный шарм в дизайн сайта.
Фиолетовый (Violet)
Если у вас есть продукт или сервис, о которых вы хотите рассказать с помощью сайта, то оптимальное решение — используйте фиолетовый. Этот цвет особенно хорош в сочетании с черным или серым, а также при добавлении желтого или нежно голубого.
Коричневый (оттенок Tuscanny)
Этот тёплый, лёгкий и весенний оттенок коричневого приятен глазу и подойдет как фон для любого дизайна. Его хорошо комбинировать с черным, оранжевым, бордовым, шоколадным и другими темными оттенками коричневого.
Желтый (оттенок Aurora)
Этот цвет представляет собой едва ощутимый оттенок мягкого желтого цвета. Он хорошо комбинируется и с красным цветом (цвет петуха на примере ниже) и серым цветом древисины. Этот цвет, как луч солнца — тепло и приятно.
Голубой (оттенок Amparo Blue)
Удачное сочетание синего с пурпурным оттенком. Хотите передать с помощью дизайна чувство волнения и радостного предвкушения — используйте этот цвет.
Розовое шампанское (Pink Champagne)
Легкий, романтичный и воздушный цвет. Хорошо сочетается с насыщенным лиловым, темно-коричневым и цветом меди. Можно его также попробовать с зеленым и темно-синим цветом.
Зеленый (оттенок Dried Herb)
Цвет сушеной травы с большим количеством серого. Хорошо сочетается с желтым, ярко-зеленым, оранжевым и белым, а также с мягким коричневым, цветом камня и эвкалиптовым.
Эвкалиптовый (Eucalyptus)
Нейтральный цвет и безопасный выбор. Этот тонкий оттенок превосходно сочетается с большим количеством цветов и хорошо подходит для дизайна..
Трендовые цвета в веб-дизайне 2021 года | Дизайн, лого и бизнес
Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.
Создать логотип онлайнРазработка сайта состоит не только из выбора доменного имени, хостинга и шаблона. Важно уделять должное значение цветовому решению сайта. Правильно выбранная расцветка способна положительно сказаться на отношении потенциальных клиентов к бренду. Какие цвета будут популярны в 2021 году в веб-дизайне? Об это читайте в данной статье.
Ниже представлены главные модные цвета в дизайне сайтов на 2021 год. Мы подробно описали их преимущества и рекомендации по использованию.
Розовый
Розовый цвет уже давно не приписывают только к женской аудитории. Сейчас такое цветовое решение используется компаниями различных направлений: от интернет-магазинов одежды до сайтов строительных фирм.
Популярность розового цвета в веб-дизайне обусловлена рядом причин. Во-первых, этот оттенок не перегружает глаза. Во-вторых, розовая расцветка способна вызвать у пользователей доверительное отношение к компании. Еще один плюс — данный цвет ассоциируется со спокойствием, беззаботностью и детством. Поэтому дизайн сайта в розовых тонах успокоит посетителей и снизит их напряжение.
Чаще всего розовый сочетают с желтым цветом. Это позволяет сделать текст выразительным и при этом не броским. Также распространенные решение — комбинация розового и черного.
Оранжевый, красный
Многие известные компании используют такое сочетание цветов в качестве расцветки сайта. Данные оттенки относятся к теплой гамме. Также они ассоциируются с 80-ми годами. Поэтому дополнительное воздействие оранжевого, красного и розового в совокупности — вызывание ностальгических чувств.
Часто можно увидеть комбинацию данных цветов в эффекте градиента. Это значительно смягчает эти яркие цвета и делает их более плавными, спокойными.
Тотальный черный
Использование черного цвета как основного тона в расцветке сайта кажется непривычным и абсурдным для многих пользователей. Однако такое цветовое решение пользуется популярностью среди западных организаций.
Черный обычно дополняют серым или белым. Такое решение смотрится стильно и элегантно. Кроме того, этот необычный подход вызывает восторг у посетителей сайта.
Однако, чтобы дизайн веб-сайта не превратился в однотонное пятно, необходимо приложить усилия и продумать окраску всех элементов (надписей, изображений и т.д.). Оптимально использовать в таком решении градиенты и другие переходы, позволяющие выделить отдельные составляющие сайта из черного фона.
Голубой + бирюзовый
Голубой цвет довольно часто можно встретить в качестве основного оттенка корпоративной расцветки. Однако в 2021 году возрастает популярность градиентов и более мягких переходов цветов. Голубой не выходит из моды, а комбинируется с бирюзовым.
Популярность такой расцветки обусловлена особенностью ее влияния на психику людей. Голубой (как и все холодные оттенки) оказывает успокаивающее действие, но при этом усиливает концентрацию внимания. Поэтому компании разных сфер выбирают этот цвет.
Серый
Серый цвет редко встречается в качестве самостоятельной единицы дизайна. Обычно он используется вместе с черным (в виде градиента). Но это в прошлом. Все больше брендов начинают делать серый цвет доминантой в своих проектах.
Такое цветовое решение выглядит необычно и однозначно удивит посетителей сайта. Если делать серый цвет центральным акцентом веб-дизайна, оптимально дополнять его синим, черным, голубым или зеленым тонами. Так вы создадите уникальное сочетание и выделите вашу площадку среди конкурентов.
Синий
Классический глубокий синий цвет все еще удерживает лидирующие позиции в качестве основы расцветки сайтов. Многие дизайнеры используют его в исходном виде (без добавления градиента и смешения с другими цветами). Чтобы расставить акценты, обычно используют белый цвет текста.
Чем обусловлена такая популярность синего цвета? Он, как и другие холодные тона, имеет положительное подсознательное воздействие. Это помогает представителям брендов добиваться нужного впечатления о компании и вызывать определенные эмоции у потенциальных клиентов.
Натуральные оттенки
Последние годы активно освещаются в СМИ и Интернет-источниках проблемы с экологией. Блогеры и представители компаний пытаются привлечь внимание своих клиентов и зрителей к экологическим катастрофам. Они делают это с помощью прямых призывов или косвенно — путем использования «экологичных» цветов в дизайне сайта.
Также натуральные оттенки ассоциируются с природой, чистотой, благополучием. Поэтому сайт в такой расцветке вызовет к посетителей чувство спокойствия, доверия к бренду.
Особенно часто зеленый, голубой и бежевый цвета применяются в качестве корпоративного цветового решения у фирм, реализующих натуральную косметику, веганские продукты, эко сумки из хлопка т.д. Это еще раз указывает на их eco-frendly.
Как подобрать цветовое решение сайта?
Выше мы описали основные трендовые цвета 2021 года. Однако, вопрос «Как выбрать расцветку для сайта?» остается открытым. Попробуем на него ответить.
В первую очередь, необходимо приглядеться к своему бренду. О чем он, что предлагает целевой аудитории, чем отличается от конкурентов и т.д. Ответив на данные вопросы, вы сможете определить особенности своей компании. Исходя из этого стоит выбрать основной цвет сайта.
Далее следует продумать несколько комбинаций главного тона с другими оттенками. Вы должны оценить, хорошо ли видны текст, изображения и иконки в такой расцветке. В идеале, цвета должны гармонировать, но при этом не сливаться друг с другом.
В цветовой гамме вашего сайта могут быть использованы как один, так и несколько тонов. Главное, не переборщить. Лучше выбрать 1-2 основных оттенка и 1-2 дополнительных. Отличным решением будет использование градиента. Тем более, в 2021 году он на пике моды.
Подведем итог
Цвета, используемые в веб-дизайне, играют большую роль в успешности фирмы. Поэтому важно подобрать подходящую расцветку, опираясь на уникальные черты бренда. А знание трендовых цветов этого года позволит получить актуальный дизайн сайта.
Другие статьи
Редактор блога и специалист по контент-маркетингу в Turbologo. Статьи Виктории содержат полезные советы о маркетинге, создании бренда и продвижении его в Интернете.
Бирюзовых цветовых схем для веб-сайтов
Бирюза — интересный цвет. А бирюзовые цветовые решения вызывают любопытство. И в реальной жизни, и в Интернете он считается прекрасно видимым цветом, одновременно интригующим и чрезвычайно красноречивым.
В сегодняшней статье мы сосредоточимся на использовании бирюзы в Интернете в интересных комбинациях, которые выделяют веб-сайты.
Точнее, начнем с одного цвета: бирюзового. Это зеленовато-синий цвет с кодом RGB # 40E0D0.
При выборе цветовой схемы для вашего веб-сайта бирюза может использоваться в различных комбинациях, в зависимости от вашего выбора в конструкторе веб-сайтов. В этом случае мы возьмем пример Colibriwp.
Некоторые варианты цветовых комбинаций, в том числе бирюзовый
Изображение предоставлено: https://www.color-hex.com/color-palette/1836
На этом рисунке показаны различные оттенки бирюзы, каждый со своим кодом HEX / RGB. Их можно комбинировать с контрастными цветами, чтобы продемонстрировать контент, который вы хотите выделить на страницах веб-сайта.
оттенков варьируются от самого светлого бирюзового до самых темных оттенков, поэтому вам нужно выбрать оттенок, который лучше всего соответствует бирюзовым цветовым схемам, которые вы хотите создать и интегрировать в свой веб-сайт.
Изображение предоставлено: https://www.color-hex.com/color-palette/43053
В этой цветовой палитре сочетаются бирюзовый и синий, и у вас есть код HEX / RGB для каждого из сочетаемых нюансов. Эта цветовая комбинация подходит для веб-сайта, где вы предпочитаете более светлые оттенки.В противном случае вы можете выбрать оттенок, который лучше всего соответствует вашему дизайну. Таким образом, вы можете начать создавать свою собственную цветовую схему, исходя из этого цвета. Рекомендуется выбирать цвета, контрастирующие с базовым бирюзовым цветом, который вы выбрали для своей цветовой схемы.
Теперь мы проведем бирюзовый цвет через все цветовые схемы, доступные в Colibriwp. Мы обсудим эффекты каждой цветовой схемы, в которой сочетается бирюза:
Бирюза в цветовой гамме 1
Для простоты использования каждый цвет в выбранной цветовой схеме имеет подробную информацию о шестнадцатеричном коде.Таким образом, цвет может быть воспроизведен в любом другом месте на сайте, просто введя тот же HEX-код для элемента, который вы хотите настроить.
Это интересная цветовая комбинация из-за присутствия оранжевого и белого в цепочке холодных цветов. Идеальный баланс между синим, бирюзовым, зеленым, с одной стороны, и оранжевым, белым, черным — с другой. Первая цветовая гамма обеспечивает основу для построения презентации. Вторая цветовая гамма поддерживает видимость элементов, заимствовавших эти нюансы и оттенки.
Для каждого цвета в цветовой схеме вы можете расширить панель с помощью шестнадцатеричного кода, который может потребоваться записать для дальнейшего использования на веб-сайте.
Бирюза в цветовой гамме 2
Это более яркая цветовая схема. Он включает в себя оранжевый и желтый для эффекта яркости. Белый цвет обязательно должен присутствовать в цветовой комбинации, которая определяет хроматический баланс всего веб-сайта.
Эти смежные цвета, рядом с бирюзовым, изменяют его тон вверх и вниз в зависимости от области, которую вы настраиваете на страницах веб-сайта.Этого достаточно для веб-сайтов, где вам нужна достаточно заметная цветовая схема. В то же время они позволяют контенту сиять на разных страницах.
В этой цветовой схеме успешно используются дополнительные цвета, оставляя место для уникальности, позволяющей проработать то, что очевидно и приятно заметить на веб-страницах.
Запишите шестнадцатеричный код для каждого цвета, чтобы воспроизвести его в других областях веб-сайта, если вы хотите сохранить согласованную цветовую схему на всех страницах.
Бирюза в цветовой гамме 3
В этой цветовой гамме бирюза сочетается с ее вариацией, оранжевым и зеленым, образуя интересную цветовую комбинацию. Бирюзовые вариации и яркие цвета создают хроматический баланс, который вы можете успешно использовать на своем веб-сайте для получения приятных эффектов. Контраст между холодными и теплыми цветами легкий, благодаря нюансам, которые включает эта цветовая гамма. Оранжевый и зеленый идеально подходят для кнопок с призывом к действию.Они выделяются в общей цветовой гамме, где преобладают бирюзовый, синий, белый и черный.
Мы надеемся, что эти цветовые комбинации вдохновят вас и помогут создать идеальный веб-сайт, который красноречиво выражает индивидуальность вашей компании или вашей личности. Также не стесняйтесь экспериментировать с различными комбинациями. И не стесняйтесь включать различные нюансы в цветовую схему, которую вы будете использовать в качестве основы для своего дизайна. ColibriWP — подходящий инструмент для таких экспериментов.
Психология цвета для улучшения вашего веб-дизайна: часть 2
Цвета — мощный инструмент, который пробуждает чувства, изменяет настроение и может призывать к действию.Все это тесно связано с психологией цветов, которые вы можете использовать в своем веб-дизайне, чтобы передать свое сообщение на интуитивном уровне — быстро и эффективно.
В первой части статьи вы могли найти остальные основные цвета с их анализом.
Использование холодных цветов может успокаивать аудиторию, укреплять доверие или говорить об инновациях. Хотите узнать больше? Давайте отправимся в глубокое синее море и разберемся с смыслом цветов.
● Зеленый ● Синий ● Бирюзовый ● Фиолетовый ● Розовый ● Пурпурный
Психология цвета: Зеленый
Ключевые слова
Равновесие, гармония, безопасность, богатство, рост, естественность, профессиональное качество, спокойствие, освежение.
Хорошо для
Призыв к действию; обеспечивает максимальную читаемость и снижает оптическую усталость.
Плохо для
Рестораны (кроме органических) — потому что зеленый снижает кровяное давление, расслабляет нервную систему и подавляет аппетит; слишком много зеленого может вызвать чувство зависти, негодования и собственничества.
Рынок
Здоровый образ жизни, органические продукты, экологически чистые продукты, финансы.
Немного подробнее…
Являясь сочетанием желтого и синего, зеленый объединяет ясность ума и оптимизм желтого с эмоциональным спокойствием и проницательностью синего. В зеленом больше оттенков, чем в любом другом цвете.
Зеленый, как известно, помогает облегчить депрессию, нервозность и беспокойство. Он также способствует чувству обновления, самоконтроля и гармонии.
В сочетании с другими цветами
- Серебро — элегантность и изысканность
- Синий — свежесть, рост, природа
- Коричневый / коричневый / бежевый — переработка, органика
- Желтый — спортивный, уличный
- Purple — очень контрастный — возбуждающий
Примеры веб-сайтов
Психология цвета: Синий
Ключевые слова
Доверие, мир, верность, порядочность, консерватизм
Хорошо для
Корпоративный, строительный трест, здоровья.
Плохо для
Еда и рестораны , дизайн, пытающийся передать страсть, энергию и скорость
Рынок
Неон и синий электрик для молодежного рынка
Deeper blues для зрелых людей
Подходит как для мужчин, так и для женщин
Немного подробнее…
Может способствовать расслаблению и спокойствию пользователя , но иногда он также воспринимается как скучный и предсказуемый, поэтому выбирайте правильные оттенки для своего проекта с умом.
Синий может быть холодным и угнетающим. — синий заставляет организм вырабатывать успокаивающие химические вещества, он вызывает отдых, который иногда может быть слишком большим.
В сочетании с другими цветами
- Красный / оранжевый / желтый — эффектный дизайн, привлекающий внимание
- Пастельные тона — беззаботность, свежесть, праздничность
- Green — нежный, успокаивающий и успокаивающий
- White — свежий, свежий, морской
- Silver — элегантный, насыщенный
Примеры веб-сайтов
Психология цвета: бирюза
Ключевые слова
Ясность, общение, спокойствие, зарядка, дух, позитивное мышление
Хорошо для
Поликлиники , практикующие, чистящие средства
Плохо для
Традиционные веб-сайты , способствующие стабильности
Рынок
Молодежь, гики, здоровье
Немного подробнее…
Бирюза считается противовоспалительным средством и помогает улучшить коммуникативные навыки , успокаивает разум и тело.
Слишком много бирюзы может стать суетливым, , чрезмерно аналитическим и замкнутым.
В сочетании с другими цветами
- Черный — прочность образа
- Темно-синий — более консервативный
- Pink — привлекательный для женского рынка
- Красный — привлекающая внимание комбинация
Примеры веб-сайтов
Психология цвета: фиолетовый
Ключевые слова
Воображение, духовность, высокие идеалы, роскошь, экстравагантность, уникальность, высшее качество, фантазия, ностальгия.
Хорошо для
Продукция «New age» — чтобы подчеркнуть их индивидуальность и неповторимость.
Плохо для
Фиолетовый находится на самой короткой частоте волны, видимой человеческим глазом, что может затруднить работу с цветом. Поскольку он говорит о роскоши и королевстве, не рекомендуется использовать его для веб-сайтов, предлагающих недорогих услуг и продуктов.
Рынок
Рынок в основном женский и молодежный, но в целом он может иметь отношение ко всем культурам и полам.
Немного подробнее…
Говорят, что он обладает силой поднимать настроение, успокаивать нервы, а способствует творчеству. делает его всеобъемлющим цветом. Фиолетовый также символизирует храбрость. В Египте, например, фиолетовый также символизирует добродетель и веру.
В сочетании с другими цветами
- Золото / фиолетовый с серебром — добавляет роскоши, престижа и качества
- Красный — добавляет энергии и волнения
- Пурпурный — добавляет живости
- Зеленый / синий — ощущение хорошего самочувствия
Примеры веб-сайтов
Психология цвета: Розовый
Ключевые слова
Вдохновляющий, теплый, сострадательный, утешительный, надежный, успокаивающий, заботливый
Хорошо для
Косметика, мода, красота, романтика
Плохо для
Что ж, мы не можем думать о плохом использовании розового цвета, исследовать вашу целевую аудиторию и тестировать — это ясно покажет, подходит ли розовый цвет к картине.
Рынок
Рынок женщин, молодежи, подростков и подростков
Немного подробнее…
Розовый — это, прежде всего, женский цвет. По этой причине этот цвет используется как универсальный символ надежды и осведомленности в борьбе с раком груди. Однако в Японии розовый имеет мужских ассоциаций, — это розовые цветы вишни — символ павших воинов. Поэтому некоторые розовые оттенки могут быть стимулирующими и воплощать силу.
Яркие и теплые розовые оттенки , такие как фуксия или пурпурный, придают яркости, молодости и вызывают чувство уверенности.
В сочетании с другими цветами
- Розовый с более темными цветами — добавляет силы
- Ярко-розовый — модный, менее дорогой товар
Примеры веб-сайтов
Психология цвета: пурпурный
Ключевые слова
Сильный, вдохновляющий, новаторский, творческий, живой, эпатажный
Хорошо для
Нетрадиционные сайты, индивидуализм
Плохо для
Традиционные веб-сайты, официальные
Рынок
Креатив, молодежь
Немного подробнее…
Пурпурный цвет — это цвет бодрости, счастья, удовлетворенности и признательности .Большинство людей чувствуют себя более оптимистично в компании пурпурного.
Слишком много пурпурного цвета может вызвать высокомерие и властность, заставляя нас чувствовать себя подавленными, раздраженными, тревожными и нетерпимыми.
В сочетании с другими цветами
- Темно-синий / темно-зеленый / темно-серый / черный — уменьшение интенсивности
- Золото / серебро — добавление элегантности и изысканности
Примеры веб-сайтов
Заключение
Существует множество исследований психологии цветов, и, как правило, одни и те же значения используются в разных сферах — веб-дизайне, дизайне интерьеров, фильмах, моде и так далее.Поиграйте в небольшую игру и осмотритесь — узнайте, как окружающие вас цвета влияют на вас лично и влияют на ваше поведение. Вскоре вы обретете еще большую уверенность в выборе цветов для своих веб-проектов — вы просто будете «следить» за цветами.
А пока вы можете ознакомиться с нашей последней статьей, посвященной тому, как именно психология цвета может повлиять на вашу целевую аудиторию, чтобы она действовала.
Бирюза Значение, сочетания и шестнадцатеричный код
Бирюза получила свое название от драгоценного камня, которое происходит от французского слова «турецкий».
Бирюза, расположенная между синим и зеленым на цветовом круге, представляет собой смесь бледно-голубого и зеленого или синего с небольшим количеством желтого. Его шестнадцатеричный код — # 30D5C8.
Это спокойный, дружелюбный и счастливый цвет, излучающий спокойствие синего, рост зеленого и энергию желтого. Бирюза может помочь в ясном мышлении.
Также обозначает воду с
«Бирюза», что на жаргоне обозначает воды Карибского моря.
Бирюза
имеет как согревающий, так и охлаждающий эффект в дизайне.Он хорошо сочетается с серыми и нейтральными оттенками и оттеняет желтый, розовый и темно-оранжевый.
Ищете другой оттенок? Следующие цвета относятся к бирюзовому.
Информация о бирюзовом / # 30D5C8
В цветовом пространстве RGB (состоящем из трех цветных огней для красного, зеленого и синего) шестнадцатеричный # 30D5C8 состоит из 18,8% красного, 83,5% зеленого и 78,4% синего. В цветовом пространстве CMYK (также известном как триадный или четырехцветный и используемый при цветной печати) шестнадцатеричный цвет # 30D5C8 состоит из 77% голубого, 0% пурпурного, 6% желтого и 16% черного.Бирюза имеет угол оттенка 175,3 градуса, насыщенность 66,3% и яркость 51,2%.
Преобразование цвета
Шестнадцатеричный цвет # 30D5C8 имеет значения RGB R: 18,8, G: 83,5, B: 78,4 и значения CMYK C: 0,77, M: 0, Y: 0,06, K: 0,16.
| Значение | CSS | |||
|---|---|---|---|---|
| Шестнадцатеричный | 30d5c8 | # 30d5c8 | ||
| Процент RGB | 18.8, 83,5, 78,4 | rgb (18,8%, 83,5%, 78,4%) | ||
| CMYK | 77, 0, 6, 16 | |||
| HSL | 175,39 , 51,2 | hsl (175,3 °, 66,3%, 51,2%) | ||
| HSV (или HSB) | 175,3 °, 77,5, 83,5 | |||
| cc 21 904cc 21 | # 33cccc | |||
| CIE-LAB | 77.509, -43.201, -5.325 | |||
| XYZ | 35.433, 52.383, 62.876 | |||
| xyY | 0.235, 0.348, 52.310249000 | 0.235, 0.348, 52.31024 | , 43.527, 187.027 | |
| CIE-LUV | 77.509, -57.919, -1.479 | |||
| Hunter-Lab | 72.376, -35.940 904.96 | 00110000, 11010101, 11001000 |
Что говорит о вас цветовая схема вашего веб-сайта?
Вы хорошо продумали выбор цветов для своего веб-сайта .Но знаете ли вы, что этот выбор может многое рассказать о подсознательном восприятии вашего бизнеса? Поскольку цвета веб-сайтов могут включать множество разных оттенков, мы выйдем за рамки основных цветов и черт характера и остановимся на цветовых сочетаниях и оттенках, таких как бирюзовый, розовый и лавандовый. А поскольку большинство веб-сайтов используют 2–3 разных цветовых схемы, вы узнаете, как они влияют друг на друга, и выясните, оказывают ли они желаемый эффект на вашу целевую аудиторию.
Красный
Красный яркий.Он кричит: «Обратите внимание!» и предупреждает об опасности. В древности красный был цветом силы. Сегодня красный цвет — это не только один из самых легко заметных цветов спектра, но и цвет любви и желания.
Общие темы, которые помогают подчеркнуть красный цвет, включают оттенки серого, которые часто используются на корпоративных сайтах для обозначения стабильности и, в некоторой степени, надежности и наследия. Использование красного цвета подразумевает, что вы сильный человек, который не останавливается на достигнутом, но старается добиться того, чтобы дела были замечены.Вы не соглашаетесь на второе место.
Примеры красных сайтов
Стейси Биас
Стейси Биас — активистка, педагог и предприниматель из Портленда, штат Орегон.
Jewely CMS
Jewely — это Rails CMS с открытым исходным кодом.
Джонас Дауни
Джонас Дауни — веб-дизайнер и разработчик, живущий недалеко от Чикаго.
Зеленый лук
Апельсин
Апельсин осторожен и беззаботен.Это означает чувство игривости и любопытства. Использование этого яркого цвета вместе с более холодным оттенком, таким как бирюзовый или синий, — одна из самых любимых и сбалансированных цветовых схем веб-сайтов. Он также размещен на сайтах ресторанов, чтобы подсознательно стимулировать аппетит.
Оранжевый и зеленый часто используются на объектах здравоохранения, чтобы пробудить ощущение естественной энергии. Использование оранжевого цвета показывает, что вы беззаботны и общительны — с живым умом, который горит вопросами. Вы бесстрашны и беспокойны, не так общительны, как красные, но все равно популярны.
Примеры сайтов Orange
Clardio Design
Clardio Design — это портфолио Клода Арнерина, менеджера проектов, веб-дизайнера и внешнего разработчика.
BildmachtPlus
BildmachtPlus предлагает полный комплекс услуг для интерактивных и новых медиа.
Bendaly Folio
Бен Дейли Мохамед — веб-дизайнер из Туниса.
Желтый
Желтый обычно используется в эффектах наведения курсора, чтобы помочь различать цвета кнопок, и чаще встречается на темных сайтах, чем на белом, из-за его яркой яркости.В сочетании с другими основными цветами (красный и синий) желтый вызывает ощущение детской радости и жизнерадостности.
Люди, которые предпочитают желтый цвет на своем сайте, как правило, очень проницательны, остроумны и сообразительны. У них есть внимание к деталям и сильное желание продолжать учиться.
Примеры желтых сайтов
Восстановить
Портфолио Кевина Суини, интерактивного дизайнера.
Mooze Design
Mooze Design — агентство графического дизайна.
Fringe Focus
Блог о дизайне Роба Лукотки, графического и веб-дизайнера из Чикаго.
Зеленый
Цвет чистоты, искренности и природы, зеленый и синий — одни из наиболее распространенных (и, как некоторые могут сказать, чрезмерно используемых) цветовых схем веб-сайтов. Зеленый цвет используется для создания атмосферы мира, надежды и обновления и является фаворитом организаций.
Выбор зеленого цвета в вашей цветовой схеме означает, что вы говорите то, что думаете, без приукрашивания.Вы также очень вовлечены в формирование чувства общности и хорошей репутации.
Примеры экологичных сайтов
Феликс Бланко
Феликс — веб-разработчик, живущий в Мадриде.
Toasted Digital
Toasted Digital — это псевдоним веб-дизайнера Сэма Кларка.
Cedar CMS
Cedar — это система управления контентом.
Синий
Любимый для веб-дизайнеров синий цвет означает чувство сострадания, ясности и надежности.На международном уровне это самый «безопасный» цвет для использования в рекламе и упаковке. В сочетании с более теплым оттенком, таким как красный или оранжевый, синий имеет тенденцию скрываться на заднем плане, позволяя ярким оттенкам быть в центре внимания.
Те, кто использует синий цвет на своих сайтах, склонны к самообладанию, сообразительности и надежности. Если это вы, то можете считать себя глубоким мыслителем со многими замечательными качествами.
Примеры синих сайтов
OC Design
OC Design — дизайнерская фирма из Чешской Республики.
Chef De Projet Internet
Chef De Projet Internet — это портфолио веб-предпринимателя Бриса Губана.
Campaign Monitor
Campaign Monitor — это программа электронного маркетинга для веб-дизайнеров.
Purple
Цвет королевской семьи, фиолетовый часто используется с оттенками, такими как золото или серебро, чтобы подчеркнуть роскошь или изысканный вкус. Его также можно комбинировать с черным, чтобы вызвать чувственную или таинственную «темную сторону».
Если вы предпочитаете фиолетовый цвет на своем веб-сайте, вы гордитесь своей индивидуальностью и стремлением отличаться от других. Ваш нестандартный подход к вещам также делает вас более терпимым к чужим «причудам». У вас отличное творческое начало.
Примеры пурпурных сайтов
Tanaiska
Tanaiska — это рекламный сайт «Абада и ужин в Камеруне бесплатно».
Мемориальный фонд Чака Олмстеда
Мемориальный фонд Чака Олмстеда поможет обнаружить аневризму до ее разрыва и повысить осведомленность о симптомах уже разорвавшейся аневризмы головного мозга.
Кассиус
Майкл Кассиус — креативный веб-дизайнер из Мельбурна и Сиднея.
Бирюзовый
Этот привлекательный цвет нашел новое применение среди сайтов и приложений в стиле «веб 2.0», где он часто сочетается с ярким зеленым, оранжевым или пурпурным, чтобы создать новый стиль.
Точно так же люди, которые используют бирюзовый цвет на своем сайте, обычно привлекательны, очаровательны и удивительно креативны. На первый взгляд они могут показаться крутыми и уверенными, но внутри их разум движется со скоростью девяносто миль в минуту, генерируя новые идеи и вопросы.
Примеры бирюзовых / бирюзовых сайтов
Owltastic
Owltastic — это блог Миган Фишер, талантливого веб-дизайнера и докладчика.
Люсия Сото
Люсия — графический дизайнер, иллюстратор и увлеченный фотограф.
Джош Салливан
Джош Салливан — веб-дизайнер / разработчик, живет в Нэшвилле, штат Теннесси.
Pink
Несомненно женственный розовый цвет — это чувство любви без грубой страсти, которую требует красный.Те, кто использует розовый цвет на своих сайтах, склонны к материнству — если у них нет собственных детей, они создадут семью через сообщество.
Люди, которые используют розовый, как правило, заботятся и заботятся. Они — бесконечный источник вдохновения и нежности для окружающих.
Примеры сайтов Pink
Make Mine Pink
Make Mine Pink основана Джойс Лукас, веб-дизайнером, графическим дизайнером, фотографом-любителем, мечтательницей и поборницей женщин в бизнесе.
Дизайны от Patima
Портфолио дизайнов для Patima Tantiprasut.
Чарука
Чарука — это вселенная персонажей, созданная Чарукой Варгасом.
Лаванда
Сочетайте уравновешенность и изысканность фиолетового с защитной стороной розового, и вы получите все качества человека, который любит лаванду. Сайты, в которых используется лаванда, как правило, постоянно работают над улучшением и усовершенствованием во всех смыслах.Эти сайты являются лидерами без свирепости и силы более теплых цветов, но при этом сохраняют более мягкую сторону.
Примеры сайтов с лавандой
Sylvia Loh
Сайт Sylvia Loh.
Shout Digital
Shout Digital — цифровое агентство, предлагающее стратегические цифровые решения.
Bad Ass Ideas
Bad Ass Ideas — блог Саманты Уоррен о веб-дизайне.
Коричневый
Глубокий землистый цвет, оттенки коричневого, от глубокого шоколадного до бежевого. Использование коричневого на вашем сайте призвано создать надежный и солидный образ.
Коричневый не скупится на слова и не подходит к вещам с импульсивной полосой, характерной для оранжевого или желтого, но те, кому нравится коричневый, по-прежнему те люди, которым вы всегда можете доверять и на которых можно положиться, когда более яркие цвета не подходят для другого. приключение.
Примеры коричневых сайтов
Марк Грабански
Блог разработчика Марка Грабански.
Сэм Асанте
Сэм Асанте — веб-дизайнер из Кардиффа, Южный Уэльс, Великобритания.
Bright Creative
Bright Creative — это студия для одного человека в Ванкувере, Британская Колумбия, которой руководит Дэйв Ши.
Серый
Серый — это цвет изысканности, испытанного временем, выдержавшего испытание временем. Фаворит корпоративных и технологических сайтов, особенно в сочетании с синим или бирюзовым, серый — это круто, изысканно и всегда бдительно. Те, кто использует значительное количество серого на своем сайте, ценят традиции и успокаиваются, когда раскачивают лодку только для того, чтобы создать волны.
Примеры серых сайтов
Johnny Rocket Creative
Портфолио Джонатана Дайелло, опытного дизайнера.
efingo
Портфолио веб-дизайнера Каталин Борой.
Apple
Официальный веб-сайт Apple Inc.
Черный
Наряду с белым, черный на самом деле не «цвет», но его использование на вашем сайте все же кое-что говорит о вас. У вас могут быть скрытые желания и глубины, о которых мало кто знает.Вам нелегко открыться другим, но сама ваша загадка — это то, что привлекает к вам других — как мотыльки к свету. Использование черного на вашем сайте может показать атмосферу секретности, изысканности и соблазнительной красоты.
Примеры черных сайтов
Beta Design Studio
Веб-сайт Франческо Аньолетто, веб-дизайнера из Венеции, Италия.
Оуэн Льюис
Оуэн Льюис — внештатный веб-дизайнер и интерфейсный веб-разработчик из Кардиффа.
Nedeco
Nedeco — это портфолио Нягу Дениса, веб-дизайнера и графического дизайнера.
Белый
Наличие достаточного «белого пространства» делает сайт читаемым и легким для навигации. Те, кто использует белый цвет на своих сайтах, демонстрируют чистоту, чистоту и, в некоторых случаях, святость или благоговение. Те, кто предпочитает белый цвет, стремятся создать открытое и свободное пространство. В сочетании с другими цветами белый цвет позволяет им занять центральное место и произвести сильное первое впечатление.
Примеры белых сайтов
Рэй Дидит
Рэй Энтони — графический дизайнер, увлеченный искусством.
Дэн Скоттон
Дэн Скоттон — внештатный веб-разработчик и информационный архитектор, живущий в Лондоне.
Колин Грист
Колин Грист (Colin Grist) — дизайнер веб-сайтов, интерфейсный разработчик и обычный бродяга.
Чтение вашей личности
Как цветовая схема вашего веб-сайта отражает вашу индивидуальность? Вы больше красный или лавандовый? Синий или сине-зеленый? Что вы хотите, чтобы люди чувствовали и узнавали о вас, когда посещали ваш сайт? Расскажите нам об этом в комментариях ниже.
Синие веб-сайты с потрясающими цветовыми палитрами, которые вы должны увидеть.
В современном мире контент важнее, чем когда-либо.Людей привлекают свежие идеи и полезная информация. Поскольку эта среда, как известно, очень конкурентоспособна, подумайте об использовании цветовой палитры вашего веб-сайта, чтобы опередить конкурентов.
Сайты синего цвета известны тем, что вызывают доверие у пользователей, так как именно это цвет представляет. Цвет — один из самых мощных инструментов дизайнера, хотя сложность заключается в том, что он может либо придать дизайну великолепный вид, либо разрушить его. Поэтому выбор правильного цвета должен быть приоритетом для любого дизайнера.
Почему синие сайты?В этой статье, созданной нашей командой из Amelia (лучший плагин календаря бронирования WordPress), мы собираемся обсудить синий цвет и то, как его лучше всего использовать на вашем веб-сайте. Мы предложим варианты наилучшего использования синего и дадим вам визуальное вдохновение на примерах.
Популярным примером использования синего цвета является Facebook. Забавный факт относительно выбора синего цвета на самом деле связан с тем, что Марк Цукерберг дальтоник к красно-зеленому цвету.Хотя это, вероятно, был очевидный выбор, он все же демонстрирует силу цвета. Синий — один из самых безопасных вариантов, которым могут пойти дизайнеры. Это потому, что синий — любимый цвет у большинства населения.
Blue также ассоциируется с доверием и надежностью и вызывает доверие у людей, которые его видят. Согласно научным исследованиям было показано, что он оказывает успокаивающее действие на мозг. Это также гостеприимно и дружелюбно. Поскольку это такой яркий и универсальный цвет, синий стал одним из наиболее популярных вариантов для веб-дизайнеров.
Это причина того, что синие веб-сайты все чаще используют этот цвет. Основные категории, которые подходят для него:
- Бизнес-сайты
- Финансовые сайты
- Спа и оздоровление
- Праздники и круизы
- Некоммерческая
Жан-Батист Калоя использует один из самых популярных цветов в дизайне своего веб-сайта с различными оттенками синего.Мы можем видеть мягкие градиенты на более светлых синих тонах, которые выглядят великолепно.
Фонд SquillaОбратите внимание на мягкие бежевые тона, смешанные с красивой бирюзой, на этом корпоративном веб-сайте, посвященном криптоиндустрии. Цветовая палитра делает упор на надежность и комфорт. Название синих цветов сайта:
- бирюзово-голубой
- Синий лунный камень
- Синий порошок
- Magic Mint
- Белый дым
Синие веб-сайты, подобные этому, выглядят еще лучше, если их миссия четко определена.Здесь мы говорим о климатическом отчете, который содержит важные данные и требует максимальной ответственности.
Webflow Interactions 2.0 ВзаимодействияWebflow используют преимущества популярной синей палитры, а также добавляют некоторые градиенты, чтобы получить простую цветовую схему. В дизайне также присутствует немного розового цвета, который помогает получить современный привлекательный вид.
КанаталCanatal использует оттенки синего, чтобы показать красивый дизайн.Этот синий веб-сайт — отличный пример того, как использовать монотонную цветовую палитру, не будучи скучным.
Озеро НонаПоскольку этот веб-сайт ориентирован в первую очередь на водоем, вполне естественно, что мы видим на их веб-сайте всплеск синего цвета, который очень хорошо сочетается с показанными более нейтральными цветами.
ДепартикаЦветовая палитра, используемая для этого веб-сайта, чистая и профессиональная благодаря мягким синим, серым и белым оттенкам.Он привлекает внимание своим ярким цветовым сочетанием и дает нам отличный пример того, как должен выглядеть синий сайт.
ЛобстерЕсли вы поклонник сочетания синего и розового, то этот веб-сайт является отличным примером того, как они могут хорошо работать вместе. Синие веб-сайты иногда трудно сочетать со вторым цветом, но дизайнеры Lobster проделали большую работу.
SkyboatВ этом примере синий цвет подходит для более ориентированного на бизнес сайта.Поскольку дизайн не мог быть выполнен с использованием только синего, мы также видим добавление черного, и это выглядит великолепно!
MarqetaФинансовые веб-сайты любят использовать синий цвет, поскольку этот цвет подразумевает надежность и доверие. Поскольку Margeta предлагает другой вид услуг по потребительскому кредиту, использование небесно-голубого цвета также отличается от обычного брендинга. Для цветовой схемы используется темно-синий, фиолетовый и голубой цвета.
ВыемкаНа синих веб-сайтах обычно используется сочетание разных оттенков цвета.Это приносит спокойную и мечтательную атмосферу.
AwinkМонотонный цвет в сочетании с различными оттенками синего делает этот веб-сайт визуально привлекательным. Нам также нравятся его более широкие, темные акценты с темными и светлыми областями экрана, которые создают оптическую иллюзию.
Это заставляет вас думать, что вы видите больше цветов, чем есть на самом деле.
Cher AmiЭта красивая цветовая схема придает королевский элегантный вид за счет использования темно-синих и золотых оттенков.Результат похож на другие показанные нами синие веб-сайты, но в современной интерпретации.
Он использует его для создания впечатляющих визуальных впечатлений и сразу позиционирует бренд как ведущего игрока.
Джулиан ДэмиДля создания изысканного образа создатели этого веб-сайта использовали темно-синие тона вместе с золотыми бликами. Результат? Великолепная цветовая палитра, вдохновленная историей искусства, выглядит вневременной и красивой.
AppbotЦвета, используемые в Appbot, соответствуют идее бренда.Мы можем видеть мощные сочетания синего и белого.
Андрис Горакс Веб-сайтыBlue также отлично подходят для использования в качестве портфолио. Этот принадлежит разработчику, и мы сразу видим, как синий цвет демонстрирует надежность и доверие. Для этого использовались следующие цвета:
- Пучки синий
- Французский небесно-голубой
- Голубая Алиса
- Белая медь
Когда вы увидите этот синий веб-сайт, вы будете впечатлены его чистым видом.Отличный способ добиться того же эффекта — использовать градиенты. Палитра сайта выполнена в свежих синих и бирюзовых тонах. Они обладают успокаивающим и расслабляющим действием.
ПазПалитра на этом сайте сделана с использованием синего, белого и черного цветов. Хотя в мире дизайна это основная цветовая схема, когда она оформлена так, как на сайте, в результате получается профессиональный вид.
КреддиЭто классическая комбинация красного и синего цветов для создания нового дизайна веб-сайта.
СекуринвестЕще один новый и красочный пример того, как синие сайты могут отлично выглядеть при добавлении других элементов.
подробностиЭто отличный сайт, в котором используются простые смелые цвета, чтобы привлечь внимание к своему дизайну.
Янтарь СюйЗавершая витрину наших синих веб-сайтов, мы видим, что минималистский тренд, использованный на этом веб-сайте, был реализован с использованием сплошных цветов на черном фоне.
Если вам понравилось читать эту статью о синих веб-сайтах, вы должны проверить эту о веб-сайтах с желтой цветовой палитрой.
Мы также писали о нескольких связанных темах, таких как цветовые схемы веб-сайтов и примеры пастельных цветовых палитр.
39 вдохновляющих цветовых схем веб-сайта, которые пробудят ваши творческие способности
Ищете вдохновляющие цветовые схемы для веб-сайта? Мы собрали коллекцию прекрасных дизайнов веб-сайтов, великолепные цветовые схемы которых, несомненно, заставят ваши творческие соки течь.В данную коллекцию вошли:
- мягкие и бледные цветовые схемы сайта,
- пастельных и землистых цветовых схем сайта,
- ярких цветовых схем сайта,
- темных цветовых схем сайта,
- монохромных цветовых схем сайта.
Хотите узнать о главных тенденциях веб-дизайна 2021 года?
I. Мягкие и бледные цветовые схемы веб-сайта: Feelin ’Comfy
Мягкие пастельные цветовые схемы для веб-сайтов — одни из самых популярных вариантов оформления веб-сайтов.Такие цветовые решения сайта легко ассоциируются с романтикой и чистотой. Они также обладают спокойствием. Это делает их идеальным выбором для широкого круга брендов, которым необходимо демонстрировать надежность и комфорт.
Мягкие и бледные цветовые решения веб-сайта гостеприимны и уютны. Вот подборка сайтов, выполненных в таких цветовых решениях. Вы ощутите комфорт и уют?
1. Beauregard
Веб-сайт, посвященный искусству и красоте дизайна часов.Веб-сайт интуитивно понятен и выполнен в красивой цветовой гамме, передающей чистоту и комфорт. Шестнадцатеричные коды соответствуют следующим цветам:
- ISABELLINE
- БЫСТРЫЙ СЕРЕБРЯНЫЙ
- AUROMETALSAURUS
- СВЕТЛО-СЕРЫЙ
- ЧЕРНЫЙ ОЛИВКОВЫЙ
2. Фонд Squilla
Мягкие бежевые тона в сочетании с успокаивающими бирюзовыми оттенками делают этот корпоративный сайт об инвестициях в криптоиндустрию надежным и комфортным.Вот цвета, использованные при создании дизайна этого веб-сайта:
- ЧЕРНО-СИНИЙ
- ЛУННЫЙ КАМЕНЬ
- СИНИЙ ПОРОШОК
- ВОЛШЕБНАЯ МЯТА
- БЕЛЫЙ ДЫМ
3. Либенар
Мягкие пастельные цветовые решения для веб-сайтов передают чистоту, что делает их идеальными для презентации детских товаров. Этот конкретный веб-сайт был сделан с мягкими и бледно-розовыми и синими оттенками, дополняющими основное сообщение веб-сайта. Использованы следующие цвета:
- СНЕГ
- РОЗОВЫЙ ИСПАНСКИЙ
- ПЫЛЬНЫЙ ШТУР
- МЫЛО
- ЯЛЕ-СИНИЙ
4.Mont Roucous
Чистый и красивый сайт, рекламирующий детские товары. Дизайнеры сделали ставку на бледно-розовые оттенки в сочетании с более лиловыми нюансами, чтобы создать красивую цветовую палитру сайта, а именно:
- КАРОЛИНА СИНИЙ
- ПАСТЕЛЬНЫЙ РОЗОВЫЙ
- ЧАЙНАЯ РОЗА
- МАКСИМАЛЬНЫЙ СИНИЙ ФИОЛЕТОВЫЙ
- ОРГАНИЗАЦИЯ ОБЪЕДИНЕННЫХ НАЦИЙ СИНИЙ
5. Ковбойские велосипеды
Сайт о новом поколении электровелосипедов.Этот дизайн был выполнен с мягкими золотисто-розовыми оттенками, яркими цветами типографики и забавными золотыми деталями. Цветовая гамма сайта состоит из:
- ЛАВАНДОВАЯ РУМАЯ
- ЧАЙНАЯ РОЗА
- РОЗОВОЕ ЗОЛОТО
- КРАСНЫЙ РАДИКАЛЬНЫЙ
- СВЕТЛЫЙ ФРАНЦУЗСКИЙ БЕЖЕВЫЙ
Вдохновляющие цветовые схемы веб-сайта фиолетовый пастельный фиолетовый и розовый веб-сайт
6. Сахель
Мягкий и элегантный дизайн веб-сайта, выполненный в сложной цветовой гамме, сочетающей нежные пастельно-розовые и бежевые оттенки с золотыми и медными элементами дизайна.Названия цветов, используемых в цветовой схеме этого веб-сайта:
- ТЕМНОЕ ЗОЛОТО
- ТАН
- ПЫЛЬНЫЙ ШТУР
- БЕЛЫЙ ДЫМ
- VAN DYKE КОРИЧНЕВЫЙ
7. Я и мистер Дарси
Блог в очень женственном веб-дизайне радует глаз красивыми теплыми цветами. Этот блог о «жизни и любви», по словам владельца, был выполнен в цветовой гамме с этими ведущими цветами:
- МИНДАЛЬ
- РОЗОВЫЙ ШАМПАНСКИЙ
- СРЕДНИЙ ФИОЛЕТОВЫЙ
- КОБИ
- СОЛНЕЧНИК
8.Спасаем воздух
Многоцветный дизайн веб-сайта, выполненный в красивой очаровательной цветовой гамме радуги. Представленная в бледных оттенках цветов, эта схема, несомненно, передает чистоту и свежесть. В этом дизайне использованы следующие цвета:
- АЭРО СИНИЙ
- ОРХИДЕЯ СВЕТЛАЯ СРЕДНЯЯ
- МЕД
- СВЕТЛЫЙ КОРАЛЛ
- ШЕЛК НЕБЕЛЫЙ
9. Менд Зельцер
Красивая и романтичная цветовая гамма веб-сайта, специально подобранная для представления новых полезных для здоровья продуктов.Сочетая романтические оттенки розового, желтого и лавандового, вот точные названия цветов, используемых в этом веб-дизайне:
- ПЛАТИНОВЫЙ
- ТАНГО РОЗОВЫЙ
- ОРАНЖЕВЫЙ-ЖЕЛТЫЙ
- ЯЩИК ДЛЯ ИНСТРУМЕНТОВ
- ЯРКАЯ ЛАВАНДА
Вдохновляющий веб-сайт Цветовые схемы красочные пастельные тона веб-сайт
10. Лобстер
Розово-голубая комбинация — одна из самых предпочтительных цветовых смесей, которые радуют глаз. Для этого веб-сайта дизайнер выбрала несколько оттенков пастельно-голубого, смешанного с бодрящим розовым.
- ЯРКИЯ
- СИНИЙ ПОРОШОК
- ЗЕЛЕНО-СИНИЙ
- БЕЛЫЙ
- РОЗОВЫЙ ФАНДАНГО
Возможно, вас заинтересует эта статья: Психология цвета — как улучшить свой веб-дизайн
II. Пастельные и землистые цветовые схемы веб-сайта: навеяны природой
Землистые цвета, или, другими словами, все цвета, встречающиеся в природе, являются одними из самых популярных цветов, выбираемых для цветовых схем веб-сайтов.
Зеленый — цвет листьев и травы, коричневый — цвет почвы и дерева, бежевый — цвет песка, синий — цвета неба и океанов, желтый и оранжевый — цвета огня. Все эти яркие цвета открывают перед дизайнерами безграничные возможности для создания впечатляющего внешнего вида веб-сайтов. Вот несколько примеров, которые могут вас вдохновить.
11. Лечение ногтей
Дизайн веб-сайта, полностью выполненный в пастельных землистых тонах, передающих чистоту. Нюансы вызывают ассоциации с природой и идеально сочетаются с концепцией сайта — органические средства по уходу за кожей.Вот используемая палитра:
- ПЛАТИНОВЫЙ
- ЧЕРЕПАХА ЗЕЛЕНЫЙ
- СЕРЫЙ-СИНИЙ
- ТАН
- КОКОС
12. Горный человек
Сайт, созданный специально для нового музыкального альбома. Полностью выполнен в теплых пастельных тонах — землистых коричневых и зеленых тонах с фруктовыми персиковыми оттенками. В цветовой гамме сайта использованы следующие цвета:
- БЕЛЫЙ ЗОЛОТО
- ОЛЕНЬ
- АРТИШОК
- ТЕМНО-КОРИЧНЕВЫЙ-ТАНГЕЛО
- СОЛОМА
Вдохновляющий веб-сайт Цветовые схемы ретро-цвета веб-сайт
13.Андрис Горакс
Основанный на голубых и медных тонах, этот веб-сайт на самом деле представляет собой портфолио веб-разработчика. Успокаивающий эффект синего цвета передает надежность и доверие. Вот названия цветов, используемых в цветовой схеме этого веб-сайта:
- ПУСКИ СИНИЙ
- ФРАНЦУЗСКИЙ НЕБО-СИНИЙ
- АЛИСА СИНИЙ
- БЕЛЫЙ
- МЕДЬ
14. Зеленый экологически чистый голландец
Естественные цветовые схемы идеально подходят для веб-сайтов, рекламирующих органические продукты.Это потому, что они легко ассоциируются с природой. Вот отличный пример сочетания зелени с оттенками золотистого песка.
- BISTRE
- VEGAS GOLD
- ПУСТЫННЫЙ ПЕСОК
- БЕЛЫЙ
- ЛАДОНИЛЬНЫЙ ЛИСТ
15. 10 × 18
Веб-сайт, созданный в приятных тонах, передающий тепло и комфорт — веб-сайт, на котором 33 исполнителя визуально интерпретируют свои любимые альбомы. Теплые землистые цвета, используемые в цветовой гамме этого веб-сайта, следующие:
- БЕЛЫЙ ДЫМ
- ГЛУБОКОЕ КОСМИЧЕСКОЕ ИСКРЫТИЕ
- ПЕСОЧНО-КОРИЧНЕВЫЙ
- ПАСТЕЛЬ ОРАНЖЕВЫЙ
- СВЕТЛЫЙ КОРАЛЛ
Реклама
16.Адриан Лоран
Портфолио французского интерактивного дизайнера, выполненное в коричнево-бежевых землистых оттенках в сочетании с бодрящим апельсином, напоминающим огонь. Цветовая гамма сайта состоит из следующих цветов:
- ПЫЛЬНЫЙ БУРЯ
- УПЛОТНЕНИЕ КОРИЧНЕВОЕ
- ОРАНЖЕВЫЙ (PANTONE)
- БЕЛЫЙ МЕДНЫЙ
- БЕЛЬЁ
Вдохновляющие цветовые схемы веб-сайта теплые тона веб-сайт
17. Бронзовая коллекция Bang Olufsen
Сайт о спикерах в красивом художественном стиле — бронзовая тематика.Бронза — это знаменитый сплав металлов, который воплощается в веб-дизайне, пробуждает элегантность и изысканность. Цвета в этой палитре:
- ACAJOU
- СТАРОБОРДОВЫЙ
- БЕЛЫЙ
- ИНДИЙСКИЙ ЖЕЛТЫЙ
- РУССЕТ
Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для вашего интернет-магазина
III. Яркие и смелые цветовые схемы веб-сайта: кричащие о внимании
Действительно, яркие цвета способны мгновенно привлечь внимание.В отличие от пастельной гаммы, яркие цвета волнуют и заряжают посетителя. Веб-сайты, созданные с использованием ярких цветовых схем, кажутся освежающими и забавными. В этой подборке мы выбрали веб-сайты, полностью состоящие из ярких цветов, и веб-сайты, сочетающие яркие цвета с более светлыми тонами.
18. MA-TEA
Освежающий напиток, безусловно, требует освежающего дизайна веб-сайта. Отличный пример яркой цветовой схемы веб-сайта, которая одновременно заряжает энергией, веселит и уравновешивает.Ведущие цвета, используемые в этой палитре:
- РОЗОВЫЙ РАЙСКИЙ
- КОСМИЧЕСКИЙ КОБАЛЬТ
- AUREOLIN
- КЕЛЛИ ГРИН
- Шалфей
19. Мяу Волк
Яркие цвета в сочетании с черным смотрятся мистично и футуристично. Этот веб-сайт, представляющий творческий коллектив, несомненно, несет в себе творчество и тайну, которые пробуждают энергию и вызывают любопытство. Достигнуто за счет использования следующих цветов:
- AUREOLIN
- AERO
- MANTIS
- СВОБОДА
- РОЗОВЫЙ МЕКСИКАНСКИЙ
Цветовая комбинация, которая отображает будущее прямо на вашем экране! Таинственные оттенки фиолетового, наполненные райским розовым и электрическим синим, превращаются в прекрасные градиенты.Добейтесь этого чарующего эффекта, используя следующие цвета:
- РОЗОВЫЙ РАЙСКИЙ
- ПАЛАТИНАТ СИНИЙ
- ПОЛУНОЧНО-СИНИЙ
- ТЕМНАЯ ОРХИДЕЯ
- RICH ELECTRIC СИНИЙ
21. Анимат Креатик
Независимо от того, представлены они в виде градиентов или плоских форм, каждая из которых заполнена сплошным цветом, яркие нюансы впечатляют зрителя. В данном случае — креативный веб-сайт, представляющий плоскую иллюстрацию на белом фоне, чтобы выделить все красивые цвета.
- КОБИ
- HAN ФИОЛЕТОВЫЙ
- СРЕДНЕ-СИНИЙ
- МАКСИМАЛЬНЫЙ ЖЕЛТЫЙ руб.
Возможно, вы захотите ознакомиться с нашей коллекцией удивительных веб-сайтов с иллюстрациями.
22. Счастливый онлайн
Яркие цвета не должны быть навязчивыми и повсюду. В этом дизайне веб-сайта яркие цвета превращаются в забавные элементы веб-дизайна, которые делают работу с сайтом намного интереснее.Используемые цвета:
- ЯНКИ СИНИЙ
- СИНИЙ ПИКТОР
- ФОЛЛИ
- ОРАНЖЕВЫЙ (WEB)
- СРЕДНИЙ МОРСКИЙ ЗЕЛЕНЫЙ
23. Саммит Грамаду
Свежая и яркая цветовая схема в сочетании с еще большим количеством тенденций графического дизайна в этом дизайне веб-сайта для Gramado Summit: наложение ультрамаринового синего цвета, сплошной вишнево-розовый фон и детали грушево-желтого цвета.
- ЦЕРИЗ РОЗОВЫЙ
- ГРУША
- СИНИЙ ПИКТОР
- УЛЬТРАМАРИНОВЫЙ СИНИЙ
24.La Phase 5
Еще один бренд, который делает ставку на яркие однотонные геометрические детали для своего веб-присутствия. Белый фон по-прежнему передает ощущение надежности, а красочные детали делают общий вид более забавным. Цвета в этой палитре:
- RICH CARMINE
- ЗОЛОТОЙ МАК
- КАРОЛИНА СИНИЙ
- SEA SERPENT
- ISABELLINE
25. Синдикат ICO
Яркое сочетание сигнального желтого и неоново-лавандового пурпурного, дополненное их более бледными и мягкими оттенками, чтобы создать приятный опыт на этом веб-сайте.Цветовая гамма сайта следующая:
- БЕЛЫЙ ЦВЕТОЧНЫЙ
- банановая мания
- БЕЗОПАСНЫЙ ЖЕЛТЫЙ
- MAUVE
- БОГАТАЯ ЛАВАНДА
26. Securinvest
Синий цвет доверия в сочетании с бодрящим оранжевым, смягчающим бледно-розовым и волнующим неоновым аквамарином, которые прекрасно передают идею этого веб-сайта — финансовая услуга, которая побуждает вас мечтать о больших и помогает вам жить уверенно.
- ПОЛУНОЧНО-СИНИЙ
- ГОЛУБОЙ
- БЕЛЫЙ РОЗОВЫЙ
- МАНДАРИН
- СРЕДНИЙ АКВАМАРИН
27. HtmlBurger
Веселая и простая цветовая схема веб-сайта для этой услуги веб-разработки. Дизайн сайта выполнен в ярких пастельных и веселых тонах, которые ломают лед и создают дружественную атмосферу для посетителя. Цветовая палитра:
- ЖЕЛТЫЙ (CRAYOLA)
- ГЛУБОКИЙ МОРКОВНЫЙ АПЕЛЬСИН
- ВЕРМИЛИОН
- AERO
- НЕБЕСНЫЙ СИНИЙ
28.Сочная еда
Даже один яркий цвет может сделать весь дизайн более веселым и веселым. Так обстоит дело с этим сайтом. Веб-дизайнеры выбрали темно-синий оксфордский оверлей для раздела с героями, приятный пастельный фиолетовый цвет в качестве фирменного цвета и яркий желтый оттенок, привлекающий внимание.
- AUREOLIN
- КОРОЛЕВСКИЙ ФИОЛЕТОВЫЙ
- БЕЛЫЙ АНТИВСПЫШКА
- БЕЛЫЙ
- ОКСФОРД СИНИЙ
IV.Темные и драматические цветовые схемы веб-сайта: разгадывайте тайну
Темные цветовые решения очень популярны, так как вызывают ассоциации с таинственностью и роскошью. И эти чувства, безусловно, вызывают любопытство. Темные цветовые схемы веб-сайта интригуют независимо от того, полностью ли они выполнены в темной тематике или в сочетании с одним ярким цветом, чтобы оживить экран. Посмотрите веб-сайты, которые мы подготовили для вашего вдохновения.
29. Мое зеркало 360
Чтобы создать чистый элегантный вид в сочетании с чувством роскоши, дизайнеры этого веб-сайта использовали темно-серую цветовую схему с загадочными бирюзовыми оттенками.Цветовая палитра сайта включает:
- ONYX
- ТАУП СЕРЫЙ
- БЕЛЫЙ ДЫМ
- КОРОЛЕВА СИНИЙ
- БИРЮЗОВЫЙ СРЕДНИЙ
30. Марго Леруа
Эффектный темно-синий монохромный веб-дизайн в сочетании с бодрящим мятно-зеленым цветом придает загадочный и свежий вид. Веб-сайт, который представляет собой портфолио UX | Дизайнер пользовательского интерфейса использовал следующую палитру для создания этого образа:
- KEPPEL
- GUNMETAL
- НАРУЖНОЕ ПРОСТРАНСТВО
- МЫШЬ
- РИТМ
31.Иван Ибаньес
Черно-белый дизайн веб-сайта с монохромными серыми иллюстрациями и яркими фиолетовыми оттенками. Этот сайт представляет собой внештатного дизайнера UX и выполнен в следующей цветовой гамме:
- ТЕЛЕЖКА СЕРЫЙ
- ТЕМНО-ФИОЛЕТОВЫЙ
- СВЕТЛО-СЕРЫЙ
- ДЭВИ СЕРЫЙ
- JET
32. Производство Португалия
Для платформы, которая демонстрирует работы, было бы неправильно привлекать внимание с помощью «кричащей» цветовой схемы веб-сайта.Для этого веб-дизайна создатели сделали ставку на несколько оттенков серого и добавили немного цвета, используя активный красный.
- БЕЛЫЙ
- ИСПАНСКИЙ СЕРЫЙ
- ВИНТОВКА ЗЕЛЕНЫЙ
- ЖАРАЧНЫЙ ЧЕРНЫЙ
- ПОСТОЯННОЕ ГЕРАНИЕВО ОЗЕРО
33. Microsoft в цифрах
Дизайн веб-страницы, который является прекрасным примером сочетания темных и тусклых оттенков с теплыми пастельными тонами для создания загадочного, но дружелюбного и мягкого внешнего вида. Цветовая палитра для этой веб-страницы:
- ЧАРЛСТОН ГРИН
- ТЕМНАЯ ПЕЧЕНЬ
- СВЕТЛО-СЕРЫЙ
- РОЗОВАЯ ОРХИДЕЯ
- ЧАЙНАЯ РОЗА
Вы хотите проверить несколько удивительных примеров параллакса CSS?
В.Цветовые схемы монохромных веб-сайтов: один цвет для победы
Иногда веб-дизайнер выбирал один цвет для всего веб-дизайна и играл со всеми его оттенками и оттенками, чтобы создать впечатление, достойное конкуренции с многоцветными веб-сайтами. Монохромные веб-сайты могут показаться драматичными, свежими, милыми… все зависит от цвета, который используется в качестве основы. Вот несколько примеров веб-сайтов, которые демонстрируют монохромные цветовые схемы веб-сайтов.
34. Ефрем Иосиф
Сайт-портфолио креативного директора, который делает ставку на чистый дизайн и умные слова для своих проектов.Именно это и сообщает аудитории его монохромный сайт, основанный на чистой и успокаивающей синеве океана.
- КРАСИТЕЛЬ ИНДИГО
- СИНИЙ ОКЕАН
- ЯЩИК ДЛЯ ИНСТРУМЕНТОВ
- ДЕТСКИЙ ПОРОШОК
- ПАЛЕ АКВА
35. Джин Whitetail
Чистый и стильный вид, достигнутый за счет использования белого и нескольких оттенков серовато-синего цвета, чтобы уловить дух бренда и принять философию, лежащую в основе бренда.Точные цвета, используемые в этой палитре:
- БЕЛЫЙ
- ЯРКИЯ
- ОКСФОРД СИНИЙ
- PAYNE’S GREY
- КОРОЛЕВСКИЙ СИНИЙ
36. Fitspirit Fashion
Когда дело доходит до создания монохромного дизайна веб-сайта, целевая аудитория которого — женщины, розовый, вероятно, лучше всего подходит. Fitspirit Fashion объединила свой фирменный цвет ярко-вишнево-розового с пастельными оттенками пурпурно-розовой гаммы.
- ТИРИАНСКИЙ ПУРПУРНЫЙ
- АМАРАНТ ГЛУБОКИЙ ФИОЛЕТОВЫЙ
- СРЕДНИЙ ФИОЛЕТОВЫЙ
- ЛАВАНДОВАЯ РУМАЯ
- ГОЛЛИВУДСКИЙ ЦЕРИЗ
37.Sikkema
Бодрящий, женственный и оптимистичный, этот желтый монохромный дизайн веб-сайта передает ассоциации с теплом и яркостью солнца. Цветовая гамма сайта состоит из нескольких оттенков ярко-желтого.
- ТАНЖЕРИН
- СЕЛЕКТИВНЫЙ ЖЕЛТЫЙ
- ПЕСЧАЯ БУРЯ
- МИНЬОН ЖЕЛТЫЙ
- АРОМАТ
38. Готэм-Сити
Темно-серый монохромный веб-сайт, отсутствие цвета которого передает драматизм и таинственность.Цветовая палитра веб-сайта, представленная с шумом, идеально передает темную атмосферу и передает сообщение веб-сайта.
- ТАУП СЕРЫЙ
- ИЗЮМ ЧЕРНЫЙ
- тусклый серый
- СЕРЕБРЯНЫЙ
- РЕГИСТРАЦИЯ ЧЕРНЫЙ
39. Аджа Уилсон
Дизайн веб-сайта, приветствующий посетителя багрово-серым монохромным видео для области героя со следующими оттенками и оттенками:
- БЕЛЫЙ АНТИВСПЫШКА
- СВЕТЛО-СЕРЫЙ
- СТАРАЯ ЛАВАНДА
- ИЗЮМ ЧЕРНЫЙ
- ПУРПУРНАЯ КОЛПАЧКА
Вот и все!
Мы надеемся, что эта коллекция цветовых схем для веб-сайтов вдохновила вас засучить рукава и начать создавать потрясающие веб-дизайны уже сегодня.Мы будем более чем счастливы, если вы поделитесь с нами своими творениями в разделе комментариев ниже. Увидимся!
Возможно, вам будет интересно прочитать эти статьи по теме:
Реклама
Как стратегически использовать цвет в дизайне веб-сайтов
Намеренное использование цвета в дизайне веб-сайтов имеет решающее значение; цвета вызывают смысл и эмоции, часто на подсознательном уровне. При стратегическом использовании цвет является мощным инструментом для передачи сообщения бренда и создания узнаваемости бренда.
Выбор цвета в веб-дизайне сводится не только к эстетике. Чтобы создать эффективную цветовую палитру для веб-сайта, важно сначала понять теорию цвета, психологию и гармонию. Оттуда вы можете создать палитру, которая соответствует ценностям бренда, сообщениям и целевому рынку.
В этом посте мы научим вас использовать цвет для создания впечатляющих и ценных веб-сайтов для ваших клиентов. Если вы предпочитаете использовать контент в виде видео, посмотрите видео ниже, в котором вы найдете десятиминутный урок по использованию цвета в дизайне веб-сайтов с Раном Сегаллом, основателем Flux Academy.
1. Учитывайте культурный контекст
Хотя разные цвета имеют разное значение на индивидуальном уровне, некоторые цвета также имеют глубоко укоренившееся культурное значение. Например, в западных культурах красный цвет привлекает внимание и означает опасность и срочность (подумайте о знаках остановки). Однако в некоторых восточных культурах, таких как Китай и Индия, красный цвет символизирует удачу. Другой пример: черный — это цвет смерти и траура в западных культурах.В некоторых восточных культурах аналогичный цвет — белый.
Как видно из приведенных выше примеров, в разделе цвета важен контекст. В зависимости от того, где находится целевой рынок бренда, цвета, используемые на его веб-сайте, могут посылать совершенно разные сообщения. Итак, как узнать, какие цвета включать или избегать в зависимости от целевого рынка клиента? Простой поиск в Google должен помочь.
Если у бренда есть глобальный целевой рынок, подумайте о том, чтобы избегать таких цветов, как красный, которые имеют глубокое культурное значение.Поскольку культурные значения цвета настолько укоренились в нашей психике, мы можем не осознавать сознательно, что мы против определенных цветов. Конечно, есть исключения. Компания Coca-Cola всемирно известна своим фирменным красным цветом. В этом случае узнаваемость, связанная с цветом бренда, достаточно сильна, чтобы затмить любые негативные коннотации, связанные с красным цветом в западном обществе.
2. Изучение теории цветаТеория цвета — это набор фундаментальных принципов, которые определяют, как создавать гармоничные цветовые комбинации.Понимание этих принципов — важный первый шаг в создании эффективных цветовых палитр для брендов и веб-сайтов.
Цветовой кругЦветовой круг — отличный инструмент для понимания основ теории цвета. Все мы и раньше видели цветовое колесо в той или иной вариации, но для целей этого поста мы будем использовать его для изучения основных, вторичных и третичных цветов.
Основные, второстепенные и третичные цвета на цветовом круге Основные цветаТри основных цвета: красный, желтый и синий.При объединении первичные цвета образуют вторичные цвета.
Дополнительные цветаДополнительные цвета: фиолетовый (красный + синий), зеленый (синий + желтый) и оранжевый (красный + желтый). Комбинирование вторичных цветов с первичными цветами создает третичные цвета.
Третичные цветаТретичные цвета — это комбинации основных и вторичных цветов (например, красно-фиолетовый, желто-оранжевый, сине-зеленый и т. Д.)
Оттенки, оттенки и тонаПервичный, вторичный , а третичные цвета считаются чистыми цветами .Они насыщенные, яркие, жизнерадостные. Оттенки — это добавление белого к чистым цветам. Это создает более светлые и менее насыщенные цвета. Оттенки созданы с добавлением черного к чистым цветам. Наконец, добавление черного и белого к чистым цветам дает тонов . Тона более приглушенные, чем чистые цвета.
Сравнение оттенков, оттенков и оттенковТеперь, когда вы понимаете, как разные цвета формируются и располагаются на цветовом круге, будет проще создавать визуально привлекательные цветовые палитры.Цветовые палитры более подробно описаны ниже в Шаге 4.
Использование контрастаДругой важный принцип теории цвета касается использования контраста. Чем выше контраст, тем больше два цвета отличаются друг от друга.
При оценке контраста важно учитывать не только цвета (например, синий и зеленый), но и их тон. Два разных цвета с ровным тоном не создают высокой контрастности. Простой способ определить уровень контрастности двух цветов — преобразовать их в оттенки серого — разница в контрасте будет гораздо более очевидной.
Обязательно используйте средство проверки контраста! Контраст — важная часть доступностиКак правило, мы хотим использовать цвета с высокой контрастностью в дизайне веб-сайтов из-за большей разборчивости. Например, белый текст на темном фоне или наоборот. Контраст привлекает внимание и может визуально выделить некоторые важные элементы. Однако слишком большой цветовой контраст на веб-сайте может утомить наши глаза. Веб-сайт ниже является хорошим примером того, как сбалансировать высокий и низкий контраст в веб-дизайне.
Источник: Raw StudioПрочтите этот пост , чтобы узнать больше о теории цвета и о том, как применить ее в дизайне веб-сайтов.
3. Используйте психологию цвета для передачи сообщений и ценностей брендаПсихология цвета означает влияние цвета на наши чувства, эмоции и поведение. Хотя это немного субъективно, психология цвета может помочь нам подсознательно влиять на людей, которые посещают наш веб-сайт, значимым образом. Это делает его мощным инструментом для дизайна и маркетинга.
Цвета вызывают эмоцииЛюдей привлекают определенные цвета отчасти из-за того, что они вызывают.С другой стороны, цвета также могут вызвать инстинктивную реакцию, которая заставит кого-то избегать общения с ними. Если это звучит немного расплывчато, это потому, что мы упускаем из виду ключевой элемент головоломки: контекст. В определенном контексте красный цвет может вызывать у нас страх и беспокойство. В другом он мог разжечь страсть и возбуждение.
Если вы хотите использовать цвет в дизайне веб-сайта для передачи определенной эмоции, он должен легко интегрироваться с другими элементами на странице, такими как типографика, изображения и текст.Помня об этом, давайте рассмотрим некоторые из наиболее распространенных ассоциаций между цветом и эмоциями.
Общие цветовые ассоциацииПриведенные ниже цветовые ассоциации могут использоваться в качестве справочного руководства, когда вы решаете, какие цвета лучше всего представляют конкретный бренд. Что должна чувствовать целевая аудитория при встрече с сайтом бренда? Какие действия им следует предпринять? В правильном контексте цвет может иметь значение между заинтересованным потенциальным клиентом и незаинтересованным прохожим.
- Красный : страсть, сила, любовь, опасность, возбуждение
- Синий : спокойствие, доверие, компетентность, мир, логика, надежность
- Зеленый : здоровье, природа, изобилие, процветание
- Желтый : счастье, оптимизм, творчество, дружелюбие
- Оранжевый : веселье, свобода, тепло, комфорт, игривость
- Фиолетовый : роскошь, таинственность, изысканность, верность, креативность
- Розовый : забота, мягкость, искренность , тепло
- Коричневый : природа, безопасность, защита, поддержка
- Черный : элегантность, сила, контроль, изысканность, депрессия
- Белый : чистота, покой, ясность, чистота
Отъезд этот пост , чтобы узнать больше о психологии цвета.
4. Создайте цветовую палитруТеперь, когда вы лучше понимаете теорию цвета и психологию, вы хорошо подготовлены для создания преднамеренной цветовой палитры для веб-сайта вашего клиента. Первый цвет, который вы выберете, должен быть основным цветом бренда. Не путать с основными цветами в цветовом круге, в этом случае «основной цвет» относится к основному цвету в палитре. Вот где действительно пригодится психология цвета. Ниже приведены несколько примеров брендов, которые эффективно использовали психологию цвета для выбора основного цвета бренда.
Coca-Cola гордо демонстрирует свой яркий красный цветПовторим предыдущий пример: бренд The Coca-Cola Company взял свой основной цвет, яркий красный, и использовал его. Цвета на их веб-сайте и рекламе. Единственные другие цвета в их палитре — черный и белый, которые используются для текста. Красный ассоциирует Coca-Cola с чувствами возбуждения, любви и тепла. Зеленый цвет
Whole Foods идеально сочетается с миссией их компании.Whole Foods использует землисто-зеленый в качестве основного цвета.Как и Coca-Cola, Whole Foods демонстрирует свой фирменный цвет на всем своем веб-сайте. Зеленый цвет прекрасно сочетается с ценностями и клиентурой Whole Foods: здоровьем, природой и изобилием.
Lowe’s темно-синий символизирует доверие и надежность.Lowe’s — это популярная сеть магазинов товаров для дома, основной цвет которой — темно-синий. Из-за характера их продуктов важно, чтобы бренд и веб-сайт Lowe выражали доверие, компетентность и надежность, которые ассоциируются с синим цветом.
Типы цветовых палитрСуществует пять основных типов цветовых палитр: аналог , монохроматический , триада , дополнительный и дополнительный .Любой из них можно использовать для создания эффективной цветовой палитры для веб-сайта. Ниже мы рассмотрим несколько примеров того, как каждый из этих типов цветовой палитры используется в дизайне веб-сайтов.
АналогичныеАналогичные цвета — это цвета, расположенные рядом друг с другом на цветовом круге. Такая палитра может выглядеть очень красиво, потому что цвета очень хорошо сочетаются друг с другом. Тем не менее, эффект может быть слишком тонким, — неуловимым, не позволяя каким-либо элементам достаточно выделяться.
Аналогичные цвета расположены очень близко друг к другу на цветовом круге
Источник: Emme МонохроматическийМонохромные цветовые палитры основаны на одном цвете в паре с различными оттенками и оттенками. Как и на аналогичные палитры, на монохромные палитры может быть очень приятно смотреть. Тем не менее, рекомендуется добавить дополнительный цвет к монохроматической палитре в веб-дизайне, чтобы привлечь внимание к важным элементам.
Монохроматические цвета в основном связаны с изменением яркости.
Источник: Rosaluna TriadЦветовые палитры Triad состоят из трех цветов, которые равномерно разнесены на цветовом круге, образуя треугольник.Такой тип цветовой палитры немного рискованно использовать в дизайне веб-сайтов, потому что он может показаться шумным. Однако, в зависимости от контекста, триадные цветовые палитры могут быть очень эффективными для молодых, игривых и / или артистичных брендов.
Триадные цвета равномерно распределены на цветовом круге
Источник: Parse ДополнительныеДополнительные цветовые палитры содержат цвета на противоположных концах цветового круга. Эти палитры очень эффективны для веб-дизайна, потому что они создают визуальный баланс и напряжение.Однако, если цвета используются одинаково, натяжение может быть слишком высоким. Вместо этого выберите один из дополнительных цветов в качестве основного цвета бренда, а другой используйте в качестве акцентного.
Дополнительные цвета противоположны друг другу на цветовом круге Источник: Антенна Разделение дополнительных цветовРазделенные дополнительные цветовые палитры аналогичны дополнительным палитрам, но с добавлением третьего цвета, который находится рядом с одним из дополнительных цветов на цветовом круге. Этот тип цветовой палитры также очень эффективен в дизайне веб-сайтов и может добавить больше визуального волнения, не создавая слишком большого шума.
Тонны премиальных брендов, использующих эту цветовую комбинацию!
Источник: Shelby Kay Как использовать цветовые палитры в дизайне веб-сайтовСуществуют различные онлайн-инструменты, которые можно использовать для помощи в процессе создания цветовых палитр. Личным фаворитом, показанным на скриншотах выше, является Adobe Color. С помощью этого инструмента вы можете поиграть с цветовым кругом, чтобы создать индивидуальную палитру с любым из пяти типов цветовой палитры, перечисленных выше. Вы также можете загрузить изображение для извлечения цветов или щелкнуть вкладку «Обзор», чтобы просмотреть страницы и страницы цветовых палитр.
Для начала я рекомендую выбрать три цвета для вашей палитры: основной (или основной) цвет , дополнительный цвет и акцентный цвет . Затем используйте правило 60/30/10 , чтобы применить эти цвета в дизайне своего веб-сайта. Согласно этому правилу, 60% используемого цвета должно быть основным цветом, 30% — второстепенным и 10% — акцентным. Имейте в виду, что черный и белый тоже считаются цветами. Ниже приведены несколько примеров потрясающих веб-сайтов, которые используют правило цвета 60/30/10.
Доминирующий фиолетовый с бирюзовым акцентом.Spendesk использует фиолетовый как основной цвет, белый как вторичный и бирюзовый как акцентный цвет.
Доминирующий зеленый цвет в паре с красивым лососем в качестве акцента.Greenlist использует зеленый как основной цвет, белый как вторичный и розовый как акцентный цвет.
Demuxed выводит с желтым и пары с черным и белым.Demuxed использует желтый как основной цвет, черный как вторичный и белый как акцентный цвет.
Важное замечание по поводу правила 60/30/10 заключается в том, что на самом деле это скорее руководство, чем правило. Например, вы можете включить в свою палитру более трех цветов.