Цветовые схемы для сайта: 10 Трендовых Цветовых Схем Для Веб-Сайтов в 2021

10 Трендовых Цветовых Схем Для Веб-Сайтов в 2021

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

Исключительно Черный

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

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

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

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

Морской Оттенок в Сочетании с Мятным

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

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

цветовой схемой.

Черный, белый, серый

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

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

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

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

Серый, Голубой и Синий

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

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

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

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

Футуристические Цветовые Схемы

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

• насыщенный синий;
• насыщенный пурпурный;
• ярко-розовый.

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

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

Классический синий

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

Один из примеров сайтов, который реализовал такой подход – студия веб-дизайна Oino.

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

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

Природные Оттенки

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

1. Об этом говорят все больше знаменитостей.
2. Этому требованию соответствуют производители разных товаров.
3. Об этом все больше рассказывают СМИ.

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

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

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

Серый, Мягкий Желтый и Темно-Зеленый

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

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

Как Подобрать Цветовую Схему?

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

1. Выберите преобладающий цвет.
2. Подберите хорошие комбинации.
3. Определитесь с фоновым цветом.

У многих возникает вопрос относительно второго пункта. Если вы действительно не можете сами определиться с цветами, то у вас есть два выхода. Первый – обратиться к квалифицированным веб-дизайнерам, которые создадут для вашего проекта лучшую комбинацию. Второй – использовать веб-инструменты (например, Adobe Color CC).

Заключение

Сегодня очень много трендов меняются во всех сферах. Графический дизайн не стал исключением. Цветовые схемы – наименее стабильная составляющая дизайна. Поэтому за ними необходимо следить больше всего.

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

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

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

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

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

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

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

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

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

2. Определите, как посетители ассоциируют ваш сайт

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

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

Универсальным решением для большинства является голубой цвет. Это обусловлено в том числе и тем, что большинство людей отмечают его как наиболее привлекательный для себя. Так, 57% мужчин и 35% женщин отметили, что именно голубой цвет — их любимый:

3.

Выберите подходящую палитру

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

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

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

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

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

4. Выберите цвета, не входящие в основную палитру

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

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

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

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

Помните о том, что максимально рекомендуемое количество цветов сайта — четыре:

1. Основной фон.
2. Основной текст.
3. Ключевой цвет проекта.
4. Ключевой цвет ховера.

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

16 примеров дизайна сайтов для улучшения взаимодействия с пользователями (2018)

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

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

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

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

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

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

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

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

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

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

Выбор цветовой схемы для сайта

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

Выбор цветовой схемы на основе изображения

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

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

Для подбора цветовой схемы можно использовать всем известные графические пакеты (такие как Adobe Photoshop, Gimp и т.д.). В них имеется инструмент Color Picker, для определения цвета в разных областях изображения. Также существуют различные сайты, которые могут создать цветовую схему на основе фотографии или какого либо иного изображения. Вот пример таких сервисов:

• http://degraeve.com/color-palette/index.php
• http://bighugelabs.com/colors.php
• http://cssdrive.com/imagepalette
• http://pictaculous.com

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

Цветовое колесо

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

Тень, оттенок, тон

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

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

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

• http://meyerweb.com/eric/tools/color-blend
• http://colorsontheweb.com/colorwizard.asp
• http://paletton. com

Снизу на картинке пример монохромной цветовой схемы:

Монохромная цветовая схема

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

Аналоговая цветовая схема

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

Дополняющая цветовая схема

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

Разделенная дополняющая цветовая схема

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

Тройная цветовая схема

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

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

Четверная цветовая схема

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

• Создано 28.11.2017 10:56:54
• Михаил Русаков

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Пять бесплатных инструментов для выбора цветовой схемы сайта / Хабр

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

цветовой схемы

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

1. Kuler

Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

2. Color Palette Generator

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

3. Contrast-A

Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

4. ColorZilla

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

5. Colorotate

В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

____________

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

