Основные три цвета на цветовом круге
В рамках этой заметки я постараюсь разъяснить, какие же на самом деле цвета на цветовом круге являются основными, почему, и какую пользу из этого факта можно извлечь.
Основные цвета — это те самые три гаммообразующих цвета, в результате смешения которых (чисто теоретически) получаются все остальные цветовые оттенки. То есть из основных цветов можно намешать всё что угодно, но сами основные цвета невозможно получить путём смешения других.
Цветовой круг и на нём основные цвета для цветовых моделей RGB и CMYKТри основных цвета на цветовом круге. Все мы когда-то слышали что основные цвета это красный, синий и жёлтый. Но на самом деле, в зависимости от выбора цветовой модели основные три цвета на круге будут разные. Если же на цветовом круге три основных цвета выделить точками, то три точки образуют равносторонний треугольник.
На мониторе (цветовая модель RGB)
Красный, Зелёный, Синий.
На принтере (цветовая модель CMYK)
Рассмотрим подробней каждую цветовую модель:
Так выглядит цветовая модель RGB в интерфейсе программы «фотошоп онлайн»Цветовая модель RGB.
Расшифруем аббревиатуру RGB:
Red — красный
Green — зелёный
Blue -синий.
На мониторе, на телевизоре и на телефоне все цветовые оттенки получаются высветлением тёмного экрана красными, зелёными и синими лучами. На этих трёх цветах (Красный, зелёный и синий) основана цветовая модель RGB (Red, Green, Blue). В цветовой модели RGВ для основных трёх цветов существует определение первичные цвета (primary colors). Впрочем, модель RGB нас художников в меньшей степени интересует. Смешению цветов в живописи больше соответствуют другие цветовые модели, например HSB, HSL или, например такая модель как CMYK.
На мониторе три основных цвета, смешиваясь, образуют чёрный
Цветовая модель CMYK.
Расшифруем аббревиатуру CMYK:
Magenta — маджента (пурпурный),
Yellow — жёлтый,
Key color — некий ключевой цвет (чёрный?).
Циан, маджента и жёлтый в цветовой модели CMYK очень похожи на цветовые оттенки флюоресцентных фломастеров. Эти три цвета плюс чёрный являются основными для цветных принтеров. Цветовая модель CMYK имеет широкое применение в полиграфии. На палитре краски смешиваются примерно по такому же принципу как в цветовой модели SMYK, только краски для живописи в отличие от типографских чернил более разнообразны по своим физическим и химическим свойствам. Разобравшись в общих чертах с устройством некоторых электронных цветовых моделей художнику проще будет организовать краски на своей реальной палитре.
***
Читайте далее на сайте:
Статья О цветовых моделях HSB, HSL .
Моя статья О процентном соотношении Спектрального, Чёрного и Белого (цветовая модель СЧБ)
Заметки по теории и технике живописи и рисунка
***
Summary
Article Name
Основные три цвета на цветовом круге
Description
Все мы где-то что-то слышали про три основных цвета (красный жёлтый, синий). Это статья о том какие цвета на самом деле являются основными и почему.
Author
Богдан Бывалый
Подбор цветов и генерация цветовых схем
Монохроматическая модель. Эта цветовая схема основана на одном оттенке цвета, и использует вариации, сделанные только лишь изменением насыщенности и яркости.Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.
Также монохроматические вариации сделаны для каждого цвета в других схемах.
Комплементарная (контрастная) модель. Основной цвет дополнен его комплементом (цвета на противоположной стороне цветового круга). Создается один холодный и один теплый цвет — вы должны рассмотреть, какой из них будет доминирующим, и должен ли дизайн выглядеть холодным, или теплым.Не следует злоупотреблять контрастными цветами в дизайне, используйте их только как цветовой акцент.
Модель цветовой триады (мягкий контраст). Основной цвет дополнен двумя цветами, помещенными тождественно по обе стороны его комплемента. В отличие от «острого» контраста, эта цветовая схема зачастую является более комфортной для глаз, она мягче, и в ней больше пространства для балансировки теплых/холодных цветов.Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.
Модель цветовой тетрады (двойной контраст). Эта цветовая схема образована парой цветов и их контрастов. Она основана на Тетраде — четверке цветов, равномерно распределенных по цветовому кругу (90°). Тетрада — очень агрессивная цветовая схема, требующая хорошего планирования и деликатный подход к отношениям этих цветов.Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.
Модель аналогичных цветов. Эта цветовая схема образована основным цветом и его смежными цветами — два цвета, расположенные тождественно по обе стороны. Это всегда смотрится элегантно и четко, цветовая гамма в результате этого выглядит с меньшей напряженностью и равномерной колориметрией. Если выбран цвет на тепло-холодной границе, цвет с противоположной «температурой» может быть использован для акцентирования двух других цветов.Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.
Модель акцентированной аналогии. Это аналогичная модель с добавлением дополнительного (контрастного) цвета. Модель должна рассматриваться как дополнение — она добавляет напряженности к цветовой палитре, и слишком агрессивна в случае злоупотребления. Вместе с тем, она может быть использована в некоторых деталях, а так же в качестве цветового акцента — порой получается очень эффективная и элегантная цветовая гамма.
Оттенок. На этой вкладке отображается цветовой круг. Кликните по ней для регулировки оттенков основных, дополнительных, и вторичных цветов.
Регулировка цветовой схемы. На этой вкладке можно регулировать яркость/насыщенность цвета и контраст цветовой схемы, или просто выбрать из предопределенных настроек.
Информация о цветовой схеме. Кликните по этой вкладке для отображения значений цветов фактической цветовой схемы, а так же для экспорта их в различные форматы данных.
Оттенок основного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.
Оттенок дополнительного цвета. Чтобы изменить значения, перетащите ползунок по цветовому кругу. Для ввода числового значения, дважды кликните по нему.
Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.
Оттенок вторичного цвета. Чтобы изменить угол/дистанцию, перетащите ползунок дальше или ближе от основного цвета. Для ввода числового значения, дважды кликните по нему.
Значение оттенка основного цвета. Кликните для ввода числового значения.
Угол/дистанция оттенка вторичных цветов. Кликните для ввода числового значения. Имеет смысл только в цветовых схемах, использующих вторичные цвета.
Значение RGB основного цвета. Кликните для ввода числового значения.Будьте осторожны: из-за ошибки округления во время преобразования, значение RGB, используемое в цветовой схеме, может немного отличаться от введенного значения.
Значения RGB основного цвета.
Пресеты цветовых схем. Кликните и выберите предопределенные комбинации яркости, насыщенности и контрастности цветовой схемы.
Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).
Контрастность цветовой схемы. Перетаскивайте ползунок по квадрату для регулировки контрастности вариантов цвета в схеме (вверх/вниз для темного варианта, влево/вправо для светлого варианта).
Контрастность цветовой схемы. Панель для регулировки яркости и насыщенности сразу всех вариантов схемы.
Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.
Список вариантов цвета. Выберите вариант цвета, а затем отрегулируйте его насыщенность и яркость при помощи ползунка на левом квадрате.
Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.
URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.
Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.
Предварительный просмотр цветовой палитры. Посмотрите, как выбранные цвета и их варианты сочетаются между собой.
Пример веб-страницы (светлая/позитив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.
Пример веб-страницы (темная/негатив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.
Показать пример текста. Отметьте галочку, чтобы отобразить белый, черный и серый текст в окне предварительного просмотра цветовой схемы.
Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.
Настройки рандомизации. Нажмите, чтобы установить, какие параметры должны быть рандомизированы.
Восемь правил о цветовых палитрах, которые должен знать каждый
Взаимодействие человека и компьютера в значительной степени основано на графических элементах пользовательского интерфейса, и цвет играет в этом важную роль. Как однажды сказал художник Пьер Боннар:
Цвет не добавляет приятного качества в дизайн – он его усиливает.
При разработке нового продукта часто бывает сложно определить цветовую схему из-за бесконечного количества возможных комбинаций цветов. В этой статье мы рассмотрим восемь основных правил, которые помогут вам выбрать правильную цветовую палитру.
1. Ограничьте количество цветов Применение цвета к дизайн проекту имеет много общего с балансом. Чем больше цветов вы используете, тем труднее достичь этого баланса. Вы добьетесь лучших результатов, если будете придерживаться максимум трех основных цветов в вашей цветовой гамме. Согласно исследованию Университета Торонто о том, как люди использовали Adobe Color CC, большинство людей заявили, что предпочитают простые цветовые комбинации, которые опираются только на два или три цвета. Дизайн-развитие по подпискеПопробуй новый формат обучения c ведущими дизайнерами страны. Качаешься как в игре, тебе помогают менторы по любым вопросам и ходишь на закрытые дизайн-события. И это даже не все.
ПрисоединитьсяЕсли вам нужны дополнительные цвета, кроме тех, которые вы задали в своей палитре, используйте оттенки и тона.
Как создать цветовую схемуИтак, как вы выберете два или три цвета? Цветовой круг может помочь.
Круг с 12 цветами является важным инструментом для создания цветовых схем- Монохроматическая. Монохроматические схемы являются простейшими для создания, поскольку все они взяты из одного цвета, но включают изменения в насыщенности, оттенках и тонах. Монохроматические цвета хорошо сочетаются, создавая успокаивающий эффект.
- Аналоговая. Аналоговые цветовые схемы создаются из смежных цветов. Один цвет используется как доминирующий, в то время как другие используются для обогащения схемы. Хотя это относительно легко, трюк заключается в том, чтобы решить резонанс используемых цветов, поскольку вся схема будет преувеличена им. Например, Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач. В то время как, приложение для медитации Calm, использует синие и зеленые аналоговые цвета, чтобы помочь пользователям чувствовать себя спокойными и умиротворенными.
- Дополнительная. В своей основе такой схемы лежат только два цвета, которые сильно контрастируют. Эта схема используется для привлечения внимания пользователя. При использовании дополнительной схемы важно выбрать доминирующий цвет, а дополнительный цвет использовать для акцентов. Например, когда человеческий глаз видит объект, полный различных оттенков зелени, немного красного цвета очень хорошо выделяется.
- Пользовательская. Создание пользовательской цветовой схемы не так сложно, как многие думают. Существует простой трюк, который можно использовать для создания великолепной цветовой палитры: просто добавьте яркий цвет для акцента в нейтральную палитру (например, традиционную монохроматическую схему). Полученная схема будет очень визуально яркой.
Лучшие цветовые комбинации можно встретить в природе. Почему? Потому что эти схемы кажутся естественными для глаз. Чтобы найти вдохновение, нам нужно всего лишь осмотреться вокруг. Если вы видите особенно красивый или яркий цвет в повседневной жизни, попробуйте создать схему вокруг него. Просто сделайте снимок красивого момента и создайте на его основе свою цветовую схему.
Лучшие цветовые комбинации встречаются в природе. Вы можете создать цветовую схему из фото.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 CCAdobe Color CC (ранее известный как Kuler) – отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет в палитре может быть индивидуально изменен или выбран в качестве базового цвета всего за несколько кликов. Палитры могут быть сохранены и добавлены в библиотеку, и существует множество отличных цветовых схем, созданных сообществом и доступных на сайте:
Adobe Color CC – отличный инструмент, способный ускорить изучение различных вариантов цветовой схемы.Dribbble поиск по цветуКогда вы хотите совершить визуальные исследования по использованию определенного цвета другими дизайнерами, зайдите на dribbble.com/colors и выберите нужный цвет.
Вы также можете указать для снимка минимальный процент содержания цвета (например, 30% синего).Укажите минимальный процент содержимого цветаMaterial DesignРуководство Material design предоставляет фантастическую цветовую палитру, которая может использоваться для иллюстрации или для разработки цветов вашего бренда. Все цвета в этой палитре предназначены для гармоничного взаимодействия друг с другом.
ColorzillaColorZilla – это расширение для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, в том числе подборщик цветов, пипетку, генератор градиента CSS и браузер палитры.
Coolors.coCoolors – мощный инструмент для создания многоцветных схем. Вы можете просто заблокировать выбранный цвет и нажать пробел, чтобы создать новую палитру. Этот инструмент замечателен тем, что вы не ограничены только одним результатом – можно получить несколько цветовых схем, просто изменив базовую точку.
Один из моих любимых способов создания цветовой схемы – это использование фотографии. Этот инструмент позволяет загрузить изображение и сделать из него цветовую палитру.
Coolors дает вам возможность загрузить изображение и сделать из него цветовую палитру.Симуляция цветовой слепоты в Adobe PhotoshopС помощью Photoshop вы можете проверить доступность вашего дизайна. Просто перейдите в View> Proof Setup, а затем вы можете выбрать один из двух типов цветовой слепоты (протанопия или дейтронопия).
NoCoffee Vision Simulator для ChromeВо избежание проблем с доступностью в дизайне, при проектировании рекомендуется проверять дизайн на цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации проблем со зрением. Например, используя параметр “Color Deficiency” установив “Deuteranopia”, вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.
Цвет – один из самых мощных инструментов в наборе дизайнеров. Но в то же время — это сложный в освоении инструмент. Я надеюсь, что упомянутые выше правила создали хорошую основу для будущих дизайнеров. Теперь пришло время перейти к практике – потому что лучший способ стать отличным специалистом в цветовых схемах – это фактически создать их.
Цветовые схемы – ваша проблема? Записывайтесь на курсы от Springboard Введение в UX дизайн. Тысячи студентов прошли их, чтобы начать успешную карьеру в дизайне.
Цвет для чайников. Обширное руководство для начинающих. | by Anton Guk
Эта статья основана на книге “Искусство цвета” Иоханнеса Иттена и еще бесчисленном количестве различных статей о теории цвета. Тут я попытался сделать “обезжиренную” версию этих знаний, для более легкого понимания материала. Статья подойдет не только дизайнерам, но и всем людям, которые хотят научится понимать и работать с цветом. В статье вы узнаете о физических свойствах цвета, почему мы воспринимаем его таким, что он может значить и как составлять гармоничные схемы.
Дисперсия света
Исаак Ньютон один из первых кто смог разложить белый солнечный свет на цветовой спектр — позднее это назвали “Дисперсией света”.
Опыт заключался в следующем: он пропускал солнечный свет через призму. В ней луч света расслаивался на цвета и выводился на экран.
Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.Цвета которые выводились называются спектральными или проще — чистые цвета. Это красный, оранжевый, желтый, зеленый, синий и фиолетовый.
Интересный факт, оказывается, количество цветов в радуге, зависит от страны проживания. Жители Китая считают, что в радуге пять цветов. Для жителей США типичным ответом будет шесть цветов, в то время как жители России насчитывают их семь (+голубой). На самом деле в радуге собран весь спектр, но мы можем увидеть только некоторые из них.
Если все эти цвета пропустить обратно через собирательную призму, то мы опять получим белый цвет.
Дополнительные цвета
Если мы соберем красный + оранжевый + желтый в один цвет, и зеленый + синий + фиолетовый в другой, а потом смешаем два получившихся цвета то получим белый.
(красный + оранжевый + желтый) + (зеленый + синий + фиолетовый) = белый
Даже если мы смешаем только отдельные противоположные цвета красный + зеленый, оранжевый + синий, желтый + фиолетовый то в результате получим белый.
Два цвета, объединение которых даёт нам белый цвет, называются дополнительными цветами.
Пример: Если мы удалим из спектра один цвет, к примеру красный и с помощью линзы соберем оставшееся цвета: оранжевый + жёлтый + зеленый + синий + фиолетовый, то результатом у нас будет зеленый цвет. Потому что зеленый является дополнительным цветом по отношению к удалённому нами красному. Почему именно такие соотношения “зеленый — красный” расписано ниже.
Вычитаемые цвета
Если перед лучом света поставить фильтр который пропускает только синий цвет, а за ним фильтр пропускающий только красный цвет, то оба фильтра вместе не пропустят свет и дадут чёрный цвет или темноту. Потому что синий фильтр пропускает только синий цвет, а красный фильтр в свою очередь поглощает все, кроме красного (который уже был поглощен синим фильтром).
Поглощаемые в физическом эксперименте цвета называются также вычитаемыми.
Параметры цвета
- Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
- Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
- Яркость / Brightness — обозначает степень отличия цвета от белого или черного.
Что такое RGB, CMYK, HEX и чем они отличаются
RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).
HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий. Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.
CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.
Почему мы видим цвета такими?
Световые волны сами по себе не имеют цвета. Цвет возникает лишь при восприятии этих волн человеческим глазом и мозгом.
Цвет предметов возникает, главным образом, в процессе поглощения волн. Желтый сыр выглядит желтым потому, что он поглощает все остальные цвета светового луча и отражает только желтый. Когда мы говорим: «этот сыр желтый», то мы на самом деле имеем в виду, что молекулярный состав поверхности сыра таков, что он поглощает все световые лучи, кроме желтого. Сыр сам по себе не имеет никакого цвета, цвет создаётся при его освещении.
Если красная бумага (поверхность, поглощающая все лучи кроме красного) освещается зелёным светом, то бумага покажется нам чёрной, потому что зелёный цвет не содержит лучей, отвечающих красному цвету, которые могли быть отражены нашей бумагой.
Сам цвет не выражает нечего. Его содержание определяется контекстом. Значение цвета может быть определено только с помощью его отношения к другому цвету. Если изобразить светлую фигуру на белом фоне, и эту же фигуру на черном, то на белом фоне она кажется темнее, производя впечатление лёгкого нежного тепла. На чёрном же становится чрезвычайно светлым и приобретает холодный, агрессивный характер.
Согласно данным одного из исследований, персональные предпочтения, опыт, воспитание, культурные различия и контекст зачастую искажают эффект, который оказывают на нас отдельные цвета.
Пользователи не понимают нашего цветокодирования. Желтый значит «веселый» для вас, но для для других это может значить «не здоровый» или «блевотный». Каждый человек воспринимает цвета очень субъективно и зависит это только от его контекста. Он любит одни цвета, и ненавидит другие. И это в значительной степени непредсказуемо. Вы не сможете угадать.
Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла.
Отличная статья про желтый цвет в кино, если вам хочется больше узнать на реальных примерах, о том как именно контекст влияет на значение цвета.
Когда люди говорят о цветовой гармонии они полагаются исключительно на субъективные чувства, в то время как понятие цветовой гармонии является объективной закономерностью. Гармония — это равновесие, симметрия сил. Наши глаза требуют и поражают комплиментарные цвета (противоположные, дополнительные) создавая этим равновесие. Нейтральным цветом считается серый, наш глаз не создает с ним ни какого дополнительного цвета.
Для того что бы создавать гармоничные сочетания, были разработаны различные системы порядка цветов. Это цветовой круг и треугольники для цветов (изображение ниже). Противоположные цвета в этом круге являются дополнительными.
Цветовой круг по Иоханнесу Иттену (1961)Композиционные схемы
Для цветовой композиции важно количественное отношение цветов. Можно сделать общее заключение, что все пары дополнительных цветов, все сочетания цветов в двенадцатичастном цветовом круге, которые связаны друг с другом через равносторонние или равнобедренные треугольники, квадраты и прямоугольники, являются гармоничными. Эти фигуры можно вращать в пределах круга, все сочетания будут гармоничными.
Как подобрать гармоничную комбинацию цветов для Web-сайта
Теория цвета:
Как подобрать гармоничную комбинацию цветов для Web-сайта
Learning to Use Color on Your Web Site
автор: 2000, Element K Content LLC и Ron Wilder
В данной статье описывается простой процесс подбора гармоничных сочетаний цветов. А что, как не гармоничное сочетание цветов, важно для создания приятного, радующего глаз Web-узла?
Маленькое замечание: в качестве первичных цветов по художеской традиции упоминаются красный, синий, желтый. Но мы-то с вами знаем, что первичными цветами на самом деле являются красный, зеленый, синий.
В жизни мы часто встречаем людей, которые запросто делают вещи, непостижимые для других. Например, кто-то может овладеть игрой на музыкальном инструменте за несколько дней, а другому приходится на это тратить целую жизнь. Мы едва справляемся с правилами родного языка, а кто-то может свободно говорить на нескольких иностранных. Кто-то прикоснувшись к электрощиту, способен ударить током всех окружающих, а кто-то решает проблему одной левой. Часто встречается мнение, что чувство цвета — нечто врожденное, и этому невозможно научиться. Но на самом деле, при наличии соответствующих инструментов, а также пережив несколько «ударов электротоком», даже дальтоник может научиться подбирать цветовые схемы, которые будут радовать глаз. Так что для всех вас, уважаемые читатели-дальтоники, а также для всех тех, кто бросил посещать занятия в изостудиях, когда узнал, что там не будет нагих моделей, мы публикуем статью о том, как выбирать цвета так же хорошо, как это делает профессионал, опираясь на базовые знания о цвете.
Это синий
Во-первых, давайте разберемся в терминологии, чтобы убедиться, что вы не потеряете нить рассуждений в процессе чтения статьи. Все мы знаем, что первичными (primary) цветами являются красный, желтый и синий. Для того чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий — пурпурный/лиловый, а синий и желтый — зеленый. А что такое третичные (tetriary) цвета? Просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). Рис. А демонстрирует все описанные цвета во всей их красоте.
Рис. А.: для того, чтобы научиться подбирать великолепные цветовые схемы,
для начала нужно знать о трех типах цветов.
Для того чтобы полностью понять, как эти цвета взаимодействуют друг с другом, лучше всего расположить их по кругу. Такая организация, показанная на рис. В, в мире дизайна называется цветовым кругом. Красиво, не правда ли? Но что действительно впечатляет, это как данный круг будет помогать вам выбирать цвета для вашего Web-сайта.
Рис. В.: собрав воедино первичные, вторичные и третичные цвета, мы получаем цветовой круг.
Подбор цветов с помощью цветового круга
Самый простой способ подбора цветов в цветовом круге — представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами — потенциальные кандидаты на использование. (Для тех, кто проспал урок геометрии и черчения, поясняю, вершинами являются точки, где сходятся отрезки, образующие стороны треугольника). Этот тип подбора цветов называется «триадной схемой». Взгляните на рис. С. У нас получаются четыре различных триадных схемы, с которыми уже можно работать. Суть заключается в том, что эти цвета, работая вместе, образуют гармоничную комбинацию цветов.
Рис. С: на цветовом круге существует четыре возможных триады цветов
Но триадами не стоит ограничиваться. Можно выбрать и комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга — например, красный и зеленый. Они называются комплиментарными/дополняющими потому, что, будучи помещенными рядом, они делают друг друга ярче и живее, см. рис. D.
Рис. D.: цвета, противоположные друг другу на круге, называются комплиментарными/дополняющими
Различные варианты
На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплиментарных цветов, что называется «двойной комплемент» (double complement). Скажем, желтый и пурпурный/лиловый, синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый — пример такой комбинации. Также существует «расщепленный комплемент» (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.
И наконец, вы наверное слышали о тетраде: когда берутся четыре цвета, которые расположены прямо напротив друг друга. Т.е. выбираются 1 первичный, 1 вторичный и два третичных цвета. На рис. Е. Показаны примеры вышеперечисленных схем.
Рис. Е.: эти схемы вдохнут жизнь в любой Web-сайт
Все семейство
Итак, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании эта схема может придать Web-сайту аккуратный, чистый вид. Сходственная схема цветов, с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. сходственная схема весьма похожа на монохроматическую.
Рис. F.: сходственная схема очень напоминает монохроматическую
Итак, все вместе
Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придется кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведенные здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь, в конечном счете, решающим фактором будет читаемость текста на Web-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.
Рис. G.: не всякая комбинация годится в дело
Заключение
Хотя выбор цветов является одним из самых наиболее субъективных процессов в мире дизайна, необходимо тем не менее знать теорию, которая определяет выбор одной, а не другой комбинации цветов. Конечно, теория не поможет вам выбрать удачную комбинацию немедленно, но может послужить хорошим маяком. Теперь вам осталось разобраться с электрощитом.
Подробнее!
Теории цвета можно посвятить множество выпусков, но мы опасаемся жалоб со стороны тех, кто ее уже знает. Если вы хотите научиться большему, посетите Web-сайт Color Matters (www.colormatters.com) *. Этот сайт охватывает такие темы, как цвет и Web, цвет и изобразительное искусство, цвет и наука, и даже цвет и еда (непременно почитайте статью о синих спагетти!)
Источник: www.webmascon.com
* Статьи ресурса Color Matters (www.colormatters.com) доступны на нашем сайте в английском разделе Articles.
Вконтакте
7 простых способов хорошо сочетать оттенки — Платформа — «BE_RS»
5 грудня 2017
Platfor.ma продолжает рубрику, в рамках которой мы собираем ответы на те вопросы о дизайне и сопутствующих темах, с которыми приходится сталкиваться чуть ли не каждый день. Сегодня – текст о том, как правильно сочетать цвета в чем бы то ни было: от одежды и интерьера до постеров и сайтов. Мы не гарантируем, что после прочтения этого текста сочетания ваших цветов перестанут нести угрозу для эпилептиков, но попытаться обязаны.
1. Однотонные цвета
Прием состоит в том, чтобы использовать разные оттенки одного цвета. Он хорош для тех, кто боится экспериментировать. Сочетая цвета таким образом, создать какое-нибудь действительно отвратительное сочетание довольно тяжело. Хотя некоторым все же удается.
2. Дополнительные цвета
Дополнительную цветовую схему можно создать, объединяя цвета из противоположных строн цветового круга. Такое сочетание обычно состоит из двух цветов, но может быть легко дополнено третьим. Иногда такие сочетания, особенно ярких цветов, могут быть очень визуально резкими, поэтому советуют разделять их либо пустым пространством, либо каким-то переходным цветом.
3. Аналогичные цвета
Такие цветовые схемы создать проще всего. Для этого нужно использовать три цвета, которые находятся рядом на цветовом круге. Однако они должны быть одинаковой насыщенности.
4. Триада
Эта цветовая схема создается из трех цветов, равноудаленных друг от друга на цветовом круге. В таком случае для того, чтобы выделить какой-то цвет, будет достаточно сделать его более ярким.
5. Скриншоты
Если часто сталкиваетесь с необходимостью комбинировать цвета, сохраняйте понравившиеся цветовые комбинации на потом. Это может быть фото, скриншот сайта или чужая иллюстрация. Потом в Photoshop вы сможете легко повторить эту же палитру с помощью инструмента «пипетка».
6. Специальные сервисы
Все уже придумали за нас. В отношении цвета – тем более, потому стоит этим пользоваться. Есть много сервисов, которые подскажут правильный цвет, но все они строятся на одном и том же принципе колористики. Один из самых удобных сервисов – это адобовский kuler.
Три страницы скролла хватит на все ваши афиши. Нужно понять, какую эмоцию должна нести картинка (будь то постер или вечерний маникюр) и просто интуитивно подобрать нужные палетки.
7. Шпаргалки
- Для начала старайтесь использовать не больше трех цветов в одном дизайне. Как только у вас начнет это получаться, можете добавлять по одному цвету.
- Не берите цвет с верхнего правого угла палетки, если только не осознанно. Хотя нет, все равно не берите.
- Если картинка слишком вырви-глаз, стоит просто сделать цвета менее яркими. Оттенки одного и того же цвета, но разной насыщенности выглядят совсем по-разному.
- Не нужно сочетать темные цвета с противоположными им темными. Например, темно-синий с темно-зеленым.
- Аккуратно используйте красный цвет как основной, лучше приберегите его для акцентов.
- Не стоит сочетать чистые (синий, красный, желтый) и смешанные цвета (пурпурный, оранжевый, салатовый).
- Белый, серый и черный цвета одинаково хорошо сочетаются со всеми другими.
 
Теория цвета: как выбрать правильные цвета для сайта
Цвета и различные их комбинации влияют на психику человека, а значит, во многом определяют его поведение. Маркетологи и веб-дизайнеры хорошо знают, что правильно подобранная цветовая гамма сайта помогает привлечь и удержать внимание пользователей, сформировать положительное отношение к продукту, подтолкнуть посетителей к совершению целевых действий, повысить конверсию.
Использование эффектных сочетаний цветов в веб-дизайне во многом основывается на теории цвета — особенностях эмоционального восприятия человеком тех или иных цветовых решений.
В статье расскажу о том, насколько фактор цвета важен в маркетинге, как теория цвета помогает веб-дизайнерам правильно сочетать оттенки при разработке сайтов, затрону тему психологии цвета и поделюсь советами, как правильно подобрать цветовую гамму для продающей страницы.
Как цвет влияет на поведение потребителей
Универсального ответа на вопрос, как тот или иной цвет влияет на разных людей, нет. Эмоциональная и поведенческая реакция каждого человека зависит от личного опыта. Вместе с тем можно выделить определенные закономерности влияния цветов на поведение пользователей.
В исследовании «Влияние цвета на маркетинг» (Impact of color on marketing) говорится, что использование разных цветов может существенно влиять на настроение и поведение потребителей. Утверждается, что от 60 до 90% покупателей (в зависимости от категории продукта) дают положительную или отрицательную оценку товару, основываясь только на его цвете.
Вывод о влиянии цвета на покупательскую активность подтверждают и другие исследования. Согласно данным опросов аналитического маркетингового агентства Kissmetrics, 85% потребителей указывают цвет и дизайн основными факторами, влияющими на решение о покупке.
В онлайн-продажах цвет также играет большую роль. На покупателей влияют не только визуальные характеристики самого продукта, но и дизайн продающих страниц. По данным Kissmetrics, 52% покупателей не будут совершать покупки на сайтах, которые отталкивают их эстетически.
Неприятная цветовая гамма оказывает на пользователей тот же эффект, что и низкое качество изображений, долгая загрузка страниц, ошибки в описаниях товара, навязчивая анимация.
Как видите, правильно выбрать цветовую палитру для сайта очень важно. Можно попробовать сделать это интуитивно, опираясь на свой вкус. Или выбрать более надежный способ — использовать теорию цвета в веб-дизайне.
Теория цвета
Цветовой спектр
Теория цвета начинается с открытия цветового спектра. Изучая свойства света, знаменитый физик Исаак Ньютон при помощи стеклянной призмы разложил белый свет на разные цвета — в спектр.
Цветовой спектр включает основные цвета — красный, синий, желтый. Их еще называют «чистыми», потому что их нельзя получить путем смешения других оттенков.
Основные цвета (Primary Colors) — красный, синий, желтый. Источник — color-wheel-artist.com
Сочетания основных цветов создают вторичные цвета — зеленый, оранжевый, фиолетовый. Их можно получить путем смешения основных: зеленый получается из желтого и синего, оранжевый — из красного и желтого, фиолетовый — из красного и синего.
Вторичные цвета (Secondary colors) — зеленый, оранжевый, фиолетовый. Источник — color-wheel-artist.com
Есть еще третичные цвета, которые получают путем смешения основного и одного из вторичных цветов. Всего выделяют шесть третичных цветов — сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый, сине-фиолетовый.
Третичные цвета (Tertiary Colors) — сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый, сине-фиолетовый. Источник — color-wheel-artist.com
Цветовой круг
Цветовое колесо (хроматический круг) представляет собой схему цветового спектра, которая легко позволяет выбрать гармоничные цветовые комбинации. Эта схема активно используется художниками и дизайнерами по всему миру с момента ее создания в XIX веке.
Цветовой круг (цветовое колесо, хроматический круг). Источник — www.ecolourprint.co.uk
Цветовой круг включает в себя все основные, вторичные и третичные цвета спектра, расположенные в определенном порядке. В зависимости от положения на хроматическом круге, возможные комбинации цветов делятся на три типа:
Аналогичные цвета — комбинации основного цвета с его оттенками, расположенными в цветовом круге по соседству. Сочетание аналогичных цветов воспринимается глазом как наиболее приятное.
Аналогичные цвета. Источник — www.ecolourprint.co.uk
Комплиментарные (дополняющие) цвета — контрастные сочетания цветов, расположенных на противоположных сторонах хроматического круга. Цветовые решения в дизайне с использованием комплементарных оттенков привлекают внимание.
Чаще всего при использовании дополняющих цветов на одной странице один из них является доминирующим, а второй служит для создания акцентов.
Комплиментарные (дополняющие) цвета. Источник — www.ecolourprint.co.uk
Триадные цвета — сочетания трех цветов, расположенных в цветовом круге на вершинах условного равностороннего треугольника. Такие комбинации выглядят почти так же ярко, как и сочетания комплиментарных цветов, но визуально воспринимаются как более сбалансированные и спокойные.
Триадные цвета. Источник — www.ecolourprint.co.uk
Параметры цвета
В начале XX века американский художник Альберт Манселл ввел важные для современной теории цвета понятия — параметры цвета. Это тон (оттенок), яркость, насыщенность.
Тон (оттенок) — самый важный параметр с точки зрения физического восприятия световой волны мозгом человека. Это то, что отличает один цвет от другого, например зеленый от синего.
Яркость — характеристика, которую также называют «светлота», потому что она показывает уровень отличия цвета от базовых белого и черного. Светло-зеленый имеет более высокую яркость, чем темно-зеленый.
Насыщенность характеризует интенсивность тона. При низкой насыщенности оттенок приближается к серому и выглядит тускло, при высокой — смотрится сочно и ярко.
Наряду с цветовыми комбинациями параметры цвета сильно влияют на визуальное и психологическое восприятие общей картинки, особенно через цифровые дисплеи. Веб-дизайнеры учитывают эти нюансы при создании сайтов.
Цветовые ассоциации и психология цвета
Маркетологи Университета Севильи (Испания, Universidad de Sevilla) выяснили, что на поведение потребителей влияет не столько сам цвет, сколько его «уместность и целесообразность» для продукта. Уместность определяют цветовые ассоциации — образы и эмоции, которые человек связывает с определенным оттенком.
О важности цветовых ассоциаций в маркетинге также говорят результаты маркетингового исследования «Влияние цветов продуктов на восприятие уместности логотипа бренда» (The interactive effects of colors and products on perceptions of brand logo appropriateness).
Цветовые ассоциации формируются на основе личного опыта и подкрепляются культурными традициями. Даже самая приятная глазу картинка может восприниматься негативно из-за диссонанса между сутью маркетингового предложения и его дизайнерским оформлением.
Чтобы помочь вам избежать таких ошибок, расскажу о психологии цвета в маркетинге с помощью инфографики от брендингового агентства Iconic Fox. Специалисты агентства создали обзор самых популярных оттенков и привели примеры брендов, которые выбрали их в качестве своего фирменного цвета.
Красный
В большинстве культур воспринимается положительно и вызывает ассоциации с теплом, энергией, скоростью, смелостью, силой. Как известно, «красный — цвет страсти». Среди отрицательных ассоциаций с красным — опасность (красный свет светофора, знак STOP, тревожные кнопки), страх, боль. Если красного слишком много, он может подавлять.
Красный используют многие бренды сферы быстрого питания и ресторанного бизнеса из-за способности пробуждать аппетит. Также красный часто можно увидеть на сайтах и в рекламных кампаниях фитнес-клубов, магазинов нижнего белья, товаров 18+. Считается, что красный даже может повышать пульс!
Оранжевый
Ассоциируется с теплом, дружелюбием, новизной и радостью. Среди отрицательных ассоциаций можно встретить инертность, бедность и дешевизну (согласно результатам опросов потребителей), ощущение лишения чего-то важного.
Но чаще всего оранжевый — это счастье, энергичность, позитивные эмоции, поэтому цвет апельсина активно используется разными брендами.
Желтый
У этого цвета много поклонников. Он имеет в основном положительные ассоциации. Желтый называют солнечным, во многих культурах он ассоциируется с богатством, интеллектом, молодостью и творческим началом. Вместе с тем некоторые оттенки желтого кажутся грязными, ассоциируются с трусостью, страхом, фрустрацией и нищетой.
Наиболее эффектно желтый смотрится в сочетании с контрастными цветами.
Зеленый
Символ свежести, роста, чистоты и здоровья. Считается, что он оказывает на человека расслабляющее воздействие, успокаивает, вселяет уверенность.
Свежесть и чистота зеленого цвета сделали его популярным у продуктовых брендов и супермаркетов, эко-брендов, медицинских и фармацевтических компаний. Из-за ассоциаций со спокойствием и уверенностью зеленый полюбился банкам, страховым компаниям, финансовым организациям.
Зеленый иногда воспринимается негативно из-за психологических ассоциаций со скукой, слабостью, жертвенностью.
Синий
Положительные ассоциации с синим цветом — доверие, безопасность, логичность и безмятежность. Синий — цвет неба, свободы и величественности. Многие бренды используют синий в дизайне, чтобы продемонстрировать свою надежность, безупречную репутацию.
Среди отрицательных чувств, которые вызывает синий — замкнутость, отстраненность, холодность и недоступность
Фиолетовый
Считается одним из самых сложных с точки зрения психологического воздействия. Он ассоциируется с элегантностью, роскошью, утонченностью, превосходством. Неудивительно, что он часто используется брендами, создающими товары для женщин, а также компаниями, ориентированными на высокий потребительский сегмент.
Отрицательные ассоциации с фиолетовым — подавленность, мрачность, удрученность, излишняя экстравагантность.
Розовый
Нежный или оттенка фуксии розовый традиционно считается самым женским цветом. Розовый ассоциируется с изысканностью, страстностью, предприимчивостью, женственностью и комфортом.
Немногие бренды, деятельность которых не связана с товарами для женщин, используют розовый из-за психологических ассоциаций с легкомысленностью и импульсивностью.
Несмотря на это, в веб-дизайне розовый прекрасно уживается с более «серьезными» базовыми оттенками — серым, черным, синим.
Черный
Противоречивый и очень сильный по своей энергетике цвет. Во многих культурах ассоциируется с трауром, но одновременно с этим означает силу, влиятельность, элегантность.
Люксовые бренды и бренды индустрии моды часто используют этот цвет для своих логотипов, сайтов, рекламных кампаний. Это неудивительно, ведь черный выглядит стильно, лаконично и утонченно, особенно в сочетании со светлыми оттенками.
Главное не переборщить с черным, ведь воздействие его отрицательных ассоциаций с угнетенностью и депрессивностью довольно велико.
Белый
Традиционно белый символизирует чистоту, простоту и невинность. Часто — еще и недоступную роскошь, поэтому белый нередко выбирают в качестве фирменного цвета ювелирные компании и модные дома.
Среди отрицательных характеристик белого — ассоциации со стерильностью, болезнью, пустотой и безразличием.
Как выбрать цветовую гамму для продающей страницы
Есть два основных способа применить теорию цвета для создания эффективных продающих страниц:
- Использовать правильные цветовые ассоциации, чтобы привлечь и удержать внимание посетителей страницы, повысить их лояльность к бренду и продукту.
- Подбирать с помощью цветового колеса удачные комбинации оттенков, чтобы упростить восприятие информации.
Как использовать психологию цвета
Прежде чем выбрать основные цвета продающей страницы, нужно четко определить, что вы предлагаете, какова ваша основная целевая аудитория и какие сочетания цветов будут наиболее уместны для вашего маркетингового предложения.
Специфика бизнеса может существенно помочь при выборе цветовой схемы. Например, если вы продаете свадебные платья, то вряд ли вам придет в голову оформить сайт в яркой оранжево-синей гамме, которая только отпугнет большинство невест. Для вас подойдут более изящные сочетания вроде белого и золотого, а синий с оранжевым оставьте продавцам строительных материалов или канцелярских товаров.
Дизайн сайта свадебного салона: нежные пастельные оттенки низкой насыщенности на преобладающем белом фоне
Конечно, не существует таких правил, которые бы предписывали использовать определенные цветовые решения для конкретной отрасли. Тем не менее цветовые ассоциации и особенности эмоционального восприятия оттенков создают рамки, за пределы которых выходить рискованно.
При выборе палитры можно опираться на гендерные и возрастные характеристики целевой аудитории. Считается, что женщины предпочитают сочные и теплые либо пастельные оттенки, например бордовый, фиолетовый, розовый, лиловый.
Редакторы женского журнала Cosmopolitan знают, что их читательницам нравятся сочные и теплые цвета
Мужчины чаще отдают предпочтение сочетаниям базовых и нейтральных цветов — серого, синего, белого, черного.
Дизайн сайта магазина мужской одежды и аксессуаров: сдержанное сочетание базовых оттенков
Внимание пожилых людей проще удержать на продающей странице с преобладанием спокойных и «заземленных» оттенков — зеленого, бежевого, кофейного.
Как подбирать комбинации оттенков для повышения удобства восприятия информации
С помощью цвета можно сделать сайт легко читаемым и удобным для пользователей. Подобрать подходящее для вашей страницы гармоничное цветовое сочетание помогут онлайн-ресурсы, которые позволяют использовать теорию цвета на практике.
Например, в ColoRotate есть целая библиотека цветовых схем, которые можно выбирать, сохранять и редактировать с помощью современного 3D инструмента (3D color tool).
Ресурс Pictaculous подберет готовую палитру, подходящую под загруженное вами фото, а ColorSchemer является удобной площадкой для создания своих собственных цветовых сочетаний.
При выборе цветовой палитры не используйте больше трех-четырех цветов на одной странице. Аляповатый дизайн производит плохое впечатление, способствует расфокусировке внимания пользователей, отвлекает от основной информации на сайте и «уводит» от СТА-кнопок.
Для сайта обычно выбирают три цвета — основной оттенок (фон), вторичный — для выделения крупных элементов и яркий акцентный цвет.
Существует специальная формула эффективного соотношения базовых цветов на продающей странице: 60/30/10. Это значит, что фон страницы занимает 60% площади, вторичный оттенок — около 30%, цветовой акцент — остальные 10%.
Формула эффективного соотношения базовых цветов на продающей странице. Источник — lpgenerator.ru
Черный, белый и серый называют ахроматическими цветами. Они хорошо комбинируются с основными цветами круга и их оттенками. Их можно смело добавлять в качестве фона для сайта.
Какой бы цвет для фона вы ни выбрали, лучше всего сделать преобладающий оттенок более приглушенным, чем все остальные. Так впечатление от дизайна не будет подавлять посетителя сайта и отвлекать его от главного — текстовой информации.
Информация легко воспринимается, когда текст лежит на контрастном фоне. Лучшие контрастные сочетания получаются из цветов, расположенных на противоположных сторонах цветового колеса.
В случае с текстом важно учитывать насыщенность цвета. Оттенок, который вы выберете в качестве фона, должен быть гораздо менее насыщенным, чем текст. В этом случае даже фиолетовые буквы на желтом будут легко читаться, а не рябить в глазах.
Вторичный цвет, который занимает 30% площади страницы, может использоваться для крупных графических элементов. Он также должен быть достаточно насыщенным, чтобы не расплываться на основном фоне.
Согласно теории привлечения зрительного внимания, пользователи в первую очередь обращают внимание на меньшие по размеру и контрастные по отношению к фону элементы страницы. Так как акцентный оттенок занимает всего 10% площади и является самым ярким, эффективно использовать его для выделения важных элементов продающей страницы: заголовка, СТА-кнопки.
И еще один очевидный, но важный момент. Цветовая палитра вашего сайта или лендинга под отдельный проект должна соответствовать общему фирменному стилю и логотипу.
Не бойтесь экспериментировать с цветом. Да, дизайн вашего сайта или продающей страницы может помочь повысить конверсию, но одной-единственной волшебной цветовой схемы, которую во что бы то ни стало нужно угадать, не существует.
Основы теории цвета
Теория цвета — это одновременно наука и искусство использования цвета. Он объясняет, как люди воспринимают цвет; и визуальные эффекты того, как цвета смешиваются, сочетаются или контрастируют друг с другом. Теория цвета также включает сообщения, которые передают цвета; и методы, используемые для воспроизведения цвета.
В теории цвета цвета организованы на цветовом круге и сгруппированы в 3 категории: основные цвета, вторичные цвета и третичные цвета. Подробнее об этом позже.
Via unsplashТак почему же вам, как предпринимателю, должна быть интересна теория цвета? Почему нельзя просто нанести немного красного на упаковку и покончить с этим? Это сработало для Coke, верно?
Теория цвета поможет вам построить свой бренд. И это поможет вам увеличить продажи. Посмотрим, как все это работает.
Понимание цвета
—
Люди решают, нравится им продукт или нет, за 90 секунд или меньше. 90% этого решения основано исключительно на цвете.
Цвет — это восприятие. Наши глаза что-то видят (например, небо), и данные, передаваемые нашими глазами в мозг, говорят нам, что это определенный цвет (синий). Объекты отражают свет в различных комбинациях длин волн. Наш мозг улавливает эти комбинации длин волн и преобразует их в явление, которое мы называем цветом.
Когда вы прогуливаетесь по проходу с безалкогольными напитками, просматриваете полки, заполненные 82 миллионами банок и бутылок, и пытаетесь найти свою упаковку из шести банок кока-колы, что вы ищете? Скрипичный логотип или баночка того знакомого красного цвета?
Люди решают, нравится им продукт, за 90 секунд или меньше.90% этого решения основано исключительно на цвете. Итак, очень важная часть вашего брендинга должна быть сосредоточена на цвете.
RGB: модель аддитивного смешения цветов
Аддитивное смешение цветов. Если вам (как и мне) сложно понять, как красный и зеленый смешиваются вместе, образуя желтый, посмотрите это видео на YouTube.Люди видят цвета в световых волнах. Смешивание света — или модель аддитивного смешения цветов — позволяет создавать цвета, смешивая красный, зеленый и синий источники света различной интенсивности.Чем больше света вы добавите, тем ярче станет цветовое сочетание. Если смешать все три цвета света, получится чистый белый свет.
Телевизоры, экраны и проекторыиспользуют красный, зеленый и синий (RGB) в качестве основных цветов, а затем смешивают их вместе для создания других цветов.
Зачем вам это нужно?
Допустим, у вас очень яркий бренд с ярко-желтым логотипом. Если вы разместите логотип на Facebook, Twitter или на своем веб-сайте и не используете правильный цветовой процесс, ваш логотип будет выглядеть мутным, а не ярко-желтым.Вот почему при работе с файлами для любого экрана используйте RGB, а не CMYK.
CMYK: модель субтрактивного смешения цветов
Для любого цвета, который вы видите на физической поверхности (бумага, вывески, упаковка и т. Д.), Используется модель субтрактивного смешения цветов . Большинство людей лучше знакомы с этой цветовой моделью, потому что это то, чему мы научились в детском саду, смешивая краски для пальцев. В этом случае «субтрактивный» просто относится к тому факту, что вы вычитаете свет из бумаги, добавляя больше цвета.
Вычитающее смешение цветов очень похоже на смешение красок, которое мы делали в начальной школе. Это видео отлично визуализирует «вычитающую» часть.Традиционно основными цветами, используемыми в процессе вычитания, были красный, желтый и синий, поскольку художники смешивали эти цвета, чтобы получить все остальные оттенки. С появлением цветной печати они были впоследствии заменены голубым, пурпурным, желтым и ключевым / черным (CMYK), поскольку это сочетание цветов позволяет принтерам печатать на бумаге более широкий спектр цветов.
Зачем вам это нужно?
Вы решили напечатать полноцветную брошюру. Если вы вкладываете все эти деньги в маркетинг (печать — это не дешево!), Вы ожидаете, что ваш принтер будет печатать правильные цвета.
Поскольку при печати используется метод субтрактивного смешения цветов, точная цветопередача может быть достигнута только с использованием CMYK. Использование RGB приведет не только к неточной цветопередаче, но и к большому счету от вашего принтера, когда вы будете вынуждены попросить их перепечатать весь тираж.
Цветовой круг
—
Не знаю, как вы, но когда я был ребенком, самое лучшее в осеннем возвращении в школу было получение этой новой, нетронутой коробки с 64 пунктами мелков Crayola. Возможности казались безграничными. Пока я неминуемо потеряю черный карандаш.
Понимание цветового круга и цветовых гармоний (что работает, а что нет и как цвет передается) так же увлекательно, как и эта новая коробка с мелками. Нет, правда.
Умение понимать термины и процессы, связанные с цветом, поможет вам со знанием дела передать свое видение дизайнеру, печатнику или даже (возможно) гению из Apple Store.
Основы цветового круга
Первое цветовое колесо было разработано сэром Исааком Ньютоном в 1666 году, поэтому оно появилось еще до того, как вы познакомились с ним в детском саду. Художники и дизайнеры до сих пор используют его для разработки цветовых гармоний, смешивания и палитры.
Цветовой круг состоит из трех основных цветов (красный, желтый, синий), трех вторичных цветов (цветов, созданных при смешивании основных цветов: зеленого, оранжевого, фиолетового) и шести третичных цветов (цветов, созданных из основных цветов). и вторичные цвета, такие как сине-зеленый или красно-фиолетовый).
Проведите линию через центр колеса, и вы отделите теплых цветов (красные, оранжевые, желтые) от холодных цветов (синий, зеленый, пурпурный).
Теплые цвета обычно ассоциируются с энергией, яркостью и действием, тогда как холодные цвета часто ассоциируются со спокойствием, умиротворением и безмятежностью.
Когда вы узнаете, что цвет имеет температуру, вы можете понять, как выбор всех теплых или всех холодных цветов в логотипе или на вашем веб-сайте может повлиять на ваше сообщение.
Оттенок, оттенок, оттенок и тон
Давайте вернемся к пачке из 64 цветных карандашей из нашего первого дня в школе. (Помните «сырую умбру»? Что такое умбра, и действительно ли она лучше сырая, чем приготовленная?) В любом случае, вам может быть интересно, как мы перешли от двенадцати цветов на нашем первоначальном цветовом круге к всем этим мелкам? Вот здесь-то и появляются оттенки, оттенки и тона.
Проще говоря, оттенки, тона и оттенки являются вариациями оттенков или цветов на цветовом круге. Оттенок — это оттенок, к которому был добавлен белый цвет.Например, красный + белый = розовый. Оттенок — это оттенок, к которому был добавлен черный цвет. Например, красный + черный = бордовый. Наконец, тон — это цвет, к которому были добавлены черный и белый (или серый). Это затемняет исходный оттенок, делая цвет более тонким и менее интенсивным.
Цветовые схемы
Давайте поговорим о схемах … (И не о тех, которые придумывают злодеи из мультфильмов. Бвахаха!) Мы говорим о цветовых схемах. Используя цветовое колесо, дизайнеры разрабатывают цветовую схему маркетинговых материалов.
Дополнительные цвета
Дополнительные цвета — это противоположности на цветовом круге, например красный и зеленый.
Дизайн логотипа для Pepper Poweredот Wiell. Поскольку между двумя цветами существует резкий контраст, они действительно могут сделать изображения яркими, но чрезмерное их использование может стать утомительным. Подумайте о любом торговом центре в декабре. При этом использование дополнительной цветовой схемы в вашем бизнес-маркетинге обеспечивает резкий контраст и четкое различие между изображениями.
Аналогичные цвета
Аналогичные цвета располагаются рядом друг с другом на цветовом круге — например, красный, оранжевый и желтый.При создании аналогичной цветовой схемы один цвет будет преобладать, один поддерживать, а другой — акцентировать. В бизнесе аналогичные цветовые схемы не только радуют глаз, но и могут эффективно указывать потребителю, где и как действовать.
На сайте Tostitos используется аналогичная цветовая схема. Обратите внимание, что ярко-оранжевая панель навигации привлекает внимание к сайту, а выделенные с помощью акцента ссылки внизу направляют голодных потребителей на страницу «Купить в Интернете».
Триадические цвета
Триадные цвета равномерно распределены по цветовому кругу и имеют тенденцию быть очень яркими и динамичными.
Использование трехцветной цветовой схемы в маркетинге одновременно создает визуальный контраст и гармонию, выделяя каждый элемент и делая общий образ ярким.
Burger King довольно успешно использует эту цветовую схему. Эй, уже обед?
Но на самом деле, зачем вам теория цвета?
Два слова: брендинг и маркетинг.
Нет, постой, три слова: брендинг, маркетинг и продажи.
Обладая базовыми знаниями о цветах и цветовых схемах, вы готовы принимать эффективные решения в отношении брендинга.Какого цвета должен быть ваш логотип. Или эмоции, которые цвета вызывают у потребителя, и психологию выбора цвета на вашем веб-сайте.
Думаете, это неважно? Взгляните на эту статью о цветовых комбинациях из ада. Просто больно.
Знание теории цвета не только поможет вам в вашем собственном маркетинге, но и поможет лучше понять, что делают ваши конкуренты.
При параллельном сравнении трех веб-страниц юридических фирм вы заметите множество аналогичных цветовых схем.Синий обычно ассоциируется с надежностью, коричневый — с мужественностью, а желтый — с компетентностью и счастьем. Все это положительные ассоциации в области, которая стереотипно имеет отрицательные коннотации, такие как нечестность или агрессия.
Сделать ваш бренд заметным и привлекательным для вашей цели, а также понять, что плохие цвета могут означать плохие продажи — это , почему вам следует заботиться о теории цвета.
Нужна помощь в продвижении вашего бизнеса?
Наши дизайнеры могут создать идеальный образ для вашего бренда.
Эта статья была первоначально написана Петером Вуковичем и опубликована в 2012 году. Текущая версия была дополнена новой информацией и примерами.
Основная теория цвета
Теория цвета включает в себя множество определений, концепций и дизайнерских приложений — этого достаточно, чтобы заполнить несколько энциклопедий. Тем не менее, есть три основные категории теории цвета, которые логичны и полезны: цветовое колесо, цветовая гармония и контекст использования цветов.
Теории цвета создают логическую структуру цвета. Например, если у нас есть ассортимент фруктов и овощей, мы можем упорядочить их по цвету и разместить их в круге, который показывает цвета по отношению друг к другу.
Цветовой круг
Цветовой круг, основанный на красном, желтом и синем, является традиционным в области искусства. Сэр Исаак Ньютон разработал первую круговую диаграмму цветов в 1666 году. С тех пор ученые и художники изучили и разработали множество вариаций этой концепции.Разногласия во мнениях относительно ценности одного формата по сравнению с другим продолжают вызывать споры. В действительности любой цветовой круг или цветовое колесо, которое представляет собой логически организованную последовательность чистых оттенков, имеет свои достоинства.
Существуют также определения (или категории) цветов на основе цветового круга. Начнем с цветового круга из 3 частей.
Основные цвета : красный, желтый и синий
В традиционной теории цвета (используемой в красках и пигментах) основные цвета — это 3 цвета пигмента, которые не могут быть смешаны или образованы какой-либо комбинацией других цветов.Все остальные цвета получены из этих трех оттенков.
Дополнительные цвета : зеленый, оранжевый и фиолетовый
Это цвета, образованные путем смешивания основных цветов.
Третичные цвета: Желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый и желто-зеленый
Это цвета, образованные путем смешивания основного и вспомогательного цветов. Вот почему оттенок состоит из двух слов, таких как сине-зеленый, красно-фиолетовый и желто-оранжевый.
Гармония цветов
Гармонию можно определить как приятное расположение частей, будь то музыка, поэзия, цвет или даже мороженое с фруктами.
В визуальном восприятии гармония радует глаз. Это привлекает зрителя и создает внутреннее ощущение порядка, равновесия в визуальном восприятии. Когда что-то не гармонично, это либо скучно, либо хаотично. С одной стороны, визуальное восприятие настолько мягкое, что зритель не заинтересован. Человеческий мозг отвергает недостимулирующую информацию. Другая крайность — визуальный опыт, который настолько преувеличен, настолько хаотичен, что зритель не может смотреть на него.Человеческий мозг отвергает то, что он не может организовать, что не может понять. Визуальная задача требует, чтобы мы представили логическую структуру. Гармония цветов вызывает визуальный интерес и создает ощущение порядка.
Таким образом, крайнее единство ведет к недостаточной стимуляции, крайняя сложность — к чрезмерной стимуляции. Гармония — это динамическое равновесие.
Некоторые формулы цветовой гармонии
Есть много теорий гармонии. Следующие иллюстрации и описания представляют некоторые основные формулы.
1. Цветовая схема на основе аналогичных цветов
Аналогичные цвета — это любые три цвета, расположенные рядом на цветовом круге из 12 частей, например желто-зеленый, желтый и желто-оранжевый. Обычно преобладает один из трех цветов.
2. Цветовая схема на основе дополнительных цветов
Дополнительные цвета — это любые два цвета, которые находятся прямо напротив друг друга, например красный и зеленый, красно-фиолетовый и желто-зеленый.На иллюстрации выше видно несколько вариантов желто-зеленого цвета листьев и несколько вариантов красно-пурпурного цвета орхидеи. Эти противоположные цвета создают максимальный контраст и максимальную стабильность.
3. Цветовая гамма, основанная на природе
Природа — идеальная отправная точка для гармонии цветов. На иллюстрации выше красный, желтый и зеленый создают гармоничный дизайн, независимо от того, вписывается ли это сочетание в техническую формулу цветовой гармонии.
Динамические рецепты гармонии цвета
Электронный курс от Джилл Мортон, автора и консультанта Color Matters.
Цветовой контекст
Как цвет ведет себя по отношению к другим цветам и формам — сложная область теории цвета. Сравните эффекты контрастности разных цветных фонов для одного и того же красного квадрата.
Красный цвет выглядит более ярким на черном фоне и несколько более тусклым на белом фоне. В отличие от оранжевого, красный кажется безжизненным; в отличие от сине-зеленого, он проявляет блеск.Обратите внимание, что на черном фоне красный квадрат больше, чем на других цветах фона.
Разные показания одного цвета
Если ваш компьютер имеет достаточную стабильность цвета и гамма-коррекцию (ссылка на «Дальтонизм вашего компьютера?»), Вы увидите, что маленький фиолетовый прямоугольник слева имеет красно-фиолетовый оттенок по сравнению с маленьким фиолетовым прямоугольником справа. . Оба они одного цвета, как показано на рисунке ниже. Это демонстрирует, как три цвета могут восприниматься как четыре цвета.
Наблюдение за тем, как цвета влияют друг на друга, является отправной точкой для понимания относительности цвета. Соотношение значений, насыщенности и теплоты или прохлады соответствующих оттенков может вызвать заметные различия в нашем восприятии цвета.
Выучите язык цвета онлайн.
Сделай сам — учите в удобном для вас темпе.
Почему в логотипе вашей компании не должно быть более трех цветов — 48hourslogo Blog
Когда мы говорим о дизайне логотипов, мы все знаем, что публика должна получить сообщение о бренде за считанные секунды.Тем не менее, иметь логотип с обширной цветовой палитрой или слишком сильно полагаться на цвет — очень распространенные ошибки.
Цвет должен быть последним элементом при создании логотипа, главным образом потому, что логотип должен хорошо выглядеть как в черно-белом, так и в цветном исполнении. Тем не менее, правильная подсказка по-прежнему важна. И, как правило, в дизайне логотипа не должно быть более трех цветов. Чрезмерное использование цвета может вызвать замешательство. К тому же дизайн логотипа не может произвести хорошего впечатления с помощью большого сочетания оттенков и оттенков.
Какой бы продукт или услугу вы ни предлагали, вы должны передать свое сообщение с помощью простого дизайна и еще более простой цветовой палитры.Гармония заключается в использовании сочетающихся друг с другом оттенков. Следовательно, мозг может легко обработать дизайн. Неправильный выбор цвета или смешивание множества противоположных цветов может оказаться дорогостоящей ошибкой. В этом разделе мы узнаем, как правильно выбирать подсказки и почему в вашем логотипе не должно быть более трех цветов.
Цвет необходим для придания однородности. Итак, чтобы добиться единообразия, вы должны избегать несогласованных по цвету композиций или, другими словами, смешивать неправильные цвета.Как этого избежать?
Цветовой круг — хорошее место для начала. Каждый дизайнер обращается к цветовому кругу, чтобы создать сбалансированную палитру. Важно знать, как цвета связаны друг с другом и какая комбинация лучше всего подходит для вашего бренда.
Цветовой круг разделен на основных цвета : красный, желтый и синий. Смешивая два основных цвета, мы получаем вторичных цвета : оранжевый, зеленый и фиолетовый. И смешивание двух основных цветов приводит нас к третичным цветам : красно-оранжевый, желто-оранжевый, желто-зеленый, сине-зеленый, сине-фиолетовый и красно-фиолетовый.
Этот способ смешивания цветов использовался художниками на протяжении веков. Он известен как метод вычитания , что в основном означает смешивание цветов, как это делает традиционный художник.
Но есть и другой способ смешивания цветов, известный как аддитивный метод , который относится к смешиванию цветного света с использованием другого набора основных цветов: красного, зеленого и синего. Обычно используется в компьютерном программировании и называется RGB.
Компьютеры по-разному обрабатывают цвет, веб-браузер может создавать только 256 комбинаций.У пикселей недостаточно битов для создания всех цветовых комбинаций. Кроме того, Mac и ПК немного меняют 40 из этих 256 подсказок, так что, как только вы это узнаете, вы можете начать думать о том, как эффективно использовать цвета.
Вы можете спросить себя, где вы с большей вероятностью будете использовать логотип, поскольку определенные цветовые комбинации могут отличаться на разных платформах. Если вы хотите добиться единообразия, попробуйте посмотреть, как логотип выглядит на экране компьютера и на бумаге. Опять же, не все компьютеры или телевизоры обрабатывают цвет одинаково.Очень важно выбрать цветовую палитру, в которой нет больших вариаций тонов.
Поэтому дизайнеры не советуют использовать более 3-х цветов. Вы можете не только создать путаницу, но и испортить дизайн и послание. Чрезвычайно сложно управлять богатым дизайном на самых разных платформах. К счастью, есть несколько комбинаций, которые могут улучшить ваш бренд. Мы сказали, что цвета связаны друг с другом. Нередко их группируют по температуре.
Теплые цвета:
Теплые цвета — это цвета с высоким содержанием красного.Они сидят рядом друг с другом в цветовом круге. Не всякая марка подходит для теплой цветовой палитры. Тем не менее, бренды, использующие теплые тона, стали привычными для потребителей. В первую очередь потому, что красный — очень характерный намек.
Холодные цвета:
Относится к тем оттенкам, в которых преобладает синий цвет. Они находятся рядом друг с другом в цветовом круге. И эта палитра очень распространена среди деловых и технологических брендов, поскольку она более приятна для человеческого глаза и не требует особых усилий для распознавания.
Теперь давайте посмотрим на цветовые схемы. Это поможет вам решить, какой набор цветов лучше всего подходит для вашего бренда.
Монохроматический: Монохроматический относится к одному цвету и его различным оттенкам, от самого темного до самого яркого. Изменение незначительное, но все же может оказать хорошее влияние. Многие бренды применяют монохромную схему, поскольку один цвет во всех его оттенках легко распознать.
Аналогичные цвета: Цвета, которые ближе друг к другу в цветовом круге, это наиболее распространенная цветовая схема, которая широко используется в дизайне логотипов.
Дополняющий: Они сидят напротив друг друга в цветовом круге, например синий и желтый. Эта комбинация имеет «высокую интенсивность» и используется для веб-дизайна, графического дизайна и дизайна логотипов.
Сплит-дополнительный: Эта цветовая схема относится к двум похожим цветам и одному противоположному. Этот микс, хотя и рискованный при правильном использовании, может создать богатый контраст.
Triadic: Три цвета, равномерно распределенные в цветовом круге. Дизайнеры предлагают нанести 60% одного цвета, затем 30% и 10%.Таким образом, преобладает один цвет, и дизайн выглядит более сбалансированным.
Тетрадик или двойной дополнительный цвет: Эта схема объединяет две пары дополнительных цветов. Это сочетание цветов, которое сложнее всего сбалансировать. Опять же, желательно использовать один цвет как доминирующий, а остальные в небольших пропорциях.
Как мы уже видели, в дизайне логотипа не должно быть более трех цветов. Слишком много цветов может создать путаницу. К тому же всегда есть шанс рискнуть дизайном с широкой цветовой палитрой.
Color — это один из элементов дизайна, но не единственный. Дизайн логотипа должен быть понятным и легко усваиваемым. Чтобы добиться единообразия, преобладающий цвет должен быть на всем протяжении бренда. Тем не менее, многие известные бренды нарушили эти правила.
Google и Ebay — некоторые из них, в этих случаях многоцветная палитра работает хорошо, поскольку шрифты распределены равномерно. Они используют широкую цветовую палитру, но это не мешает посылке бренда. Вы можете нарушать правила, но это должно приносить удовольствие глазам.
Data Viz Color Palette Generator (для диаграмм и информационных панелей)
Как использовать
Используйте средство выбора палитры, чтобы создать серию цветов, которых визуально равноудалены . Это полезно для многих визуализаций данных, таких как круговые диаграммы, сгруппированные гистограммы и карты.
Примечание: кроме режима палитры есть еще два режима — обратите внимание на шкалы с одним оттенком и с расходящимися шкалами.
Создание визуально равноудаленных палитр вручную практически невозможно, но чрезвычайно важен для визуализации данных. Почему? Когда цвета , а не визуально равноудалены, труднее (а) отличить их друг от друга на диаграмме и (б) сравнить диаграмму с ключом. Я уверен, что все мы видели диаграммы, где вряд ли можно использовать ключ, поскольку цвета данных очень похожи.
Например, Google Analytics выполняет ужасную работу с этим:
Просто попробуйте использовать этот ключ.Попробуй.Лучше использовать диапазон оттенков , чтобы пользователям было проще делать перекрестные ссылки с ключом. Нашему мозгу гораздо проще отличить, скажем, желтый от оранжевого , чем синий от синего, но на 15% светлее .
Ах! Намного лучше.Эта палитра цветов позволяет указать обе конечные точки палитры. Вы можете выбрать хотя бы один цвет бренда, что дает вам значительную гибкость в создании палитры, которая будет работать для ваших визуализаций, но при этом настраиваться для вашего бренда.
Вот несколько советов, как получить лучшую палитру:
- Попробуйте выбрать очень разных цветов конечных точек — например, один теплый, один прохладный; один яркий, другой темный — так что ваша палитра охватывает более широкий диапазон
- Если вы используете фирменный цвет для одной конечной точки, не бойтесь немного изменить насыщенность и яркость , если это создаст более приятную палитру.Пользователи узнают цвет вашего бренда по его оттенку гораздо больше , чем по его точной насыщенности / яркости.
- Для визуализации данных, где вы показываете силу отдельного значения , попробуйте вместо этого использовать генератор одиночной палитры оттенков.
Ох, и …
Подробнее о цвете
Если вы новичок в использовании цвета в дизайне пользовательского интерфейса, я настоятельно рекомендую следующие ресурсы:
Так или иначе, я создал это как инструмент, который мне хотелось бы иметь для создания палитр визуализации данных.Есть ли в нем еще одна особенность? Дайте мне знать.
Полное руководство [Бесплатная загрузка]
В контент-маркетинге цвет — это эмоциональный сигнал.
В океане контент-маркетинга цвет может помочь вам выделиться.
Это то, что заставляет вашу аудиторию видеть то, что вы хотите, чтобы они видели, чувствовать то, что вы хотите, и делать то, что вы от них хотите. От того, какие оттенки вы выберете, зависит удобство использования и читабельность контента.Это то, что делает понимание психологии цвета таким важным для успеха вашего контента .
Однако неправильный выбор цвета также может негативно повлиять на воздействие вашего сообщения. Совершите ошибку, и ваш отличный контент и ваш потрясающий призыв к действию будут легко проигнорированы. Даже НАСА заботится о цвете; достаточно, чтобы они предоставляли бесплатные онлайн-ресурсы, чтобы помочь людям, не являющимся дизайнерами, выбрать правильные оттенки.
Прочитав этот пост, вы поймете основы теории и психологии цвета.Кроме того, мы добавили бесплатную шестнадцатеричную цветовую таблицу, чтобы с легкостью подобрать нужные цвета с помощью любого инструмента дизайна.
Готовы стать экспертом? Давайте начнем!
Загрузите сейчас
Plus, присоединяйтесь к нашему списку рассылки, чтобы оставаться в курсе.
Успех! Ваша загрузка должна начаться в ближайшее время. Или вы можете скачать его вручную здесь.
Загрузить сейчас
Начнем с основ теории цвета
Понимание того, как работает цвет, не только для художников, которые целый день окунают руки в краски и пигменты.Любой маркетолог должен понимать основы теории цвета, потому что независимо от того, какой цвет вы используете в своем контенте.
Основной цвет
Основные цвета — это три цвета, составляющие все остальные цвета. Это красный , синий и желтый . Эти три цвета можно использовать для создания следующего уровня цветов, называемого вторичными цветами .
Конечно, когда речь идет об основных цветах, существует множество исключений.Если вы говорите о теории цвета в отношении света, вашими основными цветами будут голубой, пурпурный и желтый. Не забывайте CMYK для печати и RGB для экранов или мониторов. И при смешивании краски имеет значение, какой именно пигмент вы используете, чтобы получить этот красный цвет, чтобы придумать правильный новый цвет. Но давайте будем простыми и будем использовать красный , синий и желтый .
Дополнительный цвет
Дополнительные цвета: фиолетовый , зеленый и оранжевый .Они созданы с использованием основных цветов. Если вы посмотрите на цветовое колесо, вы найдете вторичные цвета между двумя основными цветами.
Таблица цветов:
- красный + синий = фиолетовый
- синий + желтый = зеленый
- красный + желтый = оранжевый
Третичный цвет
Третичные цвета заменяют второстепенные цвета на один шаг дальше . Это «двухименные» цвета, такие как красно-фиолетовый , красно-оранжевый , желто-зеленый и т. Д.
Они создаются путем добавления одного основного цвета больше, чем другого, создавая не настоящий вторичный цвет. В конечном итоге он становится ближе к основному цвету.
Чистый цвет
Первичный , вторичный и третичные цвета без добавления белого, черного или третьего цвета являются чистыми (или насыщенными) цветами. Это насыщенные, яркие, жизнерадостные и незапятнанные цвета.
Это цвета детских игрушек, детских садов и летней одежды.
Оттенки
Когда к чистому цвету добавляется белый, получается оттенок. Некоторые называют их пастельными цветами. Они светлее и бледнее, чем чистый цвет, и не такие интенсивные.
Диапазон оттенков от чуть более белого до почти белого.
Оттенки
Когда черный цвет добавляется к чистому цвету, вы создаете оттенок. Они затемняют и приглушают яркость чистых цветов и варьируются от чуть более темного до почти черного.
тона
Когда серый (черный + белый) добавляется к чистому цвету, получается тон .Вы часто слышите, как люди говорят, что цвет нужно «смягчить», имея в виду, что он слишком интенсивный, и они хотят снизить уровень интенсивности.
Добавление черного и белого в разных количествах к цвету быстро снижает интенсивность.
Завершенное цветовое колесо
Уф! Итак, у нас есть полное цветовое колесо с первичными , вторичными и третичными цветами , а также их оттенками , оттенками и оттенками .Вы можете увидеть, как все это сочетается друг с другом, на цветовом круге ниже.
Холодные цвета находятся на левой стороне колеса, в синем и зеленом цветах. — теплые цвета. — все на правой стороне колеса, желтые и красные.
Теперь, когда вы понимаете теорию цвета и цветовое колесо, вы можете целенаправленно использовать цвет в своем контент-маркетинге.
Правильное использование контраста с цветом
Когда дело доходит до цветовой техники, использование контраста особенно важно, и, вероятно, именно он заставит вас больше всего спорить с дизайнером.
Контраст — это то, как один цвет отличается от другого. Это то, что делает текст или объекты отличными от фона. Высокая контрастность — это когда цвета легко отделяются друг от друга. Низкая контрастность — это когда они этого не делают.
Часто люди предполагают, что разница в цвете — это то, что создает контраст, но это не так. У вас могут быть два совершенно разных цвета, но они не имеют никакого контраста, потому что их тон одинаков. Чтобы проверить контрастность ваших цветов, превратите их в оттенки серого и проверьте их контраст.
Цвета в чистом виде различаются по тому, насколько они светлые и темные.
Например, желтый светлый, а синий — более темный. Желтый и оранжевый мало контрастируют друг с другом, несмотря на то, что они разные цвета. Когда разные цвета имеют одинаковый тон (уровень серого, как вы только что узнали), они также не будут иметь большого контраста. При принятии решения о контрасте недостаточно просто выбрать два разных цвета.
Использование высокой и низкой контрастности
Как правило, высокая контрастность — лучший выбор для важного контента, потому что его легче всего увидеть.Темный на светлом или светлый на темном — это легче всего читать. Это может быть не интересно, но читается .
Одно предостережение: Если все контрастно, ничего не выделяется, и через некоторое время это утомляет глаза. (Например, подумайте о черных экранах компьютеров с ярко-зеленым текстом.)
Дизайнеры часто предпочитают низкоконтрастные методы. Им нравится делать вещи красивыми, но красивый — не всегда лучший для удобочитаемости. Сходные цветовые комбинации тон в тон очень популярны, и, хотя их тонкость довольно привлекательна, их также трудно читать людям.
Pro Совет: Постарайтесь найти баланс между красивыми цветовыми схемами и удобочитаемостью для оптимальной четкости изображения.
Чтобы использовать похожие цвета и получить желаемый контраст, создаст цветовую схему с дополнительными и аналогичными цветами . Что это такое? Продолжаем читать!
Выбор цветовых комбинаций
Цветовое колесо может помочь вам выбрать отличные цветовые комбинации для вашей кнопки призыва к действию, вашей инфографики и всплывающего окна вашей коллекции потенциальных клиентов.
Простые сочетания цветов помогут вам в долгосрочной перспективе.
Исследование, проведенное в Университете Торонто, показало, как люди, использующие Adobe Kuler, выявили, что большинство людей предпочитают простых цветовых сочетания, которые опираются только на от 2 до 3 любимых цветов .
Людям нравится простота; это облегчает понимание вашего контента, если им не нужно интерпретировать его с помощью множества цветов. И помните, что цвет имеет значение, поэтому каждый цвет добавляет или убирает ваше сообщение.
Слишком много цветов может сбивать с толку. Так как же выбрать эти 2 или 3 цвета? Цветовой круг может помочь.
Вернуться к началу
Использование дополнительных (противоположных) цветов
Дополнительные цветовые комбинации выделяют вещи.
Дополнительные цвета — это «противоположные» цвета. Они противоположны друг другу на цветовом круге, что означает, что им не хватает одного цвета, который им противоположен.
Они противоположны географически и по цвету и создают некое визуальное напряжение, потому что они настолько противоположны друг другу.
Вы даже можете заметить, что некоторые из ваших любимых спортивных команд используют дополнительные цвета. От футбола до хоккея — разные цвета используются для создания отличных цветовых сочетаний.
Синий — противоположность оранжевому.
Красный цвет противоположен зеленому.
Желтый — противоположность фиолетового.
Противоположности притягиваются!
Когда человеческий глаз видит картину, полную различных видов зелени, любой кусочек красного будет удивительно хорошо выделяться.Почему?
Потому что красный цвет противоположен зеленому . Когда глаз смотрит на множество объектов одного цвета, он хочет увидеть противоположное для визуального перерыва. Использование дополнительных цветов — самый простой способ выделить что-то. Используйте их с осторожностью, чтобы ваш контент не выглядел слишком резким.
Вам не нужно 50% оранжевого и 50% синего, потому что ни один цвет не побеждает, и он вызывает расстройство глаз.
Профессиональный совет: выберите основной цвет в качестве основного, а затем акцентируйте его дополнительным цветом, чтобы добиться большего соотношения 7: 3.Это обеспечивает красивое сочетание цветов, но также позволяет глазам отвлекаться на противоположный цвет.
Давайте в качестве примера рассмотрим домашнюю страницу CoSchedule. Какие цвета ты видишь?
В основном это синий , но наша самая важная кнопка, кнопка «Начать бесплатно сейчас», — это оранжевый . Оранжевый цвет противоположен синему. В темно-синем море ваш глаз естественным образом заметит оранжевый быстрее, чем любой другой цвет. Мы также позаботились о том, чтобы оранжевая кнопка контрастировала с темно-синей, чтобы сделать ее визуально более заметной.
Внимание: устранение дальтонизма
Небольшое предупреждение: Красный и зеленый, два дополнительных цвета, представляют собой липкую проблему. Некоторые люди страдают дальтонизмом и не могут различать определенные цвета, а красный и зеленый — обычная проблемная комбинация. Цвета с большим количеством красного и зеленого тоже некачественны. Знаете ли вы, что Facebook синий, потому что Марк Цукерберг дальтоник к красно-зеленому? Он лучше всех видит блюз.
В приведенном выше примере показаны три типа дальтонизма: дейтераноп, протаноп и тританоп.Подобно Марку, который лучше всего видит синий, неудивительно, что синий является одним из самых популярных цветов, поскольку он простирается даже за пределы дальтонизма.
Чтобы избежать дальтонизма при использовании дополнительных цветов, помните, что должен быть высокий контраст. Старайтесь никогда не использовать цвет исключительно как источник информации. По возможности также включайте текст в графики и инфографику.
Высокая контрастность и дополнительный текст гарантируют, что даже при наличии дальтонизма ваши изображения будут удобочитаемыми и приятными для просмотра.
Использование разделенных дополнительных цветов
Если вы хотите использовать три цвета вместо двух, то использование дополнительных цветовых схем с разделением — это способ извлечь выгоду из силы дополнительных цветов, но добавить третий цвет в вашу палитру. Чтобы использовать его, вы выберете один цвет в качестве основного цвета, а затем два цвета, смежные с его противоположным цветом.
Например, если мы решили выбрать зеленый в качестве основного цвета, мы будем смотреть через цветовое колесо в поисках его дополнительного цвета, красного.Затем посмотрите на два цвета рядом с ним. Теперь у нас есть зеленый, красно-оранжевый и красно-фиолетовый для идеальной комплементарной цветовой схемы.
Разделенная дополнительная цветовая схема не имеет такого же уровня напряженности, как дополнительная цветовая схема, но все же визуально захватывающая для вашего глаза. Это также добавляет разнообразие в вашу цветовую схему, которую можно использовать очень динамично и осмысленно.
Использование аналогичных цветов
Аналогичные цвета располагаются рядом друг с другом на цветовом круге.Они «связаны», своего рода семейство цветов, которое создает приятные и непринужденные визуальные эффекты. Они не дергаются, не противоположны и не конфликтуют. Они также не отличаются друг от друга. Аналогичные цвета могут создавать тонкий и красивый контент, но вам может потребоваться добавить дополнительный цвет, чтобы выделить какой-либо конкретный элемент.
Использование монохроматических цветов
Монохромные цвета — это один цвет с его оттенками, оттенками и тонами. Они даже более мягкие и тонкие, чем аналогичные цвета, поскольку это цветовая палитра, основанная на одном цвете.Монохромные цвета отлично работают в сочетании с одним дополнительным цветом. На веб-сайте CoSchedule мы используем монохромные синие цвета с оранжевым для контента, который хотим привлечь внимание.
Большинство дизайнеров — при использовании дополнительных цветов — объединяют богатую коллекцию монохроматических цветов с одним дополнительным цветом.
Использование цветов треугольника, прямоугольника и квадрата
Нетрудно создавать цветовые комбинации, которые расширяют границы легкой силы дополнительных противоположностей и связанных с ними аналогичных и монохроматических палитр.Все, что вам нужно, это треугольник, прямоугольник и квадрат.
Треугольник (триада) — это цветовая комбинация, состоящая из трех цветов, которые равномерно распределены по цветовому кругу.
Прямоугольник (четырехугольник) — это цветовая комбинация, состоящая из четырех цветов, которые составлены из двух дополнительных пар.
Квадрат похож на палитру прямоугольника, но два набора дополнительных пар — это цвета, равномерно распределенные по кругу.
Эти три комбинации могут быть визуально шумными, если вы не будете осторожны. Лучшее применение — использовать один цвет в качестве доминирующего, а другие — для выделения содержимого. Комбинация треугольников особенно ярка; три — это «стабильное» число, и использование трех цветов стабилизирует зрение.
Психология цвета в маркетинге
Цвет — важный инструмент, поскольку он влияет на то, как мы думаем и ведем себя. Цвет указывает нашему глазу, куда смотреть, что делать и как что-то интерпретировать.Он помещает контент в контекст. Это помогает нам решить, что важно, а что нет. Именно поэтому вам, как контент-маркетологу, нужно понимать, что цвета значат для людей.
Несмотря на то, что психология цвета изучалась и анализировалась с течением времени, психологическое воздействие цвета все еще является умеренно субъективным.
Мы не все одинаково реагируем на цвета, поскольку у всех нас есть предыдущий опыт использования цветов из важных событий, культур, людей и воспоминаний. Однако есть несколько общих моментов о том, как люди реагируют на цвет, и это то, что мы собираемся рассмотреть.
Психология цвета красного
Красный — очень мощный, динамичный цвет, который отражает наши физические потребности, будь то проявление привязанности и любви или изображение ужаса, страха и выживания. Красный также является очень энергичным цветом, который может изображать дружелюбие и силу, но также может быть требовательным и проявлять агрессию в зависимости от контекста.
В целом, если вы хотите, чтобы ваше присутствие было действительно сильным или быстро привлекло чье-то внимание, красный цвет — ваш лучший выбор.Просто не забывайте использовать его экономно, чтобы избежать крайне негативных реакций, которые он может так легко разбудить.
Красный обычно встречается: Стоп-сигналы, День святого Валентина и фильмы ужасов.
Психология цвета апельсина
Оранжевый имеет очень интересное психологическое значение, поскольку он сочетает в себе силу и энергию красного с дружелюбием и весельем желтого. Смесь делает апельсин хорошим представителем физического комфорта в нашем тепле, пище и убежище.(Это даже стимулирует наш аппетит, так что будьте осторожны, если вы голодны!)
Оранжевый также известен как цвет мотивации, придает позитивный настрой и общий жизненный энтузиазм. В целом, оранжевый отлично подходит для обеспечения комфорта в трудные времена и создания ощущения веселья или свободы в ваших визуальных эффектах.
Апельсин обычно встречается: Фрукты, спортивные мероприятия и настольные игры.
Психология цвета желтого
Желтый — это воплощение радости, счастья, бодрости, оптимизма — что угодно.Все, что нравится, почти всегда желтое. Длина волны желтого особенно велика, что делает его одним из самых сильных психологических значений, а также является самым легким для визуального восприятия цветом. (Знаете ли вы, что желтый цвет является первым цветом, на который реагируют младенцы?)
Когда вам нужно поднять кому-то настроение, повысить его уверенность или вдохновение, используйте желтый цвет. Однако избегайте слишком частого использования желтого, потому что он, как известно, делает нас более критичными, вызывая проблемы с самооценкой, страх или беспокойство.Найдите правильный баланс желтого, который будет мотивировать, а не унижать других.
Часто встречается желтый цвет: Транспортные переходы и знаки, смайлики и витрины.
Психология цвета зеленого
Зеленый — цвет баланса и гармонии. Он дает нам более четкое представление о том, что правильно и что неправильно, поскольку зеленый сочетает в себе баланс как логического, так и эмоционального. Зеленый — один из наиболее часто встречающихся цветов в природе, отражающий жизнь, покой и мир.Это также признак роста, будь то физический объект, такой как растения, или наш доход и богатство.
В целом, если вы хотите изобразить здоровье, отдых и снятие стресса, зеленый — ваш цвет. Хотя у зеленого есть незначительные отрицательные аспекты, такие как чрезмерное владение и материализм, он оказывает более положительное влияние, чем большинство других цветов.
Зеленый цвет обычно встречается: Природа, экономический обмен, магазины товаров для здоровья и рестораны.
Психология цвета синего
Blue известен своим доверием и надежностью.Это надежно, ответственно и душевно успокаивает. Уже по этой причине это один из самых любимых цветов во всем мире.
В отличие от красного, синий дает больше психической реакции, чем физической, что позволяет нам расслабиться, успокоиться и подумать о наиболее идеальной ситуации. К сожалению, это также один из последних цветов, который можно увидеть, и при использовании в больших количествах он может восприниматься как далекий, холодный или недружелюбный.
В целом, синий — любимый цвет, который может дать чувство спокойствия и доверия при построении отношений, особенно в маркетинге.
Синий: Тренировочные центры, больницы и спа.
Психология цвета фиолетового
Пурпурный наиболее известен своим воображением и духовностью. Он обладает энергией и силой красного, а также стабильностью и надежностью синего, что делает его идеальным балансом между физическим и духовным. Фиолетовый часто используется, чтобы показать роскошь, верность, отвагу, загадочность и магию.
Это очень интригующий цвет, он успокаивает, но также дает пространство для тайн и новых идей.Вот почему творчество чаще всего ассоциируется с фиолетовым цветом. При использовании фиолетового не используйте его слишком часто, так как он также может вызвать слишком много самоанализа или отвлечения, поскольку мысли начинают гадать.
Фиолетовый обычно встречается: Волшебные шоу, сказки и предметы роскоши.
Психология цвета розового
Pink — более мягкая, менее насыщенная версия красного, создающая чувство сострадания и безусловной любви. Хотя это очень физический цвет, он скорее успокаивает, чем стимулирует, что делает его идеальным цветом для заботы, понимания и воспитания тех, кто в этом нуждается.
Розовый — знак надежды. Также известно, что он очень романтичен, поскольку показывает сочувствие и чувствительность. Если использовать слишком много розового, он может сильно истощить, показать недостаток мощности и даже незрелость. В целом, розовый может стать отличным противовесом красному при правильном использовании.
Розовый обычно встречается: Больные раком, маленькие детские предметы и товары для ванной.
Психология цвета коричневого
Коричневый, возможно, не самый визуально стимулирующий цвет, но является отличным признаком структуры, безопасности и защиты.Будь то семья, друзья или материальное имущество, коричневый предлагает постоянную поддержку.
Это также очень серьезный, простой цвет, который можно использовать там, где черный может быть слишком интенсивным. Недостаток коричневого заключается в том, что это самый безопасный цвет, который может показаться сдержанным, запланированным и скучным. В целом, используйте его при необходимости, но не слишком сильно от него зависите.
Коричневый обычно встречается: Кемпинги, предметы интерьера и кафе.
Психология цвета золота
Золото имеет несколько разных значений в зависимости от вашей культуры.Однако во всем мире золото неизменно олицетворяет некоторые вариации очарования, уверенности, роскоши и сокровища. В нем также может быть элемент дружелюбия, изобилия и процветания, что естественно привлекательно. Однако слишком много золота может показаться эгоистичным, гордым и самодовольным. Подобно коричневому и черному цветам, старайтесь использовать золото более экономно, чтобы выделить, а не быть главной достопримечательностью.
Золото: Роскошные изделия, кольца и трофеи.
Психология цвета черного
Черный — это цвет изысканности, серьезности, контроля и независимости. Хотя его также можно использовать, чтобы показать зло, тайну, депрессию и даже смерть. Черный — очень сдержанный цвет, в котором полностью отсутствует свет, поскольку отсутствуют все цвета. Ему нравится оставаться скрытым, контролировать и быть отделенным от других. По этой причине черный цвет — отличный цвет, обеспечивающий высокую контрастность и удобочитаемость. К сожалению, поскольку это очень яркий цвет, слишком много черного может вызвать печаль и общий негатив, поэтому используйте его экономно и в тексте чаще, чем сами визуальные эффекты.
Черный обычно встречается: Профессиональная одежда, предметы роскоши и лимузины.
Психология цвета белого
Белый — это полный и чистый цвет, который является прекрасным примером чистоты, невинности, чистоты и покоя. Белый цвет также может обозначать новые начинания, обеспечивать чистый лист и дает освежение для новых идей. Поскольку белый цвет имеет равный баланс всех цветов, он может служить примером нескольких значений, причем равенство перевешивает их все.Белый — отличный цвет для простоты, чистоты и создания идей; однако не используйте слишком много белого, так как это может вызвать изоляцию, одиночество и пустоту.
Обычно встречается белый цвет: Свадьбы, фоны веб-сайтов и залы ожидания врачей.
Другие научные открытия цвета
Яркие цвета
Фабер Биррен, исследователь цвета 20-го века и автор книги Color Psychology And Color Therapy , обнаружил кое-что интересное в общих цветовых группах.
Он обнаружил, что яркий свет и яркие цвета способствуют активности «больших мышц» , а более мягкие и глубокие цвета лучше способствуют умственным и зрительным задачам . Он также обнаружил, что красный стимулирует нашу нервную систему, а синий расслабляет ее. Красный и родственные ему цвета также заставляли людей переоценивать течение времени, в то время как более холодные цвета, такие как зеленый и синий, были наоборот.
Это означает, что:
- Яркие цвета способствуют физической активности, но замедляют течение времени.
- Более холодные и мягкие цвета лучше подходят для умственной деятельности и заставляют время лететь незаметно.
Культурный цвет
Цвет также означает разные вещи в разных культурах. По словам исследователя Джо Хэллока, «эскимосы используют 17 слов для обозначения белого цвета применительно к различным условиям снега, тогда как на северо-западе США их всего 4 или 5».
Каждая культура понимает цвет по-своему. Он играет важную роль в религии, политике, церемониях и искусстве.Культура, в которой живет ваша аудитория, влияет на то, как они понимают более глубокие значения цвета. Даже контекст, в котором вы используете цвет, влияет на значение цвета. Например, в Индии красный цвет означает чистоту, а в США — страсть и особые праздники.
Соединения слов с цветом
В ходе опроса людей просили выбрать цвет, который они ассоциируют с определенными словами.
- Доверие: Большинство выбрали синий цвет (34%), за ним следуют белый (21%) и зеленый (11%)
- Безопасность: Синий вышел на первое место (28%), за ним следуют черный (16%) и зеленый (12%)
- Скорость: Красный был подавляющим фаворитом (76%)
- Дешевизна: На первом месте оранжевый (26%), затем желтый (22%) и коричневый (13%)
- Высокое качество: Черный был явным победителем (43%), затем синий (20%)
- Высокие технологии: Это было разделено почти поровну: черный был лучшим выбором (26%), а синий и серый вторым (оба 23%)
- Надежность: Синий был лучшим выбором (43%), за ним следовал черный (24%)
- Смелость: Большинство выбрали фиолетовый (29%), затем красный (28%) и, наконец, синий (22%)
- Страх / Террор: Первое место заняли красные (41%), затем черные (38%)
- Развлечения: Оранжевый был лучшим выбором (28%), за ним следовал желтый (26%) и затем фиолетовый (17%)
Синий цвет явно нравится людям, но кроме этого мало что можно сказать.
В зависимости от контекста остальной части вашего контента черный может означать высокое качество и доверие или может означать страх и ужас. Он не может сделать это сам по себе, но в окружении вашего контента выбор цвета может на ступеньку поднять ваше предполагаемое значение.
Предпочтительные цвета по полу
Обобщая результаты многих исследований, блог Kissmetrics опубликовал отличную инфографику о том, как мужчины и женщины по-разному реагируют на цвет. У мужчин и женщин разные цветовые предпочтения.
Согласно блогу Kissmetrics и Hallock:
- Синий цвет предпочитают как мужчины (57%), так и женщины (35%), хотя мужчины предпочитают его больше.
- Мужчинам больше всего не нравится коричневый цвет, а женщинам — оранжевый.
- Нелюбимые цвета также считались «дешевыми».
- Мужчины лучше переносят ахроматические цвета (то есть оттенки серого).
- Женщины предпочитали оттенки, а мужчины предпочитали чистые или затемненные цвета.
- Большинство мужчин (56%) и женщин (76%) в целом предпочитали холодные цвета.
- Оранжевый и желтый становятся все менее популярными по мере того, как оба пола становятся старше.
Как правило, женщины видят больше цветов, чем мужчины. Они более осведомлены о небольших различиях в цвете в пределах цветовой гаммы.
Это может объяснить, почему мужчины просто называют цвет синим … синим. Женщины же видят лазурный, небесный, бирюзовый, бирюзовый и все виды синего. Возможно, это сочетание способности визуально видеть больше различий и признания того, что оно достойно более конкретного названия.Возможно, мужчины лучше переносят как бесцветную, так и яркую цветовую палитру, потому что они не так чувствительны к природе и нюансам цвета, как кажется женщинам.
Что это значит для вас?
Ну, ваша аудитория в основном мужчины или женщины? Какого они возраста? Привлекают ли цвета, которые вы используете в своем контент-маркетинге, эту аудиторию или отталкивают? Если ваша аудитория — особенно женщины, вы должны тщательно выбирать цвета, которые не будут слишком хриплыми. Если вы продаете предметы роскоши, вам следует избегать расцветок, которые считаются дешевыми.
Цвета настроения и эмоции (инфографика)
Существует несколько обобщенных представлений о том, что определенные цвета часто означают для большого круга людей, причем каждый цвет имеет связанные с ним отрицательные и положительные эмоции.
Цвет и узнаваемость бренда
То, как люди ведут себя, когда видят цвет, напрямую влияет на ваши конверсии. Они нажмут кнопку на вашем призыве к действию? Будут ли они читать вашу всплывающую картинку? Заметят ли они вашу подписку по электронной почте?
По данным Института исследований цвета, люди оценивают ваш контент за 90 секунд или меньше .И до 90% этого суждения за такой короткий промежуток времени зависит от цветов, которые они видят. Блогер Нил Патель дает дополнительное доказательство того, как цвета влияют на ваш коэффициент конверсии, показывая, что 85% потребителей принимают решение о покупке на цвете, а полноцветная реклама в журналах узнается на 26% чаще, чем простая старая черно-белая реклама.
Фактически, цвет помогает людям узнавать ваш бренд на 80%. Важно тщательно выбирать цвет и придерживаться его.
Когда дело доходит до того, чтобы заставить людей нажать кнопку или зарегистрироваться, вопрос не в том, какой цвет является волшебным и заставляет это происходить постоянно.Это вопрос пассивных и активных цветов, высоких и низких контрастов и противоположностей, как в нашем примере CoSchedule, где оранжевая кнопка выделялась из синего.
И вопрос в том, какой цвет лучше всего подходит для вас.
Тестирование ваших лучших цветов: пример из практики CoSchedule
Сочетание оранжевого и синего цветов — мощное сочетание. Это довольно безопасно в отношении дальтонизма и неоднократно получает положительные оценки людей как комбинацию.
Но достаточно ли просто выбрать отличную комбинацию?
Вовсе нет; вам нужно знать, как использовать эти цвета по отдельности.Давайте посмотрим на CoSchedule и наши рекламные акции в Facebook в качестве примера. За последний год мы создали несколько дизайнов, некоторые с синим фоном, а другие с оранжевым фоном.
Промоакции с оранжевым фоном постоянно повышали вероятность того, что люди нажмут , чем те, у кого синий фон! Хотя это имело смысл. Подумайте о Facebook. Это преимущественно синяя сеть, поэтому наше оранжевое изображение выделялось больше, чем синее.
Это не означает, что вы должны использовать оранжевый цвет.Это означает, что мы протестировали наши два цвета и обнаружили, что оранжевый работает лучше всего.
Это означает, что мы проверили два наших цвета и обнаружили, что оранжевый работает лучше всего. для нас на Facebook. Он может даже отличаться от социальной сети к социальной сети, поэтому убедитесь, что вы проводите собственное тестирование.
То, что работало в Facebook, может отличаться от Twitter. Вам нужно самостоятельно выяснить, совпадает ли ваша красная кнопка с зеленой кнопкой (как обнаружил Hubspot). Цвет остальной части страницы, вашего контента и объектов размещения будет отличать ваши результаты от того, что обнаружил кто-то другой.
Теперь вы эксперт по психологии цвета!
Цвет вообще интересно изучать как с теоретической, так и с психологической точки зрения.
От Ньютона, Гете, Иттена, Геринга, Янга-Гельмгольца, Биррена или Мюллера (да, на протяжении всей истории было много теорий о цвете), скромный цветовой круг рассматривался и пересматривался снова и снова. Цвет влияет на нас, и наше поведение изучается неоднократно.
Когда дело доходит до выбора цвета, вы должны протестировать. Вы не можете знать, как ваша аудитория отреагирует на ваши цвета в вашем контенте и макете, не создав продуманные A / B-тесты, чтобы определить, какие цветовые комбинации и места размещения генерируют наибольшее количество потенциальных клиентов и трафика в вашем контенте.
Более ранний черновик этого сообщения был написан и создан Джули Нейдлингер. Последний раз он был обновлен 29 августа 2018 г., автор: Ashton Hauff .
29 августа 2018
Что такое 3 аналогичных цвета?
ИДЕИ УКРАШЕНИЯ ГОСТИНАЯ ИДЕИ
Одним из важнейших элементов интерьера и декора является выбор цветовой гаммы.Это также одна из самых больших проблем, потому что цвета имеют огромное влияние на создание определенной атмосферы. Мы можем окрасить одну деталь в другой цвет, и все пространство приобретет другой вид.
Сколько раз вас спрашивали, какой ваш любимый цвет — по крайней мере, несколько сотен раз. Но факт в том, что какой бы у нас ни был любимый цвет, мы никогда не будем окружать себя исключительно им. То же самое и с дизайном интерьера — представьте себе пространство, где все в одном цвете, включая вас, которые вошли в него в одежде одного цвета.Видеть? Нет конечно.
Изображения: любящий белый стиль
Цветовая гамма
Базовое расположение цветов начинается с колеса цветов, то есть спектра цветов, соединенных в круг.
Первая круговая диаграмма была разработана Исааком Ньютоном в 1666 году, и с тех пор многие ученые и художники изучили и разработали многочисленные вариации этой концепции.
Цветовой круг — это простой и гениальный инструмент, с помощью которого мы можем создать определенную гармонию, объединив два или более цветов в одно целое.На цветовом круге может отображаться много разных цветов, но самое главное, что они расположены в логической последовательности.
Версия цветового круга, о котором вам следует изучить, — это цветовой круг с 12 цветами. В этой модели мы различаем основные цвета — красный, желтый и синий, которые нельзя получить, смешивая другие цвета. Вторые — это второстепенные цвета — зеленый, оранжевый и фиолетовый, которые получаются путем смешивания основных цветов. Наконец, есть третья цветовая группа, которая получается путем смешивания основных и вторичных цветов.
Помимо выбора цветов, важно также соотношение их применения при адаптации интерьера. Примените правило 60-30-10 для сбалансированного выбора цвета, согласно которому один цвет занимает 60% пространства (стены), другой 30% (например, мебель, полки), а третий должен быть в следах ( декор).
Цветовая температура — Теплые и холодные тона
Мы должны понимать разницу между теплыми цветами — красным, оранжевым и желтым, и холодными — синим, фиолетовым и зеленым.Теплые цвета обычно более энергичны и привносят в пространство ощущение живости и возбуждения. С другой стороны, можно использовать холодные цвета, чтобы успокоить и создать ощущение уюта в комнате. Прежде чем выбрать цветовую температуру, подумайте о размерах комнаты. Использование теплой краски в тесной комнате может вызвать чувство клаустрофобии.
Изображение: идеальный дом
Аналогичный цвет для гармонии и комфорта
Аналоговая цветовая схема означает использование трех цветов подряд из цветового круга.Обычно два цвета будут основными цветами с третьим оттенком, который представляет собой смесь двух цветов и вторичного цвета. Например, вы можете выбрать красный, фиолетовый и синий, оранжевый и желтый или красный. Ключ к успешному использованию этой цветовой схемы — пропорции. Выберите один цвет, который будет доминировать, один для поддержки преобладающего цвета и третий светлый цвет для акцентов.
Вы можете создать аналогичную цветовую схему, используя нейтральные цвета. Обычно это называется монохроматической цветовой схемой. Лучший пример аналоговой цветовой гаммы — аналоговая градация цветов листьев осенью.В искусстве одним из примеров аналогичного расположения красок являются «Подсолнухи» Ван Гога.
Примеры:
- Зеленый (60%), желто-зеленый (30%) и желтый (10%)
- Желто-оранжевый (60%), оранжевый (30%) и красно-оранжевый (10%)
- Фиолетовый (60%) ), красно-пурпурный (30%) и красный (10%)
После того, как вы выбрали цветовую систему для главной комнаты в вашем доме, выберите один цветовой оттенок для размещения по всему дому. Вы всегда можете добавить к основному цвету другие цвета при переходе из одной комнаты в другую.Такой подход сохранит интерьер в вашем доме плавным и целостным, не будучи слишком похожим в каждой комнате.
Дополнительные цвета
Они расположены на противоположных участках по кругу. Обратите внимание на оттенки, потому что каждому оттенку соответствует своя пара. Высокий контраст этих цветов создает энергичный и живой вид помещения, поэтому в одном и том же пространстве не должны преобладать оба дополняющих друг друга цвета.
Гармонические схемы
В этой схеме все цвета гармоничны и не конкурируют между собой.Никакой цвет не требует особого внимания, поэтому преобладающее настроение успокаивает. Есть два основных типа гармонических схем.
Одноцветная схема включает в себя цвет низкой интенсивности, такой как бежевый, светло-серый или белый в ограниченном диапазоне. Это схема, которую часто используют для выставочного пространства, потому что ее спокойствие создает идеальный фон. Любой яркий или бросающийся в глаза объект, представленный в этой схеме, привлечет к себе внимание, прервав монохроматичность, что вы также можете использовать как преимущество, если хотите, чтобы что-то было заметно.
Монохроматическая схема состоит из одного оттенка, но в более широком диапазоне значений и интенсивности, чем монохромная схема. Монохроматическая схема на основе желтого, например, может включать светло-желтый, лимонно-желтый и золотисто-желтый, которые можно использовать по отдельности или в комбинации. Монохромная схема делает все пространство особенным.
Изображение: grace oaks designs
Выберите подходящий цвет для помещения и декора
Краски придают поверхностям и объектам желаемую оптику и ряд других важных свойств, таких как гладкость, структура, прозрачность, блеск, водостойкость, устойчивость к атмосферным условиям, устойчивость к ультрафиолетовому излучению, прочность, эластичность, устойчивость к грибку, легкость очистки, светостойкость и яркость.
Как правило, следует проявлять осторожность при планировании всех желаемых характеристик, но не переборщить. Каждая дополнительная характеристика достигается дополнительным цветовым наполнением, что в конечном итоге может иметь негативные последствия для здоровья.
И, наконец, нужно помнить: цвета оживляют наш дом, но слишком большое количество несовпадающих цветов может привести к насыщенному цвету, а слишком маленькому — к стерильному интерьеру. Вот почему важно знать, какие цветовые сочетания использовать и в каких пропорциях для достижения баланса и комфорта в доме.
Связанные3 Основные принципы теории цвета для дизайнеров
Теория цвета имеет реальную практическую ценность для дизайнеров, — объясняет автор «Игра с цветом» Ричард Мель. Принципы традиционной теории цвета аналогичны другим принципам дизайна, которые мы используем каждый день — это творческие инструменты, которые можно использовать для решения визуальных проблем. Различные цветовые комбинации предлагают зрителю разные впечатления и визуальные контрасты, что делает его важным компонентом как графического дизайна, так и дизайна интерьера.
В визуальной коммуникации цветовая палитра или цветовая схема — это набор цветов, которые работают вместе в «цветовой гармонии», чтобы выразить идею — громкий, тихий, легкий, тяжелый, теплый, холодный, традиционный, авангардный и т. Д. Большинство цветовых палитр, используемых в проектах графического дизайна, таких как брендинг, построены на основе базового цвета, иногда называемого «основным цветом». Цвет героя обычно поддерживается двумя или более цветами. Некоторые бренды используют два главных цвета. При выборе этих важных цветов очень важно понимать, что одни цвета сочетаются друг с другом лучше, чем другие.
1. Выбор цвета: выбор цвета героя
Выбор цвета героя часто является самой простой частью создания цветовой палитры. Цвет героя обычно ассоциируется с знакомой идеей. Например, мы ассоциируем сине-зеленые цвета с прохладными температурами, желто-оранжевый — с теплотой, красный — со страстью, желто-зеленый — с ростом. Холодные цвета, такие как синий, могут олицетворять спокойствие, безмятежность и умиротворение. К выражению можно добавить нюансы, отрегулировав яркость, температуру или насыщенность основного цвета — все формы цветового контраста.
Настройтесь на крупнейшее фотошоп-событие года! Присоединяйтесь к CreativeLive на Неделе Photoshop 2019, 12–14 июня, чтобы узнать, как создавать фотографии профессионального качества и полностью раскрыть свой творческий потенциал. Учить больше.
2. Выбор цветовых комбинаций
Вспомогательные цвета работают с основным цветом, чтобы выразить или дополнить идею. Выбрать вспомогательные цвета не всегда так просто, как выбрать цвет героя. Полезно знать основы теории цвета, особенно теории цветового контраста.Допустим, у нашего героя красный цвет. Если мы хотим, чтобы наша цветовая палитра выражала единство, мы можем сделать вспомогательные цвета аналогичными красному. Палитра аналогичных цветов почти всегда выражает единство, потому что контраст минимален. Еще один способ выразить единство — использовать монохромные цвета — набор цветов, основанных на одном оттенке, но различающихся по яркости и темноте.
3. Понимание основных цветовых отношений
Основные цвета и их родственники, вторичные цвета, представляют собой цветовые системы, определяемые экстремальным контрастом, и они образуют отличные цветовые палитры.Мы можем построить цветовую палитру вокруг первичного или вторичного цвета (или третичных цветов, которые получаются путем смешивания первичных цветов со вторичными цветами), которые выражают разницу. Например, если красный — наш главный цвет, и мы выбираем другие основные цвета — желтый и синий — в качестве вспомогательных цветов, палитра будет выражать крайний контраст и действительно выделяться. Легкость желтого и прохладная и относительная темнота синего делают ощущение этих оттенков совершенно отличным от ощущения красного.
Чрезвычайный контраст также может быть выражен с помощью дополнительных цветов или дополнительной цветовой схемы. Красный и зеленый, синий и оранжевый, желтый и фиолетовый — все противоположны на цветовом круге сэра Исаака Ньютона, и поэтому они представляют собой величайшее различие в оттенках — высшую форму цветового контраста. Пока я пишу это, я смотрю, как New York Mets играет в Мировой серии. Их фирменные цвета — синий и оранжевый, и, как писал известный теоретик цвета Йоханнес Иттен, они «… побуждают друг друга к максимальной яркости.