Сочетание цветов сайта: Гайд по созданию цветовой палитры для сайта — статьи на Skillbox

Содержание

Гайд по созданию цветовой палитры для сайта — статьи на Skillbox

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

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

Брифование клиента. Кадр из видеоурока курса «Веб-дизайн с 0 до PRO»

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

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

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

Сайт проекта 500 Startups Сбербанка.

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

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

Сайт компании «М.Видео».

Компании из сферы digital, производители бытовой техники или спортивных товаров чаще используют синие цвета и их оттенки: Samsung, Dell, Twitter, Skechers.

Даже в промороликах и на презентациях Samsung в зале — синяя подсветка.

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

Сайт «Поль Бейкери».

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

Интернет-магазин здорового питания FreshBurg.

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

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

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

Главная страница Tumblr.

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

Иллюстрация на стартовой странице «Одноклассников» тоже выполнена в оранжевых тонах.

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

Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.

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

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

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

Пример UI-кита с Behance. Автор Raul Taciu.

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

Курс «Веб-дизайн с 0 до PRO»

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

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

В палитре не более пяти цветов, и только один ключевой.

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

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

Adobe Color Wheel, Coolors, Swiss Color и другими — их очень много.

Вам хватает цветов в палитре.

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

Элементы интерфейса сочетаются между собой.

Сайт не выглядит, как цветная «каша»: текст и заливка разного цвета, якорные объекты выделены одним цветом, цвет не мешает воспринимать информацию.

На сайте нет явных и грубых ошибок.

Например: красная кнопка «Купить» и зеленая кнопка «Отмена».

Подключите «Яндекс.Метрику» и Google Analytics.

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

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

  1. Андрей Туканов, «10 упражнений построения цветовых структур».
  2. Иоханнес Иттен, «Искусство цвета».
  3. Статья о теории цвета и влиянии цветов на психику человека на «Постнауке».
  4. Краткая история теории цвета на Awdee.
  5. Статья преподавателя Skillbox Вадима Паясу о ключевых навыках дизайнера: типографике, стиле и композиции.

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

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

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

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

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

Цветовое колесо
Дополнение

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

Резонанс

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

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

BBC News

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

Эмоциональное восприятие цвета

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

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.

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

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность.

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

Сайт Fanta

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

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

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

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

Flash Media

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

Зелёный цвет

Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.

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

Ameritrade

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

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

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

Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.

Van Vliet & Trap

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

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

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

Cadbury

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

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Dream + Reach
Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Сайт с работами Клоина Тошева

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

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

Awwwards

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

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

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

Dishoom

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

Цвет слоновой кости

Эмоции и ассоциации: комфорт, элегантность, простота.

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

Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Art in My Coffee

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

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

Несмотря на то, что существует множество способов сочетать цвета, мы остановимся на трёх самых успешных и часто используемых.

Триада (тройная гармония, треугольник)
Триада

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

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

Двойная комплиментарная система
Двойная комплиментарная система

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

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

Flourish
Аналоги (последовательная система)
Аналоги

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

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

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

Blinksale

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

Инструменты-помощники для выбора цвета

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

  1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
  2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
  3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

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

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

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

Подборка палитр цветов Get Color