Как правильно использовать цвета в UI-дизайне

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

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

 

Базово о цветах

Сначала разберемся с терминами, которые относятся к теории цвета.

Вот основные:

Тон (hue): какого цвета объект (например, красный или синий).

Хроматичность (chroma): есть ли примеси белого или черного.

Насыщенность (saturation): как сильно цвет выражен.

Яркость (value): насколько цвет темный или светлый.

Тональность (tone): сколько серого добавили к чистому цвету.

Тень (shade): сколько черного добавили к чистому цвету.

Оттенок (tint): сколько белого добавили к чистому цвету.

Теперь к истории.

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

Цветовой круг Ньютона из книги «Оптика» 1704 года. Источник: wikipedia.org

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

Цветовой круг Иттена. Источник: doodleandsketch.com

Как работает цветовой круг

В базовый цветовой круг входит 12 цветов:

основные (первичные) — красный, желтый и синий

дополнительные (вторичные) — фиолетовый, оранжевый и зеленый

комбинированные (третичные) — смешение соседних цветов (например, оранжевый из красного и желтого)

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

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

Комплементарные цвета

В цветовом круге комплементарные цвета лежат друг напротив друга: синий–оранжевый, красный–зеленый, фиолетовый–желтый.

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

В дизайне сайта WeWork использованы комплементарные синий и оранжевый.
Источник: wework.com

Аналоговые цвета

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

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

На сайте Dropbox использовали цвета, которые сочетают не часто, и это сработало.
Источник: dropbox.com

Триадные цвета

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

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

Триадная желто-красно-голубая цветовая схема сайта Петера Оравица — зеленый тут тоже подключился.
Источник: peteroravec.com

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

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

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

КРАСНЫЙ

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

Лендинг iPhone X (RED) — красный на красном. Источник: apple.com

ЖЕЛТЫЙ

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

Онлайн-магазин продуктов Headery на основе конопляного масла — все в желтых тонах.
Источник: headery.com

ОРАНЖЕВЫЙ

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

Оранжевый онлайн-магазин бренда Aloha — продуктов на основе растительного белка.
Источник: aloha.com 

СИНИЙ

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

Например, визуальный стиль Facebook как раз основан на оттенках синего. Но этот выбор объясняется не только «надежным» характером синего, но и тем, что Марк Цукерберг — дальтоник. Он не различает красный и зеленый, а вот синий видит.

Сине-белый сайт книги When the World Went Digital о главных событиях в веб-дизайне.
Источник: thehistoryofweb.design

ЗЕЛЕНЫЙ

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

Сайт американской студии дизайна Unboundary — в оттенках зеленого.
Источник: unboundary.com

РОЗОВЫЙ

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

Онлайн-магазин женской одежды Femme and Fierce в основных оттенках розового.
Источник: femmeandfierce.nl

ФИОЛЕТОВЫЙ

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

Лавандово-фиолетовый сайт креативного агентства Omelet. Источник: omelet.com

Как составить цветовую палитру

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

Цветовую палитру составляют из первичных, вторичных и акцентных цветов.

Вот как это происходит:

Источник: gfycat.com

ДОМИНИРУЮЩИЕ ЦВЕТА

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

ВТОРИЧНЫЕ ЦВЕТА

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

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

АКЦЕНТНЫЕ ЦВЕТА

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

Чтобы подбирать цвета было проще, вот бесплатные инструменты:

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

• Coolors.co — чтобы создавать цветовые схемы по клику и смотреть тысячи палитр, созданных другими пользователями.

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

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

Основные цветовые сочетания в веб-дизайне

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

АНАЛОГОВАЯ

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

Сайт Useless London, посвященный теме борьбы с отходами. Источник: useless.london

КОМПЛЕМЕНТАРНАЯ

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

Онлайн-магазин Kin Europhorics — бренда антистрессовых напитков.
Источник: kineuphorics.com

ГРАДИЕНТ

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

На сайте стриминга Spotify показали, как «перевести» желтый в персиковый.
Источник: spotify.com

