Подбор цветовой схемы: 18 полезных ресурсов для работы с цветом

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

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

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

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

4. Сосредоточьтесь на монохромных цветах одного оттенка.

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

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

Обратите внимание на все монохромные цвета, которые подпадают под красный оттенок, основной цвет.

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

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

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

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

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

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

6. Создайте разделенную дополнительную цветовую схему.

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

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

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

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

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

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

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

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

7. Не ограничивайтесь предустановками, но начните с одного цвета.

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

• Не придерживайтесь предустановок. Почти каждая программа, которую вы используете, автоматически предоставит вам предустановленные цвета. Избавьтесь от предустановок и исследуйте цвет самостоятельно.Не позволяйте программе решать, как вы используете цвет в своем дизайне.
• Начните с одного цвета, который вам нравится. Каждый раз, когда я что-то создаю, я начинаю с одного цвета и на его основе строю цветовую схему. Если вы попытаетесь начать с нескольких цветов, вам будет труднее найти гармонию между вашими цветами.
• Сохраните свои цветовые схемы. Если вы найдете цвет (или цветовую схему), который вам понравится, возможно, он вам пригодится позже. Я бы не предлагал использовать одну и ту же цветовую схему для каждой диаграммы или рисунка, которые вы создаете, но вы всегда можете использовать разные схемы по-разному позже.
• Практика ведет к совершенству. Чем больше вы играете с цветом и практикуете дизайн, тем лучше у вас получается. Никто не создает свой шедевр с первого раза.

Инструменты цвета

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

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

Adobe Color

Один из моих любимых цветных инструментов, которые я использую при разработке чего-либо — будь то инфографика или просто круговая диаграмма — это Adobe Color (ранее Adobe Kuler).

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

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

Руководство по цветам Illustrator

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

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

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

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

Руководства по предустановленным цветам

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

Расположение цветовых схем в PowerPoint будет зависеть от того, какую версию вы используете, но как только вы найдете цветовые «темы» своего документа, вы можете открыть настройки и найти коды RGB и HEX для используемых цветов.

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

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

Примечание редактора: этот пост был первоначально опубликован в октябре 2018 года и был обновлен для полноты.

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

Выберите цвет, любой цвет

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

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

Украшать от темного к светлому, вертикально

Настоящий «поваренный» способ сделать любое пространство красивым без особого риска, говорит дизайнер Марк МакКоли, — это использовать более темные значения цвета для пола, средние значения цвета для стен и значения света для потолка.«Любое внутреннее пространство копирует внешний мир», — говорит он. «Внешняя среда, как правило, темнее под нашими ногами (сама земля), имеет среднюю ценность, если смотреть прямо перед собой (здания / деревья), и светлее в небе».

Начните с формальных помещений дома

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

Используйте цветовое колесо

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

Ориентируйтесь на свою одежду

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

Назад к черному

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

Идти с серыми

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

Используйте правило 60-30-10

«При оформлении пространства разделите цвета на составляющие: 60 процентов доминирующего цвета (стены), 30 процентов второстепенного цвета (обивка) и 10 процентов акцентного цвета (аксессуары)», — советует дизайнер Марк МакКоли. «Работает каждый раз!» он говорит. «Это соотношение гарантирует, что цвета будут правильно сбалансированы, а поп-музыки будет достаточно для интереса».

Сделайте небольшие пространства популярными

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

Контраст теплого и холодного

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

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

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

Создайте монохромный образ

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

Следуйте правилу трех

Продемонстрируйте свой личный стиль

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

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

Раскрась свой мир, смело

Большинство из нас понимают основы цветового круга: от основных и вторичных цветов до того, как определенные цветовые комбинации работают вместе.Однако то, как вы интерпретируете цветовое колесо, может быть намного больше, чем просто умение смешивать и смешивать красный, желтый, синий, оранжевый, фиолетовый и зеленый. Знание различных цветовых схем помогает расширить наши знания о цвете. И это важно для творческих людей, таких как художники и дизайнеры. Ниже художница Патти Моллика описывает некоторые из наиболее распространенных цветовых схем. Она также быстро демонстрирует, как разные цветовые схемы влияют на одну и ту же композицию, из ее новой книги How to Paint Fast Loose and Bold . Наслаждайтесь!