#eeeeee #00adb5 #393e46 #222831 #6a2c70 #b83b5e #f08a5d #f9ed69 #95e1d3 #eaffd0 #fce38a #f38181 #eaeaea #ff2e63 #252a34 #08d9d6 #fc5185 #f5f5f5 #3fc1c9 #364f6b #ffffd2 #fcbad3 #aa96da #a8d8ea #71c9ce #a6e3e9 #cbf1f5 #e3fdfd #8785a2 #f6f6f6 #ffe2e2 #ffc7c7 #40514e #11999e #30e3ca #e4f9f5 #112d4e #3f72af #dbe2ef #f9f7f7 #61c0bf #bbded6 #fae3d9 #ffb6b9 #53354a #903749 #e84545 #2b2e4a #ffde7d #f6416c #f8f3d4 #00b8a9 #cca8e9 #c3bef0 #cadefc #defcf9 #abedd8 #46cdcf #3d84a8 #48466d #311d3f #522546 #88304e #e23e57 #355c7d #6c5b7b #c06c84 #f67280 #a5dee5 #e0f9b5 #fefdca #ffcfdf #ffaaa5 #ffd3b6 #dcedc1 #a8e6cf #14ffec #0d7377 #323232 #212121 #3e4149 #444f5a #ff9999 #ffc8c8 #99ddcc #f6f6f6 #ffe2e2 #bad7df #ff165d #ff9a00 #f6f7d7 #3ec1d3 #ffd460 #f07b3f #ea5455 #2d4059 #521262 #6639a6 #3490de #6fe7dd #edb1f1 #d59bf6 #9896f1 #8ef6e4 #cabbe9 #ffcef3 #fdfdfd #a1eafb #1e2022 #52616b #c9d6df #f0f5f9 #ff5722 #eeeeee #00adb5 #303841 #ff8c94 #ffaaa6 #ffd3b5 #dcedc2 #ff7e67 #fafafa #a2d5f2 #07689f #283c63 #928a97 #fbe8d3 #f85f73 #769fcd #b9d7ea #d6e6f2 #f7fbfc #c4edde #7ac7c4 #f73859 #384259 #ffaaa5 #ffd3b6 #fdffab #a8e6cf #a6d0e4 #f9ffea #ffecda #d4a5a5 #d7fbe8 #9df3c4 #62d2a2 #1fab89 #fecea8 #ff847c #e84a5f #2a363b #e8ffe8 #a6fff2 #74f9ff #00e0ff #ff9de2 #8c82fc #b693fe #7effdb #878ecd #b9bbdf #dde7f2 #dff4f3 #eeeeee #d72323 #3a4750 #303841 #0dceda #6ef3d6 #c6fce5 #ebfffa #bbe1fa #3282b8 #0f4c75 #1b262c #f25d9c #b61aae #590d82 #0c056d #fbafaf #f2c6b4 #f3e8cb #99e1e5 #c86b85 #e6a4b4 #f3d7ca #f5eee6 #f57170 #f5f5f5 #10ddc2 #15b7b9 #004a7c #005691 #e8f1f5 #fafafa #ffc93c #ff9a3c #ff6f3c #155263 #a56cc1 #a6acec #ace7ef #cefff1 #625772 #f9a1bc #fefaec #a9eee6 #aedefc #fff6f6 #ffdfdf #fb929e #7c7575 #b8b0b0 #dfd3d3 #fbf0f0 #dbedf3 #f73859 #404b69 #283149 #a7ff83 #17b978 #086972 #071a52 #ed8d8d #8d6262 #4d4545 #393232 #fc85ae #9e579d #574b90 #303a52 #fff5a5 #ffaa64 #ff8264 #ff6464 #7e6bc4 #c79ecf #d6c8ff #fef0ff #f76b8a #fcfefe #eaf6f6 #66bfbf #6c5b7c #c06c84 #f67280 #f8b595 #fa4659 #f0fff3 #c6f1e7 #11cbd7 #d9faff #00bbf0 #005792 #00204a #163172 #1e56a0 #d6e4f0 #f6f6f6 #424874 #a6b1e1 #dcd6f7 #f4eeff #625772 #f38181 #fefaec #a9eee6 #f67280 #c06c84 #6c5b7b #35477d #f5c7f7 #a393eb #5e63b6 #27296d #c5e3f6 #fc5c9c #fccde2 #fcefee #ffbd39 #e61c5d #930077 #3a0088 #eeeeee #4ecca3 #393e46 #232931 #7098da #6eb6ff #90f2ff #e0fcff #e3e3e3 #f95959 #455d7a #233142 #ecf2f9 #c8d9eb #f0d9da #f9ecec #f2f4c3 #ffdcf5 #fdc7ff #c7f3ff #537780 #11d3bc #55e9bc #fffcca #8f8787 #ebcbae #f9f9f9 #a6e4e7 #bfcfff #c8e7ed #ffffc2 #ffa5a5 #537791 #c1c0b9 #f7f6e7 #e7e6e1 #d2ecf9 #1891ac #1f5f8b #253b6e #00a8cc #0c7b93 #27496d #142850 #685454 #ea8a8a #ebd5d5 #f2f2f2 #f5f5f5 #d3d4d8 #3fbac2 #4d606e #427996 #645c84 #a2738c #eaafaf #e67a7a #ffebb7 #fff4e1 #9ddcdc #679b9b #aacfcf #fde2e2 #ffb6b6 #4a266a #7f4a88 #de95ba #ffd9e8 #dae1e7 #00909e #27496d #142850 #ffc4d0 #f7ddde #fbe8e7 #fcf5ee #649dad #66c6ba #a4e5d9 #c8f4de #8ac6d1 #bbded6 #fae3d9 #ffb6b9 #f3f798 #eab4f8 #fcc8f8 #c7f5fe #fecea8 #ff847b #e84a5f #2a363b #fbac91 #fbe1b6 #7fdfd4 #a7efe9 #f7e9e3 #ffc0c2 #6dc9c8 #0e3150 #ff7c38 #e03e36 #b80d57 #700961 #1f4e5f #79a8a9 #aacfd0 #f4f7f7 #bae8e8 #e3f6f5 #ffffff #272343 #403f48 #596c68 #95a792 #e3d9ca #70a1d7 #a1de93 #f7f48b #f47c7c #888888 #f0f0f0 #ffffff #ffe8df #2f9296 #46b7b9 #87dfd6 #dff5f2 #8971d0 #7dace4 #95e8d7 #adf7d1 #355c7d #c06c84 #f67280 #f8b195 #596e79 #c7b198 #dfd3c3 #f0ece2 #1a3c40 #144d53 #307672 #e4eddb #756c83 #f38181 #b9e1dc #fbfbfb #00fff5 #00adb5 #393e46 #222831 #f2bbbb #ed93cb #ca82f8 #a1d9ff #2eb872 #a3de83 #feffe4 #fa4659 #ffeecc #ffddcc #ffcccc #ffbbcc #616161 #8aae92 #c4e3cb #f4f9f4 #ea0599 #9a0f98 #6a0572 #39065a #a6aa9c #f7d3ba #e6e7e5 #f5efe3 #f6c7c7 #fd94b4 #ff467e #f12b6b #474744 #2994b2 #fffbe0 #ffb400 #ffc300 #ec610a #a40a3c #6b0848 #ba52ed #ff99fe #a4f6f9 #e4fffe #c0ffc2 #fdffba #ffeab6 #f69d9d
Узнать цвет ауры по дате рождения

