как пользоваться схемой сочетания цветов

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

Мы в Telegram

В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.

Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

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

Подробнее

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

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

Где применяют цветовой круг Иоханнеса Иттена:

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

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

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

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

Зачем учиться сочетать цвета

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

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

Как устроен круг Иттена

Схема состоит из трёх частей.

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

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

• синий + жёлтый = зелёный;
• жёлтый + красный = оранжевый;
• синий + красный = фиолетовый.

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

• первичный красный + вторичный фиолетовый = малиновый;
• первичный жёлтый + вторичный зелёный = салатовый.

Всего на внешнем круге находятся 12 цветов: 3 первичных, 3 вторичных и 6 третичных. Этот круг берут за основу дизайнеры и художники в своей работе.

Как использовать круг Иттена

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

Комплементарное сочетание

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

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

Контрастная триада

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

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

Классическая триада

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

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

Аналоговая триада

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

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

Тетрада

Как получается. Из равноудалённых друг от друга цветов по углам квадрата.

Как используют. Для красочных визуалов, которые требуют использования четырёх цветов.

Прямоугольное сочетание

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

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

Буква Х

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

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

Как подбирать оттенки, которых нет на круге Иттена

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

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

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

Лучшие инструменты для автоматического подбора цветов предлагают:

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

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

Canva. Помогает подбирать монохроматические, аналогичные и комплементарные комбинации цветов.

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

ColorScheme. По функционалу схож с Paletton, но есть русскоязычное меню.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Восемь правил о цветовых палитрах, которые должен знать каждый

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

Цвет не добавляет приятного качества в дизайн – он его усиливает.

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

1. Ограничьте количество цветов

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

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

Как создать цветовую схему

Итак, как вы выберете два или три цвета? Цветовой круг может помочь.

Круг с 12 цветами является важным инструментом для создания цветовых схем

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

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

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

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

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

Calm использует аналоговые цвета, чтобы создать общее настроение.

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

Использование дополнительных цветов – простейший способ выделить что-то.

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

Добавление одного цвета в дизайн в оттенках серого просто и эффективно привлекает внимание. Макет с сочетанием белого и серого с синими акцентами в цветовой схеме Dropbox.

2. Вдохновляйтесь природой

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

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

3. Пытайтесь следовать правилу 60–30–10

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

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

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

4. Сначала дизайн в оттенках серого

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

Добавьте цвет в самом конце, и даже тогда, только с определенной целью.

Добавление одного цвета в макет с оттенками серого привлекает взгляд просто и эффективно.

5. Избегайте использования черного цвета

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

Цвет этой собаки темно-серый, а не черный.

Когда вы помещаете чистый черный цвет рядом с набором тщательно подобранных цветов, черный все пересилит. Он выделяется, потому что это не естественно. В большинстве приложений, которые мы ежедневно используем, есть черные цвета, которые на самом деле не черные, но темные серые. Например, самый темный цвет на верхней панели Asos не # 000000, это # 242424. Поэтому не забудьте всегда добавить немного насыщенности в свой цвет.

Самый темный цвет у ASOS – не черный

6. Подчеркните важность, используя цветовой контраст

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

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

7. Используйте цвет для воздействия на эмоции пользователей

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

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

Красный, Оранжевый, Желтый

• Красный (Страстный, Мощный, Опасный, Важный): Красный – чрезвычайно стимулирующий цвет. Он создает впечатление скорости и силы. Он известен как цвет энергии. Он доказал физиологические эффекты увеличения циркуляции крови и повышения метаболизма. Вот почему, когда люди видят красный цвет, они читают усерднее и быстрее. Использование красного – это способ привлечь внимание пользователей или выделить отдельный элемент, который требует внимания.
• Оранжевый (игривый, энергичный, привлекательный, дешевый): Оранжевый – теплый и полный жизни цвет. Он обладает энергичной аурой и способен создать теплый прием для ваших пользователей. Некоторые исследователи считают, что оранжевый выражает дешевизну.
• Желтый (веселый, дружелюбный, стимулирующий, привлекающий внимание): Желтый – чрезвычайно универсальный цвет, в зависимости от выбранного оттенка. Светло-желтый ассоциируется с солнцем и, следовательно, передает позитивность и теплоту. Темные оттенки желтого (например, золото) создают впечатление древности и возраста. Эти более темные оттенки часто связаны с вечностью и мудростью.

Зеленый, синий, фиолетовый