Гармонические цветовые схемы

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

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

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

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

Общие цветовые комбинации

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

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

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

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

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

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

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

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

Разработка цветовой схемы

Давайте исследуем способ создания цветовой схемы.

1. Начните с фото ссылки

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

2. Создайте трехзначный эскиз

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

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

3. Выберите цветовую схему с доминирующими и второстепенными цветами

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

1. Аналог: Зеленый и синий
2. Дополняющий: Красный и зеленый
3. Триада: Основные цвета — красный, желтый и синий
4. Аналогичный Дополняющий: Синий и фиолетовый, желтый и оранжевый

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

Хотите более смелые картины?

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

Лучшие цветовые палитры веб-сайтов для повышения вовлеченности (2020)

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

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

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

Хороший выбор цвета требует тщательного планирования.

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

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

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

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

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

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

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

Вот как:

1. Обеспечение узнаваемости бренда

Ваш сайт — это, по сути, дом вашей компании в Интернете.

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

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

К счастью, цвет повышает узнаваемость бренда на 80%.

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

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

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

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

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

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

2. Сформируйте отношение посетителей к вашему сайту

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

В определенной степени причина этого ясна.

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

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

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

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

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

В одном исследовании личности бренда психолог и профессор Стэнфордского университета Дженнифер Аакер пришла к выводу, что пять основных параметров играют роль в индивидуальности бренда:

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

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

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

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

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

На самом деле 57% мужчин и 35% женщин считают, что это их любимый цвет.

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

Также стоит отметить, что синий цвет также часто ассоциируется с чувством доверия, авторитета и надежности.

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

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

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

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

3. Развивайте чувство порядка

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

Лучший способ сделать это — изучить несколько основных принципов теории цвета.

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

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

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

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

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

При этом аналогичные цветовые схемы также являются одними из самых ярких.

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

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

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

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

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

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

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

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

Триадная цветовая схема — один из основных вариантов.

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

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

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

4.Выделение определенных элементов

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

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

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

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

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

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

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

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

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

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

5. Упростите конструкторские решения

Когда дело доходит до ведения веб-сайта или бизнеса (или того и другого!), Всегда полезно искать способы упростить основные процессы.

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

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

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

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

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

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

Сколько цветов нужно добавить?

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

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

Как выбрать цветовую схему веб-сайта

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

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

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

16 отличных цветовых палитр для повышения вовлеченности веб-сайтов (2020)

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

1. Mea Cuppa

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

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

2. Большая вершина

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

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

3.Глаз Тори

Наш третий пример взят из инструмента визуализации Twitter Tori’s Eye. Это отличный пример преимущественно монохромной цветовой схемы. Здесь мы видим эффекты простой, но мощной цветовой палитры, сосредоточенной вокруг оттенков зеленого.

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

4. BarkBox

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

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

5. Набор для выживания с сыром

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

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

6. Северный рубин

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

7. Озеро Нона

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

8. LemonStand

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

9. Монетный двор

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

10.

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

11. Fiverr

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

12. Школа цифровой фотографии

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

13. Ahrefs

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

14. Millo.co

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

15.Брайан Гарднер

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

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

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

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

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

Во-первых, нужно ли вам вдохновение?

1: BrandColors

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

Ищете готовую палитру?

2: ColourLovers

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

(с причудливыми названиями.)

3: ColoRotate

ColoRotate поставляется с библиотекой цветовых схем, которые вы можете просматривать, выбирать и изменять.Если вы хотите создать свой собственный с нуля, вы можете это сделать с помощью инструмента 3D-цвета. И вы можете использовать созданную вами схему прямо в PhotoShop или Fireworks с помощью плагина ColorRotate и приложения для iPad.

Соответствие вашему бренду

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

4: Охотник за цветом

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

5: Прекрасный

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

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

6: Цветовое колесо Adobe Color CC

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

7: Палетон

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

8: Color Spire

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

9: Цветовая сфера MudCube