Создать палитру по цветовому кругу Иттена

Что символизируют цвета в разных культурах

лучшие сочетания и правила выбора цветовой схемы

Тематический трафик – альтернативный подход в продвижении бизнеса

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Интересный факт

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

Общепринятые эмоциональные ассоциации

  • Красный. Возбуждающий тон, ассоциируется с властью, энергией, молодостью, страстью. Больше всех привлекает внимание, при помощи него можно о чем-то предупредить. Если на веб-странице слишком много красного — человек попытается как можно быстрее «убежать» с нее. Когда данный колор необходим, его можно использовать умеренно или применять более нежные оттенки.
  • Розовый. Романтика, женственность, нежность. При неправильном использовании намекает на неформальные отношения, поэтому неприменим для корпоративных порталов или спортивных веб-ресурсов.
  • Оранжевый. Энергия, дружелюбие, интерес, бодрость. Эмоции и ассоциации: открытость, активность, уникальность. Создает ощущение движения, творчества.
  • Желтый. Солнце, радость, счастье. Ярко-желтый прибавляет энергию, нежный — комфорт, темный — погружает в старину, добавляет авторитета.
  • Зеленый. Здоровье, стабильность, рост, природа. Являясь мостом между теплыми и холодными красками (он получается из смешения синего и желтого), обладает расслабляющим влиянием синего, сохраняя энергичность желтого. Темные оттенки говорят о финансах и богатстве.
  • Синий. Спокойствие, открытость, надежность, непоколебимость. Влияние на психику очень зависит от его нюанса. Светлые тона более дружелюбны, а темные вызывают печаль. Нейтральный синий отлично подходит для корпоративных проектов.
  • Голубой. Мирное небо, терпимость, надежность, профессионализм.
  • Фиолетовый. Тайна, романтика, роскошь, мистика и т.п. Это тона королевского величия, предметов роскоши, окутанных тайной. Светлые тона более романтичны, а темные — таинственны.
  • Черный. Нервозность, опасность, власть. Колор считается нейтральным, но он может вызвать совершенно противоположные ассоциации в зависимости от того, с какими цветами гармонирует. Если черного много — он ассоциируется со злом, особенно в сочетании с красным. Если черного в меру, то он говорит об изысканности и элегантности (особенно в сочетании с белым).
  • Белый. Простота, чистота, доброта, воздух. Самый популярный колор для фона веб-проекта. Как правило, текст легко читается с белого листа, и на веб-странице остается много воздуха и легкости. Он выгодно оттеняет другие краски.
  • Серый. Самая нейтральная краска, которая не вызывает отрицательных эмоций. Говорит о меланхолии, спокойствии. Темно-серый может вызвать грусть, но любые его тона при правильных сочетаниях становятся мощными инструментами в руках опытного дизайнера.
  • Коричневый. Уверенность, спокойствие, комфорт, долговечность.
  • Бежевый. Фоновый тон, традиционный, подчеркивает сопровождающие его краски. Он изменяется в зависимости от окружающих его тонов.
  • Слоновая кость, кремовый. Элегантность, комфорт, минимализм. Приравнивается к белому в восприятиях, но тон его намного теплее.

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