• Зеленый (природный, безопасный, свежий): зеленый цвет отражает чувство окружающей среды и близость к природе. Он также означает рост, и именно поэтому он часто связан с бизнесом. Зеленый означает чувство правильного или неправильного.
• Синий (успокаивающий, ответственный, внушающий доверие, надежный): синий цвет часто ассоциируется со спокойными и расслабляющими эмоциями. Он также ассоциируется с силой и надежностью, с чувством доверия и профессионализма. Синий излучает чувство внутренней безопасности. Вот почему вы можете видеть банки и технологические компании, использующие этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, используют синий цвет в своих сетях.
• Фиолетовый (Роскошный, Таинственный, Романтичный, Духовность): Исторически связанный с королевской семьей, фиолетовый намекает, что продукт высокого класса.

Розовый, Черный, Белый, Серый

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

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

8. Сделайте свой дизайн доступным

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

Избегайте использования цвета в качестве индикатора

Примерно 8% мужчин и 0,5% женщин страдают от некоторой формы цветовой слепоты. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм этого заболевания, красно-зеленая цветовая слепота является наиболее распространенной. Человек, страдающий этой формой дальтонизма, обычно испытывает проблемы с различиями как красного, так и зеленого цветов.

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

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

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

Избегайте низкой контрастности текста

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

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

Проверьте контраст, чтобы цвета фона и переднего плана отображались с достаточным контрастом для человека, страдающего дальтонизмом или плохо видящего человека. Это, действительно, не так сложно – все, что вам нужно сделать, это проверить коэффициент контрастности. Коэффициент контрастности показывает, как отличается цвет от другого цвета (обычно это 1: 1 или 21: 1). Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для текста и текста на изображении:

• Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
• Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

Хорошие новости, вам не нужно проверять их вручную. Используя инструмент Color Contrast Checker, вы можете проверить свои цветовые комбинации всего за несколько кликов.

Программа проверки цветового контраста от Webaim

Бонус: Основные инструменты UX дизайнера

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

Adobe Color CC

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

Adobe Color CC – отличный инструмент, способный ускорить изучение различных вариантов цветовой схемы.

Dribbble поиск по цвету

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

Вы также можете указать для снимка минимальный процент содержания цвета (например, 30% синего).

Укажите минимальный процент содержимого цвета

Material Design

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

Colorzilla

ColorZilla – это расширение для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, в том числе подборщик цветов, пипетку, генератор градиента CSS и браузер палитры.

Coolors.co

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

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

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

Симуляция цветовой слепоты в Adobe Photoshop

С помощью Photoshop вы можете проверить доступность вашего дизайна. Просто перейдите в View> Proof Setup, а затем вы можете выбрать один из двух типов цветовой слепоты (протанопия или дейтронопия).

NoCoffee Vision Simulator для Chrome

Во избежание проблем с доступностью в дизайне, при проектировании рекомендуется проверять дизайн на цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации проблем со зрением. Например, используя параметр “Color Deficiency” установив “Deuteranopia”, вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.

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

Цветовые схемы – ваша проблема? Записывайтесь на курсы от Springboard Введение в UX дизайн. Тысячи студентов прошли их, чтобы начать успешную карьеру в дизайне.

Перевод статьи Nick Babich

20+ лучших синих цветовых палитр на 2023 год

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

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

Нажмите, чтобы перейти вперед:

• Синий цвет означает
• Лучшие палитры синих цветов на 2021 год
• Лучшие сочетания синего цвета
• Марки с синей цветовой палитрой
• Лучшие генераторы цветовой палитры

Значение синего цвета

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

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

Результаты международного выбора цвета YouGov

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

Лучшие синие цветовые палитры на 2021 год

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

1. Оранжевая сиена жженая + Ослепительно синий
2. Имперский красный + Синий космический кадет
3. Оранжевый + Медово-желтый + Берлинская лазурь
4. Candy Pink + Rose Desert + Y цвета Mn Blue
5. Розовый рай + Карибский зеленый + Синий NCS
6. Лимонное безе + Берлинская лазурь
7. Оранжевая паутина + Синий Оксфорд
8. Каролина Блю + CG Блю
9. Кибер-желтый + Королевский темно-синий
10. Оттенки синего
11. Зеленый полуночный орел + металлические водоросли
12. Шалфей + Мин + Краситель индиго
13. Миндальный + Фиолетовый темно-синий + Синий Оксфорд
14. Рубиновый + Ярко-желтый Crayola + Небесно-голубой Crayola
15. Атомный мандарин + Тихоокеанский синий + Йельский синий
16. Сиенна жженая + Синий кадет + Синий Колумбия
17. Джет + Мин + Краситель индиго
18. Sunglow + Sizzling Red + Crayola Blue
19. Светло-лососевый + Французский розовый + Голубой
20. Черный кофе + Duke Blue + True Blue
21. Cerise + Blue Crayola + Royal Dark Blue

1.

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

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

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

Вернуться к списку палитр синих цветов