(Источник: http://htmlcolorcodes.com/resources/best-color-palette-generators/)

Color Sphere от MudCube — это плагин Chrome, который помогает гармонизировать цвета, контролировать дальтонизм и определять шестнадцатеричные коды. Вы также можете экспортировать цветовые схемы прямо в Illustrator, PhotoShop и CoIRD.com.

10: Сплошные цвета

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

11: Генератор шестнадцатеричных цветовых схем

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

Создайте свои цвета

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

12: Цветное приложение

Этот инструмент iOS позволяет принимать точные решения между схожими цветами, четко распределяя их с некоторым промежутком между ними, а не градиентами, как в цветовых кругах и сферах. Большие цветные сетки позволяют использовать весь экран (пользователи iPad Pro, радуйтесь!), А также позволяют выбирать цвета, находить значения RGB, Hex и HSLA и создавать цветовые палитры с нуля.

13: Цвет

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

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

Получить коды для цвета

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

14: SpyColor

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

15: Цветовые коды HTML

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

Проверьте свою палитру

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

16: Проверь мои цвета

Check my Colors позволяет вам проверить цвета переднего плана и фона вашей цветовой палитры, чтобы убедиться, что они обеспечивают достаточный контраст для тех, кто испытывает дефицит цвета. Если вы хотите защитить свой сайт от дальтонизма или просто получить наиболее эффективные и интуитивно понятные цветовые комбинации с точки зрения UX, этот инструмент неоценим.Введите URL-адрес, и он выдаст отчет:

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

Соответствующие изображения

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

17: TinEye

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

18: Дизайн

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

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

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

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

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

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

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

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

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

Вы не узнаете, пока не протестируете.

Начните использовать Crazy Egg

Создайте бесплатную учетную запись Crazy Egg, чтобы начать бесплатную пробную версию, или войдите в систему, чтобы настроить отчеты о поведении пользователей.

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

Заключение

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

Начни с того, что тебе нравится. Попробуйте выбрать палитру, которая отличается от других в вашей нише, чтобы выделиться. Тогда начните тестирование.

Изменить цвета на сайте очень просто. Если вы знаете HTML, вы можете вручную изменять HEX-коды в файлах темы. Многие темы WordPress также поставляются с настройщиками, которые позволяют изменять цвета, не зная кода.

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

Дэвид Чжэн — выпускник и бывший сотрудник The Daily Egg.

12 основных советов по выбору цветовой схемы веб-сайта

Знаете ли вы, что 85 процентов покупателей принимают решение о покупке товара на цвете?

Это правда.

Сначала я обнаружил, что этот показатель просто потрясающий.

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

Визуальные стимулы направляют почти все, что мы делаем.

Так почему же все должно быть иначе, когда дело доходит до покупки?

И только подумайте о некоторых из крупнейших мировых брендов.

Большинство из них, как правило, имеют четкую цветовую схему, связанную с их фирменным стилем.

Для Макдональдс это красно-желтый.

Для Dell он синий.

И так далее.

Как мы все знаем, создание прочной торговой марки жизненно важно.

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

А что является неотъемлемой частью бренда?

Его логотип.

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

Согласно исследованию, «Цвет увеличивает узнаваемость бренда на 80 процентов.”

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

Есть еще кое-что, о чем нужно помнить. Цвет бренда коррелирует со значением бренда .

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

Ценные бренды заботятся о цвете . Много!

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

Взгляните на эти примеры с сайта TheLogoFactory.com

Вы можете мгновенно обнаружить искусственные логотипы, и вы почувствуете что-то другое, окружающее этот бренд!

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

Вы не хотите выбирать цветовую схему наугад или основывать ее на том, «что вам нравится».

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

Почему?

«Люди подсознательно судят об окружающей среде или продукте в течение 90 секунд после первого просмотра. От 62 до 90 процентов этой оценки основано только на цвете ».

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

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

Первое, что я рекомендую, — это ознакомиться с тем, как цвет влияет на человека на эмоциональном уровне.

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

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

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

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

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

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

С кем вы пытаетесь связаться и продать?

Какие эмоции вы пытаетесь вызвать?

Это чрезвычайно важные вопросы, которые стоит задать себе.

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

Учитывайте личность и эмоции вашей целевой аудитории.

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

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

3. Учитывать пол

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

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

Исследование, проведенное на основе Color Assignments Джо Хэллока, показало, что в среднем каждый пол имеет определенные цветовые предпочтения.

Вот что я имею в виду.

Как видите, мужчинам очень нравится синий и не нравится коричневый и фиолетовый.

Женщины любят синий и фиолетовый и не любят коричневый и оранжевый.

Это еще один фактор, о котором следует помнить.

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

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

Согласно исследованию Джо Хэллока, это правда.

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

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

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

Если вам нужна небольшая помощь в выборе основного цвета, вы можете пройти этот тест от Grasshopper.

Он спросит вас, например, «что лучше всего описывает ваших клиентов» и «какой тип продукта вы предлагаете».

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

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

И это на основании их личных предпочтений, а не психологии.

Если ваш любимый цвет — синий, очень заманчиво сделать синий своим основным цветом.

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

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

Итак, на этом этапе вы должны иметь в виду основной цвет.

Теперь пора выяснить, сколько всего цветов вы хотите использовать.

Хотя для этого не существует универсальной формулы, я хотел бы указать на то, что называется правилом 60-30-10.

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

Вот как все это ломается.

• 60 процентов доминирующего цвета
• 30 процентов вторичного цвета
• 10 процентов акцентного цвета

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

Если вам нужен пример правила 60-30-10, не ищите ничего, кроме Quick Sprout.

Обратите внимание на то, что зеленый является основным цветом, белый — второстепенным, а черный — основным.

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

Три.

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

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

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

Я не эксперт в области дизайна, но вы обязательно захотите добиться контраста.

Лично я предпочитаю сайты со светлым фоном и более темными контрастами на переднем плане.

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

Вот хороший пример.

Однако есть сайты, которые неплохо справляются с темным фоном.

Возьмем, к примеру, «Чудо-хлеб».

Помните, в классе рисования вы узнали о «цветовом круге»?

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

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

Вот о чем я.

Один из возможных вариантов дополнительных цветов — желтый и фиолетовый.

Другой будет зелено-оранжевым.

Один из вариантов аналогичных цветов — оранжевый и красный.

Другой будет зелено-синим.

Вот совет по оптимизации процесса.

Используйте такой инструмент, как Colorspire.

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

Это поможет вам сэкономить много времени и поможет подобрать подходящую цветовую комбинацию.

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

Вы также можете многому научиться у конкурентов в вашей отрасли.

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

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

Оттуда у вас есть один из двух вариантов.

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

Я лично сторонник второго варианта, если вы хотите создать отличительный бренд.

Вот в чем дело.

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

На самом деле, это может быть очень ограничивающим фактором.

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

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

Затем сузьте круг, пока не найдете цветовую схему, соответствующую вашему бренду, на T.

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

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

Вы также захотите получить базовое представление о правиле 60-30-10 и о том, как работает цветовое колесо.

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

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

Все это может иметь огромное влияние на ваш бизнес.

Какие факторы вы принимаете во внимание при выборе цветовой схемы?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Как выбрать правильную цветовую палитру для вашего дома

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

mikehutch50 / Twenty20

Начните с работы с цветовым кругом.Есть первичные, вторичные и третичные цвета.

Мгновенно получайте скидки на предметы интерьера!

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

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

Photographee.eu/ Shutterstock

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

1. Монохроматический. В монохромной цветовой схеме используется тон в тон одного цвета с добавлением белого или черного для осветления или затемнения цвета. Например, в этой схеме синий может стать бледно-голубым или темно-синим, и для создания этого эффекта используются все три оттенка одного оттенка.
2. Аналог. В аналогичной схеме используются цвета, которые появляются рядом друг с другом на цветовом круге. Например, желтый будет использоваться с зеленым или оранжевым, или синий будет использоваться с зеленым или фиолетовым. Это создает красочную и часто успокаивающую палитру.
3. Контраст. Контрастная схема более драматична. Здесь используется триада контрастных цветов: желто-оранжевый, зелено-синий и красно-фиолетовый. Это привнесет больше цвета и энергии в палитру вашего дома.
4. Дополнительный. Наконец, у нас есть дополнительная схема, в которой два противоположных цвета, такие как синий и оранжевый, используются вместе для создания драматической, смелой и высокоэнергетической цветовой схемы.

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

Photographee.eu/ Shutterstock

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

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

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

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

kane251 / Twenty20

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

Корневамаха / Твенти20

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