Правила сочетания цветов для сайта — ориентируемся на интуицию

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

  • Белый или черный: любые сочетания. Наилучшие пары, которые «дружат»: белый + черный, а также синий или красный. В случае с черным пару составит белый, яркий оранж, нежно-розовый, яркий или темный желтый, а также красный.
  • Серый: нюансы красного, а также фиолетового и синего.
  • Беж: коричневый, бирюза, синий, красный, изумрудный.
  • Коричневый: голубой, беж, роза, изумруд.
  • Розовый: коричневый, мятный, бирюза.
  • Красный: темно- или нейтрально-зеленый, светло-желтый, приглушенно-синий, строгий серый.
  • Зеленый: оранж, желто-коричневый, кремовый.
  • Оранжевый и желтый: синие и фиолетовые краски.
  • Темно-синий: коричневый, серый, светло-желтый, голубой, оранж,
  • Голубой: строгий серый, красный, коричневый, роза, оранж, желтый, рубин, зеленый.
  • Фиолетовый: серый, золотисто-коричневый, светло-желтый, неброские оттенки голубого и зеленого.

Подбор цветов для сайта по спектральному кругу

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

Принцип первый — триада

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

Принцип второй — двойная система

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

Принцип третий — аналогия

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

Принцип четвертый — раздельное

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

Принцип пятый — прямоугольник

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

Шестой принцип — квадрат

Самое динамичное сочетание, яркое, энергичное.

Как подобрать цвета для сайта при помощи программ

Существует несколько онлайн-сервисов, которые помогают дизайнерам в работе: Adobe Color, Paletton, Flat UI Color Picker, Color Palette Generator, Color Scheme и другие. Каждый онлайн-сервис работает на основе спектрального круга. Пользоваться инструментарием можно бесплатно. Веб-дизайнер легко и максимально быстро подберет сочетающиеся друг с другом оттенки.


Фоновый цвет для сайта: выбор и его критерии

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

  1. Светлый фон — это больше пространства и воздуха, а черный и темный фон подчеркивают элегантность.
  2. Если вы используете темный фон — не применяйте основной шрифт желтого, голубого, синего, красного оттенков. Текст будет нечитабельным.
  3. Для серьезного веб-проекта следует использовать однотонную подложку.
  4. Для информационных веб-ресурсов с большим количеством информации более приемлемы светлые оттенки (белый, беж, слоновая кость).
  5. На светлой основе хорошо читается текст серых или черных оттенков.
  6. Фон и шрифт на нем должны быть контрастными.
  7. При выборе основного цвета и ему сопутствующих руководствуйтесь тематикой веб-ресурса (зеленый — медицина, природа, финансы; розовый — женская; коричневый и желтый — пищевая промышленность и т.д.). Например, нелепо будет смотреться детский журнал на черном фоне или веб-проект про автомобили Лексус — на розовом.

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

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

Примеры хороших и плохих сайтов

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

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

Этот вариант без комментариев.

Хорошее, приятное сочетание цветов. Зеленый цвет стандартно ассоциируется с финансами.

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

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

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

Правильное сочетание цветов

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Правильное сочетание цветов