АКЦЕНТ НА ФИРМЕННОМ ЦВЕТЕ

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

Онлайн-магазин постельного белья Casper с акцентом на синий. Источник: casper.com

МОНОХРОМНАЯ

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

Онлайн-магазин косметики для губ Axiology Beauty. Источник: axiologybeauty.com

ПАЛИТРА ПРИГЛУШЕННЫХ ЦВЕТОВ

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

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

Кофейные оттенки на сайте магазина кофе StumpTown Coffee. Источник: stumtowncoffee.com

СХЕМА ИЗ ОСНОВНЫХ ЦВЕТОВ

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

Красный, синий и желтый в дизайне сервиса знакомств Bumble. Источник: bumble. com

ВИНТАЖНАЯ ЦВЕТОВАЯ СХЕМА

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

 
Винтажные акценты на сайте Five/Four — в фильтрах и основных цветах.
Источник: five-four.co

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

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

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

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

Какие методы распределения цветов существуют?

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

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

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

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

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

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

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

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

4. Цвета вашего бренда. Дизайн вашего сервиса должен исходить из логотипа или иной брендовой визуализации. К примеру, логотип кошелька Qiwi состоит из оранжевого и белого – соответственно, сайт и приложение Qiwi состоят из тех же самых цветов. 

5. Анализ конкурентов. Вы можете проанализировать похожие сервисы и почерпнуть из них дизайнерские ходы. 

Как правильно подобрать цветовую палитру?

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

Второй вариант мы рассматривать не будем, а пойдем по пути наименьшего сопротивления и начнем с первого. Готовые цветовые палитры найти довольно просто. Например, для этого идеально подойдет сайт Coolors.co.

Переходим на сайт и нажимаем на кнопку «Start the generator!».

 

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

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

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

Я надеюсь, данная статья помогла вам определиться с цветовой схемой для вашего сервиса. Спасибо за внимание!

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

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору сочетания цветов и генераторов палитр. А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.

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

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

1. Ищем вдохновение

Краски природы

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

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

Behance

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

Dribbble Colors

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

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

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

Designspiration

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

В Designspiration найдете разные примеры цветовых комбинаций

Tineye Multicolr

С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти бесплатные картинки в идеальной палитре.

Colorzilla

ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания CSS-градиентов и многое другое.

Расширение ColorZilla доступно в Chrome и Firefox

Shutterstock Spectrum

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

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

W3Schools

Недавно в блоге рассматривали подборку инструментов по веб-цветам в дизайне от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.

2. Создаем цветовую палитру

Material Design Color Tool

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

Coolors

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

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

Цветовая схема в Coolors на основе фото 

Adobe Color CC

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

Проект позволяет создать/сохранить палитру из 5 значений

А можете получить определенный результат из готового изображения:

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

Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:

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

Paletton

Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса.

Color Reference

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

3. Делаем палитру доступной

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

WebAIM Color Contrast Checker

Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте WebAIM Color Contrast Checker при подборе цветов сайта.

WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.

Coolors

О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.

Тип цветовой слепоты в схеме

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

Так человек с протаномалией видит палитру

NoCoffee Vision Simulator для Chrome

С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.

Так выглядит проект CNN для человека с дейтеранопией

Заключение

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

50 цветовых схем веб-сайта и их использование

Этот пост последний раз обновлялся 9 сентября 2021 года.

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

Имея множество вариантов, как определить идеальные оттенки для своего собственного веб-дизайна? Планируя основные («доминирующие»), второстепенные и акцентные цвета для вашего сайта, примите во внимание:

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

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

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

50 цветовых схем веб-сайта

01. Смелые и смелые

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

02. Шикарный, роскошный и страстный

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

03. Ночные шторы

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

04. Вишнево-красный

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

05. Мечтательные оттенки заката

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

06. Вспышка цвета

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

07. Изящный и аккуратный

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

08. Естественный и бодрящий

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