2. Цветовая палитра Imperial Red + Space Cadet Blue

Шестнадцатеричные коды : #2b2d42 // #8d99ae // #edf2f4 // #ef233c // #d

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

Вернуться к списку палитр синих цветов

3. Цветовая палитра оранжевый + медово-желтый + берлинская лазурь

шестнадцатеричных кодов : #8ecae6 // #219ebc // #023047 // #ffb703 // #fb8500

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

Вернуться к списку палитр синих цветов

4. Цветовая палитра Candy Pink + Rose Desert + Y in Mn Blue

Шестнадцатеричные коды : #355070 // #6d597a // #b 56576 // #e56b6f / / #eaac8b

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

Вернуться к списку палитр синих цветов

5. Палитра цветов Paradise Pink + Caribbean Green + NCS Blue // #118ab2 // # 073b4c

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

Вернуться к списку палитр синего цвета

6. Палитра цветов Лимонное безе + Берлинская лазурь 0 // #fcbf49 // #eae2b7

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

Вернуться к списку палитр синего цвета

7. Цветовая палитра Orange Web + Oxford Blue

Шестнадцатеричные коды : #000000 // #14213d // #fca311 // #e5e5e5 // #ffffff

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

Вернуться к списку палитр синих цветов

8. Палитра цветов Carolina Blue + CG Blue

Шестнадцатеричные коды : #ffffff // #00171f // #003459 // #007 ea7 // #00a8e8

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

Вернуться к списку палитр синего цвета

9. Цветовая палитра Cyber ​​Yellow + Royal Dark Blue вибрация к вашему следующему дизайну с этим палитра, основанная на почти фиолетовом темно-синем и энергичных оттенках желтого. Если для вас важна универсальность, эта палитра предлагает монохромные сочетания и высококонтрастные сочетания.

Вернуться к списку палитр синих цветов

10. Палитра оттенков синего

Шестнадцатеричные коды : #03045e // #0077b6 // #00b4d8 // #90e0ef // #caf0f8

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

Вернуться к списку палитр синих цветов

11. Цветовая палитра Midnight Eagle Green + Metallic Seaweed Blue

Шестнадцатеричные коды : #177e89 // #084c61 // #db3a34 // #ffc857 // #323031

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

Вернуться к списку палитр синих цветов

12. Палитра красителей Sage + Ming + Indigo Blue

Шестнадцатеричные коды : #033f63 // #28666e // #7c9885 // #b5b682 // #fedc97

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

Вернуться к списку палитр синих цветов

13. Цветовая палитра миндаля + фиолетового темно-синего + оксфордского синего

Шестнадцатеричные коды : #f1dac4 // #a69cac // #474973 // #161b33 // #0d0c1d

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

Вернуться к списку палитр синих цветов

14. Палитра цветов Ruby + Bright Yellow Crayola + Sky Blue Crayola

Шестнадцатеричные коды : #d81159 // #8f2d56 // #218380 // #fbb13c // #73d2de

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

Вернуться к списку палитр синего цвета

15. Цветовая палитра Atomic Tangerine + Pacific Blue + Yale Blue

Шестнадцатеричные коды : #f79256 // #fbd1a 2 // #7dcfb6 // #00b2ca // # 1d4e89

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

Вернуться к списку палитр синих цветов

16. Палитра цветов жженой сиены + Cadet Blue + Columbia Blue

Шестнадцатеричные коды : #dd6e42 // #e8dab2 // #4f6 d7a // #c0d6df // # eaeaea

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

Вернуться к списку палитр синего цвета

17. Палитра синего цвета Jet + Ming + Indigo Dye

Шестнадцатеричные коды : #353535 // #3c6e71 // #ffffff // #d9d9d9 // # 284b63

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

Вернуться к списку палитр синего цвета

18. Палитра цветов Sunglow + Sizzling Red + Crayola Blue 0002 Раскройте свою яркую сторону с этой палитрой в том числе Crayola Blue. Хотя это не совсем радужная цветовая палитра, эта схема охватывает большинство цветов в аббревиатуре ROYGBIV, поэтому мы думаем, что она достаточно близка.

Вернуться к списку палитр синих цветов

19. Палитра светло-лососевых + французских розовых + голубых цветов

Шестнадцатеричные коды : #70d6ff // #ff70a6 // #ff9770 // #ffd670 // #e9ff70

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

Вернуться к списку палитр синих цветов

20. Цветовая палитра «Черный кофе» + «Голубой герцог» + «Настоящий синий» быть // #b4c5e4 // # fbfff1

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

Вернуться к списку палитры синего цвета ffaff // #d8315b // # 1e1b18

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

Вернуться к списку палитр синих цветов

Лучшие сочетания синего цвета

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

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

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

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

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

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