Какие 3 самых популярных цвета для оформления сайтов?
Как подтвердит большинство маркетологов, психология восприятия цвета имеет огромное влияние на отношение посетителей к online ресурсу. То, как целевая аудитория отреагирует на рекламную кампанию или воспримет ваш лендинг, тоже во многом определяет цвет.
Проще говоря, выбор оформления является весьма весомым фактором конвертации вашего сайта. В рамках этой статьи мы остановимся на трех самых популярных вариантах цветовых решений: синий, зеленый и оранжевый, и рассмотрим их влияние на восприятие и пользовательское поведение.
Цвет очень важен
Около 85% покупателей отмечают, что цвет является основной причиной выбора продукта, и это справедливо для всего, от автомобилей до обуви. К продаже услуг данный фактор относится не меньше. Но почему? Узнаваемость бренда зависит на 80% от цветового оформления, которое вызывает доверие потребителя.
В интернет-маркетинге ситуация не менее серьезна — цвет существенно влияет на показатели продаж.
Цвет, по данным исследований нейробиологов, обладает способностью притягивать определенные сегменты людей, менять предпочтения и влиять на поведение аудитории.
- Теория цвета — как управлять вниманием пользователя?
1. Голубой символизирует безопасность
Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Но что подразумевается под словом «безопасность» в данном контексте?
Синий — любимый у большинства людей, независимо от пола, возраста и т. д. Кроме того, синий цвет ассоциируется с уверенностью, властью и надежностью.
Статистика не врет: 57% мужчин и 35% женщин заявили, что синий — их любимый цвет. В подавляющем большинстве участники исследования выбрали его как наиболее предпочтительный оттенок.
Если посмотреть на вопрос с другой стороны, то практически никто из респондентов не счел синий раздражающим или просто нелюбимым. По данным опроса, только 1% мужчин и 0% женщин заявили, что синий — самый отталкивающий оттенок для них.
Почему он так популярен? Теорий на этот счет несколько. Некоторые основаны на том, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.
Многие сайты используют цвет «безопасности», за примерами не стоит ходить далеко. Самая крупная социальная сеть, Facebook, оформлена в оттенках синего.
Twitter не отстает.
И, да, даже LinkedIn любит синий цвет.
Wal-Mart — крупнейшая в мире розничная сеть — пошла той же дорогой.
Многие банки используют этот подход. Основной цвет Citibank — синий с ярко-красной дугой.
Bank of America использует красный, но основной цветовой акцент в их логотипе — на синем цвете.
У Chase Bank светло-синий сайт и логотип.
Большинство компаний, работающих в отраслях, где доверие и надежность очень важны, используют много синего в своем брендировании. Ниже показана целевая страница First American Home Warranty — компании, предлагающей услуги по техническому обслуживанию домов.
USAA, Американская ассоциация автосервисов — основной дистрибьютор страховых полисов. На их сайте преобладает синий цвет.
New York Life, один из лидеров по страхованию жизни, использует хорошо известный синий квадратный логотип.
Среди российских брендов можно выделить Yota:
И, конечно же, социальная сеть ВКонтакте:
Подводя итог: вы не ошибетесь, если выберете оттенки синего для оформления своего ресурса. Даже если его слишком много, он все равно «работает».
Карен Галлер (Karen Haller), специалист в области прикладной психологии цвета, пишет о синем следующее:
«Этот цвет символизирует интеллект, ум, коммуникацию. А когда речь идет о социальных медиа, акцент на общение очень важен. Синий цвет также воспринимается как заслуживающий доверие, надежный, безопасный. Эти положительные качества передаются и бренду, выбравшему подобные оттенки».
- Как цвет влияет на покупательскую активность?
2. Зеленый символизирует рост
Основной посыл зеленого — рост. Причины ассоциации очевидны: большинство растений — зеленые.
Зеленый имеет еще одно свойство — это один из самых простых цветов для восприятия человеческим глазом. Когда люди думают об этом цвете, у них автоматически возникают ассоциации с чем-то здоровым, живым, растущим и натуральном.
Бренд Subway позиционирует себя как здоровая альтернатива фастфуду и использует зеленый в качестве корпоративного цвета на логотипе и официальном сайте.
Зеленый используется в оформлении крупнейшего IT блога Techcrunch.
Envato использует зеленый цвет, чтобы обратиться к своей целевой аудитории — стартапам.
Некоторые из крупнейших и наиболее известных мировых брендов используют зеленый для продвижения определенных идей или передачи необходимых ощущений.
Российский пример напрашивается сам собой. Разумеется, это Сбербанк:
- Как использовать психологию цвета для увеличения конверсии?
3. Будьте осторожны с оранжевым
Оранжевый — один из тех цветов, которых стоит опасаться. Как утверждают психологи, он наиболее тесно связан с риском. Но почему? Прислушайтесь к инстинктам. Когда вы видите надпись оранжевого цвета, что-то внутри говорит: «Стой! Здесь может быть опасно!»
Охотники носят оранжевые жилеты, чтобы их не подстрелили по ошибке. Строители в опасных ситуациях тоже надевают оранжевые жилеты или каски.
Немногие бренды используют оранжевый цвет, но решившиеся на это имеют четкое намерение. Их цель — демонстрация энергии, динамизма, азарта, а иногда и обещание риска.
Home Depot апеллирует к духу авантюризма у покупателей товаров категории DIY («Сделай сам»). Цвет их логотипа красноречиво отражает эту философию.
Есть риск использования оранжевого цвета — он воспринимается «дешево». Гипотеза, выдвинутая в исследовании Forbes в 1991 г., подтверждает это: почти четверть опрошенных назвали оранжевый «дешевым».
Писатель и бизнес-психолог Эми Морин (Amy Morin) тактично назвал «дешевыми» оттенки оранжевого, говоря об этом так: «Люди часто ассоциируют оранжевый цвет с хорошей скидкой, низкой ценой. Но «хорошая цена» редко говорит о высоком качестве».
Обозреватель Washington Post Джефф Туринтайн (Jeff Turrentine) предпринял мучительную попытку реабилитировать оранжевый цвет. Он отметил, что «нет ничего сомнительного в ярко-оранжевом», но признал, что иногда тот вызывает «вульгарные ассоциации».
Независимо от вашего намерения, будьте осторожны с этим цветом.
У HootSuite в логотипе присутствует оранжевый.
Тем не менее, в большинстве случаев бренд не использует главный цвет своего логотипа. Чаще всего в оформлении встречается черный, а основной оттенок на домашней странице — зеленый.
Однако многие компании используют оранжевый цвет достаточно успешно. Кстати, если вы обратите внимание, то увидите, что многие эффективные CTA-кнопки — оранжевые.
Российская сеть супермаркетов Дикси носит логотип, выполненный в ярко-оранжевом цвете. Вычурное использование этого оттенка недвусмысленно намекает целевой аудитории, что цены здесь должны быть предельно низкими.
- Влияние цвета на конверсию целевых страниц
Вывод
При выборе цветов для оформления ресурса лучшим решением будут зеленый и синий.
Зеленый подойдет, если вы хотите подчеркнуть развитие, рост (вашего бизнеса, клиентских активов, качества жизни пользователей и т. д) или если ваш бизнес связан с экологией, питанием, здоровым образом жизни. Не забывайте, что зеленый и сам по себе обладает успокаивающим действием и вызывает доверие.
Голубой внушает чувство спокойной уверенности, при этом он наиболее легкий для восприятия. Менее 1% пользователей считают этот цвет раздражающим. Поэтому большинство успешных социальных сетей оформлены в оттенках синего и голубого — люди проводят многие часы своей жизни, читая ленты новостей ВК или Facebook, постоянно проверяют Twitter и т. д. А чтобы человек мог провести в социальной сети действительно долгое время, ее оформление должно минимально отвлекать и не раздражать посетителя.
Применение оранжевого связано с определенным риском. Но тем не менее он идеально подходит в ряде случаев. Например, если вы хотите специально подчеркнуть «дешевизну» бренда — это полезно для сайтов онлайн-распродаж или для бизнесов, делающих упор на большие скидки в своей маркетинговой стратегии. Кроме того, если вы работаете в сфере активного отдыха, туризма, или чего-то еще, связанного с риском и приключениями, вам стоит задуматься об использовании оранжевого в дизайне.
Но что бы вы ни выбрали, убедитесь, что можете предсказать реакцию своей аудитории на конкретную цветовую гамму.
А теперь забудьте все, что прочитали выше :). Цвет лишь инструмент в процессе оптимизации конверсии.
Цвет лендинга не сделает ваш бизнес успешным, а вот соотношение активных и пассивных цветов — да. Важно только то, на чем вы акцентируете внимание целевой аудитории и какого действия ждете от нее.
Высоких вам конверсий!
По материалам: blog.crazyegg.com, image source splitshire
16-12-2014
Таблица «безопасных» цветов
Этот инструмент сдан в архив и больше не поддерживается
| Все цвета интернетаВашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна. При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов (dithering). Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее. Цвета из нашей палитры везде будут отображаться правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Как пользоваться палитройПалитра состоит из 36 сочетаний 6 оттенков красного, зеленого и синего. Эти градации 0, 51, 102, 153, 204, 255. Над каждым цветом указаны два значения RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML). |
лучшие сочетания и правила выбора цветовой схемы
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
На протяжении долгих веков картины талантливых художников пользовались популярностью только потому, что авторы умели работать с цветом. В наше время не меньшей популярностью пользуются работы веб-мастеров, которые осуществляют правильный подбор цветовой гаммы для сайтов. Специалисты теперь научились сочетать краски в коммерческих целях.
Известно, что каждый оттенок по-своему воздействует на человеческую психику. Например, женские темы всегда ассоциируются с розовыми окрасками, медицина — с зелеными, пищевая промышленность — с оранжевыми и коричневыми. Для любого веб-ресурса определенной тематики нужна своя психологическая атмосфера. Если вы знакомы со скрытыми свойствами красок, то можете использовать эти знания при разработке веб-дизайна.
Интересный факт
Представители европеоидной и монголоидной рас часто воспринимают одинаковые краски по-разному. К примеру, у европейцев белый — это чистота, а у азиатов — траур. Мы в статье будем ориентироваться именно на европейцев.
- Общепринятые эмоциональные ассоциации
- Правила сочетания цветов для сайта — ориентируемся на интуицию
- Подбор цветов для сайта по спектральному кругу
- Принцип первый — триада
- Принцип второй — двойная система
- Принцип третий — аналогия
- Принцип четвертый — раздельное
- Принцип пятый — прямоугольник
- Шестой принцип — квадрат
- Как подобрать цвета для сайта при помощи программ
- Фоновый цвет для сайта: выбор и его критерии
- Еще несколько правил по выбору цветовых палитр для сайта
- Примеры хороших и плохих сайтов
Общепринятые эмоциональные ассоциации
- Красный. Возбуждающий тон, ассоциируется с властью, энергией, молодостью, страстью. Больше всех привлекает внимание, при помощи него можно о чем-то предупредить. Если на веб-странице слишком много красного — человек попытается как можно быстрее «убежать» с нее. Когда данный колор необходим, его можно использовать умеренно или применять более нежные оттенки.
- Розовый. Романтика, женственность, нежность. При неправильном использовании намекает на неформальные отношения, поэтому неприменим для корпоративных порталов или спортивных веб-ресурсов.
- Оранжевый. Энергия, дружелюбие, интерес, бодрость. Эмоции и ассоциации: открытость, активность, уникальность. Создает ощущение движения, творчества.
- Желтый. Солнце, радость, счастье. Ярко-желтый прибавляет энергию, нежный — комфорт, темный — погружает в старину, добавляет авторитета.
- Зеленый. Здоровье, стабильность, рост, природа. Являясь мостом между теплыми и холодными красками (он получается из смешения синего и желтого), обладает расслабляющим влиянием синего, сохраняя энергичность желтого. Темные оттенки говорят о финансах и богатстве.
- Синий. Спокойствие, открытость, надежность, непоколебимость. Влияние на психику очень зависит от его нюанса. Светлые тона более дружелюбны, а темные вызывают печаль. Нейтральный синий отлично подходит для корпоративных проектов.
- Голубой. Мирное небо, терпимость, надежность, профессионализм.
- Фиолетовый. Тайна, романтика, роскошь, мистика и т.п. Это тона королевского величия, предметов роскоши, окутанных тайной. Светлые тона более романтичны, а темные — таинственны.
- Черный. Нервозность, опасность, власть. Колор считается нейтральным, но он может вызвать совершенно противоположные ассоциации в зависимости от того, с какими цветами гармонирует. Если черного много — он ассоциируется со злом, особенно в сочетании с красным. Если черного в меру, то он говорит об изысканности и элегантности (особенно в сочетании с белым).
- Белый. Простота, чистота, доброта, воздух. Самый популярный колор для фона веб-проекта. Как правило, текст легко читается с белого листа, и на веб-странице остается много воздуха и легкости. Он выгодно оттеняет другие краски.
- Серый. Самая нейтральная краска, которая не вызывает отрицательных эмоций. Говорит о меланхолии, спокойствии. Темно-серый может вызвать грусть, но любые его тона при правильных сочетаниях становятся мощными инструментами в руках опытного дизайнера.
- Коричневый. Уверенность, спокойствие, комфорт, долговечность.
- Бежевый. Фоновый тон, традиционный, подчеркивает сопровождающие его краски. Он изменяется в зависимости от окружающих его тонов.
- Слоновая кость, кремовый. Элегантность, комфорт, минимализм. Приравнивается к белому в восприятиях, но тон его намного теплее.
Итак, мы рассмотрели, как влияют краски на чувства людей. Но также говорили и о том, что каждый цвет ведет себя по-особенному в сочетании с другими тонами. Уточним, как правильно компоновать краски на веб-странице.
Правила сочетания цветов для сайта — ориентируемся на интуицию
В подборе цветовой схемы ориентироваться все также можно на интуицию. Но неплохо будет, если ей помогут и знания.
- Белый или черный: любые сочетания. Наилучшие пары, которые «дружат»: белый + черный, а также синий или красный. В случае с черным пару составит белый, яркий оранж, нежно-розовый, яркий или темный желтый, а также красный.
- Серый: нюансы красного, а также фиолетового и синего.
- Беж: коричневый, бирюза, синий, красный, изумрудный.
- Коричневый: голубой, беж, роза, изумруд.
- Розовый: коричневый, мятный, бирюза.
- Красный: темно- или нейтрально-зеленый, светло-желтый, приглушенно-синий, строгий серый.
- Зеленый: оранж, желто-коричневый, кремовый.
- Оранжевый и желтый: синие и фиолетовые краски.
- Темно-синий: коричневый, серый, светло-желтый, голубой, оранж,
- Голубой: строгий серый, красный, коричневый, роза, оранж, желтый, рубин, зеленый.
- Фиолетовый: серый, золотисто-коричневый, светло-желтый, неброские оттенки голубого и зеленого.
Подбор цветов для сайта по спектральному кругу
Что такое цветовой круг? Древние художники в своих работах полагались на интуицию. Позднее был изобретен цветовой круг, представляющий собой последовательность тонов и полутонов, от теплых к холодным, который стал инструментом для дизайн-конструирования. Работа с кругом происходит по одному из принципов.
Принцип первый — триада
Это баланс трех цветов, самая надежная цветовая гамма. На спектральном круге выбирается главный тон. Остальные подбираются путем прочерчивания сторон равностороннего треугольника. В каждой из трех вершин — гармонирующий цвет.
Принцип второй — двойная система
Выбираются два близких теплых оттенка, каждый из которых будет гармонировать с противолежащим ему холодным.
Принцип третий — аналогия
Выбираются три оттенка, последовательно расположенных на круге. На представленном примере цветовой спектр подчеркнет силу и энергию солнца. Стоит очень аккуратно использовать дополнительные тона (шрифты, дополнительные изображения и т.д.).
Принцип четвертый — раздельное
Основной колор сочетается с двумя дополнительными — равносторонний треугольник на спектральном круге.
Принцип пятый — прямоугольник
Здесь один колор является основным, два — дополнительными, а третий — акцентирующим.
Шестой принцип — квадрат
Самое динамичное сочетание, яркое, энергичное.
Как подобрать цвета для сайта при помощи программ
Существует несколько онлайн-сервисов, которые помогают дизайнерам в работе: Adobe Color, Paletton, Flat UI Color Picker, Color Palette Generator, Color Scheme и другие. Каждый онлайн-сервис работает на основе спектрального круга. Пользоваться инструментарием можно бесплатно. Веб-дизайнер легко и максимально быстро подберет сочетающиеся друг с другом оттенки.
Фоновый цвет для сайта: выбор и его критерии
Фон вызывает основное чувство у посетителей веб-ресурса. Это или негатив, отторжение, неудобство, или, наоборот, приятие, легкость в получении информации, комфорт. Хороший фон привлекает внимание и интригует. Рассмотрим правила, на которые должен ориентироваться веб-дизайнер при выборе фона для интернет-ресурса.
- Светлый фон — это больше пространства и воздуха, а черный и темный фон подчеркивают элегантность.
- Если вы используете темный фон — не применяйте основной шрифт желтого, голубого, синего, красного оттенков. Текст будет нечитабельным.
- Для серьезного веб-проекта следует использовать однотонную подложку.
- Для информационных веб-ресурсов с большим количеством информации более приемлемы светлые оттенки (белый, беж, слоновая кость).
- На светлой основе хорошо читается текст серых или черных оттенков.
- Фон и шрифт на нем должны быть контрастными.
- При выборе основного цвета и ему сопутствующих руководствуйтесь тематикой веб-ресурса (зеленый — медицина, природа, финансы; розовый — женская; коричневый и желтый — пищевая промышленность и т.д.). Например, нелепо будет смотреться детский журнал на черном фоне или веб-проект про автомобили Лексус — на розовом.
Еще несколько правил по выбору цветовых палитр для сайта
- Минимализм — это хорошо, но слишком блекло. Минимальный черно-белый дизайн не подходит для активных продаж.
- При разработке корпоративного веб-ресурса ориентируйтесь на корпоративные цвета и логотип.
- Яркие оттенки используют для выделения значимых элементов.
- Взгляд человека сначала фиксируется на самых ярких деталях, а потом воспринимает страницу полностью.
- Лучше всего на веб-странице сочетаются не более 3-х цветов.
- Перед разработкой веб-ресурса проанализируйте конкурентов. Если все ресурсы в данной тематике бело-синие, сделайте сайт бело-зеленым. Вам необходимо выделиться.
Примеры хороших и плохих сайтов
Основные ошибки: слишком много красного, основной товар не ассоциируется с цветовым решением.
Страница подавляет любой интеллект буйством красок, разнообразностью рекламы, непонятной компоновкой пространства.
Этот вариант без комментариев.
Хорошее, приятное сочетание цветов. Зеленый цвет стандартно ассоциируется с финансами.
Приятное сочетание, человек с едой в руках — центральная фигура. Сразу становится понятным, что продает веб-сайт.
Несмотря на темный фон, страница воспринимается легко. Вызывает ощущение надежности, силы, мужественности.
Помните: посетители редко замечают отдельные цвета на веб-странице, но подсознательно палитра воздействует на них. Человек читает текст внимательно, нажимает на нужные кнопки, прокручивает экран вниз или, наоборот, не замечает важные элементы и уходит со страницы. При этом цвет каждого элемента играет огромную роль. Бывали случаи, что после смены цветовой палитры количество заказов с сайтов увеличивалось в несколько раз.
5 лучших сервисов для подбора цветовой схемы
5 лучших сервисов для подбора цветовой схемы
Выбор дизайнером цветовой схемы — одна из важнейших задач в создании дизайна. Мы сделали подборку хороших сервисов, которые облегчат дизайнерам работу с цветом и цветовыми сочетаниями.
Веб-дизайн
28 окт. 2019
Цвет является мощным инструментом, который может умело рассказать целую историю. От него зависит первое впечатление, которое получит пользователь от продукта, а это в свою очередь повлияет на его выбор: пользоваться им или нет. Именно поэтому мы подобрали для вас 5 полезных сервисов с готовыми цветовыми наборами, которые помогут подобрать наилучшую сочетаемость оттенков.
1. Color Hunt
Color Hunt — это бесплатная открытая платформа для поиска вдохновения. Преимущества этого сайта в огромном количестве модно подобранных цветовых решений. Color Hunt позволяет найти трендовые комбинации, собравшие наибольшее количество лайков, а также сохранять и скачивать понравившиеся подборки.
2. Color Leap
Поиск классных цветовых решений из картин различных исторических эпох — Color Leap. Этот интерактивный сайт насыщен анимационными компонентами и предлагает цветовые палитры картин выбранного периода с возможностью копирования кода при нажатии на цвет.
3. Khroma
Khroma — крутая интерактивная платформа, где можно найти не только красивые цветовые схемы, но и разработать собственный алгоритм на базе нейронной сети. Способен генерировать те цвета, которые вам больше нравятся и блокировать непонравившиеся прямо в браузере. Алгоритм постоянно обучается на бесконечных цветовых комбинациях, поэтому вы точно сможете найти что-то особенное! Поиск Khroma позволяет фильтровать генератор по оттенку, значению, цвету, а также по значениям цветовоймодели.
4. Culrs
Culrs — это более 2000 цветов с уже готовыми шестнадцатеричными кодами, которые легко скопировать для дальнейшего использования. Платформа создает красивые комбинации, учитывая цветовой круг и теорию цвета. Имеет 4 удобные категории для поиска лучшей сочетаемости цветов:
Нажав на имя конкретной палитры в Culrs, URL-адрес меняется на пользовательский и вы можете поделиться ею с кем угодно!
5. Coolors
Coolors — cупер-быстрый генератор цветовых схем. Получив готовую схему цветов, появляется интерактивная площадка, включающая меню редактирования для каждого цвета: можно поменять расположение цветов местами, изменить шестнадцатеричный код на желаемый или выбрать его оттенок нажатием иконки «альтернативные оттенки», а также скорректировать яркость и насыщенность в нужной цветовой модели.
Научиться понимать цветовую теорию и грамотно выбирать палитру для продукта – не просто. С помощью этих сервисов, которые предоставляют широкий спектр выбора цветовых сочетаний, вы значительно сократите временные затраты на сопоставление нужных оттенков цветов. Но не забывайте, что профессиональный дизайнер обязательно должен владеть пониманием значений каждого цвета и цветового круга в целом, правильно комбинировать цвета, уметь акцентировать детали для улучшения юзабилити продукта и конечно же, владеть пониманием психологии бренда. На курсе «Мир веб-дизайна» в нашей онлайн-школе «Айтилогия» вас обучат работе с цветом. Вы обретете большой багаж полезных навыков и сможете влюблять клиентов в ваш дизайн с первого взгляда!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Тенденции в дизайне Email-рассылок на 2022 год
Разберемся, какие тренды наметились в дизайне Email-рассылок в этом году, чтобы вы могли использовать их при создании дизайн-макетов электронных писем для своих заказчиков.
Веб-дизайн
22 февр. 2022
Как изображения помогают пользователям ориентироваться на сайтах?
Изображения — это мощное средство коммуникации и лучший способ устранения языкового барьера, поскольку визуальную информацию легко понимают и считывают все люди в мире. Мы запоминаем 80% того, что видим, и только 20% того, что читаем.
Веб-дизайн
23 июля 2021
Подборка сервисов с бесплатными мокапами, иконками, шрифтами
Один из способов оптимизировать работу веб-дизайнера — выделить время и найти, протестировать, выбрать лучшие сервисы с шрифтами, мокапами, иконками. Мы уже это сделали за вас! Идемте смотреть на результат?
Веб-дизайн
16 дек. 2019
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!
Трендовые цвета на 2022 год от Shutterstock для маркетологов и рекламодателей
19.11.2021
Оксана Харьковчук, редактор блога Webpromo
Американская компания Shutterstock назвала трендовые цвета на 2022 год. «Зеленый», «Бархатный фиолетовый», «Успокаивающий коралл» и «Тихоокеанский розовый» с наибольшей вероятностью привлекут внимание интернет пользователей и вызовут положительные эмоции в следующем году. Искусственный интеллект определил цветовые палитры 2022 года, а также трендовые цвета в 24 странах мира.
Содержание:
- Как и зачем определяют трендовые цвета года?
- Какие цвета станут трендовыми и зададут эстетику в 2022 году для маркетологов и рекламодателей?
- Лучшие трендовые цвета в мире
Читайте также: Тренды UI/UX дизайна на 2022 год: 15 актуальных инноваций
Как и зачем определяют трендовые цвета года?
Платформа бесплатных стоковых ресурсов Shutterstock анализирует разные объёмы данных для определения ключевых цветов, к которым будут стремиться дизайнеры, маркетологи и рекламодатели в новом году. В 2021 компания использовала искусственный интеллект Shutterstock.AI для изучения восприятия цветов и палитр в сети. Для маркетологов, экспертов в области брендинга (бренд-экспертов) и рекламодателей важно понимание тенденций и трендовых цветов, поскольку они формируют эстетику восприятия контента для своих клиентов.
Как искусственный интеллект Shutterstock.AI определяет главные трендовые цвета года? Сперва осуществляется анализ миллиона загруженных изображений, затем сравниваются пиксельные данные (точный оттенок каждого пикселя и кликабельность изображения). В результате формируется список оттенков, которые с большей вероятностью понравятся пользователям онлайна, будут выглядеть эстетично и приведут к большей кликабельности в 2022 году.
Правильная цветовая схема всегда важна для маркетологов и рекламодателей, которые создают кампании для привлечения новых клиентов и формируют улучшенное восприятия бренда. В компании Shutterstock считают, что 2021 год стал «расплатой за последствия» пандемии. Поэтому в 2022 году бренды и агентства по всему миру будут адаптировать свои цветовые палитры и призывать аудиторию к спокойствию, стабильности и балансу.
Ключевая эмоция в маркетинге и рекламе в 2022 году — безмятежность. Это стоит учитывать при оформлении рекламных кампаний или других способов взаимодействия с клиентами в 2022 году. Анализ Shutterstock трендовых цветов 2022 показал, что вместо вызывающе агрессивного подхода потребители переходят к более сдержанному, минималистичному и мягкому по сравнению с предыдущими годами.
Трендовые цвета 2022 года формируют положительные эмоции, вызывают утешение, спокойствие и умиротворение. Давайте рассмотрим детальнее, что означают трендовые «Зеленый», «Бархатный фиолетовый», «Успокаивающий коралл», «Тихоокеанский розовый» и какое влияние с их помощью могут оказать на восприятие клиентов маркетологи, эксперты в области брендинга и рекламодатели.
Читайте также: Как выбрать цветовую гамму для дизайна сайта?
Какие цвета станут трендовыми и зададут эстетику в 2022 году для маркетологов и рекламодателей?
Используя миллиарды данных исскуственный интеллект Shutterstock.AI спрогнозировал, что наиболее интерактивным и кликабельным цветом для маркетологов и рекламодателей станет «Зеленый» и его оттенки. Ключевой цвет для определения и ведения здорового образа жизни часто связывают со свежестью разнообразных продуктов и промоцией защиты окружающей среды.
Загруженные на Shutterstock сцены природы, где зеленый цвет влияет на визуальную палитру, увеличиваются с каждым годом, например, популярность снимков с воздуха в горах выросла на 1,396%. Согласно данным, добавление в проекты немного зеленого цвета или лесной тематики (нефрит, мята, лайм, изумруд) сможет улучшить эффективность ваших рекламных кампаний, повысить CTR и конверсии.
Зеленый | Цветовые тренды Shutterstock 2022
1. Успокаивающий коралл или Calming coralСкромный и приглушенный оттенок цвета по сравнению с прошлогодними трендовыми цветами. Calming coral или успокаивающий коралл можно использовать для изображения здоровья и счастья.
Рекомендуется сочетать с контрастными цветами, например, пыльно-желтым, розовым или небесно-голубым. Первые два цвета помогут в дизайнерской работе создать ностальгический оттенок. Контраст коралла с небесно-голубым цветом подойдет маркетологам и креативщикам во время создания естественной и удобной палитры.
Успокаивающий коралл | Цветовые тренды Shutterstock 2022
2. Velvet violet или Бархатный фиолетовыйЯркий пурпурный с розовым формируют самый смелый цвет — бархатно-фиолетовый или Velvet violet. Трендовый цвет похож на королевскую орхидею и напоминает о элегантности и роскоши.
Пурпурный оттенок привлекает внимание естественностью. Рекомендуется комбинировать или использовать вместе с зеленым оттенком (цвет изумруда).
Бархатный фиолетовый | Цветовые тренды Shutterstock 2022
youtube.com/embed/fOJJTcdoVoE?feature=oembed» frameborder=»0″ allow=»accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»> 3. Pacific Pink или Тихоокеанский розовыйМаркетологи и рекламодатели любят использовать ярко-розовый цвет. В 2022 году среди трендовых цветов оказался еще один оттенок — Тихоокеанский розовый или Pacific Pink.
Трендовый цвет розовой сахарной ваты сочетает в себе спокойствие и жизненную силу. Рекомендуется использовать со светло-бирюзовым цветом для создания другого настроения (не использовать персиковые или другие розовые тона).
Тихоокеанский розовый | Цветовые тренды Shutterstock 2022
Читайте также: Главные тренды UX/UI дизайна 2021 года
Лучшие трендовые цвета в мире
Shutterstock также определил лучшие трендовые цвета в 24 странах мира и показал как они выглядят:
- Аргентина (Argentina)
#20B2AA
- Австралия (Australia)
#FAF0E6
- Бразилия (Brazil)
#FFC0CB
- Канада (Canada)
#FFE4E1
- Чили (Chile)
#FFE4E1
- Франция (France)
#FAF0E6
- Германия (Germany)
#66CDAA
- Индия (India)
#FFC0CB
- Италия (Italy)
#FFB6C1
- Япония (Japan)
#F5DEB3
- Южная Корея (South Korea)
#FFEBCD
- Мексика (Mexico)
#FFC0CB
- Нидерланды (Netherlands)
#FFC0CB
- Норвегия (Norway)
#FFE4E1
- Россия (Russia)
#F4AF60
- Южная Африка (South Africa)
#FFA500
- Испания (Spain)
#F4A460
- Швейцария (Switzerland)
#4682B4
- Тайвань (Taiwan)
#FFDAB9
- Таиланд (Thailand)
#FFE4E1
- Турция (Turkey)
#FAF0E6
- Объединенные Арабские Эмираты (United Arab Emirates)
#FFC0CB
- Великобритания (United Kingdom)
#FFC0CB
- США (United States)
#FFE4E1
Детальнее посмотреть информацию о трендовых цветах в мире по решетке и номеру (например #20B2AA) можно на сайте ColorHexa.
Также читайте другие статьи в блоге Webpromo:
- Ремаркетинг как инструмент мотивации. Основные преимущества и недостатки функции;
- Тренды digital-маркетинга на 2022 год. Как подготовиться и что должен знать каждый маркетолог?;
- 10 полезных трендов в контент-маркетинге на 2022 год. Какие инструменты использовать для продуктивного сотрудничества с клиентами?;
И подписывайтесь на наш Telegram-канал про маркетинг.
51 пример для вдохновения, разбор и предложения
Выбор цветовой палитры – важный момент в процессе разработки сайта. Она не просто привлекает внимание, но и транслирует послание бренда, помогает создать нужное настроение и ассоциации, влияет на конверсию.
Информационная вкладка Вы знали, что 93% покупателей считают, что именно цвет определяет их выбор, а 52% не вернутся на сайт, не удовлетворяющий требованиям эстетики. При этом, лучшими цветами для кнопки целевого действия («Подписаться», «Скачать» или «Отправить заявку») традиционно считаются красный, оранжевый и зеленый. Они увеличивают на 13.5% коэффициент конверсии мобильных пользователей, а в целом на 9%. На 6.5% чаще добавляется товар «В корзину». Компании BMI, HubSpot, Ript, и VegasSlotsOnline добились улучшения конверсии с 2,5% до 175%, поменяв лишь цвет CTA-кнопок.
Ссылка на источник
В нашей сегодняшней статье мы не будем разбирать особенности восприятия аудиторией разных цветов, об этом написано немало материалов. В этом обзоре мы собрали для вас 51 пример эффектных и современных цветовых решений из самых разных отраслей бизнеса. Вдохновляйтесь!
ГлавныеHum (ссылка http://humcreative.com/)
Агентство Hum – креативная студия, которая специализируется на дизайне. На своем сайте Hum используют яркие фотографии и образы, чтобы рассказать о себе посетителям ресурса. На главной они ушли от стандартной сетки и расположили базовые элементы так, чтобы внимание посетителя не распылялось, а следовало именно за той историей, которую они рассказывают и согласно той логике, которую хотят выстроить в голове своего потенциального клиента.
Основные навигационные пункты (О компании, Контакты и Портфолио работ) размещены в четырех углах экрана и при прокрутке остаются своих местах. Интересный элемент – легкая, но заметная анимация в логотипе студии.
Цветовое решение:
Оранжевый заряжает бодростью и хорошим настроением. Это активный цвет, который выделяется на общем фоне. Персиковый делает дизайн более современным.
Bubble (ссылка https://followbubble.com/)
Чешское агентство Bubble использует иллюстрации для того, чтобы привлечь внимание посетителей сайта. Дизайн чистый и лаконичный, очень дружелюбный, настраивает на позитивный лад и не перегружен.
Цветовое решение:
Синий подсознательно вызывает доверие, а обилие пустого белого пространства не утомляет пользователя и помогает ему сконцентрироваться на смысле.
Huge (ссылка https://www.hugeinc.com/)
Агентства, предлагающие свои услуги, часто встают перед выбором, что поставить на первое место – узнаваемость собственного бренда или демонстрацию качества своей работы (портфолио своих клиентов).
HUGE нашли свое собственное решение. Широкий жирный шрифт, визуальный контент высокого качества и непривычная верстка одновременно и рассказывают о компании, и демонстрируют опыт.
При прокрутке страницы картинка меняется – от фото к простейшей иллюстрации и обратно. Это удерживает внимание пользователя, заставляя его снова и снова вчитываться в детали.
Цветовое решение
Современный, актуальный, заметный, – вот прилагательные, которые характеризуют палитру фуксия + черный (мы видим ее на первом экране до прокрутки). Такое сочетание моментально приковывает взгляд и производит впечатление.
Born (ссылка Borngroup.com)
На главной странице этой компании вместо фонового изображения используется видео высокой четкости и качества. Именно оно сразу привлекает посетителей сайта. И, кстати, вполне соответствует трендам 2020 в онлайн-продвижении.
Информационная вкладка. Вам также может быть интересно:
- 76 предсказаний о контент-маркетинге на 2020 год
- Прокрутив страницу вниз, мы видим портфолио работ – область, разделенную на две основные категории.
- При клике открываются перечень клиентов в формате удобной сетки.
Si Digital (ссылка https://sidigital.co/)
Главная страница Si Digital – еще один пример того, как компания с первой точки контакта четко показывает своему потенциальному клиенту свое предложение. Достигается это за счет контрастного выделения текста розовым и большого количества «воздуха» в дизайне, не отвлекающего нас от сути. В убеждении посетителей этого сайта активно используются инструменты социального доказательства (логотипы клиентов).
Цветовое решение
Яркий розовый в палитре этого сайта создает эффект современности и стиля. Голубой отвечает за доверие и дружелюбие.
Reestart (ссылка https://reestart.com/)
Отличительная особенность главной страницы этого французского агентства – яркая анимация в логотипе.
При прокрутке страницы вниз, посетитель сразу видит рекомендации клиентов компании. Их изучение затягивает, а подсознательно вы уже доверяете им доверяете.
Цветовое решение
Сине-зеленый умиротворяет, а коралловый привлекает внимание к деталям. На сером фоне это сочетание выглядит особенно выигрышно.
Лендинги и посадочные страницыImpact (ссылка https://www.impactbnd.com/)
Страница IMPACT – на первый взгляд, самая обычная. Однако ярко-оранжевая полоса моментально притягивает к себе внимание посетителей сайта. Она контрастирует с основной серой гаммой. Прием, который имеет смысл перенять для своих проектов, если вы хотите выделить что-то важное.
Цветовое решение
Оранжевый привлекает внимание к деталям, заряжает оптимизмом и бодростью. На фоне серого смотрится особенно выигрышно.
SmartBug (ссылка https://www.smartbugmedia.com/)
Простая в оформлении, посадочная страница от SmartBug Media демонстрирует, как следует управлять вниманием и вовлеченностью посетителя. Мало текста, одна мысль на один экран прокрутки. Каждый элемент этой страницы – часть единой выстроенной логики.
Цветовое решение
Оранжевый CTA, как и в предыдущем примере, ясно и четко дает пользователю понять, куда нужно нажимать. Бирюзовый – вдохновляет.
Campaign Creators (ссылка https://www.campaigncreators.com/)
Эта целевая страница – пример использования массы социальных доказательств для убеждения посетителей сайта: описание, преимущества, отзывы, клиенты и достигнутый эффект в цифрах. В конце страницы удобная форма для связи.
Цветовое решение
Оранжевый CTA, как и в предыдущем примере, ясно и четко дает пользователю понять, куда нужно нажимать. Бирюзовый – вдохновляет, темно-серый добавляет строгости и официоза, настраивает на серьезный лад.
Pyxl (ссылка https://pyxl.com/)
Эффект вертикального разделения экрана, который используется на этой странице – свежее решение, которое разделяет два разных сообщения в левой и правой части. Благодаря контрасту белого, синего и зеленого пользователю четко понятно, что именно он получит, если перейдет в тот или иной раздел.
Удобная ссылка «Узнать больше» помогает не загромождать дизайн и вынести подробности на отдельные тематические страницы.
Цветовое решение
Сочетание ярких синего и зеленого выглядит динамично и насыщенно, а высокий контраст привлекает внимание к важному.
Tomorrow People (ссылка https://www.tomorrow-people.com/)
Страница встречает пользователя главным вопросом, который волнует маркетологов, продажников и владельцев бизнеса. Именно этот заголовок выполняет роль «крючка» и заставляет посетителя задержаться на этом ресурсе – ведь он обещает вполне конкретную выгоду.
Цветовое решение
Качественный видеоряд, строгий серый и спокойный синий делают свое дело: посетителя сайта ничего не раздражает, и он вполне готов провести с нами больше времени.
Блоги
The Next Web (ссылка https://thenextweb. com/)
Для своего блога Next Web использует традиционный блочный дизайн с кликабельными изображениями и белыми заголовками, радующие глаз. Статьи в блоге удобно размещены по разделам, что делает навигацию по нему интуитивно понятной.
Zazzle Media (ссылка https://www.zazzlemedia.co.uk/blog)
Второй пример кликабельных изображений с заголовком материала, выделенным жирным белым цветом. Для того, чтобы слегка оживить свой блог, агентство используют легкую анимацию.
Цветовое решение
В качестве акцентного цвета используется бирюзовый, который вызывает интерес читателей и вдохновляет их. Кроме того, этот цвет гармонично сочетается с логотипом и умело используется для важных элементов блога («Поиск», «Фильтр» и Чат)
Start Up Quote (ссылка https://startupquote.com/)
Start Up Quote – самый яркий пример в подборке. Простой для восприятия контент, который сильно напоминает формат Instagram Stories подан одновременно привлекательно и стильно. Нестандартный прием, который позволяет выделяться на фоне других ресурсов.
Цветовое решение
На черном фоне яркая плитка цитат смотрится еще эффектнее. Благодаря этому контрасту внимание посетителя моментально привлечено к главному – заголовкам.
Adventure Digital Agency (ссылка http://blog.adventures.do/)
Отличный пример блога, по своему формату напоминающего СМИ. Благодаря верстке контента в три колонки перед пользователем открывается больше опций для выбора, а первый экран захватывает еще 3 материала, на которые машинально падает глаз. Теги, длина чтения, краткое содержание – все это создано для удобства пользователя и, несомненно, подкупает.
Цветовое решение
Классическое сочетание теплых желтого и оранжевого с холодным бирюзовым успокаивает и улучшает настроение. Они одновременно говорят 1) настройся на рабочий лад и 2) не переживай, тут не будет скучно!
Выводы: ТОП 5 выигрышных цветовых сочетанийЕсли перед вами стоит задача разработки дизайна сайта агентства или креативной студии, возьмите на вооружение 5 актуальных и современных цветовых сочетаний, каждое из которых будет выигрышно смотреться в данной сфере бизнеса:
Палитра №1: #e2d810 – #d9138a – #12a4d9 – #322e2f.
Классическая триада цветов в ярком и современном исполнении. Сочетание, которое никогда не выйдет из моды. Допустим как белый, так и черный фон.
Автор:Stephen.
Палитра №2: #1e3d59 – #f5f0e1 – #ff6e40 – #ffc13b.
На нейтральном фоне сочетание синего с огненными акцентами заряжает энергией и укрепляет доверие.
Автор: spoon lancer
Палитра №3: #316879 – #f47a60 – #7fe7dc – #ced7d8
Сине-зеленый в этом сочетании умиротворяет, используйте его в оформлении крупных блоков. Коралловый – для отдельных элементов, если хотите привлечь внимание к деталям (кнопки призыва к действию, чат, контактная информация). На сером фоне это сочетание выглядит особенно выигрышно.
Автор: sheva™.
Палитра №4: #d13ca4 – #ffea04 – #fe3a9e
Современный, актуальный, заметный, – вот прилагательные, которые характеризуют эту палитру. Она моментально приковывает взгляд и производит впечатление. Лучше использовать на белом или сером фоне.
Автор:Litlast
Палитра №5: #408ec6 – #7a2048 – #1e2761
Ведущий цвет этой комбинации, синий, подсознательно вызывает доверие. Далее градиент перетекает в красный и темно-синий, вызывая ассоциации с увлеченностью и энергией.
Автор: Mithum.
Поможем разработать современный сайт. Отправить заявку.
Главные страницыMah Ze Dahr (ссылка https://mahzedahrbakery.com/)
Главная страница пекарни Mah Ze Dahr – торжество элегантности и больших красивых фотографий хлебобулочных изделий. Именно эти фото отвечают за привлечение внимания (и, надо признать, аппетита!). При прокрутке страницы вниз навигационное меню и логотип, размещенный в центре, остаются на месте. Это упрощает навигацию по сайту, а бренд запоминается и ассоциируется с вкусной выпечкой.
Цветовое решение
Золотой цвет на этом сайте ассоциируется со счастьем и роскошью, образы выпечки (оттенки коричневого и бежевого) – с теплом, уютом и комфортом. Глубокий синий добавляет серьезности.
Blue Apron (ссылка https://www.blueapron.com/)
Главная страница службы доставки еды сразу задает нужное настроение: «Закажите лучшее, что у нас есть, прямо сегодня!» При прокрутке страницы Blue Apron вниз, мы видим интерактивные визуальные изображения, которые с первых секунд передают основное послание бренда.
Цветовое решение
«Пляжные» персиковые оттенки дарят ощущение счастья и комфорта. Зеленые цвета придают большую глубину дизайну, а синий – настраивает на серьезный и доверительный тон.
Orangina (ссылка http://orangina.eu/)
После приветственного экрана с высококачественными фотографиями продукта, главная страница бренда
Orangina предлагает нам легкий для восприятия интерактивный контент в традиционных оранжево-синих оттенках. При наведении курсора на элемент в сетке, пользователь видит ненавязчивую, но хорошо продуманную анимацию.
Как результат – отлично оформленный контент, в который можно просто «позалипать». Очевидно, разработчики сайта позаботились о том, чтобы пользователям на сайте было весело (что вполне соответствует основному посылу бренда).
Цветовое решение
Сочетание глубокого синего с огненными оранжевым и красным акцентами заряжает энергией и укрепляет доверие.
Lighthouse Brewing Co (ссылка https://www.lighthousebrewing.com/)
Главная страница Lighthouse Brewing Co направлена на умиротворение пользователя: мягкие элементы, шрифты и вид океанских волн, весь контент аккуратно выровнен. Из очевидных преимуществ страницы — отличный баланс текстового и графического контента, никаких нагромождений лишнего текста.
Цветовое решение
Темно-зеленый цвет несет в себе природное спокойствие, более светлые оттенки зеленого ассоциируются с увлеченностью и молодостью, заряжают энергией и освежают.
Tio Luchin (ссылка http://tioluchin.com/)
Tîo Luchín — кейтеринговая служба, предлагающая перуанские блюда. Каждая прокрутка экрана сопровождается ярким визуальным или звуковым сопровождением. На странице пять разделов, но они очень гармонично объединены в единое по стилю решение.
Цветовое решение
Оттенки коричневого на черном фоне выглядят очень сдержанно, при этом ассоциируются с теплом и комфортом.
Chikenbot (ссылка https://www.chickenbot.it/)
Главная страница итальянской службы доставки курицы предлагает свою версию, как можно увлечь посетителя сайта своей историей. Малейшее движение мышкой – и вот перед вами новые детали, хочется листать еще и еще.
Цветовое решение
Обилие белого цвета, сосредоточение элементов в центре экрана, огненный оранжевый в качестве акцентов – вот три составляющие успешного дизайна этой страницы.
Посадочные, лендингиBon appetit (ссылка https://www.bonappetit.com/)
Эта страница создана для того, чтобы заставить посетителей подписаться на рассылку кулинарного блога. Ее логика основана на базовых принципах маркетинга – покажи читателю самое вкусное и интересное, дай ему попробовать, прежде чем просить за это деньги.
У странички есть интересная фишка: если вы нажмете кнопку призыва к действию под любым из вариантов подписки, вы увидите, что текст кнопки поменяется на «Отличный выбор!». Маленькая деталь, но она работает на создание имиджа – вам это нравится, и вы чувствуете, что настроены к бренду уже чуть более дружелюбно.
Misfit Juicery (ссылка https://misfitfoods.com/)
Эта страница дает пользователям ровно столько информации, сколько нужно ему для того, чтобы связаться с представителями компании. Лаконичная, яркая, молодежная.
Цветовое сочетание
Розовый в этой палитре отвечает за современность и привлечение молодого поколения. Бирюзовый – контрастирует, привлекает внимание и интерес.
HelloFresh (ссылка https://www.hellofresh.com/)
Посадочная страница для оформления заказа от HelloFresh интригует пользователя через вопросы, которые размещены в самом низу первого экрана. В поисках ответа хочется прокрутить страницу… Кнопка призыва к действию выделена зеленым и контрастирует с основным фоном.
Форма удобная, понятная и простая для заполнения.
Цветовое решение
Сочетание нежного розового с насыщенным зеленым ассоциируется с природой, женственностью, теплотой и выглядит при этом дорого.
RXBAR (ссылка https://www.rxbar.com/)
Разработчики ресурса RXBAR проделали огромную работу в направлении того, чтобы создать такую легкую и простую страницу. При этом они не забыли указать посетителям причины, почему с ними стоит работать, разместили форму и кратко информацию о себе.
Больше ведь пользователям ничего не нужно.
Цветовое решение
Цветовая палитра смотрится экзотично, серьезно, дружелюбно. Синий добавляет серьезности и раскрывает потенциал сотрудничества.
Выводы: ТОП 5 выигрышных цветовых сочетанийЕсли работаете в food-индустрии, держите курс на теплые оттенки. Руководствуйтесь здравым смыслом – все мы знаем, что синий вызывает доверие. Но синее меню в ресторане вряд ли вызовет аппетит
Сохраните себе эти пять топовых сочетаний, это самые актуальные палитры 2020 года:
Палитра № 1: #efb5a3 – #f57e7e – #315f72.
Оранжево-розовый и персиковый отлично смотрятся друг с другом, а сине-зеленый акцент придает дизайну большую глубину.
Автор: felipe_charria
Палитра №2: #edca82 – #097770 – #e0cdbe – #a9c0a6.
Идеальная палитра цветов для ресторанов и food-индустрии. В ней сочетается 4 органических пастельных оттенка, которые напоминают о природе и пробуждают аппетит.
Автор: Tomas Miliauskas
Палитра №3: #cf1578 – #e8d21d – #039fbe – #b20238
Эта цветовая палитра смотрится экзотично. Основной цвет, желтый, говорит о дружелюбии, а дополнительные добавляют дизайну игривости и раскрывают весь его потенциал.
Автор: Holly McAlister
Палитра №4: #EAE7DC – #D8C3A5 – #8E8D8A – #E98074 – #E85A4F
Цвет яичной скорлупы, насыщенный ванильный и серый в сочетании с акцентным красным смотрятся лаконично и ассоциируются с теплотой и гостеприимством.
Палитра №5: #844D36 – #474853 – #86B3D1 – #AAA0A0 – #8E8268
Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.
Поможем разработать красивый и аппетитный сайт. Отправить заявку.
Главные страницыSlack (ссылка https://slack.com/intl/en-ru/?eu_nc=1)
Главная страница Slack – простейший дизайн с четким описанием того, на что направлено их решение, какие задачи решает и ясным призывом к действию «Начать работу». Для демонстрации качества и преимуществ компания указывает перечень своих заказчиков.
Цветовое решение
Акцентный фиолетовый поможет привлечь внимание к вашему посланию, если сайт оформлен в минималистичном дизайне.
Litmus (ссылка https://litmus.com/)
Главная страница Litmus – еще один пример лаконичного дизайна с простыми иллюстрациями, демонстрирующими преимущества их программного обеспечения.
Цветовое решение
Предлагая инструменты для решения проблем email-маркетинга, Litmus использует дружественный и теплый оттенок апельсина на слайдере в своей главной странице. В целом дизайн выполнен в энергичной и оптимистичной палитре.
Basecamp (ссылка https://basecamp.com/)
Basecamp используют на своем сайте легкую и ненавязчивую инфографику: минимум текста, максимум полезной информации. Прокрутив главную страницу до конца, посетитель видит впечатляющий график, демонстрирующий рост клиентской базы Basecamp.
Цветовое решение
Яркий акцентный желтый эффективно привлекает и направляет внимание пользователей к важным навигационным элементам сайта.
Prezi (ссылка https://prezi.com/)
Веб-ресурс проекта Prezi – легкий и чистый, с небольшим набором визуальных образов. Все графические элементы подобраны четко и со вкусом: демонстрируют примеры работы и сам процесс.
Цветовое сочетание
Здесь синий и зеленый сочетаются в лаконичной и нестандартной цветовой схеме. Вместе они удивительным образом располагают к себе.
Mint (ссылка https://www.mint.com/)
Главная страница Mint выполнена с акцентом не на продукт, а на создание ощущения безопасности и счастья от сотрудничества. Кроме того, компания отлично понимает, куда движется современный маркетинг – и делает упор на мобильные устройства и планшеты.
Цветовое решение
В палитре сочетаются теплые и холодные оттенки, при этом она выглядит насыщенно, но не перегружено. Эффекты градиента создают ощущение модного и современного дизайна.
Посадочные, лендинги
Boords (ссылка https://boords.com/)
Лендинг от Boords представляет собой краткое описание на первом экране, отзывы клиентов и скриншоты из программного обеспечения.
Цветовое решение
Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.
Airtable (ссылка https://airtable. com/)
Еще один пример лендинга, выполненного с учетом всех трендов графического дизайна.
Цветовое решение
Палитра более яркая и игривая, полная жизни и динамичная, — идеальное визуальное решение для современных и смелых проектов.
Intercom (ссылка https://www.intercom.com/)
Страница Intercom использует веселую анимацию для того, чтобы привлечь внимание к основному целевому действию: сбор email-адресов. За красочными иллюстрациями следуют объяснения, зачем это нужно и какие преимущества вы получите. За каждой особенностью — цитата в качестве доказательства.
В конце страницы призыв к действию продублирован – это очень удобно для пользователей.
Цветовое решение
От сочетания черного с акцентами голубого сложно оторвать взгляд – ультрасовременно и ярко.
Later (ссылка https://later.com/)
Эта красочная посадочная страница повторяет свой призыв к действию на протяжении всего знакомства с контентом: в самом начале, в середине и после прокрутки ресурса до конца. Такая механика повторения нравится далеко не всем, но здесь компания раз от раза приводит разные аргументы для убеждения.
Блоги
Engadget (ссылка https://www.engadget.com/)
Довольно простой на первый взгляд, блог Engadget – очень продуманный и удобный для изучения. В верхнем горизонтальном меню размещен рубрикатор тем, который зафиксирован при прокрутке. Также из плюсов – вкладки с призывом подписаться на рассылку обновлений по теме.
Наличие свободного пространства между рубриками помогает не перегрузить страницу и не запутаться в обилии заголовков.
TechCrunch (ссылка https://techcrunch.com/)
Узнаваемый стиль блога TechCrunch – зеленые акценты в лаконичной ленте. При этом акценты используются очень аккуратно, не отвлекают от основного смысла.
Цветовое решение
Зеленый оттенок успокаивает и располагает к себе. В монохромном дизайне эффективно используется в качестве узнаваемого и яркого акцента.
Adobe Spark (ссылка https://blog.adobespark.com/)
Блог Adobe Spark является частью глобального образа, который создают проекты Adobe. Основным элементом дизайна здесь становятся высококачественные изображения. Верстка выполнена в модульном формате из двух колонок, а самые популярные и актуальные статьи вынесены в слайдеры в виде карусели.
Цветовое решение
Яркие и красочные изображения эффектно смотрятся на максимально нейтральном светлом фоне.
The Verge (ссылка https://www.theverge.com/)
Яркие неоновые цвета – вот стиль блога The Verge. Палитра смотрится эффектно как на черном фоне (первый экран и подвал сайта), так и на белом фоне (основная часть блога).
Цветовое решение
Яркие розовые оттенки поднимают настроение пользователю, отлично смотрятся в компании с белым, серым и черным фоном, оставляют ощущение креативной компании.
Выводы: ТОП 5 выигрышных цветовых сочетанийПриведенные выше примеры доказывают, что блог, как часть сайта с огромным количеством текстовой информации, не должен быть сильно перегружен разными цветами и оттенками. При подборе цветов выбирайте один основной цвет и второй – для акцентов:
Палитра №1: #FBE8A6 – #F4976C – #303C6C – #B4DFE5 – #D2FDFF
Энергичная и оптимистичная палитра создана для ярких проектов. Автор Cher Ami
Палитра №2: #F8E9A1 – #F76C6C – #A8D0E6 – #374785 – #24305E
Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом. Автор Waaark
Палитра №3: #0B0C10 – #1F2833 – #C5C6C7 – #66FCF1 – #45A29E
От такого сайта сложно оторвать взгляд, темные оттенки серого в сочетании с бирюзовыми акцентами украсят любой современный проект. Автор: Bert
Палитра №4: #1A1A1D – #4E4E50 – #6F2232 – #950740 – #C3073F
Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом. Автор Bryan James
Палитра №5: #25274D – #464866 – #AAABB8 – #2E9CCA – #29648A
Насыщенные оттенки синего делают этот дизайн сдержанным, но в то же время интересным. Отличный выбор для корпоративных и образовательных проектов. Автор: Supremo
Поможем разработать эффектный и современный блог на сайте. Отправить заявку.
Главные страницыHard Graft (ссылка https://www.hardgraft.com/)
Hard Graft использует необычную верстку для демонстрации продукции своего магазина. Когда вы прокручиваете страницу вниз, логотип и важные элементы навигации остаются на месте. При этом красивые фото товаров сменяют друг друга.
Важно отметить, что товары как будто «встроены» в сайт и выглядят как элементы дизайна, что способствует привлекательности как самих товаров, так и в целом магазина.
Цветовое решение
Оттенки коричневого объединились в винтажную палитру, которая выглядит сдержанно и ассоциируется с теплом, комфортом и роскошью.
Pure Fix (ссылка https://www.purecycles.com/)
Сайт по продаже велосипедов. Вместо того, чтобы грузить посетителей своего сайта ненужной информацией, его владельцы просто показывают отличное качество и ассортимент своих продуктов.
Грамотно организованная верстка и чистый дизайн, что вполне соответствует бренду (pure – чистый)
The Born (ссылка https://www.bornshoes.com/)
Для демонстрации своего продукта (обувь для мужчин и женщин) Born используют три разных стиля фотографии: качественные крупные планы, фото в окружении (единый образ) и снимки на белом фоне, позволяющие разглядеть продукт без привязки к кому-то.
Sanctuary T Shop (ссылка https://www.shopsanctuaryt.com/)
Просмотр главной страницы магазина Sanctuary T Shop оставляет приятное ощущение от рассказанной истории: уютные фото, история о том, откуда они. Чисто, легко, натурально и современно.
Цветовое решение
Отражает близость к природе, пробуждает аппетит.
Посадочные страницы / лендингиSoko Glam (ссыдка https://sokoglam.com/)
Страница корейского салона красоты Soko Glam с первого экрана рассказывает о том, какие продукты и почему нужно приобрести. Дополнительные вкладки в процессе прокрутки о подборе средств, фото в стиле «до» и «после», а также лента из Instagram подогревают интерес и убеждают посетителей совершить покупку.
Цветовое решение
Симпатичная тропическая палитра соответствует товару, напоминает о пляже и солнечных деньках. Цвета смотрятся современно и стильно.
Hubble (ссылка https://www.hubblecontacts.com/pages/home)
Еще одна мастерски созданная целевая страница, которая использует силу простоты. На странице предоставлена информация, как выглядит процесс заказа в общих чертах. Hubble проявляют заботу о своих клиентах и сразу отвечают на массу вопросов, что подкупает.
Цветовое решение
Комбинация использованных цветов ассоциируется с деревьями и природой.
Birchbox (ссылка https://www.birchbox.com/)
Пошаговый план, описание продукта, ссылки на ленту в Instagram, раздел FAQ – все это полезные составляющие страницы Birchbox, которые убеждают посетителя купить продукт. Попробуйте повторить в разработке своего лендинга такую схему!
Цветовое решение
Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм.
Выводы: ТОП 5 выигрышных цветовых сочетанийЦветовое решение для интернет-сайтов в сегменте E-commerce сильно зависит от того, в какой именно отрасли представлена компания. Мы постарались подобрать цветовые сочетания, подходящие самым разным направлениям:
Палитра №1: #806543 – #33266E – #111111 – #542F34 – #A6607C
Гламурный и свежий взгляд на дизайн сайтов, цвета подчеркнут статус владельца. Отлично подойдет для fashion-индустрии (одежда, обувь, аксессуары…). Автор Apart
Палитра №2: #d9a5b3 – #1868ae – #c6d7eb
Сочетание насыщенного лилового и сдержанного голубого ассоциируется с женственностью, а сапфировый делает их пару изысканной и современной. Для девичьих сайтов (косметика, аксессуары), домашней одежды, игрушек, свечей, текстиля, полиграфии, детских товаров. Автор: ananana14
Палитра №3: #e3b448 – #cbd18f – #3a6b35
Комбинация цветов ассоциируется с деревьями и природой. Отлично подойдет для эко-ниши и органических продуктов. Автор: Martis Lupus
Палитра №4: #1F2605 – #1F6521 – #53900F – #A4A71E – #D6CE15
Сочные цитрусовые оттенки – лучший выбор для сайтов о спорте и экстриме. Автор: Superhero Cheesecake
Палитра №5: #d72631 – #a2d5c6 – #077b8a – #5c3c92
Комбинация цветов, основанная на триаде, – отличное решение для цветочных мотивов и создания винтажного настроения. Автор: Mad pepper
Поможем разработать стильный и продающий интернет-магазин. Отправить заявку.
ГлавныеJeff Bridges Sleep Tapes (ссылка http://www.dreamingwithjeff.com/)
Автор продает интересный продукт (посмотрите сами) Поэтому страница идеально продукмана по оформлению, с точки зрения визуальной поддержки посыла.
Цветовое решение
Светлый текст на темном фоне, небольшая анимация. Сочетание желтых оттенков с черным выглядит мужественно, современно и при этом минималистично. В природе эти цвета предупреждают об опасности, поэтому инстинктивно приковывают внимание.
Justin Timberlake (ссылка https://justintimberlake.com/)
Страница Джастина Тимберлейка – пример адаптации артиста под самые актуальные свои работы (Man of the Woods). Используйте этот прием, если ваш продукт или бренд сильно зависит от времени года или каких-то важных отраслевых событий.
Цветовое решение
В оформлении использованы смелые и интересные апельсиновые оттенки для привлечения внимания к аудио и покупке билетов.
БлогиCarbone (ссылка https://carbone.ink/)
На первом экране блоге Carbone мы видим огромное, потрясающее своим масштабом изображение, промоутирующее статью дня. В целом, дизайн простой, блочный, удобный для прокрутки и знакомства с материалами.
Цветовое решение
Красно-коричневый в комбинации с насыщенным красным и лавандовым привлекает своей глубиной и уникальностью.
Brit + Co (ссылка https://www.brit.co/)
Отличный пример чистого и свободного от лишнего шума дизайна.
Каждая статья помечена темой-рубрикой (образ жизни, здоровье, дом и т. д.), что позволяет сузить фокус интересов.
Помимо тегов, сообщения также организованы в тематические группы – обязательное к прочтению, основы красоты, лайфхаки и т.д. — чтобы помочь посетителям найти именно то, что они ищут.
Цветовое решение
Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией
Apartment Therapy (ссылка https://www.apartmenttherapy.com/)
Нажмите «Меню» в левом верхнем углу, чтобы открыть боковую панель с категориями статей. Если, конечно, не хотите бесконечно листать ленту. Прекрасный пример юзабилити сайта: такой рубрикатор позволяет выделить контент, наиболее интересный посетителям.
Dwell (ссылка http://dwell.com/)
Dwell также разбивает содержимое своего сайта на несколько разделов, чтобы улучшить навигацию по блогу. Из особенных преимуществ этого ресурса – отдельно вынесенные разделы с тенденциями.
Выводы: ТОП 5 выигрышных цветовых сочетанийЕсли вы создаете веб-сайт под какой-либо проект, руководствуйтесь принципами, которые позволяет выделить Ваш сайт на фоне всех остальных ресурсов. Используйте яркие и современные цветовые комбинации, но не отвлекайтесь от посыла:
Палитра №1: #2E1114 – #501B1D – #64485C – #83677B – #ADADAD.
Красно-коричневый в комбинации с насыщенным красным и лавандовым привлекает своей глубиной и уникальностью. Автор: ReedBe
Палитра №2: #2C3531 – #116466 – #D9B08C – #FFCB9A – #D1E8E2.
Эта цветовая гамма подойдет всем, кто планирует создать футуристичный и современный сайт. Автор: MediaMonks
Палитра №3: #D83F87 – #2A1B3D – #44318D – #E98074 – #A4B3B6
Идеальный пример цветовой схемы для модного сегодня стиля киберпанк. Яркие неоновые оттенки и грамотно подобранные акценты выведут любой сайт на новый уровень. Автор: FCINQ
Палитра №4: #4285F4 – #5C2018 – #BC4639 – #D4A59A – #F3E0DC
Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта. Автор: Google Brand Studio
Палитра №5: #b85042 – #e7e8d1 – #a7beae
Сочетание приглушенных первичных цветов создает необычную палитру, которая выглядит очень серьезно и загадочно. Автор: nevergohungry
Поможем разработать веб-ресурс, который выделит вас из толпы. Отправить заявку.
7 потрясающих цветовых схем веб-сайтов 2022 + Color Mood Board
Веб-дизайн
Цветовые схемы веб-сайтов оказывают большее влияние на убедительность вашего веб-сайта, чем большинство компаний хотели бы признать. «Это просто вычурное дополнение» «Давайте просто используем цвета, которые мы…
Расчетное время чтения: 25 минут
Поделиться:
Цветовые схемы веб-сайта оказывают большее влияние на убедительность вашего веб-сайта, чем большинство компаний. нравится признавать.
- «Это просто вычурное дополнение»
- «Давайте просто используем цвета, которые мы использовали в прошлый раз».
- «Пусть генеральный директор или руководство меняют это, как хотят».
Ниже мы расскажем, почему цветовые схемы важны, и предоставим вам 65 цветовых схем веб-сайтов на 2021–2022 годы!
Ниже приведены еще более удивительные инструменты, но вот самые крутые инструменты цветовой палитры Design, которые я видел в 2022 году — Happy Hues!
Невероятная часть заключается в том, что цветовая схема имеет гораздо большее значение, чем вы думаете, а целостная и привлекающая внимание цветовая схема является одним из главных аспектов веб-дизайна, который сделает ваш веб-сайт БОЛЕЕ ПРИВЛЕКАТЕЛЬНЫМ И КРАСИВЫМ (Шаг первый — Шаг второй = Получите больше трафика Поисковая оптимизация. )
38 процентов посетителей перестанут взаимодействовать с веб-сайтом, если его содержимое или макет непривлекательны. (Blue Corona)
Учитывая 15 минут на просмотр контента, две трети людей предпочитают читать что-то красиво оформленное, чем что-то простое. (Источник: Adobe, Social Media Color)
Содержание
7 новых цветовых схем на 2022 год
Вдохновившись цветовыми тенденциями компании в области моды и живописи, мы выбрали 7 дополнительных цветовых схем, которые наверняка будут популярны на протяжении всего нового года. В этом году выделяются яркие цвета и оттенки драгоценных камней, а также несколько заметных приглушенных оттенков (один из них получил торт как «Цвет года»). Обязательно черпайте вдохновение в любой из этих цветовых схем, и это, безусловно, поможет улучшить и повысить уровень любого проекта веб-дизайна, за который вы беретесь в следующий раз.
1. Синий электрик – Цветовая схема веб-сайта CleoИсточник: WWD.
com Весна 2022 г. Как в моде, так и в цветовых тенденциях веб-дизайна вы можете ожидать увидеть множество традиционных оттенков (например, этот классический синий), а также яркие и смелые тона, которые оживляют любую цветовую схему, в которую они включены.Electric Blue: #373E98
Ярко-розовый: #F16775
Шокирующий желтый: #FEE36E
. Ярко-оранжевый – цветовая схема веб-сайта Bonjour Paris
Источник: Stylecaster.com
Похоже, что одним из самых популярных цветов на подиумах в этом году может быть этот оранжевый оттенок. Итак, мы вернулись с другой палитрой оттенков серого, которая включает в себя яркий всплеск цвета, этот цвет — ярко-оранжевый. Этот дизайн веб-сайта показывает, что яркие цвета могут выглядеть роскошными и элитными при правильном использовании.
Black: #000000
Medium Gray: #565656
Light Gray: #9e9e9e
Hot Orange: #fba92c
White: #FFFFFF
3. Muted Green – Цветовая схема веб-сайта The Cool HunterИсточник: Sherwin-Williams.com
Better Homes and Gardens курирует список всех «цветов 2022 года», объявленных на данный момент малярными компаниями. Безусловно, некоторые вариации этого приглушенного зеленого цвета кажутся наиболее популярными. Этот веб-сайт электронной коммерции включает этот популярный оттенок очень простым способом, используя фоновое изображение, показывая, что дизайн вашего веб-сайта не обязательно должен быть слишком сложным, чтобы выглядеть сплоченным и профессиональным, особенно при использовании правильных цветов.
Бежевый: #C8B7A6
Perriwinkle: #7D94B5
Dusty Rose: #C29591
Maroon Brown: #703F37
Maroon Brown: #703F37
. – Цветовая схема веб-сайта VerticalLoop
Цитрусовая цветовая схема создает ощущение свежести и яркости, и она определенно работает, чтобы сделать этот веб-дизайн более захватывающим, хотя макет довольно прост.
Световой известь: #ABD699
Свежий лимон: #FFE26A
Тил: #75C9B7
MINT: #C7DDCC
3 MINT: #C7DDCC
3 MINT: #C7DDCC
9002 MINT: #C7DDCC 9002 . Цветовая схема веб-сайта Regent5Источник: Pantone.com
Еще одной важной цветовой тенденцией 2022 года является использование оттенков драгоценных камней, и они отлично подходят для включения в веб-дизайн. Цветовой отчет Pantone Весна/Лето 2022 выделяет множество динамичных тонов драгоценных камней, которые создают атмосферу дороговизны. Этот дизайн веб-сайта Regent5 также имеет ощущение дороговизны, о чем говорят глубокие синие и фиолетовые тона, используемые по всему сайту.
Mauve: #A96762
Deep Blue: #2F5C8F
Мандарин: #D85C27
. Цветовая схема веб-сайта Mia
Источник: Fashionista.com
Популярные цвета в нашем обществе после COVID — это те, которые заряжают энергией и поднимают настроение. После последних нескольких лет изоляции люди хотят носить и видеть, что оттенки успокаивают и бодрят одновременно. Эта цветовая схема веб-сайта отлично справляется с включением натуральных / органических оттенков, которые в то же время захватывают.
Крем: #F4D8AE
Tangerine: #DC7027
Pistachio: #B6C48E
PACHY: #8A81
9002 PACHY: #8A81
. Цветовая схема
Этот оттенок орхидеи — еще один оттенок, который будет популярен как в моде, так и в веб-дизайне в 2022 году. Люфт. Это просто показывает влияние, которое технологии имеют тенденцию оказывать на наши предпочтения, особенно после COVID.
«Цветок орхидеи обладает интенсивным, сверхреальным и заряжающим энергией качеством, которое будет выделяться как в реальной жизни, так и в цифровом окружении», — Джоанн Томас, руководитель отдела контента Coloro Soft Lilac: #f6ebf4
Purple: #482673
Orchid: #ed0b70
Digi Denim: #301008
Color Mood Board for 2022
Надеюсь, вы сможете черпать вдохновение из этих 7 цветовых схем веб-сайта и нашей доски цветов на 2022 год. Новая идея может прийти откуда угодно, поэтому помните, что это нормально (и рекомендуется) использовать различные формы дизайна, такие как мода и интерьер, чтобы повлиять на ваш мозговой штурм веб-дизайна, особенно когда вы думаете о цветовых тенденциях.
8 новых цветовых схем на 2021 г.
Цветовые схемы веб-сайта на 2021 г. – будут часто использоваться фотографии для закрепления цветовой схемы – множество фигурных вырезов из белого и всплеск таких же ярких цветов, которые привлекают внимание , но затем погрузите вас в более глубокие естественные цвета с использованием землистых тонов и более глубоких оттенков.
Сначала вот несколько прогнозов для цветовых тенденций в 2021 году, основанные на дизайнерах моделей и компаний по краски:
1. Инфракрасная и фиолетовая
Ярко -красный: #DE354C
Deep Red: #
29Deep Red: #
2. Pure Purple: #3C1874
Фиолетовый оценочный серый : #283747
Облако: #F3F3F3
2.
РЕВОД Earthtone и зеленыйRED.0042 #B73225
Blue Minded: #004E7C
Maroon 6: #591COB
СЕРЕДА: #5C5F58
LIGE от Gatto Web
Макияж Тан: #DDAF94
Blush: #E8CEBF
Бесплатный зеленый0042 #FDF8F5
4. Классическая двойная синяя цветовая схема
Темно -синий: #12232E
СИНЕГО БЛИНА: #007CC7
СЛИЦА: # #007CC7
СЛИЦА: # #007CC7
СЛИЦА: #4DA8DA
ONDAREST: # #007CC7
ON. : #203647
Shadow of Light Blue: #EEFBFB
5. GreyScale + One (Yellow) 2021 Цветовая схема веб -сайта
Blatchshish: #2020203
0041 Темно -серый: #3F3F3FСредний серый: #707070
Яйцо желтое: #ffd6c
Белый: #fffffffffff
6.
Greenerer warecient witer wite SmawТемно -зеленый: #164A41
Средний зеленый: #4D774E
светло -зеленый: #9DC88D
Натуральный желтый: #0,00003
: .0042 #ffffff
7. Зеленое + Жемчужное веб -сайт.
#DADED4Белый: #ffffff
Цветовая плата настроения для 2021
9000 20002 Надеюсь, вам понравились эти цветовые схемы веб-сайтов и эта доска настроения для цветовых схем веб-сайтов 2021 года. Я знаю, что было очень весело собирать его воедино, и, несмотря на небольшое количество слов, на его кураторство ушло немало времени.
Вот исходный пост! Цветовые схемы веб-сайтов 2020-2021
Веб-дизайн может быть веселым!
Особенно, когда у вас есть правильная цветовая схема.
Вот почему мы отобрали лучшие из лучших 50 потрясающих цветовых схем из дальних уголков Dribbble, Awwwards, Pinterest, Behance и парочки отличных блогов.
После того, как вы закончите поиск цветовой палитры вашей мечты , ознакомьтесь с нашими статьями «Основы аналитики», «Основы SEO» и «Современные шрифты», чтобы продолжить делать свой веб-сайт потрясающим. И, конечно же, дайте нам знать, если мы когда-нибудь сможем помочь вам с нашими услугами по разработке веб-сайтов для малого бизнеса!
Летнее обновление 2020 г. — 13 новых цветовых схем веб-сайта на 2020 г.
1. Минимальные цвета, мягкий пляж от Duminda Perera
Bright blue: #51e2f5
Blue Green: #9df9ef
Dusty White: #edf756
Pink Sand: #ffa8B6
Dark Sand: #a28089
2 . Минимальные цвета — фиолетовая цветовая схема 90 -х годов от Duminda Perera
ICE Cold: #A0D2EB
FREEZE PURPLE: #E5EF5
Средний Purple: #D0BDF4
9002 . #D0BDF4
: #D0BDF4
: #D0BDF4
: #D0BDF4 9000 2
: #D0BDF4 9000 2
.0042 #8458B3
Тяжелый фиолетовый: #A28089
3. Bright Power By Duminda Perera
YASS Queen: #FF1D58
Сестра сестра: #FF1D58
Сестра: #FF1D58
.
Синий свет: #00DDFF
Жестокий синий: #0049B7
4. Переосмыслить. Цветовая схема Sajon
Ярко-оранжевый: #ff1e00
Dimly Blue: #E8F9FD
Alert/Highlight Green: #59CE8F
5. Глобальный благотворительный сайт. :
#ffb766Серый Синий Зеленый: #c2edda
Живой зеленый: #68d388
0041 Pinky:
#FBE3E8Blue Greeny: #5CBDB9
Teeny Green
Electric Red: #FF0028
Deep Green: #657A00
Сила синего: #1400C6
8.
Белое пространство, коричневый, пурпурный, желтый цвет схема веб -сайта 9002 9002 9002 9002 900 2 9002 9002 9.0041 Background Tan: #fceed1Purple-y: #7d3cff
Yellow Gloves: #f2d53c
Redhead: #c80e13
9. Deep blue and tan – color palette
Sand Tan: #e1b382
Sand Tan Shadow: #c89666
Night Blue: #2d545e
Night Blue Shadow: #12343b
10.Tan, pink and red color scheme
Ragin Beige: #FFF5D7
CORAL PINK: #FF5E6C
Sleathe Yellow: #Feb300
Pink Leaf: #Fffaaab
11. Pink Illazure, и Purse Weblemab
11. Pink Prink и Prine Illafortion, и Pury Prine
Grassy Green: #9BC400
Фиолетовые горы Величество: #8076A3
Гумая горная розовая: #F9C5BD
FACTORY PURPLE: #7C5BD
FACTORY Stone PURPLE: #7C67777770040 12. Яркая и красочная — схема для 2020 года
Зеленая трапа: #478559
Фиолетовая базовая линия: #161748
. 13. Желтый, Красный/Розовый/Оранжевый – Яркая схема
Желтый фон: #ffde22
Розовый/красный кружок: #ff414e
Оранжевый кружок:
83 999042 #0ff882830002 White Layover: #ffffff
2019. Goldenrod Yellow:
#fbaf08Bluebell Light Blue : #00a0a0
Bold 2019 Green: #007f4f
2. Lightning Blue Purple – Simple Web Color Palette
Lightning Purple: #bf4aa8
Brain Wrinkle White: #d9d9d9
3.
Metallic Blue, Purple, Red – Website Color PaletteBlue Popsicle: #0F2862
REDLINE: #9E363A
Фиолетовая тень: #091F36
Серый синий лист: #4F5F76
4. Априкота Avalche — Web Design Schemes 9003
4. Apricot Avalche — веб -дизайнер.0003
Blueberry: #6B7A8F
Abricot: #F7882F
Цитрус: #F7C331
Apple Core: #DCC7AA 9003
5. 5.0002.
и Apple. #1561adRight Blue-Mute: #1c77ac
Blue-Green: #1dbab4
Red-Orange: #fc5226
Gold 4Gold Веб-сайт0003
Крандер, чем вы: #FF3A22
Goldi-Lots: #C7AF6B
Darker Gold: #A4893D
SIRKEL LYNGE: #628078
70043 70043 7004. 70043 7004. 70043 7004. 70043 70043 7004. 70043 70043 70043 70043 70043 70043 70043 7004.
Безуслов: #ACB7AE
Коричневые рубашки: #82716E
TAN Blonde: #E4DECD
Блондея: #C2B4
2
.0002Зеленая гора: #3D7C47
Голубая гора: #09868B
Светло -синий фон: #76C1D4
BARELY Grey Edge: #0,7F7
. Grey silver: #bccbde
Lightsaber Blue: #c2dde6
Purple: #431c5d
Orange: #e05915
Yellowbrite: #cdd422
10. Хранитель лопешки Red & Purple
Болезненный красный: #EB1736
35 -летний фиолетовый: #5252D4
Стенд Пурпур на градиент: #7575DD
. #781A44
11. Сэндвич с пасхальным яйцом
Зеленый: #8BF0BA
Иронический блюз: #0E0FED
Blue Pointling: #94F13
Blue Pointling: #94F0FED
Blue Pointling: #94F0F1
Blue Pointling: #94F0F1
.0042 #f2b1d8
Желтые яйца: #ffdc6a
Ищете опытную команду веб-дизайнеров? Ниши веб-дизайна, которые мы обслуживаем: Сантехника, HVAC, Строительство и Кровля. От потенциальных клиентов, работающих с системами отопления, вентиляции и кондиционирования воздуха, до потенциальных клиентов строительного подрядчика — мы делимся всеми идеями в нашем блоге!
Оригинальный набор цветовых схем сайта:
1. Интеллектуальная небрежность
Голубо-зеленый: #6ed3cf
1 Мягкий фиолетовый: 10042 #9068BE
Вкусные восьмидесятые серого: #E1E8F0
Rich Red: #E62739
Найден на модных веб -цветовых палетях от AWWARDS
2.
Extra Snug.: LAWARDS LAWARDS LAWARDS.
Комфортный загар: #C9AF98
Peachy Kreme: #ED8A63
Brown Bonnet: #845007
Найден на рубашке Desi By Filip Dueskau на «Знатном0043
— это Ya Yellow?!: #FEDA6A
Silver Fox: #D4D4DC
Deep Matte Grey: #393F4D
Dark Slate: #393F4D
Track Slate: #393F4D
Track Slate: #393F4D
. Creativa Studio on Dribbble
4. Сонные зеленые полосы
Проще говоря, Green Green: #7DCE94
Встрельный ровный серый: #3D3D3F
Vanill Grey: #F6F3F3F3
vanilal Grey: #F6F3F3F3
vanill.0002 White-ISH : #F9F8FD
Найден на веб-сайте книги «Джунгли» Watson D/G для Disney
5.
Драгоценные металлыРозовое золото: #BD8C7D
Soft Gold: #D1BFA7
: #D1BFA7
: #D1BFA7.
Серебро: #8E8E90
ONYX: #49494B
Найден на брендинге KAE от Socio Design
6. Европейские тела
Желтая рука: #FBF579
Желтая рука: #FBF579
.0042 #005995
Стационарный розовый красный: #FA625F
Purpled: #600473
Найден на веб -сайте Inspiration By Mind Sparkle Mag
7. Простые блестящие акценты
40041 70041441441441441441441414414414 гг.Коричневый на фото: #
a
Зеленые водоросли: #00c07f
Традиционный синий: #313d4b
Найдено на веб-сайте Inspiration by Mind Sparkle Mag3 90 Sparkle Mag30002 Все еще жаждете большего? Посмотрите удивительные вещи в журнале Mind Spark Mag и просмотрите удивительные примеры. Такая великолепная подборка современного, часто вдохновленного швейцарцами веб-дизайна.
Часть вторая. Наблюдения за взаимодействием и цветом в контексте
Элементы цвета важны не только в том, как они сочетаются с другими дополнительными оттенками, но также в количестве и размещении по отношению к этим другим цветам и в том, как они связаны к другим рисункам и фотографическим элементам рядом с ним и в других местах на веб-сайте. В этом разделе я буду делиться / курировать веб-сайты с красивыми цветовыми схемами, шестнадцатеричными кодами и просто кратким примечанием о том, почему используемый цвет работает в контексте.
8. Синий Красный
Темно-красный: #b11a21 – В наложении, наложенном на плоский синий, фотографический фон придает глубину.
Светло-красный: #e0474c – Улыбающееся лицо, просвечивающее сквозь красный цвет, делает его поразительным.
Blue Beans: #7acfd6 — плоский синий контрастирует с фотографией за красным.
Светло-классный серый: #f1f0ee — простой светло-серый цвет используется для придания глубины более позднему фрагменту фотографии, а белый — под ним.
Найдено на веб-сайте Inspiration by Mind Sparkle Mag
9. Солнечно и спокойно
Утреннее небо: #CAE4DB — никогда не недооценивайте цветовую палитру, созданную с помощью фотографии, чтобы задать тон вашему дизайну.
Мед: #DCAE1D — В этом случае палитра устанавливается вместе с фотографией, а затем повторяется в подзаголовке.
Cerulean: #00303F — Cerulean невероятно стильно смотрится в качестве альтернативы черному или темно-серому цвету, если использовать его постоянно.
Туман: #7A9D96 – Этот чистый, естественный цвет присутствует на фотографии, но его можно использовать и на нижнем блоке полной ширины или на кнопках.
Найдено на веб-сайте Inspiring Color Schemes от Canva
9.
Темно-оранжевыйТемно-серый: #393939. Темный дизайн требует немного больше внимания, но при правильном использовании может обеспечить много контраста.
Темно-оранжевый: #FF5A09 — Различные оттенки апельсина создают глубину и градиент, не заходя на совершенно новые цвета.
Светло-оранжевый: #ec7f37 — использование иллюстративных элементов требует некоторой гибкости для естественной светлоты и темноты для контурирования объектов.
Оранжево-желтый: #be4f0c. Использование цвета на цветовом круге может сделать палитру стильной, смелой и сдержанной.
Найден в великолепных цветовых схемах с помощью одного дополнительного пикселя
10. Скрипучий
Свежий: #4ABDAC — еще раз цвет, наложенный на фотографические элементы, придает стильный современный вид
Vermillion: #FC4A1A — Фигура на переднем плане вписана в контекст, при этом внимание уделяется тому, как она дополняет общую структуру дизайна. На самом деле, можно даже предположить, что дизайн был ниже этой цифры.
Солнечный свет: #F7B733 — желтый служит только призывом к действию и выделяет важные части в этих резких выстрелах в голову.
Найдено на веб-сайте Inspiring Color Schemes от Canva
11. Базовый сине-зеленый
Старый надежный синий: #368cbf. Синий заслуживает доверия в психологии цвета, но убедитесь, что это оттенок со вкусом, как некоторые блюз слишком из коробки. Как сказал мой учитель рисования с красками, вы всегда должны смешивать их перед нанесением на холст, иначе вы получите что-то похожее на то, что вы только что налили цвета из коробки.
Акцентный зеленый цвет: #7ebc59– Корпоративный синий + Экологичный зеленый = Каждый веб-сайт. Но не забывайте об использовании общих цветовых схем только потому, что они распространены. Используйте знакомые цвета вместе, когда это помогает вам чувствовать себя заслуживающим доверия.
Dark Slate: #33363b — Разбивка пустого пространства более темным заголовком, нижним колонтитулом или полноразмерными секциями избавляет от слишком повторяющихся вещей.
Светло-серый: #eaeaea — это одна из самых распространенных цветовых схем на веб-сайте, особенно для технологических компаний. Вам это еще не надоело? Мне это нравится.
Найдено на бесплатных потрясающих темах WordPress от ColorLib
Важная часть этого раздела — напоминание о том, что цвета не живут в вакууме. То, как они соотносятся друг с другом, сложно, и важно сочетать их не только с другими цветами, которые их дополняют, но и в степенях и количествах, которые хорошо сочетаются друг с другом. Когда я показываю, что оранжевый и желтый хорошо сочетаются друг с другом, всегда помните о контексте и количестве каждого из них. Там может быть крошечная полоска желтого, так что дело не только в том, что они хорошо работают, но и в том, сколько каждого из них и где.
Часть третья. Об отсутствии цвета и хорошо выполненных монохроматических цветовых схемах
Полное исключение цвета из сочетания — для определенных частей веб-сайта — или композиции в целом может быть стильным, но простым способом увеличения серьезность или повысить интенсивность пьесы. Об этом свидетельствует то, что мы чувствуем, когда видим черно-белую фотографию; либо мы чувствуем некую самоуверенность, либо ценим простоту и распознаем атмосферу положительной утонченности.
Эта концепция и тон также присутствуют на веб-сайтах, где используется только один цвет и различные оттенки этого цвета, что позволяет глазам отдохнуть и насладиться всем синим, зеленым или тремя оттенками фиолетового. Я также включу несколько монохромных + 1 цветовых схем , которые означают черный, белый, любые оттенки серого плюс еще один цвет, и он затенен. В каждом из этих сценариев действуют одни и те же общие принципы. Удалив все остальные цвета, за исключением нескольких избранных, вы можете улучшить совместную игру нескольких оставшихся цветов и усилить драматическое напряжение веб-сайта — если это сделано хорошо.
В конце концов, если вы ставите перед собой такую цель, дизайн веб-сайта сам по себе не продаст больше товаров. Объедините эти высококачественные стили с поисковой оптимизацией, чтобы получить больше потенциальных клиентов.
12. Старший контраст
Сланец: #262626 — Повторите после меня, все серы не равны
Светло-серый: #dcdcdc
Found on One Page Love, создано Питером Тотом. , Работа Майкла Шмида
14. Goldifox
Золотая пшеница: #A39274
Мягкая пшеница : #DFD8C8
Deep Grey: #252523
Deep Grey: #252523
This Deely This Defort Learnates This This Lyfembers This This Deely This This This This Deely This This This Comply This This Churith That Comprice. что отличная фотография может сделать для общего вида вашего сайта, если она сочетается с сильным контрастом плоских цветовых элементов.
15. Мянти освещенный
MIST: #4CB69F
Touch of Grey: #F5F5F5
Deep Purple: #201d3a — не совсем вполне B & w+1 — Hint of The Grypple of The Gron Фотография
найдено в Dapper Ink By Joel Reid на Dribbble
16. Blue + White
Оптимизм синий: #269CCS
Синие алгии: #9ed2c5
Плотины Grey Grey: #9ed2c5
. Плотины.0003
Найдено на fltdsgn.com
И еще пара веб-сайтов в оттенках серого, чтобы было совершенно ясно, что оттенки серого могут быть очень красивыми.
16. Экспериментальная простая фотография – разделение квадратов
Найдено на InspirationDE by Sam Thies «Мы не пластиковые»
18. Прямоугольник вокруг букв, креативное блокирование букв
Найдено на Behance, by Diana Polar
Весь этот раздел напоминает о том, как часто мы упускаем из виду использование отрицательного пространства в дизайне и вместо этого полагаемся на нашу способность заполнить пространство. Оставление пустого пространства и заполнение только его части намеренно создает изысканность в дизайне, и теперь переполненные излишества могут победить. Соедините эту чувственность со вкусом выбранными типографскими элементами и хорошо продуманными фотографическими активами, чтобы все выглядело высококлассно.
Часть четвертая – О взаимодействии типографики и цвета
Типографика, цвет, верстка. Ни один из этих элементов не стоит отдельно ни в одной композиции, и разговор об одном без другого оставляет неполную картину. Всегда обращайте внимание на то, как характер вашей цветовой схемы веб-дизайна сочетается с вашими типографскими элементами. Шрифты должны выбираться вручную по их атрибутам, а не случайным образом.
19. Угольно-черный, золотой и много белого
Золотистый верх: #d8ab4e
Золотистый низ: #b48c36
Темно-серый: #040404
. Комбинации шрифтов, дополняющие выбранные цвета — Gin Rough и Amiri
Gin Rough — от Fort Foundry, доступны на MyFonts — взяв высококачественный золотой градиент и соединив его с типографскими элементами очень преднамеренной формы, дизайнеры этого шрифта сайт сочетал в себе строгость и элегантность.
Amiri Rough – Доступен через Google Fonts – Великолепно выглядит в качестве отзыва или цитаты.
Найден на веб -дизайне вдохновения для клубов Gentlemen Barber (вам нужно увидеть полный сайт)
20. Чистый хаки красный
Хлопковый красный: #C53211
Чистый серый: #2E3830
Чистый серый: #2830
Хаки: #e6dbc9
20B. Сочетание шрифтов, дополняющее выбор цвета — Futura Bold и Museo Slab
Futura Bold — классика и простота. Обычные похожие шрифты, такие как Gotham Black, Montserrat или Proxima Nova, могут дать вам похожий, но другой вкус. Тем не менее, шрифт Futura Bold будет полезен во многих ситуациях – он хорошо сочетается с простой красной, серой и коричневой цветовой гаммой в качестве заголовков в верхнем регистре.
Museo Slab – как вес 100 в цитате выше, так и текст абзаца (начертание шрифта: 400), Museo Slab обеспечивает удобочитаемость, будь то большой или маленький. Futura, Museo Slab поверх этих удобных простых цветов кажутся не обязательно классическими, но современными и оригинальными. Сдержанность как в выборе цвета, так и в типографике приводит к очень сплоченному ощущению, благодаря которому весь веб-сайт кажется интегрированным и фирменным.
21. Hip Modern Pastels
PASTEL PEACH: #DEA6AF
Sky Blue: #8CBCD0
PASTEL PINK: #8CBCD0
PASTEL: #8CBCD0
. Сочетание шрифтов в дополнение к цветовому выбору – Калибр – европейский дизайн Ketchup
Калибр – Мне нравится внешний вид, который многие современные европейские веб-сайты получают с помощью этого зрелого, швейцарского шрифта. Он найдет гораздо больше применения в Америке, прежде чем он станет слишком популярным здесь. Приведенное ниже приложение без излишеств демонстрирует уверенность, с которой его используют многие европейские дизайнеры. Безупречно сыграно.
Дизайн, найденный на церемонии вручения наград CSS Design Awards – купите шрифт Calibre
Независимо от того, какие цвета вы используете, ваш веб-сайт будет лучше, если на нем будет использован один или два очень хорошо продуманных шрифта. Поиск баланса между цветом и шрифтом не обязательно является научным — он требует определенной поэтической ассоциации, но это не значит, что он полностью субъективен. Цвета могут быть либо диаметрально противоположными индивидуальности/личностям шрифта(ов), либо находиться в прямом соответствии с ними.
Несколько слов ободрения
Использование описательных слов, таких как «мужской», «женственный», «грубый», «классический», «чистый», «современный» и «выразительный», может помочь вам говорить о цветовых схемах. и шрифты с вашими клиентами и другими людьми, работающими над вашим дизайном вместе с вами. Важно не слишком увлекаться семантикой или значением слов. Вместо этого используйте их по мере того, как они вам полезны, и отбрасывайте их, как только они станут спорными.
Самое главное, чтобы ваши дизайны служили цели, для которой они предназначены — что они действуют . Потратив некоторое время на запуск проектов с цветовой схемой, отвечающей эмоциональным потребностям основной демографической группы, вы настраиваете их на успех. На самом базовом уровне это означает, что веб-сайты для мужчин не должны быть фиолетовыми, так как статистически это их наименее предпочтительный цвет. Вы также не хотели бы делать медицинский веб-сайт черным, поскольку он ассоциируется со смертью, или давать очень легкую и воздушную желтую цветовую схему для серьезной темы, чтобы это не намекало на легкомыслие.
В самом остром смысле намерение в цветовой схеме веб-дизайна означает передачу голоса бренда, эмоциональной привлекательности, иногда быть открытым для вещей, ранее изученных другими (зеленый для экологического проекта, синий для технологического проекта, красный для спорт и агрессия) и следовать своим инстинктам, погружаясь с головой в то, что действительно подходит для этого конкретного рынка. Величайшие дизайнеры тоже гадали и пробовали что-то новое. Присоединяйтесь, впитайте то, что уже есть на конкретном рынке, на котором представлен продукт или услуга. Затем посмотрите на наиболее визуально привлекательные и эффективные проекты на всех рынках и попробуйте свои силы. После того, как вы попробуете некоторые предварительно смешанные шестнадцатеричные цветовые схемы, перечисленные выше или где-либо еще, — смешайте свои собственные.
[bctt tweet=»«Величайшие дизайнеры тоже гадали и попробовали что-то новое».»]
Распознайте свои скрытые способности, доверьтесь своим творческим инстинктам и не бойтесь марать руки.
Часть пятая – Что такое современная цветовая палитра?
Хорошо, я скажу вам одну вещь: современная цветовая палитра не использует супер простые версии цветов, которые мы традиционно представляем: синий, зеленый, желтый и т. д. Независимо от того, можете ли вы заставить простые цвета хорошо смотреться вместе или нет. – кажется бесхитростным и относительно пресным. Я помню, как мой учитель рисования в колледже говорил, что в начале урока всегда нужно смешивать краски с намерением, потому что люди, которые просто выдавливают их из тюбика, найдут, что их рисование будет действительно тусклым.
Нам нужна современная цветовая палитра, отвечающая изысканным вкусам современного потребителя. Он может быть смелым и свежим или землистым и ржавым, но он никогда не должен выглядеть бессистемно.
22. Электронная современная цветовая палитра
Темно -синий/фиолетовый: #111C30
Dark Pink Makeup: #9A4D55
Комфорта Цветовая палитра
крошечный сладкий синий: #B5E9E9
СРЕМЕННЫЙ СВЕТ ТАН: #FEF6DD
PINKIE PIE: #FFE1D0
Желтая лошадь: #FFF1B5
9002 GREEN. Свежая современная цветовая палитра
Deep Purple: #1D1145
Happer Keeper Green: #0DB4B9
Pink Boot: #F2A1A1
Modern PinkPack: #F2A1A19
Modern Pinkpack: #F2A1A1993
Modern Pinkpack: #F2A1A1993
.
25. Землистая современная цветовая палитра
Красные ветви: #DE493C
Зеленые деревья: #608074
Синий/Зеленый туман: #DAEFD9
26. 2
.Deep Rusted Red: #C1432E
Серебряный головной убор: #4B6777
Rusted Gold: #CE9E62
БЕЗСЯ Генераторы для начала работы
Очевидно, что есть из чего выбрать, когда речь заходит о цветах для вашего веб-сайта. К счастью для вас, несколько отличных онлайн-генераторов цветовых схем могут помочь вам найти идеальный вариант для вас.
Цвета плоского пользовательского интерфейсаС помощью простой функции копирования одним нажатием вы можете вставлять шестнадцатеричные коды в существующие цветовые схемы, которые у них уже есть.
Color SupplyС возможностью выбора из дополнительных, аналоговых, триадных, сплит-комплементарных и квадратных цветовых комбинаций этот забавный инструмент позволяет вам исследовать многочисленные цветовые варианты и полезные изображения под цветовым кругом, чтобы помочь вы визуализируете каждую цветовую комбинацию.
КулерыЕсли вы хотите максимально точно ориентироваться в своих цветовых схемах, загляните в приложение Cooler, которое позволяет вам очень точно подобрать цвета для создания настраиваемой веб-цветовой схемы.
Генератор палитрГенератор палитр — отличный способ превратить ваш любимый пейзаж, городской пейзаж или любую фотографию в цветовую схему. Легко загрузите изображение, а этот инструмент сделает все остальное.
PalettonЕще один инструмент, позволяющий настраивать цвета с широкими возможностями настройки; Paletton — отличное приложение для расширения вашего репертуара цветовых схем.
62 процента опрошенных предприятий заявили, что считают, что дизайн веб-сайта следует обновлять каждые 2-3 года! Источник: Hook Agency
Часто задаваемые вопросы о цветовых схемах веб-сайтов
Какой цвет лучше всего подходит для веб-сайта?
Синий, безусловно, самый безопасный выбор, так как наибольшее количество людей назвали его фаворитом (35%). Однако ясно, что если все ваши конкуренты используют синий цвет, может иметь смысл «дифференцировать» ваше предложение и бренд. Цвета вашего бренда должны быть привлекательными, и «белое пространство» является важной частью этого. Убедитесь, что вы даете место элементам, которые вы включаете, имеете контраст между текстом и фоном и не перегружаете посетителя — старайтесь быть слишком яркими или оригинальными только ради новизны.
Сколько цветов должно быть на сайте?
Учтите, что 51% брендов выбирают монохромные логотипы, 39% используют двухцветные, и только 19% компаний выбирают полноцветные логотипы. Помимо фотографий, 1-, 2- и 3-цветные веб-сайты, кажется, легче сделать хорошо, чем пытаться сделать веб-сайт с радугой цветов. При этом, если у вас есть профессиональный дизайнер, Microsoft и Google явно считают, что работать с большим количеством цветов полезно, поскольку они оба используют как минимум 4 сплошных цвета в своем дизайне.
Почему мне стоит подумать о найме профессионального дизайнера веб-сайтов?
Выбрать цветовую схему сложно, но в дизайне веб-сайта есть гораздо более сложные проблемы, которые могут выиграть от помощи опытного дизайнера. Профессиональные веб-дизайнеры перепробовали сотни способов и поняли, какие методы работают, а какие нет. В идеале, если вы работаете с такой командой, как Hook Agency, они также проводят A/B-тестирование веб-сайтов, вносят изменения на основе аналитики и знают, как сделать ваш сайт легко найти в Google.
Вы открыли секретный люк во внутреннюю работу Интернета! 😉
Мы знаем, как делать удивительные вещи, такие как это очень классное дополнение FAQ к нашему списку здесь, в Google. Мы знаем, как управлять вашим веб-сайтом в Google с помощью практики, называемой «Поисковая оптимизация», поэтому, помимо цветовых схем веб-сайта, мы знаем, как ПРИВЛЕЧАТЬ БИЗНЕС с помощью трафика Google. Если вы хотите работать с профессиональной командой веб-дизайнеров, отправьте нам сообщение по адресу tracy@hookagency.com!
Еще одна тактика, которую мы используем для оптимизации ранжирования, — это нечто, называемое перелинковкой. Так что, если вы когда-нибудь задавались вопросом, кто самый сексуальный мужчина в Миннесоте, или хотели прочитать руководство по поисковой оптимизации для сантехников, прочтите их!Как выбрать хорошие цветовые схемы для веб-сайтов (2022)
Последнее обновление , Duncan Lambden in Designing Websites |
Наши независимые исследовательские проекты и беспристрастные обзоры частично финансируются за счет партнерских комиссий без каких-либо дополнительных затрат для наших читателей. Узнать больше
Независимо от того, создаете ли вы бренд своего нового сайта с нуля или переосмысливаете палитру существующего веб-сайта, это руководство поможет вам выбрать правильную цветовую схему. Мы познакомим вас с лучшими цветами для веб-сайтов и поможем найти тот, который соответствует уникальному характеру и стилю вашего сайта.
В конце концов, цвет — важный аспект брендинга. Вы когда-нибудь замечали, что почти каждый ресторан быстрого питания использует красный и желтый цвета в своих логотипах? Это потому, что вместе они поощряют голод и дружелюбие. Оранжевый означает веселье и дружелюбие, синий — надежность, зеленый — свежесть и природу, а черный — роскошь или элегантность.
Итак, что вы хотите, чтобы ваш бренд сказал? Читайте дальше, чтобы узнать о лучших цветах для веб-сайтов и о том, на каких из них вы должны строить индивидуальность своего бренда.
Вам нравится наша графика?
Хотите использовать любую графику на этой странице? Будь нашим гостем! Вы можете получить доступ к нашей графике , а также удобной инфографике на этом Google Диске. Просто не забудьте указать нас, дав ссылку на эту статью. Наслаждаться!
Как мы уже упоминали, цвета могут вызывать определенные чувства при виде. За психологией цвета стоит многое — вы можете ознакомиться с инфографикой на этой странице, чтобы узнать о различных брендах и цветах, которые они используют, а также о чувствах, которые они вызывают.
Вы можете подумать, что на вас не влияют цвета, но вы будете удивлены, увидев разницу, которую выбор цвета может сделать для прибыли компании. Фактически, 85% людей заявили, что цвет оказывает большое влияние на то, что они покупают.
Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий скачок или снижение конверсии. Например, Beamax, компания, производящая проекционные экраны, заметила гигантское увеличение на 53,1% кликов по красным ссылкам по сравнению с синими.
И это не просто клики: исследование воздействия цветов на сознание показало, что цвета повышают узнаваемость бренда в среднем на 80%. Например, подумайте о Coca-Cola, и вы, вероятно, представите себе их ярко-красные банки.
Не думайте, что это означает, что красный цвет является королем, так как для этого нет настоящего правила. Если ваш сайт в основном красный, красный призыв к действию не будет так сильно выделяться, поэтому вы захотите поиграть с цветами, пока не найдете комбинацию, которая вам подходит.
Так как же найти то, что подходит именно вам? Теперь вы знаете, насколько важны цвета для брендинга и опыта вашего веб-сайта, давайте посмотрим, что вы должны сделать, чтобы решить, какие цвета вам следует выбрать.
Сначала вам нужно получить хорошее представление о том, что вы продаете/предлагаете. Если вы пытаетесь добиться более премиального, высококачественного изображения, тогда вам подойдет фиолетовый, поскольку люди ассоциируют его с королевской властью, высоким качеством и интригой.
Однако, если вы хотите охватить более широкую аудиторию, синий — это успокаивающий, нежный цвет, который хорошо подходит для более деликатных тем, таких как здравоохранение или финансы.
Лучший способ определиться с основным цветом — это подумать об атмосфере вашего продукта или услуги и просмотреть цвета, которые соответствуют этой атмосфере, чтобы найти тот, который вам нравится. Вот несколько примеров:
- Красный: Coca-Cola или Nintendo – воодушевление или счастье
- Оранжевый : Nickelodeon или Fanta – предполагает дружеское и веселое времяпрепровождение
- Желтый: Nikon или McDonalds – Подразумевает оптимизм и счастье
- Зеленый: Whole Foods или Animal Planet – подразумевает свежесть и природу
- Синий: Walmart или American Express — означает надежность и надежность
- Фиолетовый: Hallmark или Cadbury — означает выдающийся бренд с историей качества
- Коричневый: Nespresso или UPS — означает надежный продукт, который может использоваться кем угодно
- Черный: Chanel или Adidas – роскошь или элегантность
- Белый: Apple или Nike – элегантные и удобные продукты
Если у вас уже есть цветной логотип, имеет смысл использовать основной цвет, соответствующий вашему существующему брендингу. Бренд Nintendo очень красный, и это видно на их домашней странице.
Это, вероятно, самый простой шаг, так как вы, вероятно, уже имеете представление о том, какого цвета должен быть ваш веб-сайт. Просто не забудьте сохранить шестнадцатеричный код!
Когда вы определились с основным цветом, пришло время выбрать другие цвета, которые вы будете использовать. Хорошей отправной точкой здесь является рассмотрение цветовых комплиментов. У каждого цвета есть аналог, который делает его «популярным», и они известны как цветовые комплименты.
Например, красный круг на зеленом фоне выделяется немного больше, чем синий круг на зеленом фоне. Но синий круг будет выглядеть намного лучше и заметнее на оранжевом фоне.
Так что, если вы используете преимущественно зеленый веб-сайт, рекомендуется использовать красные призывы к действию или использовать красный цвет, чтобы выделить важные функции, которые вы хотите привлечь внимание любых читателей.
Старайтесь использовать только один или два цвета поверх основного. Более того, вы будете бороться с беспорядком. Ничто не будет хорошо выделяться, если вы завалите посетителей множеством разных стимулов.
Хорошим примером использования дополнительных цветов является слуховой аппарат марки Eargo. Его основной цвет — оранжевый, поэтому он использовал более тусклый синий цвет, чтобы выделить этот важный раздел своего веб-сайта. Из того, что мы знаем о цветовых комплиментах, мы можем видеть, как этот синий и ярко-оранжевый контрастируют друг с другом. Оранжевый цвет также выделяет важные элементы, такие как кнопка «Добавить в корзину» и логотип.
Использование цветового круга поможет вам найти сочетающиеся цвета. Дополнительные цвета расположены прямо напротив друг друга, а три основных цвета находятся в точках треугольника.
Это важный выбор, поскольку фон вашего веб-сайта теоретически займет больше места, чем любой другой цвет. Тем не менее, это простой выбор, поскольку на самом деле он сводится к двум вариантам.
Вы можете выбрать более приглушенный вариант основного цвета, чтобы усилить фирменный стиль. Это потребует белого или серого наложения на фон, чтобы текст отображался.
В качестве альтернативы вы можете просто сделать весь веб-сайт не совсем белым, что является более распространенным выбором. Это безобидно и не остановит ничего — текст, изображения или ссылки — от прыжка со страницы.
Посмотрите на наш собственный веб-сайт, чтобы увидеть, что может выделить пустой серый фон.
Последняя остановка в вашем красочном путешествии — подобрать цвет шрифта. Вы можете сделать легкий выбор и выбрать черный, но просмотрев Интернет, вы обнаружите, что чисто черные шрифты не так распространены, как вы думаете.
Черный шрифт на белом фоне может привести к утомлению глаз, так как контрастность составляет 100%, и люди с большей вероятностью перейдут, если ваш веб-сайт будет трудно читать.
В то время как явно окрашенные шрифты должны быть зарезервированы для ссылок и важных фрагментов информации, вы можете использовать серый или серый цвет, чтобы придать вашему веб-сайту более мягкий и привлекательный вид. Здесь не так много места для экспериментов, но, возможно, стоит раскрасить текст для последнего штриха.
Беглый взгляд на эту страницу на веб-сайте Penguin Books показывает, что они выбрали более мягкий серый тон для своего текста. Это намного менее агрессивно, чем резкий черно-белый контраст, и создает более мягкую атмосферу.
К настоящему моменту вы будете иметь представление о том, какой цвет будет использоваться на вашем веб-сайте. Вот несколько дополнительных советов, когда вы думаете о цветах.
Используйте постоянную насыщенность
Одна вещь, которую вы можете сделать, чтобы усилить свой бренд, — это использовать различные цвета с одинаковой насыщенностью. Насыщенность — это еще один способ сказать яркость цвета. Взгляните на использование цвета компанией Innocent по производству напитков:
Здесь у них шесть разных цветов, но ни один из них не кажется неуместным или раздражающим. Это потому, что их насыщенность приглушена до одного уровня, что делает его стабильным.
Использовать один и тот же цвет, но с разной насыщенностью
Когда бренд имеет сильную связь с определенным цветом, он может не захотеть слишком далеко отходить от него. Тем не менее, все, что является одним цветом, может стать немного устаревшим, поэтому может быть интересно взять ваш основной цвет и немного поиграть с насыщенностью. Взгляните на параметры социальных сетей в левом нижнем углу этой статьи TechCrunch.
Все пять одинаковых зеленых, но с разным уровнем яркости. Они изменяют визуальные эффекты страницы, а также укрепляют идею о том, что светло-зеленый цвет является синонимом TechCrunch.
Чтобы получить дополнительные советы, ознакомьтесь с нашей инфографикой ниже, в которой показано, что различные цвета брендов представляют для потребителей, как они используются в различных маркетинговых целях, а также примеры брендов, использующих их в своих логотипах.
Если вы готовы начать поиск цветов, с чего начать? Может быть сложно подобрать оттенок, когда вам только что дали цветовой круг. Чаще всего вы выбираете что-то, что выглядит совершенно иначе, когда оно реализовано. И даже если вы найдете один цвет, который вам нравится, вы можете найти палитру, которая хорошо сочетается с ним.
Вот почему существуют специальные инструменты, которые помогут вам выбрать цветовую схему для вашего сайта. Одним из примеров является Coolors — веб-сайт, который помогает вам получить готовую цветовую схему и внедрить ее на свой веб-сайт.
Существует также Color Safe, еще один веб-сайт, который позволяет создавать и просматривать цвета по типу, позволяя вам найти идеальный красный или зеленый цвет.
После того, как вы сформулируете палитру, вы можете ввести свой веб-сайт на сайт checkmycolours.com, который проанализирует ваш веб-сайт и даст вам техническую оценку того, насколько эффективна ваша цветовая схема для людей с дальтонизмом или плохим монитором.
Вот шаги, которые вы должны предпринять при выборе цветов для своего веб-сайта:
- Выберите основной цвет: выберите цвет, который соответствует энергии вашего продукта или услуги.
- Выберите дополнительные цвета: выберите один или два дополнительных цвета, которые дополняют ваш основной цвет, в идеале цвета, которые делают ваш основной цвет «ярким».
- Выберите цвет фона: выберите цвет фона вашего веб-сайта — возможно, менее «агрессивный», чем ваш основной цвет.
- Выберите цвет шрифта: выберите цвет текста, который будет на вашем веб-сайте — помните, что сплошной черный шрифт встречается редко и не рекомендуется.
И не бойтесь использовать различные ресурсы в Интернете, чтобы найти идеальное цветовое сочетание — вокруг есть много всего, во что можно вонзить зубы!
Старайтесь, чтобы последовательно не появлялись более двух-трех цветов. Очевидно, что вы можете реализовать такие вещи, как фотографии или инфографика, которые используют кавалькаду цветов, но когда дело доходит до цветов фона, брендинга и функций сайта (например, кнопок), постарайтесь сделать их простыми, чтобы никто не был перегружен.
Привлекательные цвета следует использовать с осторожностью, иначе они потеряют свою значимость. Вы хотите, чтобы это повлияло на точки конверсии, например, на кнопки «Купить сейчас». Дополнительные цвета, как мы упоминали выше, — отличный способ выделиться из цветовой схемы вашего сайта и привлечь внимание пользователя к важному моменту.
В брендинге наиболее распространенными цветами являются три основных цвета: красный, зеленый и синий. Это распространяется и на цветовые схемы веб-сайта.
Вы можете сломать шаблон и выбрать желтый или фиолетовый веб-сайт, но основные цвета популярны по определенной причине. Вы должны убедиться, что у вашего бренда есть причина быть менее распространенным цветом.
51 лучший цветной сайт для дизайнеров — обновлено! – Журнал PRINT
Автор: Джуд Стюарт | 5 июля 2019 г.
Запустите свои закладки: это 50 лучших цветных сайтов для дизайнеров. Здесь вы найдете сайты, предлагающие цветовые палитры и цветовые схемы для дизайнеров.
Цветовая палитра Вдохновение и генераторы цветовых схем
Сайт, предлагающий тщательно отобранную коллекцию цветовых схем для любых целей. «Создавая умные и простые композиции из нескольких тонов, мы получаем прекрасные палитры цветов, которые работают вместе».
Более 300 000 дизайнеров и любителей цвета постоянно делятся цветовыми палитрами на этом сайте, так что всегда есть свежие идеи для вдохновения. Добавьте этот сайт в закладки как один из лучших цветных сайтов или загрузите бесплатное приложение Adobe AIR, COLOURLovers Desktop Color Finder. И пока вы этим занимаетесь, блог COLOURLovers сообщает о цветовых тенденциях и причудливых цветовых находках с соответствующими палитрами для каждого сообщения.
Создавайте, сохраняйте и точно настраивайте свою цветовую палитру с помощью онлайн-инструмента Adobe Kuler. Приятное дополнение: помимо создания палитр произвольной формы, вы также можете подтолкнуть их, чтобы они соответствовали определенным правилам, таким как дополнительные цвета, монохроматика или триады, охватывающие цветовой круг. Затем делитесь и просматривайте палитры с тысячами других дизайнеров.
Design Seeds прославляет природные цвета и эстетику целеустремленной жизни. Поиск палитры по значению цвета или по теме.
Создавайте бесконечные цветовые палитры для своих дизайнов и делитесь, экспортируйте или сохраняйте их в своем профиле.
Это бесплатное приложение позволяет создавать цветовые схемы, применять правила, рандомизировать, когда у вас заканчиваются новые идеи, экспортировать в различные форматы и даже проверять различные виды дальтонизма.
Интуитивно понятные инструменты и ресурсы для вдохновения с механизмом создания палитры, объединяющим множество функций на одном экране. Также множество вариантов экспорта.
Более надежный инструмент цветовой палитры для опытных пользователей.
Серия цветовых палитр для любого использования.
Colormunki позволяет создавать цветовые схемы из образцов Pantone.
Сайт с базовой цветовой палитрой и удобной интеграцией в социальные сети.
ColorBlender: введите цвет, получите автоматически созданный онлайн-инструмент смешивания для сопоставления цветов и дизайна палитры с параметрами экспорта основа.
Colordb: немного тяжеловат для глаз, но очень функционален, как цветной робот. Введите один цвет, получите все соответствующие оттенки, дополнения, статистику и так далее на одном экране вывода.
Также стоит упомянуть: Contrast A, SlayerOffice Color Palette, ColorToy 2.0< /span> (единственный Flash-инструмент в этом списке), сверхпростой Infohound, Visibone (такой же простой, плюс доступный на дюжине языков) и SitePro Выбор центральной цветовой схемы.
Извлечение цветовой палитры из URL-адреса или изображения
Tin Eye Labs – Извлечение цвета: загрузите изображение, вставьте URL-адрес изображения или используйте перетаскивание, чтобы извлечь цвета из изображения. Движок отобразит цветовую палитру для всех цветов, определенных в вашем изображении. Извлечение цвета работает для файлов JPEG, PNG и GIF.
ColorHunter: введите тег, шестнадцатеричный код или URL-адрес изображения для поиска цветовых палитр, соответствующих вашим критериям.
Дважды проверьте цветовую палитру любого изображения с помощью этого генератора цветовой палитры от DeGraeve.com.
Лучшие цветовые сайты для имитации (и исправления) ваших дизайнов для слабого зрения
Один из 15 человек в той или иной степени дальтоник. Эти инструменты имитируют внешний вид вашего сайта для людей с нарушениями цветового зрения.
Цветное зрение | Колблиндер | Симулятор дальтонизма | Цветовой круг специальных возможностей | Checkmycolors.com
Отточите свои знания в области теории цвета
Теория цвета от Paper Leaf: Вот ваша одностраничная шпаргалка по концепциям теории цвета. (Вы также можете скачать его!)
Сибаграфика о международных значениях цветов: значения цветов ни в коем случае не являются универсальными в разных культурах. В Египте, по-видимому, желтый — цвет траура; для китайцев зеленый означает, что ваша жена вам изменяет; в Японии розовый популярен как у мужчин, так и у женщин. Избегайте межкультурного недопонимания, проверив свои палитры для международных проектов здесь.
Мгновенное определение цветов с помощью плагинов для браузера
Pixie
ColorZilla: Прокачай свой браузер Firefox для цветовых задач с помощью этого плагина.
ColorMod: этот бесплатный виджет избавляет вас от необходимости запускать Creative Suite каждый раз, когда вы хотите получить сочный цвет, который вы видите.Найдите потрясающие фоновые узоры
Создавайте, просматривайте и загружайте фоновые узоры для своих проектов. Эти инструменты могут помочь:
BG Patterns | ДинШаблон | Ava7Patterns | Шаблоны EveryDayIcons | Patterrific
Играйте с цветом подробнее
Tin Eye: этот сайт извлек цвета из 20 миллионов изображений Creative Commons на Flickr, чтобы сделать изображения доступными для поиска по цвету.
Color-Hex: Этот сайт содержит шестнадцатеричные коды для каждого из перечисленных цветов.
SpyColor: бесплатный сервис, который предоставляет информацию о любом цвете, включая преобразование во многие цветовые модели (RGB, CMYK, HSL, HSV, XYZ, xyY, CIELAB, CIELUV, CIELCH, Hunter Lab и YIQ). Схемы (гармонии), такие как дополнительные, расщепленно-дополнительные, триадные, четырехцветные, пятицветные, конфликтные, аналогичные и монохроматические цвета, можно найти на каждой цветовой странице.
RGB Задача: в этой игре попытайтесь угадать правильный цвет для приведенного выше кода RGB. Соберите как можно больше правильных цветов подряд и обыграйте своих друзей!
Цвет (игра): С помощью цвета вы проверяете точность своего восприятия цвета, изучая ключевые концепции теории цвета и дизайна.
Color Run: Простая игра про цвета. Просто нажмите на более светлый цвет.
HEX Захватчики: Слушайте! Инопланетяне вторгаются! Вы должны защитить планету, сопоставив шестнадцатеричный код цвета с соответствующим существом.
Color Sheep: динамичная аркадная игра, в которой игроки меняют цвет Вулсона, чтобы он соответствовал приближающимся волкам, смешивая красный, зеленый и синий свет разной интенсивности.
Shutterstock Spectrum: Поиск в базе данных изображений Shutterstock по цвету.
Playdots: цель проста; поднимайтесь в таблице лидеров, соединяя точки одного цвета по вертикали и горизонтали.
Online Color Challenge: Насколько хорошо вы видите цвета? ФАКТ: 1 из 255 женщин и 1 из 12 мужчин имеют ту или иную форму дефицита цветового зрения. Примите участие в онлайн-тестировании цвета, основанном на тесте Farnsworth Munsell 100 Hue Test.
Blendoku: игра-головоломка, которая бросит вызов вашей способности различать и упорядочивать цвета.
Назовите этот цвет: Хотите узнать название определенного оттенка? Найдите его здесь.
Онлайн-цветовой тезаурус HP IdeaLab: в рамках этого совместного проекта ученые-цветовщики Hewlett-Packard тщательно изучают названия цветов.
WolframAlpha: Этот «вычислительный механизм знаний» включает в себя цветовую категорию, объединяющую имена цветов с шестнадцатеричными, RGB, CMYK и другими значениями, температурами и даже длинами волн света. Любители цвета, радуйтесь.
Неясные цветовые термины Phronistry: Наконец-то вы можете узнать, как выглядит «smargadine» или «luteolous». Как щепетилен!
И последнее, но не менее важное: большое спасибо SpyreStudios, DesignReviver и MogDesign за их превосходные списки цветовых ресурсов.
39 Вдохновляющие цветовые схемы для веб-сайтов, пробуждающие ваши творческие способности
Ищете вдохновляющие цветовые схемы для веб-сайтов? Мы собрали коллекцию красивых дизайнов веб-сайтов, чьи великолепные цветовые схемы, безусловно, заставят вас творить. В эту коллекцию входят:
- мягкие и бледные цветовые схемы для сайта
- пастельных и землистых цветовых схем веб-сайта
- яркие цветовые схемы сайта
- темные цветовые схемы веб-сайта
- монохромные цветовые схемы сайта
Хотите узнать о главных тенденциях веб-дизайна 2022?
I. Мягкие и бледные цветовые схемы веб-сайтов: Feelin’ Comfy
Мягкие пастельные цветовые схемы веб-сайтов являются одними из самых популярных вариантов оформления веб-сайтов. Такие цветовые схемы сайта легко ассоциируются с романтикой и чистотой. Они также склонны к спокойствию. Это делает их идеально подходящими для широкого круга брендов, которым необходимо сообщать о надежности и комфорте.
Мягкие и бледные цветовые схемы сайта приветливы и уютны. Вот подборка сайтов, выполненных в такой цветовой гамме Можете ли вы уловить комфорт и уют?
1. Beauregard
Веб-сайт, посвященный искусству и красоте дизайна часов. Веб-сайт предлагает интуитивно понятный интерфейс и оформлен в красивой цветовой гамме, передающей чистоту и комфорт. Шестнадцатеричные коды соответствуют следующим цветам:
- ISABELLINE
- БЫСТРОЕ СЕРЕБРО
- АВРОМЕТАЛЗАВР
- СВЕТЛО-СЕРЫЙ
- ЧЕРНАЯ ОЛИВА
2. Squilla Fund
Мягкие бежевые тона в сочетании с успокаивающими бирюзовыми оттенками делают этот корпоративный сайт об инвестициях в криптоиндустрию олицетворением надежности и комфорта. Вот цвета, использованные при создании дизайна этого веб-сайта:
- TEAL BLUE
- СИНИЙ ЛУННЫЙ КАМЕНЬ
- СИНИЙ ПОРОШОК
- ВОЛШЕБНАЯ МЯТА
- БЕЛЫЙ ДЫМ
3.
LibenarМягкие пастельные тона веб-сайта передают чистоту, что делает их идеальными для презентации детских товаров. Этот конкретный веб-сайт был выполнен с использованием мягких и бледно-розовых и голубых оттенков, дополняющих основной посыл веб-сайта. Используемые цвета:
- СНЕЖНЫЙ
- ИСПАНСКИЙ РОЗОВЫЙ
- ПЫЛЬНАЯ БУРЯ
- МЫЛО
- ЯЛЬСКИЙ СИНИЙ
4. Мон-Рукус
Чистый и красивый сайт, продвигающий детские товары. Дизайнеры сделали ставку на бледно-розовые оттенки в сочетании с пурпурными оттенками, чтобы создать красивую цветовую палитру веб-сайта:
- CAROLINA BLUE
- ПАСТЕЛЬНО-РОЗОВЫЙ
- ЧАЙНАЯ РОЗА
- МАКСИМАЛЬНЫЙ СИНИЙ ФИОЛЕТОВЫЙ
- ОРГАНИЗАЦИЯ ОБЪЕДИНЕННЫХ НАЦИЙ СИНИЙ
5. Ковбойские велосипеды
Сайт о электрическом велосипеде нового поколения. Этот дизайн был выполнен с мягкими золотисто-розовыми оттенками, смелыми цветами типографики и забавными золотыми деталями. Цветовая схема сайта состоит из:
- ЛАВАНДОВЫЕ РУМЯНЯ
- ЧАЙНАЯ РОЗА
- РОЗОВОЕ ЗОЛОТО
- РАДИКАЛЬНЫЙ КРАСНЫЙ
- СВЕТЛО-ФРАНЦУЗСКИЙ БЕЖЕВЫЙ
Вдохновляющие цветовые схемы веб-сайта фиолетовый пастельный фиолетово-розовый веб-сайт
6. Sahel
Мягкий и элегантный дизайн веб-сайта достигается за счет изысканной цветовой гаммы, сочетающей нежные пастельно-розовые и бежевые оттенки с золотыми и медными элементами дизайна. Названия цветов, используемых в цветовой схеме этого веб-сайта:
- ТЕМНЫЙ ЗОЛОТИСТЫЙ
- ТАН
- ПЫЛЬНАЯ БУРЯ
- БЕЛЫЙ ДЫМ
- ВАН ДАЙК КОРИЧНЕВЫЙ
7. Я и мистер Дарси
Блог представлен в очень женственном веб-дизайне, радующем глаз красивыми теплыми цветами. Этот блог о «жизни и любви», по словам владельца, выполнен в цветовой гамме с использованием следующих ведущих цветов:
- МИНДАЛЬ
- ШАМПАНСКОЕ РОЗОВОЕ
- СРЕДНИЙ ФИОЛЕТОВЫЙ
- КОБИ
- ПОДСОЛНЕЧНИК
8.
Спасите воздухМногоцветный дизайн веб-сайта, выполненный в красивой очаровательной цветовой гамме радуги. Представленная в бледных тонах цветов, эта гамма несомненно передает чистоту и свежесть. Цвета, используемые в этом дизайне:
- AERO BLUE
- СВЕТЛАЯ СРЕДНЯЯ ОРХИДЕЯ
- МЕДВОСЬ
- СВЕТЛО-КОРАЛОВЫЙ
- НЕОТБЕЛЕННЫЙ ШЕЛК
9. Mend Seltzer
Красивая и романтичная цветовая схема веб-сайта, специально выбранная для представления новых продуктов для здоровья. Сочетая романтические оттенки розового, желтого и лавандового, вот точные названия цветов, используемых в этом веб-дизайне:
- ПЛАТИНА
- ТАНГО РОЗОВЫЙ
- ОРАНЖЕВО-ЖЕЛТЫЙ
- ЯЩИК ДЛЯ ИНСТРУМЕНТОВ
- ЯРКО-ЛАВАНДОВЫЙ
Вдохновляющий веб-сайт Цветовые схемы красочные пастельные тона веб-сайт
10. Омар
Сочетание розово-синего цвета является одним из наиболее предпочтительных сочетаний цветов, которые радуют глаз. Для дизайна этого веб-сайта дизайнер выбрал несколько оттенков пастельно-голубого, разбавленных энергичным розовым.
- БЛЕСК
- СИНИЙ ПОРОШОК
- ЗЕЛЕНО-СИНИЙ
- БЕЛЫЙ
- ФАНДАНГО РОЗОВЫЙ
Вас также может заинтересовать эта статья: Психология цвета – как улучшить веб-дизайн
II. Пастельные и землистые цветовые схемы веб-сайтов: Вдохновленные природой
Землистые цвета, или, другими словами, все цвета, которые можно найти в природе, являются одними из самых популярных цветов, выбранных для цветовых схем веб-сайтов.
Зеленые — цвет листьев и травы, коричневые — цвета почвы и дерева, бежевый — цвет песка, голубые — цвета неба и океанов, желтый и оранжевый — цвета огня. Все эти мощные цвета открывают безграничные возможности для дизайнеров по созданию впечатляющего внешнего вида веб-сайтов. Вот несколько, чтобы вдохновить вас.
11. Cure Nails
Дизайн веб-сайта полностью выполнен в пастельных земляных тонах, которые символизируют чистоту. Нюансы вызывают ассоциации с природой и прекрасно сочетаются с концепцией сайта – органические средства по уходу за кожей. Вот используемая палитра:
- PLATINUM
- ЧЕРЕПАХОВЫЙ ЗЕЛЕНЫЙ
- СЕРО-СИНИЙ
- ТАН
- КОКОС
12. Mountain Man
Сайт создан специально для нового музыкального альбома. Полностью выполнен в теплых пастельных тонах – землистых коричневых и зеленых оттенков, смешанных с фруктово-персиковыми нюансами. Цвета, используемые в цветовой схеме веб-сайта:
- БЛЕДНОЕ ЗОЛОТО
- ОЛЕНЬ
- АРТИШОК
- ТЕМНО-КОРИЧНЕВЫЙ-ТАНДЖЕЛО
- СОЛОМА
Вдохновляющий веб-сайт Цветовые схемы Веб-сайт ретро-цветов
13. Андрис Гауракс
Этот веб-сайт, основанный на землисто-голубых и медных тонах, на самом деле представляет собой портфолио веб-разработчика. Успокаивающий эффект синего передает надежность и доверие. Вот названия цветов, используемых в цветовой схеме этого веб-сайта:
- TUFTS BLUE
- ФРАНЦУЗСКИЙ НЕБЕСНО-ГОЛУБОЙ
- СИНЯЯ ЭЛИС
- БЕЛЫЙ
- МЕДЬ
14.
The Green Organic DutchmanПриземленные цветовые схемы идеально подходят для веб-сайтов, рекламирующих экологически чистые продукты. Это потому, что они легко ассоциируются с природой. Вот отличный пример сочетания зелени с оттенками золотистого песка.
- БИСТР
- ВЕГАС ЗОЛОТО
- ПУСТЫННЫЙ ПЕСОК
- БЕЛЫЙ
- ПАЛЬМОВЫЙ ЛИСТ
15. 10×18
Сайт, выполненный в приятных тонах, передающих теплоту и уют, — сайт, на котором 33 исполнителя визуально интерпретируют свои любимые альбомы. Теплые земляные цвета, используемые в цветовой гамме этого веб-сайта, следующие:
- БЕЛЫЙ ДЫМ
- ИСКРА ГЛУБОКОГО КОСМОСА
- ПЕСОЧНО-КОРИЧНЕВЫЙ
- ПАСТЕЛЬНЫЙ ОРАНЖЕВЫЙ
- СВЕТЛО-КОРАЛОВЫЙ
Реклама
16. Adrien Laurent
Сайт-портфолио французского интерактивного дизайнера, выполненный в коричневато-бежевых земляных оттенках, смешанных с бодрящим апельсином, напоминающим огонь. Цветовая схема сайта состоит из следующих цветов:
- ПЫЛИ
- УПЛОТНЕНИЕ КОРИЧНЕВОЕ
- ОРАНЖЕВЫЙ (PANTONE)
- БЕЛАЯ МЕДЬ
- ЛЕН
Вдохновляющий веб-сайт Цветовые схемы теплые тона веб-сайт
17. Бронзовая коллекция Bang Olufsen
Сайт о спикерах, представленный в красивом художественном стиле – бронзовая тема. Бронза — известный сплав металлов, воплощенный в веб-дизайне, вызывает элегантность и изысканность. Цвета в этой палитре:
- ACAJOU
- СТАРЫЙ БОРДОВЫЙ
- БЕЛЫЙ
- ИНДИЙСКИЙ ЖЕЛТЫЙ
- КРАСОВЫЙ
Вас также могут заинтересовать 30 идей дизайна веб-сайта электронной коммерции для вашего интернет-магазина
III. Яркие и смелые цветовые схемы веб-сайтов: привлекающие внимание
Действительно, яркие цвета обладают способностью мгновенно привлекать внимание. В отличие от пастельной гаммы яркие цвета возбуждают и заряжают посетителя энергией. Веб-сайты, выполненные в ярких цветовых схемах, кажутся освежающими и веселыми. В этой подборке мы выбрали веб-сайты, полностью выполненные в ярких цветах, и веб-сайты, сочетающие яркие цвета с более бледными тонами.
18. МА-ЧАЙ
Освежающий напиток обязательно нуждается в освежающем дизайне сайта. Отличный пример яркой цветовой схемы веб-сайта, которая заряжает энергией, веселит и в то же время уравновешивает. Основные цвета, используемые в этой палитре:
- РАЙСКИЙ РОЗОВЫЙ
- КОСМИЧЕСКИЙ КОБАЛЬТ
- АУРЕОЛИН
- КЕЛЛИ ЗЕЛЕНЫЙ
- ШАЛДЕЙ
19. Мяу-Волк
Яркие цвета в сочетании с черным цветом выглядят мистически и футуристично. Этот веб-сайт, на котором представлен художественный коллектив, безусловно, передает творчество и тайну, которые заряжают энергией и вызывают любопытство. Достигается использованием следующих цветов:
- АУРЕОЛИН
- АЭРО
- БОГОМОЛ
- СВОБОДА
- МЕКСИКАНСКИЙ РОЗОВЫЙ
20.
Монреаль в движенииЦветовая комбинация, которая перенесет будущее прямо на ваш экран! Мистические оттенки фиолетового, наполненные энергией райского розового и синего электрик, переведены в красивые градиенты. Достигните этого чарующего эффекта, используя следующие цвета:
- РАЙСКИЙ РОЗОВЫЙ
- СИНИЙ ПАЛАТ
- ПОЛНОЧНО-СИНИЙ
- ТЕМНАЯ ОРХИДЕЯ
- НАСЫЩЕННЫЙ ЭЛЕКТРИЧЕСКИЙ СИНИЙ
21. Animat Kreatik
Независимо от того, представлены ли они в виде градиентов или плоских форм, каждая из которых заполнена сплошным цветом, яркие нюансы производят впечатление на зрителя. В данном случае — креативный веб-сайт, представляющий плоскую иллюстрацию на белом фоне, чтобы все красивые цвета выделялись.
- КОБИ
- ХАН ПУРПУРНЫЙ
- СРЕДНИЙ СИНИЙ
- МАКСИМАЛЬНЫЙ ЖЕЛТЫЙ
- РУБИН
Вы можете ознакомиться с нашей коллекцией удивительных веб-сайтов с иллюстрациями.
22. Happy Online
Яркие цвета не должны быть навязчивыми и повсюду. В дизайне этого веб-сайта яркие цвета превращаются в забавные элементы веб-дизайна, которые делают весь веб-сайт намного более увлекательным. Используемые цвета:
- YANKEES BLUE
- ПИКТОН СИНИЙ
- БЕЗУМИЕ
- ОРАНЖЕВЫЙ (WEB)
- СРЕДНИЙ МОРСКОЙ ЗЕЛЕНЫЙ
23. Gramado Summit
Свежая и яркая цветовая схема в сочетании с еще более графическими тенденциями в дизайне этого веб-сайта для Gramado Summit: ультрамариново-синий цвет наложения, однотонный вишнево-розовый фон и грушевидно-желтые детали.
- СВЕТЛО-РОЗОВЫЙ
- ГРУША
- ПИКТОН СИНИЙ
- УЛЬТРАМОРСКИЙ СИНИЙ
24. La Phase 5
Еще один бренд, который сделал ставку на яркие однотонные геометрические детали для своего присутствия в Интернете. Белый фон по-прежнему передает ощущение надежности, а красочные детали делают общий вид более веселым. Цвета в этой палитре:
- НАСЫЩЕННЫЙ КАРМИН
- ЗОЛОТОЙ МАК
- КАРОЛИНА СИНЯЯ
- МОРСКОЙ ЗМЕЙ
- ИЗАБЕЛЛИН
25. ICO Syndicate
Яркое сочетание ярко-желтого и неоново-лавандового фиолетового, дополненное их более бледными и мягкими оттенками, создает приятное впечатление от посещения этого веб-сайта. Цветовая схема сайта следующая:
- БЕЛЫЙ ЦВЕТОЧНЫЙ
- БАНАНОВАЯ МАНИЯ
- БЕЗОПАСНЫЙ ЖЕЛТЫЙ
- ЛИЛОВЫЙ
- НАСЫЩЕННАЯ ЛАВАНДА
26. Securinvest
Синий цвет доверия в сочетании с бодрящим оранжевым, смягчающим бледно-розовым и захватывающим неоновым аквамарином, которые прекрасно передают идею этого веб-сайта – финансовая услуга, которая побуждает вас мечтать о большем и помогает жить уверенно.
- ПОЛНОЧНО-СИНИЙ
- ГОЛУБОЙ
- БЛЕДНО-РОЗОВЫЙ
- МАНДАРИН
- СРЕДНИЙ АКВАМАРИН
27.
HtmlBurgerВеселая и простая цветовая схема веб-сайта для этой службы веб-разработки. Дизайн сайта был выполнен с использованием ярких и пастельных веселых цветов, которые раскалывают лед и создают дружелюбную атмосферу для посетителя. Цветовая палитра:
- ЖЕЛТЫЙ (CRAYOLA)
- ГЛУБОКИЙ МОРКОВНО-АПЕЛЬСИН
- ВЕРМИЛИОН
- АЭРО
- НЕБЕСНО-СИНИЙ
28. Juicy Food
Даже один яркий цвет может сделать весь дизайн более веселым и веселым. Это случай для этого веб-сайта. Веб-дизайнеры выбрали темно-синий оксфорд для основного раздела, приятный пастельно-фиолетовый цвет в качестве фирменного цвета и яркий желтый оттенок, привлекающий внимание.
- АУРЕОЛИН
- ГОЛУБОЙ ПУРПУРНЫЙ
- АНТИВСПЫШКА БЕЛАЯ
- БЕЛЫЙ
- СИНИЙ ОКСФОРД
IV. Темные и драматические цветовые схемы веб-сайта: Раскройте тайну
Темные цветовые схемы очень популярны, поскольку они вызывают ассоциации с тайной и роскошью. И эти чувства, безусловно, вызывают любопытство. Будь то полностью темная тема или сочетание одного яркого цвета для оживления экрана, темные цветовые схемы веб-сайтов выглядят интригующе. Посетите веб-сайты, которые мы подготовили для вашего вдохновения.
29. Мое зеркало 360°
Чтобы добиться чистого элегантного вида, сопровождаемого ощущением роскоши, дизайнеры этого веб-сайта использовали темно-серую цветовую гамму с загадочными бирюзовыми оттенками. Цветовая палитра сайта включает:
- ONYX
- ТЕМНО-СЕРЫЙ
- БЕЛЫЙ ДЫМ
- КОРОЛЕВСКАЯ СИНЯЯ
- СРЕДНЕ-БИРЮЗОВЫЙ
30. Margaux Leroy
Эффектный темно-синий монохромный веб-дизайн в сочетании с бодрящим мятно-зеленым цветом создает загадочный и свежий вид. Веб-сайт, представляющий собой портфолио UX | Дизайнер пользовательского интерфейса использовал следующую палитру для создания этого вида:
- КЕППЕЛЬ
- МЕТАЛЛ
- КОСМОС
- МЫШЬЯК
- РИТМ
31.
Iván IbáñezЧерно-белый дизайн веб-сайта с монохромными серыми иллюстрациями и яркими фиолетовыми оттенками. Этот веб-сайт представляет внештатного дизайнера UX и выполнен в следующей цветовой гамме:
- ТЕЛЕЖКА СЕРАЯ
- ТЕМНО-ФИОЛЕТОВЫЙ
- СВЕТЛО-СЕРЫЙ
- ДЭВИ’С СЕРЫЙ
- ДЖЕТ
32. Производство, Португалия
Для платформы, которая демонстрирует работы, было бы неправильно привлекать к себе внимание «кричащей» цветовой схемой веб-сайта. Для этого веб-дизайна создатели сделали ставку на несколько оттенков серого и добавили немного цвета, используя энергичный красный цвет.
- БЕЛЫЙ
- ИСПАНСКИЙ СЕРЫЙ
- ВИНТОВКА ЗЕЛЕНАЯ
- ЖУТКИЙ ЧЕРНЫЙ
- ПОСТОЯННАЯ ГЕРАНЬ ОЗЕРНАЯ
33. Microsoft в цифрах
Дизайн веб-страницы, олицетворяющий собой прекрасный пример сочетания темных и тусклых оттенков с теплыми пастельными тонами для создания загадочного, но дружелюбного и мягкого внешнего вида. Цветовая палитра для этой веб-страницы:
- CHARLESTON GREEN
- ТЕМНАЯ ПЕЧЕНЬ
- СВЕТЛО-СЕРЫЙ
- РОЗОВАЯ ОРХИДЕЯ
- ЧАЙНАЯ РОЗА
Хотите посмотреть несколько удивительных примеров параллакса CSS?
V. Монохромные цветовые схемы веб-сайта: один цвет для победы
Иногда веб-дизайнер выбирал один цвет для всего веб-дизайна и играл со всеми его оттенками, чтобы создать впечатление, достойное конкуренции с многоцветным сайты. Монохромные веб-сайты могут казаться драматичными, свежими, милыми… все зависит от цвета, который используется в качестве основы. Вот несколько примеров веб-сайтов, которые используют монохромные цветовые схемы.
34. Ефрем Иосиф
Сайт-портфолио креативного директора, который делает ставку на чистый дизайн и умные слова для своих проектов. Именно так общается с аудиторией его монохромный сайт, основанный на чистой и успокаивающей синеве океана.
- КРАСИТЕЛЬ ИНДИГО
- ГОЛУБОЙ ОКЕАН
- ЯЩИК ДЛЯ ИНСТРУМЕНТОВ
- ДЕТСКАЯ ПРИПУРКА
- БЕЛЫЙ АКВА
35.
Джин WhitetailЧистый и стильный внешний вид достигается за счет использования белого и нескольких оттенков серовато-синего, чтобы передать дух бренда и принять философию, лежащую в основе названия бренда. Точные цвета, используемые в этой палитре:
- БЕЛЫЙ
- БЛЕСК
- СИНИЙ ОКСФОРД
- ПЕЙНС СЕРЫЙ
- ГОЛУБОЙ
36. Fitspirit Fashion
Когда дело доходит до создания монохромного дизайна веб-сайта, целевой аудиторией которого являются женщины, розовый цвет, вероятно, подойдет лучше всего. Мода Fitspirit объединила цвет своего бренда ярко-вишнево-розовый с пастельными оттенками в пурпурно-розовой гамме.
- ТИРИАНСКИЙ ПУРПУРНЫЙ
- АМАРАНТ DEEP PURPLE
- СРЕДНИЙ ФИОЛЕТОВЫЙ
- ЛАВАНДОВЫЕ РУМЯНЯ
- ГОЛЛИВУДСКИЙ СЕРИЗ
37. Sikkema
Энергичный, женственный и оптимистичный, этот желтый монохромный дизайн веб-сайта передает ассоциации с теплом и яркостью солнца. Цветовая схема сайта состоит из нескольких оттенков ярко-желтого.
- МАНДАРИН
- ВЫБОРОЧНЫЙ ЖЕЛТЫЙ
- ПЕСЧАНАЯ БУРЯ
- ЖЕЛТЫЙ МИНЬОН
- FLAVESCENT
38. Gotham Siti
Монохромный веб-сайт в темно-серых тонах, отсутствие цвета которого передает драму и тайну. Цветовая палитра веб-сайта, представленная шумом, идеально передает темную атмосферу и передает сообщение веб-сайта.
- СЕРО-БЕЖЕВЫЙ
- ИЗЮМ ЧЕРНЫЙ
- ТЕМНО-СЕРЫЙ
- СЕРЕБРО
- РЕГИСТРАЦИЯ ЧЕРНАЯ
39. Аджа Уилсон
Дизайн веб-сайта, приветствующий посетителя пурпурно-серым монохромным видео для главной области со следующими оттенками и оттенками:
- ANTIFLASH WHITE
- СВЕТЛО-СЕРЫЙ
- СТАРАЯ ЛАВАНДА
- ИЗЮМ ЧЕРНЫЙ
- ПУРПУРНЫЙ СЕРО-БЕЖЕВЫЙ
Вот и все!
Мы надеемся, что эта коллекция цветовых схем для веб-сайтов вдохновила вас засучить рукава и начать создавать удивительные веб-дизайны уже сегодня. Мы будем более чем рады, если вы поделитесь с нами своими творениями в разделе комментариев ниже. До встречи!
Возможно, вам будет интересно прочитать следующие статьи по теме:
- Более 80 источников для поиска ресурсов и материалов для дизайна
- 10 секретов веб-дизайна, о которых вам никто не расскажет
- 100 удачных цветовых сочетаний, выходящих за рамки трендов: вдохновляющие примеры и идеи
Реклама
15 лучших цветовых схем для сайтов0003
Этот симпатичный веб-сайт сочетает в себе теплые и холодные оттенки для современной и молодежной атмосферы. Жирный черно-белый текст выделяется на четком белом фоне с теплыми розовыми и холодными синими акцентами, привлекающими внимание к продуктам в продаже. Он создает энергетический эффект, не будучи подавляющим.
#2 Яркие акцентные цвета
Веб-сайт: Портфолио Раффаэле Сабеллы
Обратите внимание, как мгновенно выделяется этот сайт с ярко-розовыми и ярко-синими акцентными цветами на гладком черном фоне. Эффект этой цветовой комбинации интригующий — он заставляет вас хотеть большего, хотя бы для того, чтобы узнать, может ли продукт или услуга, которые они продают, быть такими же привлекательными, как веб-сайт.
#3 Натуральный и землистый
Веб-сайт: Zen Stoic
Успокаивающие голубые, серые, пастельно-розовые и темно-зеленые оттенки придают этому веб-сайту успокаивающую цветовую гамму. Кажется, что он поглощает посетителя мирной обстановкой, которая может быть даже окутана тайной. Акцент делается на дзен, и вы не можете не отправиться в путь самопознания, продаваемый на сайте.
#4 Прохладный и свежий
Веб-сайт: Every Vegan Recipe
Ярко-желтый и черный цвета могут показаться рискованными, но эти веселые фоны прекрасно подчеркивают предлагаемые вкусные, экологичные веганские рецепты. Команде Connective нравится, как использование цвета обеспечивает чистую, яркую и освежающую палитру. Это идеальный эффект для дизайна сайтов, которые хотят создать заслуживающий доверия образ.
#5 Дерзкий и яркий
Веб-сайт: BeMe Wellness
Завораживающие сочетания розового, сиреневого, желтого и небесно-голубого фона передают яркость и живую красоту. Основной цвет внутри темно-синих подзаголовков дальше на главной странице выделяет эту ключевую информацию. Он выделяется на белом фоне — более яркие оттенки эффективно компенсируют более холодные цвета, создавая современный и резкий дизайн.
#6 Стильный и изысканный
Веб-сайт: Rupert & Rothschild
Если бы у элегантности была цветовая палитра, то консервативный черный, серый, белый и золотой должным образом передавали бы роскошь, редкость и класс. Темные, приглушенные тона подчеркивают мерцающие золотые и белые буквы в классической каллиграфии, создавая чистый и утонченный вид 19-го века. Он обеспечивает ощущение «старого мира», подходящее для высококачественного винного продукта, который он продвигает.
#7 Deep Mint and Blues
Веб-сайт: Finix
Синий — это традиционное представление доверия и надежности, которому отдают предпочтение многие бренды, предоставляющие финансовые услуги и финтех. Безупречная синяя, мятно-зеленая и белая цветовая палитра этого веб-сайта идеально передает это ощущение случая. Он создает привлекательную визуальную платформу, которая подчеркивает профессионализм и стабильность, что крайне важно при работе с чужими деньгами.
#8 Современный и смелый
Веб-сайт: IASTI
Как сайт может эффективно передавать ультрасовременность? Connective было бы трудно найти лучший пример, чем это сочетание — холодные и теплые цвета, поразительно футуристические и удивительно смелые. Приглушенный сине-черный фон привлекает внимание глубокими оттенками лесной зелени и ярко-розовыми полосками, которые олицетворяют роскошь и минимализм, но при этом источают изысканность.
#9 Живой и привлекательный
Веб-сайт: ClearMix
Connective без ума от этого поразительного сочетания темно-синего и оранжево-розового цветов на четком белом фоне. Тема передает энергичный бренд, у которого обязательно будут отличные идеи. Основные цвета выделяются на простом фоне, чтобы вы могли прокручивать, исследовать и читать (в чем смысл, не так ли?).
#10 Ярко и просто
Веб-сайт: Proof
Простота — это сила, и этот веб-сайт прекрасно отражает философию. Минималистский дизайн и цветовая палитра включают черный текст и оранжевые акценты, которые передают отношение к делу. Это поддерживает интерес посетителей сайта, пробуждая любопытство в отношении того, что сайт может предложить с их службами документов, которые так эффективно излучают внимание к деталям.
#11 Художественный и креативный
Веб-сайт: Kalamaki Street Greek
Команда дизайнеров Connective часто сталкивается с яркими цветовыми палитрами, которые противоречат эстетике и брендингу, но этот сайт не является одним из таких примеров. Вместо этого это идеальное сочетание белого, черного и оранжевого цветов простое, но удивительно креативное. Он передает бренд быстрого питания, простой, привлекательный и веселый.
#12 Элегантный, но доступный
Веб-сайт: Gofas Jewelry
Продажа вневременного товара, такого как часы, требует тонкого баланса элегантности и современности. Этот сайт надлежащим образом использует черный и розово-золотой цвета как вневременные и вдохновляющие базовые цвета. Цветовая гамма также доступная благодаря классическим белым буквам, и бренд успешно передает качественную, но доступную идею для своего каталога.
#13 Элегантный и футуристический
Веб-сайт: Recurso Universum
Вы когда-нибудь испытывали ощущение мгновенного переноса в космос? Если привлекательная цветовая палитра этого веб-сайта не соответствует вашим требованиям, присмотритесь. Глубокие черные, синие и блестящие белые прекрасно передают революционные качества, которые они пытаются связать со своим брендом, легко перенося посетителей веб-сайта в будущее.
#14 Минималистичный, но теплый
Веб-сайт: Selena Beach Wear
Вы когда-нибудь испытывали ощущение мгновенного переноса в космос? Если привлекательная цветовая палитра этого веб-сайта не соответствует вашим требованиям, присмотритесь. Глубокие черные, синие и блестящие белые прекрасно передают революционные качества, которые они пытаются связать со своим брендом, легко перенося посетителей веб-сайта в будущее.
#15 Корпоративный и традиционный
Веб-сайт: Omega Funds – Venture Capital
Наш список был бы неполным без этой сине-белой корпоративной палитры. Красные акценты передают серьезный и целеустремленный образ бренда, подчеркивая надежность и профессионализм этой службы венчурного капитала. Это самая четкая цветовая схема в нашем списке, но она продвигает бренд вперед — свяжитесь с нами, чтобы помочь вашему сайту сделать то же самое.
Как выбрать лучшую цветовую гамму для веб-сайта
Выбор лучшей цветовой палитры для вашего веб-сайта не так сложен, как может показаться. Как только вы поймете, какие эмоциональные реакции вызывает цвет, вы сможете воплотить это в впечатляющую цветовую схему для своего веб-сайта. Читайте дальше, чтобы узнать, как это сделать.
Цветовая схема веб-сайта и цветовая палитра
Цветовая схема веб-сайта относится к группе цветов, выбранных для оформления веб-сайта. Цветовая схема описывает организационную структуру цветовых групп и то, как они взаимодействуют для создания гармоничной эстетики. Цветовая схема используется на всем веб-сайте для различных компонентов.
Термины «цветовая схема» и «цветовая палитра» часто используются взаимозаменяемо, но это не одно и то же. «Цветовая схема» описывает взаимосвязь между группами цветов, а «цветовая палитра» относится к фактически выбранным вами цветам. Цвета в вашей цветовой палитре основаны на вашей цветовой схеме.
Вообще говоря, цветовые палитры делятся на первичные и вторичные цветовые группы. Основные цвета обычно используются для доминирующих элементов веб-сайта, таких как цвет фона, цвет меню, логотипы и кнопки. Второстепенные цвета используются для акцентных элементов. Мы рассмотрим это более подробно позже.
Цветовая палитра нередко включает один и тот же цвет с разной степенью насыщенности. Это придает дизайну веб-сайта визуальную глубину, сохраняя при этом согласованность.
Почему важны цветовые схемы веб-сайта?
Эффективная цветовая схема необходима для узнаваемости торговой марки
Проще говоря, узнаваемость торговой марки определяется тем, как ваша торговая марка находит отклик в сознании потенциального покупателя. Ваша цветовая схема — это визитная карточка вашего бренда, его визуальная идентификация. Выбранная вами цветовая схема должна соответствовать сообщениям бренда, чтобы привлечь предполагаемую целевую аудиторию.
Цветовые схемы создают эмоциональную связь
Различные цветовые палитры вызывают разные эмоциональные реакции и ассоциации. Ваш выбор цвета играет важную роль в голосе и тоне вашего бренда. То, как кто-то реагирует на цвет, варьируется от человека к человеку и в значительной степени зависит от возраста, пола и культуры. Это явление известно как психология цвета.
Психология цвета и цветовые схемы
Научно доказано, что цвет влияет на эмоции и реакции человека. Цвета влияют на решения и выбор, которые мы делаем ежедневно.
Крупные корпорации вкладывают миллионы долларов, тщательно создавая имидж своего продукта и идентичность бренда. Это включает в себя тщательно подобранную цветовую комбинацию для своих продуктов и товаров.
Цветовая палитра, которую вы выбираете для своего веб-сайта, отражает индивидуальность вашего бренда. Важно выбирать цвета, которые вызывают эмоциональный отклик, соответствующий цели вашего сайта.
Откуда вы знаете, какие цвета найдут отклик у вашей целевой аудитории? Вам нужно знать, какие цвета относятся к какому типу эмоциональной реакции. К счастью, эта работа была сделана за вас. Психологи и эксперты по маркетингу провели обширные исследования, чтобы понять подсознательную реакцию человека на цветовую стимуляцию.
Шпаргалка по психологии цвета
Красный
Красный — смелый и мощный цвет. Он отражает уверенность, молодость и радость. Это также цвет, связанный с любовью, страстью и насилием. Эта двойственность может создать эмоциональное напряжение.
Яркие красные оттенки придают цветовой гамме веб-сайта энергичный вид, а более темные — более мощный и элегантный.
Желтый
Желтый — веселый, дружелюбный и оптимистичный. Желтый — цвет солнечного света и ассоциируется со счастьем, надеждой и молодостью.
Голубой
Синий цвет универсален в выражении. Светло-голубые оттенки успокаивают, а темно-синие ассоциируются с надежностью и силой. Самые яркие голубые считаются освежающими и бодрящими.
Фиолетовый
Исторически сложилось так, что только богатые люди имели доступ к пурпурным красителям для одежды, потому что они были дорогими и их было трудно достать. В наше время фиолетовый продолжает ассоциироваться с богатством и изобилием, а также с творчеством и воображением.
Зеленый
Зеленый успокаивающий цвет. В зависимости от оттенка зеленый представляет собой природу, богатство, стабильность, рост и возрождение.
Оранжевый
Оранжевый цвет дружелюбный, веселый, энергичный и немного опасный. Как яркий осенний цвет, оранжевый также ассоциируется с переменами и движением.
Черный
В веб-дизайне черный считается нейтральным цветом, наряду с белым, серым и коричневым. Черный является самым сильным нейтральным из трех и представляет изысканность, силу и роскошь.
Белый
Белый цвет ясности, чистоты и простоты.
Грей
Грей уравновешен, бесстрастен и точен. Он предлагает элемент изысканности, нейтральности и контроля.
Коричневый
Коричневый цвет земли. Как земляной тон, коричневый передает ощущение тепла, надежности, подлинности и надежности.
Розовый
Розовый прочно ассоциируется с женственностью, романтикой, чувственностью и любовью.
Другие соображения при выборе цветов для вашей цветовой палитры
Начните с того, что у вас есть
У вас уже есть имидж торговой марки? Если у вас или вашего клиента уже есть логотип и связанный с ним цвет, обычно это будет отправной точкой для вашей цветовой палитры. Не включайте цвета ваших конкурентов в вашу цветовую схему.
Помните о своей целевой аудитории
Цвета веб-сайта юридической фирмы будут сильно отличаться от цветовой палитры медийного или развлекательного веб-сайта. Предполагаемый образ пользователя веб-сайта должен определять ваш выбор цвета. Кто они и как вы хотите, чтобы они себя чувствовали?
Создание цветовой палитры
К этому моменту у вас должно быть ясное представление о сообщении вашего бренда и базовое понимание психологии цвета. Вы готовы выбрать основной цвет, чтобы сформулировать это видение.
Помните, что если у вас уже есть цветной логотип, начните с основного цвета, соответствующего вашему текущему брендингу. Вы можете найти точное шестнадцатеричное значение вашего основного цвета, используя палитру цветов Adobe Photoshop или сетевую онлайн-платформу, такую как Dribbble или Designspiration.
Добавление дополнительных цветов
После того, как вы выбрали основной цвет, вам нужно выбрать дополнительные цвета для контраста и выделения. Сначала подумайте о дополнительных цветах. У каждого цветового круга есть противоположный цвет, который делает его «популярным». Дополнительный цвет добавляет контрастности и удобочитаемости вашему сайту.
Не стоит недооценивать важность цвета фона. Теоретически ваш фоновый цвет занимает больше места, чем другие цвета, и должен эффективно функционировать в качестве фона для основных и акцентных цветов.
Этого можно добиться несколькими способами. Вы можете использовать приглушенный оттенок основного цвета или выбрать нейтральный цвет, такой как серый, светло-серый, белый, коричневый или черный. Светло-серый и не совсем белый — самый популярный выбор для фона веб-сайта.
Распространенной ошибкой при добавлении цветов в палитру является добавление слишком большого количества цветов. Цветовая схема в дизайне веб-сайта удивительно эффективна при использовании максимум пяти цветов. Вы можете добавить больше, если хотите, но начните с минимума, с двух-трех нейтральных цветов, вашего основного цвета и акцентного цвета. Если вы добавите слишком много цветов, ваш сайт будет выглядеть загроможденным и создаст визуальную перегрузку для посетителей вашего сайта.
Использование генератора цветовых схем веб-сайта
Если вы чувствуете себя ошеломленным количеством вариантов выбора цвета, не беспокойтесь. Существует множество онлайн-приложений, которые сгенерируют для вас цветовую схему:
Палитра материалов
Палитра материалов использует правила проектирования для создания цветовых схем. Его простой интерфейс предназначен для создания цветовых схем в мобильных приложениях, но цветовые схемы можно применять и к веб-сайтам.
Фотокопия от COLORLovers
Генератор цветовых схем Photocopa позволяет создавать цветовую схему на основе загруженной фотографии. На веб-сайте также есть базовый инструмент, который генерирует цветовые комбинации на основе одного выбора цвета.
Adobe Color CC
Adobe Color CC — это интеллектуальный и удобный инструмент для создания цветовых палитр. Вы выбираете правила цвета, вращаете цветовой круг, и Adobe Color CC создает цветовую схему.
При изменении одного из цветов в палитре остальные цвета настраиваются автоматически, чтобы оставаться в соответствии с цветовым правилом. Вы также можете создавать цветовые палитры, загружая фотографии.
Coolors.co
Coolors — это веселый и динамичный генератор цветовых схем. Вы можете искать и сохранять существующие палитры или создавать свои собственные.
Paletton
Paletton предоставляет мощный инструмент для создания цветовых комбинаций и цветовых схем, которые хорошо сочетаются друг с другом. Основным преимуществом Paletton является то, что он не работает с компьютерным цветом RGB. Скорее, он построен на классическом цветовом круге, который затем переводится в цветовое пространство RGB. Таким образом, цветовые комбинации, которые он производит, являются более точными и органичными, чем цвета, которые вы можете получить из других компьютерных графических приложений.
Color Safe
Если вы имеете в виду основной цвет, но не можете получить правильное шестнадцатеричное значение, Colour Safe станет отличным подспорьем. С Color Safe вы ищете цвета в зависимости от их типа, чтобы вы могли создать идеальный небесно-голубой, переливающийся красный или изумрудно-зеленый.
Максимальное сочетание цветов
Как мы узнали ранее, отдельные цвета имеют уникальные характеристики, вызывающие определенные эмоциональные реакции. То же самое верно и для отношений между двумя или более цветами. Цветовые комбинации передают сообщение пользователю, и по этой причине их следует выбирать обдуманно.
Работа с дополнительными цветовыми схемами
Дополнительные цвета — это цвета на противоположных сторонах цветового круга. Примерами являются красный и зеленый, синий и желтый, фиолетовый и желтый, и это лишь некоторые из них. Общим в этих парах является то, что они противоположны по цветовому спектру и хорошо работают вместе, потому что создают визуальный контраст. При эффективном использовании дополнительные цветовые схемы помогают выделить определенные элементы, в частности акцентные цвета.
Дополнительные цветовые схемы полезны для навигационных меню и кнопок. Дополнительная цветовая схема для текста и фона веб-сайта привлекает внимание пользователей благодаря резкому контрасту между цветами. Дизайн кнопки с контрастным текстом не только увеличивает ее видимость; это также может привести к увеличению кликабельности и более высокому коэффициенту конверсии.
Аналоговые цветовые схемы – соседний цвет
Аналоговая цветовая схема – это три цвета, расположенные рядом друг с другом на цветовом круге. Аналогичные цветовые схемы обычно содержат один доминирующий цвет, вспомогательный вторичный или третичный цвет и третий цвет, который представляет собой либо комбинацию первых двух цветов, либо цвет акцента.
Обратитесь к природе за примерами аналогичной цветовой схемы: когда мы смотрим на закат, мы видим оттенки красного, оранжевого и желтого цветов.
Преимущества триадных цветовых схем
Триадная цветовая схема может состоять из любых трех цветов на цветовом круге, находящихся на расстоянии 120 градусов друг от друга. Хотя триадные цветовые схемы считаются базовыми, они чрезвычайно гибки, поскольку их можно применять к любым трем цветам на цветовом круге — при условии, что они сохраняют расстояние в 120 градусов друг от друга.
В определенном смысле триадные цветовые схемы обладают преимуществами как аналоговых, так и контрастных цветовых схем. Там, где аналогичные цветовые схемы ограничены тремя похожими цветами, а дополнительные цветовые схемы используют только контрастные цвета, тройная цветовая схема использует комбинацию обоих принципов. Эта гибкость предоставляет бесконечные творческие возможности для веб-дизайнера.
Яркие цветовые схемы
Яркие цветовые схемы универсальны и эффектны, если их использовать обдуманно. Веб-дизайнеры используют яркие, насыщенные цвета, чтобы привлечь внимание к ключевым элементам и создать запоминающийся пользовательский опыт.
Исследования доказывают, что яркие основные и дополнительные цвета наиболее эффективны в CTA. Использование красного, зеленого, оранжевого или желтого цвета в CTA приводит к более высокому коэффициенту конверсии, чем темные или приглушенные цвета.
Холодные сочетания цветов
Холодные цвета цветового круга включают фиолетовый, синий и зеленый. Синий — единственный основной цвет в этой цветовой группе. Фиолетовый и зеленый получаются путем сочетания синего с теплым цветом.
Цвета природы, такие как вода, листва и ночные оттенки, относятся к категории «холодных». Холодные цвета успокаивают, гармонируют и немного сдержанны. Веб-сайт, использующий классные цветовые сочетания, вызывает ощущение спокойствия, комфорта и профессионализма.
Создание согласованности с помощью визуальной иерархии
Визуальная иерархия относится к расположению элементов дизайна в порядке их важности. Визуальная иерархия веб-сайта показывает зрителю, на каком графическом элементе сосредоточиться и в каком порядке. Этого можно добиться несколькими способами, и одним из них является выбор цвета и расположения.
Возвращаясь к нашему обсуждению ярких цветовых схем, яркие, смелые цвета, такие как красный, желтый и оранжевый, привлекают внимание. Это делает их полезными для направления внимания зрителя на кнопки или вкладки, которые содержат ключевую информацию.
И наоборот, нейтральные и холодные цвета, такие как фиолетовый, синий, серый или черный, вызывают меньше эмоций. Мозгу требуется больше времени для обработки этих цветов, поэтому они лучше применяются к фоновым элементам или для создания контраста между ними и более яркими элементами вашей цветовой схемы.
Эффективная цветовая схема устанавливает визуальный порядок за счет согласованности. Например, ярко-оранжевый цвет, который вы выбрали для кнопки «Подробнее», должен быть такого же оранжевого цвета для каждой кнопки «Подробнее» на веб-сайте. Нейтральный серый цвет, который вы выбираете для фона заголовка h3, должен быть одного и того же серого цвета для каждого заголовка h3 на вашем веб-сайте.
Согласованность цвета — это подсознательное средство сообщения о том, что ваш веб-сайт и ваша компания организованы и профессиональны.
Как узнать, какие цвета куда подходят?
Теперь, когда вы выбрали цветовую палитру, как применить цвета к вашему веб-сайту? Здесь вступает в действие правило 60-30-10.
Правило 60-30-10 — это формула соотношения цветов, разработанная для создания гармоничного баланса. При использовании этого метода доминирующий цвет занимает 60 % пространства дизайна, вторичный цвет — 30 %, а акцентный цвет — 10 %. Хотя нет необходимости ограничивать себя тремя цветами, это количество создает визуальный порядок и приятно для человеческого глаза.
Практическое применение правила 60-30-10 выглядит примерно так:
- 60% площади сайта должны занимать основные цвета. Эти смелые, яркие цвета привлекают внимание пользователя, когда они стратегически размещены на вашем веб-сайте. Основные цвета — это цвета CTA. Они используются для кнопок, значков и заголовков, побуждая пользователя к действию.
- 30% полезной площади сайта должны занимать второстепенные цвета. Вторичные цвета используются для выделения менее важной информации на веб-сайте, включая подзаголовки, фон и второстепенные кнопки 9.0015
- 10% места для нейтральных цветов. Нейтральные цвета используются в основном для текста или фона. Основная задача нейтрального цвета — смягчить самые красочные разделы сайта и помочь глазам перефокусироваться.
Использование палитры, подходящей для дальтоников
Приблизительно 0,5% женщин и 8% мужчин имеют ту или иную форму дефицита цветового зрения или сердечно-сосудистые заболевания. ССЗ чаще называют цветовой слепотой, хотя этот термин не совсем точен. Люди с сердечно-сосудистыми заболеваниями не могут различать цвета, которые большинство людей считают разными, особенно красный и зеленый. Эти состояния называются «зеленый-слабый», «красный-слабый» или «красно-зеленый дальтонизм». Люди с «красно-зеленой дальтонизмом» видят и зеленый, и красный как коричневый.
Палитра для дальтоников избегает или экономно использует красный и зеленый цвета. Старайтесь использовать цветовые сочетания, в которых хотя бы один из цветов не связан с нарушением цветового зрения. Например, сине-оранжевая палитра считается удобной для дальтоников. Так же, как синий/красный и синий/коричневый, поскольку человек с сердечно-сосудистыми заболеваниями обычно может распознать синий цвет.
Вы можете загрузить свою цветовую палитру на веб-сайт www.checkmycolours.com, чтобы определить, обеспечивает ли она достаточную контрастность для человека с нарушением цветового зрения.
Эффективные цветовые схемы веб-сайтов электронной коммерции
В следующий раз, когда вы посетите свой любимый интернет-магазин, обратите особое внимание на группы цветов и их распределение. Как цвета сочетаются друг с другом и что вы чувствуете, взаимодействуя с сайтом? Чувствуете ли вы себя энергичным, вдохновленным или нейтральным? Возвращаясь к психологии цвета, наиболее эффективные цветовые схемы на веб-сайте электронной коммерции должны вызывать определенный эмоциональный отклик.
Отличные цветовые схемы веб-сайтов электронной коммерции с использованием эффекта изоляции
Эффект изоляции — это теория, согласно которой предмет, который выделяется в группе из-за своего разного размера или цвета, с большей вероятностью запомнится.
Представьте себе веб-страницу или печатную страницу, напечатанную черным цветом, за исключением одного слова, напечатанного ярко-красным. Одно красное слово наверняка запомнится ярче, чем слова, напечатанные черным.
Используйте это явление в своих интересах, выбрав один цвет для CTA. Назовите его своим «изолирующим цветом» и используйте его для кнопок «Добавить в корзину» и «Купить» среди других важных ссылок.
Постоянное использование цвета изоляции для призывов к действию отправляет мощное подсознательное сообщение посетителям, чтобы они нажимали каждый раз, когда они его видят. Эффект изоляции делает покупки легкими, и покупатели подсознательно привыкают к его визуальной простоте.
Часто наиболее эффектными цветовыми схемами для веб-сайта электронной коммерции являются черно-белая, плюс один изолирующий цвет.
Цветовые схемы целевой веб-страницы
Когда посетитель попадает на вашу целевую страницу, ваш веб-сайт должен побудить его продолжить работу по каналу продаж. Какие цвета лучше всего способствуют стабильному коэффициенту конверсии?
Это зависит от характера вашего бизнеса. Согласно исследованиям, красный, оранжевый, ярко-синий и черный лучше всего привлекают импульсивных покупателей, а бирюзовый и темно-синий находят отклик у покупателей с ограниченным бюджетом. Мягкие и пастельные тона эффективны для обычных покупателей.
Как и все в хорошем маркетинге, выбор наиболее привлекательной цветовой схемы начинается с глубокого понимания вашего целевого рынка.
Цветовые схемы веб-сайта с портфолио
Общий дизайн веб-сайта с портфолио должен облегчать просмотр вашей работы в Интернете. В этом случае эффективная цветовая схема отходит на второй план, так что ваша работа занимает центральное место.
Нейтральные цветовые схемы создают самые чистые и ненавязчивые фоны для демонстрации вашей работы. Наиболее эффективно это достигается черными, серыми или простыми белыми пространствами. Яркие цвета будут отвлекать внимание от вашей работы, поэтому, если вы используете яркие цвета, делайте это только для заголовков или вкладок меню.
Какие бы цвета вы ни выбрали, убедитесь, что они создают приятный контраст с вашей работой. Если вы решите использовать яркие основные и дополнительные цвета, ваша цветовая схема должна быть приглушенной и нейтральной. Если вы предпочитаете более приглушенные цвета, выберите яркую цветовую палитру, чтобы осветить вашу работу.
Собираем вместе
Выбор лучшей цветовой схемы веб-сайта для вашего бизнеса становится менее пугающим, если вы знакомы с теорией цвета и психологией цвета. Когда вы будете практиковать эти принципы, процесс выбора цвета станет более интуитивным.
Как выбрать один из них для вашего сайта WordPress
Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Подробнее… Можно легко забыть, что более простые элементы, такие как цвет, также играют важную роль в успехе вашего сайта. На самом деле выбор цветовых схем для веб-сайтов — это шаг проектирования, который требует тщательного рассмотрения.
Хотя немногие посетители сознательно заметят цвета вашего веб-сайта (если только вы не выберете особенно раздражающую схему), используемые вами оттенки будут влиять на впечатление людей. Во многом это связано с тем, что разные цвета оказывают специфическое психологическое воздействие. Из-за этого вам нужно выбрать оттенки, которые эффективно дополняют друг друга.
В этом посте мы обсудим важность цвета, когда дело доходит до дизайна вашего сайта WordPress. Затем мы проведем вас через процесс совершенствования цветовых схем для веб-сайтов. Давайте начнем!
Почему цветовые схемы для веб-сайтов имеют значение
Разумное использование дополнительных и контрастных цветов может помочь вашему веб-сайту выделиться.
При создании нового веб-сайта многие люди просто оформляют его в тех цветах, которые им нравятся. Если вы создаете простой личный блог WordPress, этот подход может подойти. Однако, если вы хотите достичь определенной цели на своем веб-сайте, вам нужно немного больше подумать о цвете.
Вот лишь несколько причин, по которым выбор цветовых схем для веб-сайтов является важным процессом:
- Цвета, которые приятно дополняют и/или контрастируют друг с другом, улучшают впечатление от использования вашего сайта.
- Различные цвета имеют определенные коннотации и психологические эффекты. Это означает, что вы можете использовать их, чтобы заставить людей чувствовать или думать определенным образом.
- Использование цветов для преднамеренного контраста ваших призывов к действию (CTA) может помочь увеличить количество конверсий. Многочисленные тематические исследования показали, что определенные цветовые контрасты играют значительную роль в увеличении конверсии в диапазоне от 10% до более чем 50%.
Если вы дизайнер или художник, выбрать эффективную цветовую схему для своего веб-сайта, скорее всего, будет несложно. Однако, если нет, скорее всего, вы не уверены, какая цветовая схема лучше всего соответствует вашим потребностям. В оставшейся части статьи мы рассмотрим некоторые важные факторы, которые следует учитывать при выборе оптимальной цветовой схемы для вашего веб-сайта.
Как выбрать цветовые схемы для веб-сайтов (в 3 шага)
Выбор правильной цветовой схемы не должен быть сложным процессом. Все, что нужно, это небольшое исследование и правильный инструмент. Следующие шаги проведут вас через процесс выбора цветовых схем для веб-сайтов.
Во-первых, давайте рассмотрим самые основные изменения, которые вы можете внести в цветовую схему вашего сайта WordPress с помощью настройщика WordPress. Посетите Внешний вид > Настроить на панели инструментов и выберите вкладку Цвета :
Выбор здесь зависит от вашей темы. У нас установлена тема Twenty Seventeen прямо сейчас, и мы можем изменить базовую цветовую схему с Light на Dark и отредактировать цвет текста заголовка. Мы также можем создать собственную схему, выбрав определенный цвет.
Возможность быстро и легко вносить эти изменения очень полезна. Однако, если вы хотите больше контролировать внешний вид своего сайта, вам придется создавать цветовые схемы для веб-сайтов с нуля. Давайте обсудим, как это сделать сейчас.
Шаг 1. Выберите основной цвет для своего веб-сайта
Преимущественно белая цветовая гамма вызывает ощущение чистоты и эффективности.
Прежде чем остановиться на полной цветовой схеме, полезно иметь что-то фундаментальное. Это означает выбор основного цвета для вашего сайта — оттенка, который будет использоваться чаще всего.
Если у вас уже есть сильный брендинг для вашего бизнеса или организации, часто лучше использовать основной цвет для вашего бренда на видном месте на вашем веб-сайте. Это поможет повысить узнаваемость вашего бренда и обеспечить согласованность между различными видами вашего присутствия как в сети, так и вне ее.
Однако, если у вас нет заданного цвета для работы, вы можете выбрать его с помощью психологии цвета. Исследования показали, что у людей предопределены ассоциации с определенными цветами. Это означает, что вы можете использовать основной цвет на своем сайте, чтобы вызвать определенные мысли и чувства.
Например, вот несколько наиболее распространенных цветов и их ассоциаций:
- Белый: Изысканность, эффективность, чистота.
- Черный: Гламур, безопасность, сила.
- Синий: Доверие, открытость, спокойствие.
- Зеленый: Баланс, рост, финансы.
- Красный: Теплота, волнение, юность.
- Фиолетовый: Романтика, тайна, качество.
Это означает, что вам следует тщательно продумать эффект, который вы хотите, чтобы ваш сайт производил на посетителей. Хотите, чтобы они чувствовали себя спокойно и расслабленно? Вы можете выбрать оттенок синего в качестве основного цвета. С другой стороны, если вы хотите привлечь молодую аудиторию и заинтересовать ее, красный цвет может быть лучшим выбором. Как только у вас появится основной цвет для вашего веб-сайта, вы можете перейти к следующей задаче.
Шаг 2. Выберите цветовую схему
Некоторые веб-сайты могут обойтись без использования одного цвета для своего дизайна. Однако в большинстве случаев вам понадобится хотя бы несколько оттенков для работы. Чтобы убедиться, что выбранные вами цвета хорошо сочетаются друг с другом, вы можете использовать базовую цветовую схему.
Выбрать цветовую схему намного проще, если у вас есть инструмент, который вам поможет. В качестве отличного примера вы можете воспользоваться инструментом цветового круга Adobe. Этот сайт позволяет вам выбрать тип цветовой схемы и найти определенные цвета на основе этой схемы.
Давайте начнем с самой базовой цветовой схемы Adobe по умолчанию: Аналоговая . С помощью этой схемы вы получите несколько очень похожих цветов. В инструменте цветового круга Adobe вы можете щелкнуть средний селектор и перетащить его к основному цвету, выбранному на предыдущем шаге:
.Инструмент предложит четыре дополнительных цвета, которые дополнят ваш основной оттенок. Вы можете сделать их светлее или темнее, перемещая селекторы внутрь и наружу. Цветовая палитра под колесом также содержит конкретные шестнадцатеричные коды для каждого цвета, поэтому вы можете легко использовать их на своем сайте.
Аналоговый — полезная цветовая схема, если вы хотите, чтобы дизайн вашего сайта вызывал ощущение простоты и эффективности. Однако что, если вы хотите немного больше поп-музыки? В этом случае ознакомьтесь с дополнительной цветовой схемой :
.Это покажет вам цвет, который является полной противоположностью вашему основному оттенку, что полезно, если вы хотите создать резкие контрасты. Для еще более экстремальной версии этого эффекта есть цветовая схема Triad :
Если вы ищете несколько контрастных цветов, но хотите иметь более двух или трех вариантов для работы, цветовая схема Compound — это золотая середина:
Не стесняйтесь экспериментировать со всеми доступными цветовыми схемами, пока не получите желаемый результат. Есть также множество других сайтов цветового круга, которые вы можете попробовать. Преимущество использования такого инструмента заключается в том, что какие бы цвета вы ни выбрали, вы будете знать, что они дополняют друг друга.
Шаг 3. Оформите свой сайт, используя выбранные цвета
Если у вас есть несколько цветов для работы, остается только использовать их на своем сайте. Мы не хотели бы диктовать, как именно вам это делать, поскольку вы хотите, чтобы ваш сайт имел свой уникальный дизайн. Тем не менее, есть несколько рекомендаций, которым вы можете следовать, чтобы получить наиболее привлекательные результаты.
Во-первых, вам нужно решить, где использовать ваш основной цвет. Это будет доминирующий оттенок на вашем сайте, поэтому лучше всего использовать его для заметных элементов, таких как заголовок, фон или текст заголовка. В качестве наглядного примера посмотрите, как этот сайт, посвященный художнику Густаву Климпту, использует свой основной темно-синий цвет как для фона, так и для заголовка сайта:
Выбрав основной цвет, вы можете использовать дополнительные оттенки для других элементов, таких как меню, заголовки более низкого уровня и т. д. Технологии компании MUV Interactive эффективно используют схожие оттенки зеленого и синего для создания привлекательного образа:
Наконец, не забывайте о контрастных цветах. Их следует использовать экономно и по назначению — обычно для выделения важных CTA. Веб-сайт Mix The City отлично демонстрирует это с ярко-желтой кнопкой CTA, которая четко выделяется на фоне темного дизайна:
Существует множество других примеров веб-сайтов с потрясающими цветовыми схемами, которые вы можете использовать в качестве вдохновения в процессе разработки. Это может занять некоторое время и несколько попыток, чтобы получить правильные цвета, но конечный результат будет стоить затраченных усилий.
Заключение
Нельзя недооценивать роль цвета в дизайне вашего сайта. Тщательно выбирая цвета, которые вы используете на своем веб-сайте, вы можете влиять на то, как посетители себя чувствуют, и на ассоциации, которые они создают с вашим контентом и брендом.