09. Электрическая палитра

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

10. Очаровательный розовый и насыщенные оттенки

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

11. Поп-цвета в стиле ретро

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

12. Футуристические градиенты

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

13. Яркая и бесстрашная

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

14. Землистый и минималистичный

Цветовая палитра Ceramics studio Noni São Paulo идеально отражает их бренд и продукцию.Теплые оттенки коричневого и другие землистые оттенки интернет-магазина сочетаются с красиво оформленными кружками студии. Светло-синий фон дополняет естественные оттенки в сочетании с эффектами параллаксной прокрутки, чтобы сайт выглядел профессионально и качественно.

15. Динамичный желтый с черным

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

16. Золотые оттенки

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

17. Пурпурный с оттенками серого

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

18. Кобальтовый синий

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

19. Бесплатные пастельные тона

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

20. Освежающий и естественный

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

21. Теплый с холодными оттенками

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

22. Осенние оттенки

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

23. Глубокий и мистический

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

24. Прохладный и освежающий

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

25.Веселый и профессиональный

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

26. Классическое двухцветное комбо

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

27. Восхитительные детали

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

28. Свет и умиротворение

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

29. Креативная и оптимистичная

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

30. Удивительно поразительный

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

31. Летние ретро-оттенки

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

32. Эффектный черный фон

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

33. Резкий контраст

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

34. Монохромный и металлический

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

35. Юношеские акцентные цвета

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

36. Современный и игривый

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

37. Синее море

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

38. Заманчивое разнообразие

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

39. Пастельные тона

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

40. Мрачный и романтичный

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

41. Аппетитные оттенки

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

42. Эклектичный и сбалансированный

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

43. Яркий и жизнерадостный

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

44. Морская палитра

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

45. Женственная и жизнерадостная

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

46. Нейтрально и элегантно

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

47. Основные цвета с игривым поворотом

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

48. Уникальные комбинации

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

49. Органичность и утонченность

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

50. Цветовая гамма

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

Автор: Jenna Romano

Писатель и эксперт по веб-дизайну

Цветовые схемы веб-сайтов 2021 | PicMonkey

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

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

Минималистичные идеи цветовой схемы веб-сайта

«Простота — это высшая изощренность». — Леонардо да Винчи

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

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

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

---

Смелые идеи цветовой гаммы веб-сайтов

«Двери откроются для тех, кто достаточно смел, чтобы стучать». — Тони Гаскинс

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

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

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

---

Футуристические идеи цветовой схемы веб-сайта

«Если вы хотите чего-то нового, вам нужно перестать делать что-то старое». — Питер Ф.Drucker

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

Как и Daily Bloom, EarCOUTURE использует спектр цветов, чтобы направить нас в будущее. Фактически, именно эта смесь основных и второстепенных цветов — красного, синего, желтого, зеленого, черного, белого — и сопровождающих их оттенков создает зрелище; чего-то, чего мы не видели, чего-то неизвестного.Что-то футуристическое.

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

---

Идеи мягкой цветовой схемы веб-сайта

«Все, что мы делаем, наполнено энергией, с которой мы это делаем. Если мы безумны, жизнь будет безумной. Если мы будем мирными, жизнь будет мирной ». — Marianne Williamson

Цветовая палитра United Earth Space Force безмятежная, с преобладанием кремового белого и земного синего.Каждый цвет получает свое время в центре внимания.

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

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

---

Профессиональные идеи цветовой схемы веб-сайтов

«Без профессионализма я был бы дилетантом. И клиенты, которых я хочу, не нанимают любителей ». — Дэвид Эйри

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

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

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

---

Эклектичные цветовые решения для веб-сайтов

«Вдохновения не терпится, его нужно искать в клубе.”- Джек Лондон

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

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

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

---

Натуралистические идеи цветовой схемы веб-сайта

«Загляните в природу, и тогда вы все поймете лучше». — Альберт Эйнштейн

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

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

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

---

Изысканные идеи цветовой схемы веб-сайта