Правильное сочетание 30 цветов: от белого до чёрного.

  1. Белый сочетается со всеми цветами. Наилучшее сочетание с синим, красным и черным.
    #FFFFFF
    #0000FF #FF0000 #000000
  2. Бежевый сочетается с голубым, коричневым, изумрудным, черным, красным.
    #F5F5DC
    #00BFFF #A52A2A #50C878 #FF0000
  3. Серый (базовый цвет) сочетается с "капризными" цветами: фуксия, красный, фиолетовый, розовый, синий.
    #808080
    #FF00FF #FF0000 #8B00FF #FFC0CB #0000FF
  4. Розовый сочетается с коричневым, зеленой мятой, оливковым, серым, бирюзовым, светло-голубым.
    #FFC0CB
    #A52A2A #98FF98 #808000 #808080 #30D5C8 #E0FFFF
  5. Фуксия сочетается с серым, желто-коричневым, зеленым лаймом, зеленой мятой, коричневым.
    #FF00FF
    #808080 #D2B48C #32CD32 #98FF98 #A52A2A
  6. Красный сочетается с желтым, бурым, зеленым, синим, черным.
    #FF0000
    #FFFF00 #45161C #008000 #0000FF #000000
  7. Томатно–красный сочетается с голубым, зеленой мятой, песочным, сливочно–белым, серым.
    #EC2D01
    #00BFFF #98FF98 #FCDD76 #FDF4E3 #808080
  8. Вишнево-красный сочетается с лазурным, серым, светло-оранжевым, песочным, бледно-желтым, бежевым.
    #911E42
    #007FFF #808080 #FFA000 #FCDD76 #FDEAA8 #F5F5DC
  9. Малиново-красный сочетается с белым, черным и дамасской розой.
    #DC143C
    #FFFFFF #000000 #FF4364
  10. Коричневый сочетается с ярко-голубым, кремовым, розовым, палевым, зеленым, бежевым.
    #A52A2A
    #00FFFF #FFFDD0 #FFC0CB #FFF9D0 #008000 #F5F5DC
  11. Светло-коричневый сочетается с бледно-желтым, кремовым, синим, зеленым, пурпурным, красным.
    #CD853F
    #FDEAA8 #FFFDD0 #0000FF #008000 #C5007F #FF0000
  12. Темно-коричневый сочетается с лимонно-желтым, голубым, зеленой мятой, пурпурно-розовым, зеленым лаймом.
    #654321
    #FFF44F #00BFFF #98FF98 #FF99CC #32CD32
  13. Рыжевато-коричневый сочетается с розовым, темно-коричневым, синим, зеленым, пурпурным.
    #B7410E
    #FFC0CB #654321 #0000FF #008000 #C5007F
  14. Оранжевый сочетается с голубым, синим, лиловым, фиолетовым.
    #FF8000
    #00BFFF #0000FF #CC99FE #8B00FF
  15. Светло–оранжевый сочетается с серым, коричневым, оливковым.
    #FFA000
    #808080 #A52A2A #808000
  16. Темно–оранжевый сочетается с бледно–желтым, оливковым, коричневым, вишнёвым.
    #FF5300
    #FDEAA8 #808000 #A52A2A #911E42
  17. Желтый сочетается с синим, лиловым, светло-голубым, фиолетовым, серым, черным.
    #FFFF00
    #0000FF #CC99FE #E0FFFF #8B00FF #808080 #000000
  18. Лимонно-желтый сочетается с вишнево-красным, коричневым, синим, серым.
    #FFF44F
    #911E42 #A52A2A #0000FF #808080
  19. Бледно-желтый сочетается с фуксией, серым, коричневым, красным, желтовато-коричневым, синим, пурпурным.
    #FDEAA8
    #FF00FF #808080 #A52A2A #FF0000 #CC7722 #0000FF #C5007F
  20. Золотисто-желтый сочетается с серым, коричневым, лазурным, красным.
    #FFD700
    #808080 #A52A2A #007FFF #FF0000
  21. Оливковый сочетается с апельсиновым, светло-коричневым, коричневым.
    #808000
    #FF8800 #CD853F #A52A2A
  22. Зеленый сочетается с золотисто-коричневым, оранжевым, салатовым, желтым, коричневым, серым, кремовым, черным, сливочно-белым.
    #008000
    #DAA520 #FF8000 #7FFF00 #FFFF00 #A52A2A #808080 #FFFDD0 #000000 #FDF4E3
  23. Салатовый цвет сочетается с коричневым, желтовато-коричневым, палевым, серым, темно-синим, красным.
    #7FFF00
    #A52A2A #CC7722 #FFF9D0 #808080 #000080 #FF0000
  24. Бирюзовый сочетается с фуксией, вишнево-красным, желтым, коричневым, кремовым, темно-фиолетовым.
    #30D5C8
    #FF00FF #911E42 #FFFF00 #A52A2A #FFFDD0 #800080
  25. Электрик сочетается с золотисто-желтым, коричневым, светло-коричневым, серым, серебряным.
    #2C75FF
    #FFD700 #A52A2A #CD853F #808080 #C0C0C0
  26. Голубой сочетается с красным, серым, коричневым, оранжевым, розовым, желтым.
    #00BFFF
    #FF0000 #808080 #A52A2A #FF8000 #FFC0CB #FFFF00
  27. Темно-синий сочетается с светло-лиловым, голубым, желтовато-зеленым, коричневым, серым, бледно-желтым, оранжевым, зеленым, красным.
    #000080
    #DCD0FF #00BFFF #ADFF2F #A52A2A #808080 #FDEAA8 #FF8000 #008000 #FF0000
  28. Лиловый сочетается с оранжевым, розовым, темно-фиолетовым, оливковым, серым, желтым.
    #CC99FE
    #FF8000 #FFC0CB #800080 #808000 #808080 #FFFF00
  29. Темно-фиолетовый сочетается с золотисто-коричневым, бледно-желтым, серым, бирюзовым, зеленой мятой, светло-оранжевым.
    #800080
    #DAA520 #FDEAA8 #808080 #30D5C8 #98FF98 #FFA000
  30. Черный универсален, сочетается со всеми цветами. Наилучшее сочетание с оранжевым, розовым, салатовым, красным, сиреневым, желтым, белым.
    #000000
    #FF8000 #FFC0CB #7FFF00 #FF0000 #C8A2C8 #FFFF00 #FFFFFF