«Настоящему классу никогда не получить высшую оценку… потому что его класс бесконечен ». — Дениз Ньюсом

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

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

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

---

Идеи цветовой схемы художественного веб-сайта

«Рисование — это видение на бумаге». — Эндрю Лумис

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

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

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

---

Идеи чистых цветовых схем веб-сайта

«Чистоту можно определить как чистейшую эмблему разума». — Джозеф Аддисон

Чистые цвета делают дизайн веб-сайта TIDES домашним. Синий и черный эффектно дополняют друг друга. Добавление белого к синему способствует чистому виду (не говоря уже о том, что синий цвет напоминает реку или ручей). Желтая волнистая линия добавляет акцента.

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

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

Изучите цвета для своего следующего дизайн-проекта:

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

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

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

Что такое цветовая схема веб-сайта?

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

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

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

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

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

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

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

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

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

Но что это значит для дизайна вашего веб-сайта?

Исследование Университета Виннипега выявило две важные вещи, связанные с цветовыми схемами веб-сайтов:

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

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

Топ-5 цветовых схем для веб-сайтов на 2021 год

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

Простые нейтральные цвета с ярким текстом

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

Цветовые градиенты с белым текстом

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

Сигналы возврата

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

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

Приглушенные тона с ярким цветовым акцентом

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

Оттенки основного цвета, выделенные его дополнением

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключительное слово

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

–

Thrive Design — клиентоориентированная компания по веб-дизайну из Сиэтла. Свяжитесь с нами сегодня, чтобы узнать, как мы можем улучшить ваш бизнес в Интернете! Найдите нас в Clutch, UpCity, LinkedIn, Facebook и Twitter.

Полное руководство, которое вам нужно

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

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

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

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

Что нужно учитывать при выборе цветовых схем веб-сайта

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

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

• Цвета определяют, будет ли покупатель покупать продукт в 85% случаев
• В 90% случаев именно цвета помогают привлечь новых клиентов
• Цвета влияют на подсознательные суждения на 60-90%
• Цвет усиливается узнаваемость бренда на 80%
• Цвет может привлекать и удерживать внимание покупателя в 3 раза дольше, чем черно-белый

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

• Выбирайте цвета, которые гармонируют друг с другом.Прежде чем приступить к дизайнерской работе, узнайте о теории цвета.
• Люди не могут обрабатывать слишком много информации одновременно, поэтому используйте цвет для организации вашего веб-сайта
• Используйте контрастные цвета, чтобы текст был читабельным (например, королевский синий и желтый или любое сочетание сине-желтого цвета)
• Простая формула: использовать один светлый цвет на темном фоне и один яркий цвет, или наоборот, плюс акцентный цвет
• Еще одно правило — использовать один цвет для 60% веб-сайта, другой для 30% и третий для 10%

Перейти к разделам статьи

1. Голубые цветовые схемы веб-сайтов
2. Красные цветовые схемы веб-сайтов
3. Желтые цветовые схемы веб-сайтов
4. Зеленые цветовые схемы веб-сайтов
5. Черно-белые цветовые схемы веб-сайтов
6. Пастельные цветовые схемы веб-сайтов
7. Сочетание цветов Цветовые схемы веб-сайта
8. Генераторы цветовых палитр

Синяя цветовая схема веб-сайта

Крошечный

Компания, стоящая за этим элегантным веб-сайтом, покупает Интернет-бизнес.Он имеет синий фон с контрастным белым текстом. Цвет акцента — темно-синий.

iFly 50

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

Ankr

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

Ahrefs

Ahrefs использует синий цвет на 60% веб-сайта.Белый цвет используется в 30% случаев и контрастирует с синим. А на оранжевый цвет акцента приходится 10%.

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

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

Наслаждайтесь образованием

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

Уайттейл Джин

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

NHS

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

Темно-синий

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

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

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

Выемка

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

Любовь к Исландии

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

Grand Matter

Grand Matter — хороший пример двухцветной цветовой схемы веб-сайта.Цветовая палитра включает темно-синий и светло-розовый.

Андрис Гауракс

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

BlueReceipt

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

Точечное легкое

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

Готово

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

Тим Гровер

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

Бенедиктас Гилис

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

Креативные монетные дворы

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

Красный Цветовые схемы веб-сайта

NUGGS

NUGGS — яркий и простой сайт с базовой цветовой схемой. Он содержит ярко-красный фон в некоторых разделах и красный текст в других разделах.

Sourisseaux Partners

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

Kloaq

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

Торговая марка

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

вверх

Up — цифровой банк. Он использует коралловый цвет фона и ярко-желтый цвет акцента для текста и CTA.

Полевое руководство по веб-дизайну

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

Эмме

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

Эй, лапша

Hey Noodles использует смелые цвета. Красный и желтый цвета логотипа отображаются по всему сайту.

Партнеры по передаче данных

Data Partners предоставляет маркетинговые решения компаниям из списка Fortune 1000.Ярко-оранжевый подчеркивает важные аспекты и призывы к действию веб-сайта.

развернуть

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

Пицца Пицца

Pizza Pizza использует красный цвет на всем сайте. Черные буквы выделяют текст.

MKJ Creative

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

Сплайн

На целевой странице Spline на ярко-красном фоне отображаются черные буквы. По мере прокрутки вниз красный цвет превращается в черный фон с белыми буквами.

Портал CVI холодильников

Красный цвет на этом сайте яркий. Он выделяет призывы к действию и добавляет яркости.

Прогресс Парад

Progress Parade предоставляет специализированных наставников.Красный оживляет анимацию этого сайта. Он также используется для CTA и текстовых заголовков. Использование цвета на этом веб-сайте создает организованный и привлекательный вид.

Дизайн Trionn

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

KitKat

Все узнают KitKat по красной упаковке. Соответственно, этот сайт весь красный.

Завуалированная судьба

Veiled Fate представляет собой стратегическую игру.Целевая страница имеет розово-красный цвет. При прокрутке вниз основными цветами становятся серый и светло-коричневый.

Зеленый лук

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

Кафе Руж

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

Work & Co

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

Желтые цветовые схемы веб-сайта

Разъёмная комплектация 2020

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

Синдикат ICO

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

Сделать лимонад

Дополняя свое название, этот веб-сайт выполнен в желтой цветовой гамме. В анимации этого веб-сайта появляются разные оттенки желтого.А фон — сплошной желтый.

думаю медведь

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

Алдей

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

Путевая точка

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

youbringfire

Youbringfire — это веб-сайт независимого дизайнера Скотта Бирсака. Целевая страница включает ярко-желтый фон и черные буквы.

Шелби Кей

Шелби Кей (Shelby Kay) — внештатный интерфейсный разработчик.Цветовую схему сайта составляют несколько цветов. Комбинация привлекательная и организованная.

Lordz

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

Лунная выставка

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

Адам Хартвиг ​​

На этом веб-сайте представлено портфолио дизайнера Адама Хартвига. Он имеет желтый фон и белые буквы с эффектами параллакса.

Проект «Крутой»

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

Ритуал

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

Малый Cos.

Small Cos. Перечисляет вакансии в небольших компаниях. Дизайн сайта прост. Бледно-желтый цвет привлекает внимание к анимации. При прокрутке вниз список вакансий выделяется светло-розовым цветом. Внизу страницы снова отображается бледно-желтая анимация.

Croscon

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

MateCaps

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

Creative Spark

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

Pebble Naturals

Pebble Naturals использует несколько цветов. Желтые, голубые и розовые полосы на страницах сайта.

Дизайн Identix

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

Лимонный пирог

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

eeerik

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

Моуз Дизайн

Mooze Design — веб-сайт портфолио агентства. Огромный логотип по центру целевой страницы приветствует посетителей.Ярко-желтый цвет заполняет фон всего веб-сайта.