Смотрите также:

16 отличных цветовых решений сайтов

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

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

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

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

Почему цветовая схема так важна?
1. Tori’s Eye
2. Mea Cuppa
3. The Big Top
4. BarkBox
5. Cheese Survival Kit
6. Nordic Ruby
7. Lake Nona
8. Lemon Stand
9. Mint
10. Odopod
11. Fiverr
12. Digital Photography School
13. Ahrefs
14. Millo.co
15. Brian Gardner
16. Loom
Тестирование цветовых палитр
Заключение

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

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

  • Цвет повышает узнаваемость бренда на 80%.
  • На 90% формирует первое впечатление о сайте.
  • Гармоничная цветовая палитра создает ощущение баланса и порядка. Вы можете использовать ее для установления иерархии контента на своих страницах.
  • Позволяет выделить определенные элементы на странице («призывы к действию»).
  • Упрощает связанные с дизайном решения. Сокращает время, необходимое для создания новых страниц.

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

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

Читайте также: Цветовые схемы и палитры. Их значение и применение в веб-дизайне

1. Tori’s Eye 

Tori's Eye — это инструмент для визуализации информации на Twitter. Этот сайт — отличный пример преимущественно однотонной цветовой схемы. В данном случае мы видим простую, но при этом мощную цветовую палитру, основанную на оттенках зеленого.

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

2. Mea Cuppa

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

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

3. The Big Top

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

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

4. BarkBox

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

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

Читайте также: Яркие цветовые решения для приложений и сайтов

5. Cheese Survival Kit

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

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

6. Nordic Ruby

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

7. Lake Nona

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

8. Lemon Stand

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

Читайте также: Принципы контраста и подобия как средства выразительности в веб-дизайне

9. Mint

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

10. Odopod

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

11. Fiverr

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

12. Digital Photography School 

Как правило, мы ожидаем, что у сайта, связанного с изобразительным искусством, будет удачно подобранная цветовая палитра, и Digital Photography School не является здесь исключением. Яркие цвета помогают привлечь внимание зрителя. И, как и в случае с Fiverr, оранжевый цвет, используемый в дизайне CTA (и логотипа), больше нигде не появляется в палитре, поскольку он используется для точечного воздействия на пользователя.

13. Ahrefs

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

Читайте также: 8 ярких цветовых трендов 2019 года

14. Millo.co

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

15. Brian Gardner

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

16. Loom

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

Тестирование цветовых палитр

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

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

Чтобы запустить тест, вам нужно создать копию/копии уже существующей посадочной страницы («Копировать вариант»), указать соотношение распределения трафика («Вес») на каждую из версий, внести изменения и наблюдать за реакцией посетителей:

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

Читайте также: Сколько времени нужно на сплит-тестирование?

Заключение

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

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

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

Высоких вам конверсий! 

По материалам: crazyegg.com

06-02-2019

Выбор цветовой палитры инфографики - правило трех цветов

перейти к содержанию Piktochart
  • Создать
    • Презентации
    • Отчеты
    • Инфографика
    • Листовки
    • Графика в социальных сетях
    • Плакаты
  • Решения
    • Для отдела кадров
    • Для маркетинга
    • Финансы
    • Для здравоохранения
  • Для команд
  • Стоимость
    • Ценовые пакеты
    • Цена для некоммерческих организаций
    • Стоимость образования