WØRKS

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

Зеленые цветовые схемы веб-сайта

Отходы Нет

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

Природа радует нас

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

Обучаемый

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

Гекокард

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

Гели

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

Hopewell Brewing

Hopewell Brewing — это крафтовая пивоварня. На сайте преобладает темно-зеленый цвет.Светло-розовый акцентный цвет создает приятное сочетание цветов.

Смиренно здоровый

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

Фактор

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

Ferrumpipe

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

Взлетно-посадочная полоса, ML

RunwayML имеет в основном черный фон, но зеленые вкрапления оживляют этот веб-сайт.

Веб-разработка | Диего Диас

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

Практика

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

Бязь

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

RipePlanet

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

Кодибокс

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

WUNDER

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

Маркус

Маркус — рекламное агентство. Целевая страница открывается на желтовато-зеленом фоне с черными буквами.

Отделение тростникового искусства

У Reed Art Department простой веб-сайт. У него сероватый фон с зеленой окантовкой по всему периметру. При наведении курсора пункты меню выделяются зеленым цветом.

Цветовые схемы черно-белого веб-сайта

Хорошая мера

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

Студия Bjork

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

Зыбучие пески

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

Duft & Co.

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

Статус

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

Обычный

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

натуральный

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

Креативное агентство G2K

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

Хохбург. Дизайн Force

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

Стекло

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

Maddad

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

ТВОРЧЕСКИЙ ПАРК

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

Vorrel Prendergast Jr

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

Routalempi

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

Бойнтон-Ярдс

При входе на веб-сайт Boynton Yards белый текст отображается на черном фоне. При прокрутке вниз цвета меняются местами. Черно-белая цветовая схема веб-сайта поддерживает простой и чистый веб-дизайн.

Пастельные цветовые схемы для веб-сайтов

Northstar

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

HETIME

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

Mailchimp представляет

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

Rideshur

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

Гаджинский

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

Ефрем Иосиф

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

Точечный

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

Очки Lunet

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

Ла Пьер Куи Турн

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

Перелив

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

Студия создания двух

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

Эль Райо Текила

El Rayo Tequila использует множество пастельных тонов, чтобы сосредоточить внимание на текиле.

Происхождение

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

РуэдаФильм

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

Кроссовки Freaker

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

Санне Вейбенга

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

Сочетание цветов для веб-сайта Цветовые схемы

Керамика Helbak

На этом сайте продается керамика от Malene Helbak. Цвета фона подчеркивают и дополняют цвета продаваемой керамики.

Факультет

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

Промышленный город

На веб-сайте

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

Аяка Б. Ито

На сайте

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

уровень

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

Bizzon

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

Вина Моллидукер

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

Ресторан на набережной

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

Базиевые ароматы

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

Под

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

Tens Солнцезащитные очки

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

Анимация

Animade — анимационная студия. Видео с их анимацией воспроизводится после входа на сайт.Каждая анимация полна цветовых комбинаций и развлекает посетителей.

Пабло Фламинго

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

Финн

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

Bonhomme

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

Rainbo

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

Шейпфест

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

Генераторы цветовой палитры

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

Adobe Color CC

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

Охлаждающие устройства

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

Colormind

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

Палетон

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

Color Hunt

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

ColorDrop.io

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

ColorSpace

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

Завершение мыслей об этих цветовых схемах веб-сайта

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

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

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

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

И это еще не все.

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

---

20 популярных цветовых схем веб-сайтов на 2021 год

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

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

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

• Что такое цветовая схема веб-сайта?
• Значение цветовых схем веб-сайта
• Примеры великолепных цветовых палитр для веб-сайтов

Что такое цветовая схема веб-сайта?

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

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

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

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

Настройка настроения

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

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

Акцент на правильных элементах

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

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

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

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

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

Источник: Coca-Cola

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

Примеры потрясающих цветовых палитр для веб-сайтов

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

Темная элегантность

Источник: Apple

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

Вот пример шаблона веб-сайта в похожем стиле. Минималистичный дизайн поддерживает и усиливает все нужные элементы.

Использовать шаблон

Оттенки фиолетового

Источник: Mozilla

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

Небесно-голубой и желтый

Источник: Moz

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

Дополнительные детали на белом

Источник: Cloudflare

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

Теплая пастель и нильский синий

Источник: Zendesk

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

Красный Энергетик

Источник: PC Gamer

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

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

Использовать шаблон

Эйри Смелость

Источник: Clarins

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

Минимальный зеленый

Источник: Evernote

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

Игривый розовый

Источник: Benefit Cosmetics

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

Неоновое безумие

Источник: Urban Decay

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

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

Использовать шаблон

Черно-белая мечта

Источник: Анна Висинцин

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

Позолоченная роскошь

Источник: Guerlain

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

Зарезервированный и профессиональный

Источник: Lucas Group

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

Violet Vibrancy

Фиолетовый

Источник: Moorhouse

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

Пышно-розовые акценты

Источник: Just Creative

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

землистые оттенки

Источник: ThoughtCo

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

Использовать шаблон

Серебряный лунный свет

Источник: Noctu

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

Бежевый блеклый

Источник: Project Pico

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

Цветная щепотка

Источник: Sweet Punk

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

Ретро розовый

Источник: Великолепие в траве

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

Заключение

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

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

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

Создать сейчас

7 правил выбора потрясающей цветовой схемы веб-сайта

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

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

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

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

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

Цветовые схемы веб-сайтов, которые меняют наш дизайн

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

Давайте посмотрим на:

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

Что такое теория цвета?

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

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

Словарь цвета

• Оттенок: какого цвета что-то, например синего или красного
• Цветность: чистота цвета; к этому добавилось отсутствие белого, черного или серого
• Насыщенность: сила или слабость цвета
• Значение: насколько светлый или темный цвет
• Тон: создан путем добавления серого к чистому оттенку
• Оттенок: создан путем добавления черного к чистому оттенку
• Оттенок: создан путем добавления белого к оттенку

Как работает цветовое колесо

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

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

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

Дополнительные цвета

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

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

На веб-сайте WeWork используются дополнительные цвета: синий и оранжевый.

Аналогичные цвета

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

Недавний редизайн

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

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

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

Еще одна тенденция в дизайне веб-сайтов — использование одного цвета для доминирования в дизайне — и мы не говорим о черном или белом!

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

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

Вы можете подробно узнать, что означают разные цвета, в этом посте на Canva.

Красный

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

желтый

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

Оранжевый

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

Синий

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

Зеленый

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

розовый

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

фиолетовый

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

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

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

Доминирующие цвета

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

Дополнительные цвета

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

Акцентные цвета

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

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

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

• Muzli Colors : Используйте этот инструмент для быстрого создания и редактирования цветовых палитр, сопоставления цветов и даже предварительного просмотра и загрузки индивидуальных наборов пользовательского интерфейса для вашего собственного выбора цвета.
• Coolors.co: Используйте этот инструмент для создания цветовых схем одним щелчком мыши и изучения тысяч палитр, созданных пользователем.
• Генератор цветовой палитры Canva : воспользуйтесь бесплатным инструментом Canva для создания цветовых схем из ваших любимых фотографий. Идеально подходит для создания цветовых схем, идеально подходящих к изображению, которое вам нужно использовать в веб-дизайне.
• Colormind.io : Colormind также позволяет создавать бесплатные цветовые схемы, но также применяет их к фиктивной целевой странице в реальном времени, чтобы вы могли визуализировать дизайн своего веб-сайта с самого начала.

Цветовая палитра современного сайта

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

Аналогичное цветовое решение

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

Дополнительная цветовая схема

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

На веб-сайте

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

Цветовая схема градиента

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

Современная цветовая гамма

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

Монохроматическая цветовая схема

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

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

Палитра приглушенных тонов

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