10 популярных сайтов, сочетающих цвета, гарантированно вызовут радость в 2020 году

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

Я дизайнер уже более 20 лет.

Я знаю, что дает отличное сочетание цветов.

Я также знаю лучшие сайты с цветными комбо.

Давайте раскрасим.

Color Hunt - это бесплатная и открытая коллекция цветовых палитр, созданная Гал Шир.

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

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

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

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

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

Startup Colors - это наша собственная подборка красивых цветов логотипов для стартапов.

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

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

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

Самая большая коллекция официальных цветовых кодов бренда и логотипов.

Что классно на этом сайте, так это то, что на нем представлена ​​цветовая палитра всех ваших любимых брендов.

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

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

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

Все настроено на красивом удобном веб-сайте.

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

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

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

Вы также можете фильтровать по новым и популярным цветовым схемам.

В целом это еще один высококачественный источник отличных цветовых палитр и цветовых сочетаний для брендов.

Adobe Color от Adobe - еще одна сила, когда дело доходит до цветовых сочетаний.

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

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

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

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

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

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

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

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

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

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

Просто зайдите на сайт, выберите две цветовые комбинации, и Material Design Palette сделает все остальное!

Создает цветовую палитру из 8 цветов, включая основные цвета, цвета текста, значков и разделителей.

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

Coolers - это сверхбыстрый генератор цветовых схем.

Тысячи профессиональных дизайнеров создали тысячи невероятных цветовых сочетаний.

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

Best - это самые популярные цветовые комбинации, за которые проголосовало сообщество Coolers.

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

Design Seeds - это сайт цветовой палитры, управляемый Instagram.

Гений Design Seeds в том, что все цветовые комбинации взяты из реальных фотографий.

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

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

Сайт ориентирован на цвет в целом. Он не ориентирован на дизайн на основе экрана.

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

Design Seeds очень популярен, особенно на очень визуальной платформе Instagram.

Если вы ищете вдохновение и цветовую комбинацию, вам стоит присмотреться к Design Seeds.

Совершите прыжок во времени и почувствуйте краски истории.

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

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

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

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

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

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

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

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

Вот и все

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

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

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

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

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

Сочетание цветов: руководство для новичков

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

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

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

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

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

ТЕОРИЯ ЦВЕТА

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

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

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

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

ШКАФ С ЦВЕТНОЙ ТЕРМИНОЛОГИЕЙ

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

ЦВЕТОВЫЕ СИСТЕМЫ: RGB VS CMYK

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

CMYK ДЛЯ ПЕЧАТИ

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

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

Давайте посмотрим на это с соответствующими числами. CMYK работает по шкале от 0 до 100. Если C = 100, M = 100, Y = 100 и K = 100, вы получите черный цвет.Но если все четыре цвета равны 0, вы получите настоящий белый цвет.

RGB ДЛЯ ЭКРАНОВ

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

Давайте посмотрим на это с соответствующими числами, RGB работает по шкале от 0 до 255. Итак, черный цвет будет R = 0, G = 0 и B = 0. Белый цвет будет R = 255, G = 255 и B = 255.

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

ЦВЕТОВАЯ КОМБИНАЦИЯ, ЦВЕТОВАЯ ГАРМОНИЯ

Изображение взято из школы дизайна Canva

  • В палитре Monochromatic используются оттенки или оттенки одного и того же оттенка 9000 Использование аналоговых палитр 9000
  • близкие друг к другу на цветовом круге.Эти палитры обычно создают ощущение последовательности и единообразия в дизайне. Аналогичные комбинации не создают темы с высококонтрастными цветами, поэтому они обычно используются для создания более мягкого дизайна.
  • Дополнительные палитры создаются с цветами, противоположными друг другу на колесе. Обычно оттенки и оттенки используются, чтобы избежать резкого контраста, который может вызвать утомление глаз, когда два противоположных цвета расположены рядом друг с другом
  • Разделение - дополнительная палитра использует один оттенок вместе с двумя другими, одинаково расположенными от его дополнения
  • Triadic палитра состоит из трех основных цветов, равномерно расположенных на колесе. Если вы нарисуете равносторонний треугольник из выбранного цвета, вы увидите 3 разных цвета, с которыми можно работать.Обычно они смягчаются оттенками и оттенками.
  • Двойные - дополнительные палитры - два дополнительных набора цветов, расстояние между выбранными дополнительными парами влияет на общий контраст окончательной композиции. Лучший способ использовать двойное дополнение - это сделать цветовую комбинацию, используя один цвет в качестве основного цвета в дизайне, а другие - в качестве акцентов. Не забывайте о цветности, значении и насыщенности при создании таких цветовых схем

3 ТЕРМИНА, ОПРЕДЕЛЯЮЩИЕ ОСНОВНУЮ ТЕОРИЮ ЦВЕТА

  1. Дополнение - это то, как мы видим цвета с точки зрения их взаимосвязи с другие цвета.Когда цвета противоположны друг другу, они заставляют людей считать дизайн визуально привлекательным, устанавливая балансирующую среду.
  2. Vibrancy задает эмоциональную окраску вашего дизайна. Более яркие цвета заставляют пользователя чувствовать себя более энергичным, они обычно используются для эмоциональной реакции, а также для кнопок CTA. Яркие цвета приводят к действию. Более темные оттенки расслабляют пользователей, позволяя им сосредоточиться на других, более важных вещах.
  3. Contrast снижает утомляемость глаз и привлекает внимание пользователя за счет четкого разделения элементов на странице.
    Если вы сомневаетесь, какие цвета использовать, лучше всего выбрать очень светлый цвет для фона и очень темный цвет для самого текста. Использование различных контрастных цветов может помочь сосредоточить внимание зрителя на определенных элементах страницы, например, если вы поместите кнопку «подписаться» оранжевым цветом, а цвет фона станет светло-серым, это сразу же привлечет внимание пользователя.

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

ЦВЕТ ЗНАЧЕНИЕ - И ЧТО ЭТО ОЗНАЧАЕТ ДЛЯ ДИЗАЙНА

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

КРАСНЫЙ

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

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

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

ОРАНЖЕВЫЙ

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

В брендинге: Апельсин часто олицетворяет молодость и креативность.

ЖЕЛТЫЙ

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

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

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

ЗЕЛЕНЫЙ

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

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


СИНИЙ

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

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

ФИОЛЕТОВЫЙ

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

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


ЧЕРНЫЙ

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

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

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

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

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

БЕЛЫЙ

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

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

В Китае белый цвет - это цвет траура.

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

СЕРЫЙ

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

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

КОРИЧНЕВЫЙ

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

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


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

Не пропустите и подпишитесь на нашу ежемесячную рассылку новостей!

Design Seeds | для всех кто ♥ цвет

основное меню
  • Блог
  • По цвету
  • По коллекции
    • Времена года
      • Лето
      • Осень
      • Зима
      • Пружина
    • в природе
      • Флора
      • Небесные оттенки
      • Суккуленты
      • Цвет существа
      • Сделано природой
    • Wander
      • Wanderlust
      • Море
    • Studio Hues
      • Цветной коллаж
      • оттенки Maker
    • Съедобные оттенки
      • Кулинарный краситель
      • Сладкоежка
  • О
    • Все о семенах
    • FAQ
    • Условия использования
  • Наконечник Jar

для всех ♥ цвет

перейти к содержанию Дополнительное меню
  • Осень 1/4лы
    • Осень | Выпуск №3
      • Переход
      • Соберите
      • переходов
      • Обзор палитры
    • Осень | Выпуск №2
      • Сдвиг цвета
      • Цикл
      • Fete
      • Обзор палитры
    • Осень | Выпуск №1
      • Аркадия
      • Караван
      • Фигурка
      • Обзор палитры
  • Winter 1/4ly
    • Зима | Выпуск №3
      • Кабина
      • Moody Opulence
      • Обрезки
      • Обзор палитры
    • Зима | Выпуск №2
      • Цветной брелок
      • Bijou Bounty
      • Арктическая пастель
      • Обзор палитры
    • Зима | Выпуск №1
      • Банкет
      • Без льда
      • Кашемир и какао
      • Обзор палитры
  • Весна 1 / 4ли
    • Пружина | Выпуск №3
      • Spring Wander
      • Чаепитие
      • Страна чудес
      • Обзор палитры
    • Весна | Выпуск №2
      • Весенняя зелень
      • Рок-конфет
      • Нейтральный кочевник
      • Обзор палитры
    • Весна | Выпуск №1
      • Пуансон пастельный
      • Ботанический ремикс
      • Пробудитесь
.
Оставить комментарий

Добавить комментарий

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

© 2019 Штирлиц Сеть печатных салонов в Перми

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