Схемы сочетания цветов: Цветовой круг, как достичь гармоничного сочетания цветов.

Цветовой круг Иттена: гармоничные сочетания цветов

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

1. Если провести через центр круга прямую линию, получится комплементарное сочетание — оно максимально контрастное.

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

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

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

Контрастная триада получается при наложении равнобедренного треугольника на круг

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

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

Это сочетание смотрится более пёстрым, чем контрастная триада

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

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

Вот пример одного из таких сочетаний

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

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

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

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

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

Такая схема даёт много вариантов сочетаний.

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

Цветовой круг и схемы гармоничного сочетания цветов. Блог для начинающих фотографов

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

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

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

Цвета второго порядка: оранжевый, фиолетовый, зеленый (получены при смешение основных: синий + красный = фиолетовый, желтый + красный = оранжевый, синий + желтый = зеленый)

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

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

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

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

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

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

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

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

Теория цвета для фотографа: цветовой круг и гармоничные сочетания цветов | «Fotoаз»

Цветовой круг

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

Со школы всем нам известна поговорка, помогающая запомнить 7 цветов из цветового спектра:: «Каждый Охотник Желает Знать Где Сидит Фазан». Т.е. все мы помним, что световой луч через призму преломляется на 7  спектральных цветов: красный, оранжевый, жёлтый, зелёный, голубой, синий и фиолетовый. В художественной среде эти цвета представлены в виде хроматического (то есть цветного) цветового круга. Итак, давайте разберём этот самый цветовой круг и с чем его едят.

Все цвета образуются на основе всего 3х основных цветов — красного, синего и желтого. 

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

А если основные и составные цвета смешать в равной степени, то мы получим  третичные цвета.

 

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

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

Другими словами, такое разбавление хроматических цветов ахроматическими называется «цветовая растяжка», которая и даёт нам вот такой цветовой круг на основе всё тех же 12 цветов, но с множеством тонов и оттенков.

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

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

следующие. 

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

Монохромное (одноцветное) сочетание

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

Аналогичное сочетание цветов — сочетание трёх соседних цветов в цветовом круге (на фотопримере — желтого, оранжево-желтого и оранжевого).

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

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

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

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

Теория цвета и применение фотографом на практике

Что же следует из всей этой цветовой теории и как всё это применять на практике фотографу?

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

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

Для анализа цветов и подбора гармоничных сочетаний в Фотошопе есть очень удобный инструмент — Кулер. Он был доступен онлайн на сайте Adobe, а в версии Photoshop CS6 он встроен в сам редактор (Окно-Расширение-Кулер). Кулер являет собой цветовой круг, который вы можете крутить, как вам заблагорассудится, выбирая цветовые схемы и получая палитру гармоничных цветов. Очень удобно анализировать фотографию и тут же рядышком крутить параметры цветового круга, изменяя оттенки, яркость и насыщенность цветов. Из полученной палитры можно копировать номер цвета прямо в палитру фотошопа, используя это при цветокоррекции, например, инструментов «Карта градиента» или «рисованием» кисточкой в режиме «Мягкий свет».

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

Кому интересно больше узнать о том, как работать с цветокоррекцией и тонированием фотографий на практике, добро пожаловать в нашу фотошколу на наш курс «Фотошоп от А до Я для фотографа» или Индивидуальные авторские уроки онлайн по обработке фотографий.

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

что это такое, основные цвета, комплементарные, правила сочетания и комбинации, палитры, схемы, онлайн-сервисы

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

Круг Иттена

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

Применение цветового круга Иттена учит гармонично сочетать различные цвета. Он состоит из трех частей:

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

На основе круга Иттена были созданы другие цветовые схемы. Круг условно разделяют на 2 части:

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

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

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

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

Триада — сочетание 3 цветов

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

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

Аналогичное сочетание

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

Тетрада — сочетание 4 цветов

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

Квадрат

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

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

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

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

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

Прямоугольная схема

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

Шестиугольная схема

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

Вариации цветовых сочетаний

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

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

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

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

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

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

Популярные онлайн-приложения:

• Canva;
• ColorScheme;
• BrandColors;
• AdobeCuler;
• Paletton;
• Color Palette Generator.

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

Литература

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

Иоханнес Иттен «Искусство цвета»

Книга художника Йоханнеса Иттена дает все основные понятия и тонкости цветовой гаммы. Автор разъясняет, что такое цвет, какова его физическая основа. Далее идет описание основных цветов спектра и их сочетание.

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

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

Сьюзан Уэйншенк «100 главных принципов дизайна»

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

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

Сочетание цветов в интерьере

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

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

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

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

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

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

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

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

Цветовой круг. Теория на практике

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

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

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

Цвета цветового круга

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

А разворот уже будет содержать информацию о взаимодействии оттенков в цветовом шаре: от пастельных тонов до темных.

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

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

Круг цветовых сочетаний

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

Круг цветовых сочетаний имеет набор цветовых схем.

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

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

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

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

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

Существует 4 варианта четырехцветного сочетания по цветовому кругу:

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

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

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

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

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

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

Читайте дальше: по каким еще принципам строятся комбинации цвета?

ПОЛЕЗНЫЕ СТАТЬИ НА ЭТУ ТЕМУ (нажать на картинку)

Оставить комментарий

(только на русском языке)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe Color CC

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

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

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

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

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

Material Design

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

Colorzilla

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

Coolors.co

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

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

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

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

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

NoCoffee Vision Simulator для Chrome

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

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

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

Цветовой круг и цветовые сочетания

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

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

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

1. Главный цвет (или основной) доминирует и задает основной тон всей странице.
2. Вторичный цвет дополняет основной цвет. Обычно вторичный цвет достаточно близок к основному.
3. Цвет выделения применяется для привлечения внимания зрителя к определенным областям. Для этой цели используют дополняющий, либо дополняюще-совмещенный цвет (см. ниже.). Обычно этот цвет контрастирует с основным или вторичным цветом. Он должен использоваться в умеренных количествах.

Цветовой круг – деление

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

Цветовой круг

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

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

Монохром

Монохроматическим сочетанием принято считать комбинацию оттенков одного цвета – от светлых до темных тонов. Объединяя в образе монохромные цвета получается удивительный эффект – total look.

Монохром в цвете

Total look

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

Ахроматические цвета

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

Ахроматический цвет — черный

Ахроматический цвет — белый

Ахроматические оттенки — серый

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

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

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

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

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

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

Триада (классическая, контрастная)

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

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

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

Тетрада

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

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

Типы цветовых сочетаний

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

Монохромные цвета (mono)

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

Соседние (аналоговые) цвета (analogic)

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

Дополняющие (противосторонние) цвета (complement)

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

Дополняющие совмещенные цвета (triad)

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

Парная четверка

К паре дополняющих цветов добавляется пара аналоговых.

Акцентирование аналоговых цветов

Четверка состоит из основного цвета, пары его аналоговых и дополняющего акцента.

Схемы сочетания цветов на цветовом круге

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

Монохромное – сочетание разных оттенков одного цвета.

Аналогичное – сочетание от 2 до 5 оттенков из трех рядом расположенных секторов.

Комплиментарное – сочетание основного и противоположного ему цвета.

Сплит-комплиментарное – сочетание основного и пары противоположных ему цветов.

Триада – сочетание 3-х цветов, равноудаленных друг по отношению другу.

Тетрада – две пары секторов, расположенных напротив.

Квадрат – четыре равноудаленных сектора.

круг — сочетания цветов

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

Ищите готовые цветовые схемы на сайтах:

• ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
• COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
• Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
• Flat UI Colors — отличный набор цветов для UI, один из самых популярных
• Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
• Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
• Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Как подбирать палитры для визуализации данных

Цветовая палитра осени

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

Все оттенки делятся на теплые и холодные. При этом один и тот же цвет может быть, как теплым, так и холодным. Теплым его делает смешение с желтым, а холодным – с синим.

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

Основные цветовые колеса

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

Первое цветовое колесо Ньютона включает 12 цветов спектра. Они разделяются на 3 категории:

Цвета основные: красный цвет, желтый и синий цвета;

Цвета вторичные: оранжевый (апельсиновый) цвет, зеленый и фиолетовый цвета;

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

Цвета третичные. Третичные цвета включают в себя основные и вторичные цвета.

Например,

• красно-оранжевый,
• желто-оранжевый,
• желто-зеленый,
• красно-фиолетовый,
• сине-зеленый,
• сине-фиолетовый.

Триады

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

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

Смелость триадной схемы делает её идеальным выбором для комнаты малыша

Тетрада — сочетание четырех цветов

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

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

1) Зеленый, синий, красный, оранжевый.

Фото: janemichaelekanem.com

2) Красно-фиолетовый, красно-оранжевый, сине-зеленый, желто-зеленый.

Фото: bosidolot.com

3) Оранжевый, желтый, синий, фиолетовый.

Фото: topsimages.com

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

https://paletton.com/

Другие статьи раздела : Цвет в интерьере и Психология цвета

• Выбор цвета кровати
• Подготовка потолка к покраске: все этапы работ
• Синий цвет в интерьере дома: влияние синего цвета на человека
• Коричневый цвет в интерьере дома
• Дефекты покраски потолка и стен: причины и исправление
• Голубой цвет в интерьере
• Как покрасить потолок без дефектов

Цвет и работоспособность. Значение цвета в интерьере дома. Подбор цвета своими руками

Похожие записи

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

Цветовое колесо эмоций

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

Итог

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

Палитра

— Дизайнер цветовых схем

Влюблен в цвета с 2002 года.

1. Приложение Paletton
2. Colorpedia
3. О компании Paletton
4. О компании Paletton

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

Этот инструмент палитры использует различные цветовые модели для объединения смежных цветов и / или дополнительных цветов к основному оттенку. Выбирайте модели от монохромных до трехцветных или четырехцветных наборов цветов, с дополнением или без него (противоположный оттенок), наслаждайтесь даже режимом свободного стиля.Поиграйте с яркостью и насыщенностью палитры, выберите из предустановленных предустановок или создайте случайные палитры. Уникальный фильтр имитации зрения имитирует палитру, которую видят люди с различной слабостью зрения, дальтонизмом, различными вариантами дальтонизма (протанопия, дейтеранопия, тританопия, протаномалия, дейтераномалия, тританомалия, дисхроматопсия или ахроматопсия), а также несколько гамма-симуляций (симуляция слишком яркого дисплея или слишком темной печати), обесцвечивания, преобразования оттенков серого или веб-цветов (устаревшая 216-цветная палитра).Палитру можно экспортировать во множество различных форматов (HTML, CSS, LESS, XML, текст, изображение PNG, палитра образцов Photoshop ACO или формат палитры GIMP GPL) для раскрашивания ваших работ. Проверьте цветовой контраст всех цветовых пар, используемых в палитре, и проверьте, соответствует ли цветовой контраст требованиям WCAG. Подробнее о цветах в Colorpedia.

Paletton является преемником предыдущего приложения Color Scheme Designer 3, которым с 2009 года пользуются почти 20 миллионов посетителей (в то время как первая версия была опубликована в 2002 году), как профессиональных дизайнеров, так и любителей, интересующихся дизайном, дизайном мобильных или настольных приложений или веб-дизайном. дизайн интерьера, мода или обустройство дома и переделки.Полная история Paletton в Colorpedia.

Javascript не обнаружен. Для этого приложения требуется Javascript.

Как выбрать эстетическую цветовую палитру [2021]

Глава 6

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

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

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

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

Какие цветовые схемы у веб-сайта?

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

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

Источник: Томми Хилфигер

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

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

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

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

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

Вот некоторые типичные сочетания цветовой схемы веб-сайта: ваш основной цвет + белый + серый, желтый + зеленый + коричневый, зеленый + синий, красный + желтый + синий и т. Д.

Где использовать цветовые схемы вашего сайта?

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

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

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

Основной цвет на вашем сайте

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

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

Источник: Home24

• Логотип.
• Заголовок и заголовки.
• Призыв к действию.
• Заголовок.
• Выделите поле с важной информацией.
• Гиперссылки.
• Иконы.
• Графики.

Дополнительные / акцентные цвета на вашем сайте

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

Источник: Carhartt

• Субтитры и подзаголовки.
• Призыв к действию.
• Выделите поле вторичной информации.
• Нижний колонтитул.
• Иконы.
• Графики.

Цвета кнопок призыва к действию, которые конвертируют

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

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

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

Источник: Ронкато

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

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

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

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

Важное примечание:

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

Лучшие и худшие цвета CTA

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

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

Источник: Джек и Джонс

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

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

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

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

Источник: Том Форд

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

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

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

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

Подсказка:

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

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

Как выбрать цвета кнопки CTA для конвертации?

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

Ознакомьтесь с этими важными советами по выбору цвета кнопок CTA:

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

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

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

2. Подберите цвет к вашему бренду

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

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

3. Стратегически добавьте пустое пространство

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

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

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

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

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

4. Используйте дополнительные кнопки CTA

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

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

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

Другая тактика, которая обычно работает хорошо, — сделать текст вторичного или приглушенного CTA неудобным, например «Да, я хочу больше X, пожалуйста» (основной CTA) или «Нет, у меня достаточно X» (приглушенный CTA).

Большинству людей никогда не бывает достаточно X, если то, что вы предлагаете, разумно.Таким образом, очевидным щелчком будет вариант «Да».

5. Не забывайте учитывать размер кнопок CTA

.

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

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

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

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

Важное примечание:

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

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

Отслеживание и мониторинг поведения пользователей с помощью цветовых схем веб-сайта

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

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

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

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

Важность понимания поведения пользователей на веб-сайте

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

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

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

Что такое Lucky Orange
от Lucky Orange

Действительно, вы можете использовать такие инструменты, как Lucky Orange, которые сделают вашу жизнь намного проще. Он предлагает такие функции, как записи посетителей, тепловые карты, чат, опросы посетителей, информационные панели и т. Д. По довольно разумной цене.

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

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

Запись сеанса

Источник: Hotjar

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

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

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

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

Тепловая карта

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

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

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

Оптимизация коэффициента конверсии с учетом поведения пользователя

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

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

Что такое оптимизация коэффициента конверсии (CRO) в цифровом маркетинге?
by Fountain

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

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

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

A / B тест цветов кнопок CTA

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

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

A / B тест размеров кнопок CTA

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

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

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

A / B тест ваших изображений

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

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

Размер изображения, качество, количество изображений и т. Д. — вот аспекты, на которые вы должны обратить внимание. Следовательно, A / B-тестирование с вашими изображениями намного сложнее, чем с CTA.

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

A / B-тест ваших ссылок на места, по которым люди нажимают

Что такое A / B-тестирование и как его использовать
by GrowthLab

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

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

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

Итак, вам нужно будет следить за тем, как люди взаимодействуют с вашими ссылками. А затем A / B-тест для внесения необходимых изменений. Таким образом, ваш сайт, несомненно, получит больше кликов.

Как улучшить пользовательский опыт с помощью цветовых схем веб-сайта?

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

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

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

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

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

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

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

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

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

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

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

Использовать пробел; это твой лучший союзник

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

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

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

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

Проверьте читаемость своего сайта

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

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

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

Будьте осторожны с цветами ваших гиперссылок

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

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

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

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

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

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

Выделите кнопку с призывом к действию

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

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

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

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

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

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

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

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

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

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

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

Вот список хорошо разработанных личных веб-сайтов:

1. Данило Де Марко

Источник: Данило Де Марко

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

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

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

2. Алекс Вандерлит

Источник: Алекс ван дер Лит

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

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

3. Владимир Груев

Источник: Владимир Груев

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

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

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

4. Владим Тюрин

Источник: Владим Тюрин

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

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

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

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

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

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

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

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

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

Вот список хорошо продуманных бизнес-сайтов:

1. Ferrumpipe

Источник: Ferrumpipe На веб-сайте

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

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

2. Oracle

Источник: Oracle На сайте

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

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

3. NBC

Источник: NBC На веб-сайте

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

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

4. Samsung

Источник: Samsung На сайте

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

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

5. Spline Group

Источник: Spline

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

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

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

---

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

Выбор цветовой схемы с помощью цветового круга

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

Цветовые схемы и палитры

Фразы «цветовая схема» и «цветовая палитра» кажутся взаимозаменяемыми, но они разные.

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

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

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

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

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

• Монохроматическая цветовая схема: Это цветовая схема только одного цвета.Используя вариации яркости и насыщенности, вы легко можете создать стильную схему, которая будет выглядеть профессионально оформленной. Нейтральные цвета — это элегантный выбор для однотонных цветовых схем.
• Дополнительная цветовая схема: Это цветовая схема с двумя цветами, расположенными напротив друг друга на цветовом круге. Эта цветовая схема может быть яркой с высоким контрастом, если цвета используются с одинаковой насыщенностью. Эта схема, естественно, будет включать теплый и холодный цвета, поскольку они находятся на противоположных сторонах колеса.
• Аналогичная цветовая схема: Это схема, в которой используются три смежных цвета. Аналогичная схема может быть очень гармоничной и расслабляющей. Схема сине-зеленого, зеленого и желто-зеленого цветов является примером аналогичной цветовой схемы. Эта схема выигрывает от наличия одного доминирующего цвета с двумя оставшимися цветами в качестве акцентов. Аналогичные схемы хорошо сочетаются с акцентными стенами и другими крупномасштабными акцентами, потому что цвета естественно гармонируют друг с другом.
• Цветовая схема Triad: Это схема с тремя цветами, равномерно распределенными по цветовому кругу.Цветовая схема триады может включать зеленый, фиолетовый и оранжевый, поэтому необходимо соблюдать осторожность с насыщенностью выбранных вами цветов. Это еще одна схема, в которой выгодно выбрать один цвет, который будет доминировать, и два других в качестве акцентов.
• Split-Complementary: Это цветовая схема, в которой используются три цвета. Сначала выбирается один цвет, а затем включаются цвета по обе стороны от его дополнительного цвета. Менее драматичная, чем дополнительная цветовая схема, разделенная-дополнительная — это простая цветовая схема, которую можно создать и с которой можно жить.
• Тетрадическая цветовая схема: Это схема, в которой используются два набора дополнительных цветов. Работа с четырьмя цветами может быть более сложной задачей, но при этом можно получить полную и богатую цветовую схему. Использование доминирующего цвета с тремя акцентными цветами — один из способов гармонизировать тетрадную цветовую схему. Другой способ создать приятную тетрадную схему — использовать приглушенные тона четырех цветов. Любая дополнительная схема будет содержать теплые и холодные цвета и требует особой осторожности, чтобы сбалансировать их.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Идти с серыми

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11 советов по созданию отличных цветовых палитр

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

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

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

Прежде чем начать выбирать цвета, я часто вспоминаю короткую статью Дастина Сеноса о принципах дизайна. Он объясняет, что в Medium используются такие принципы, как «направление , а не выбор », «соответствие , а не согласованность » и «развитие , а не завершение ».Я думаю, что этот способ формирования принципов работает и для цветов: белый поверх серого ; гармония над отключением ; холодный более теплый. Я стараюсь держать эти идеи в уме во время работы. Они служат своего рода проверкой здравого смысла — чем-то вроде того, как личность пользователя направляет UX-дизайнеров.

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

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

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

Недавно на веб-сайте Framer я обнаружил пример прототипа четырех вращающихся квадратов с разными оттенками и уровнями непрозрачности. Это было красиво, поэтому я сразу же запустил Framer, чтобы создать несколько цветовых палитр, используя простой цикл на .Установите начальный backgroundColor и используйте hueRotate вместе с opacity для генерации цветов. HueRotate находится в диапазоне от 0 до 360, непрозрачность варьируется от 0 до 1 (десятичные дроби тоже работают), и в зависимости от этих чисел мы получаем разные палитры. Я нашел это настолько ценным, что теперь использую Sketch вместе с Framer, чтобы посмотреть, как определенные цвета выглядят в цикле. Чтобы выбрать цвета из Framer для использования в своих проектах, я делаю снимок экрана холста Framer, вставляю его в Sketch, а затем использую палитру цветов.

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

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

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

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

На рисунке выше показано:

• Черный слой, режим наложения Overlay, непрозрачность 50% (увеличивает насыщенность)
• Белый слой, нормальный режим наложения, непрозрачность 50% (светлеет)
• Черный слой, нормальный режим наложения, непрозрачность 50% (затемняет)

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

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

Другие советы по рисованию

Если вы хотите узнать больше об основах дизайна пользовательского интерфейса, изучите наш курс «Основы UX Academy».

генератор цветовой палитры с ИИ

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

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

---

---

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

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

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

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

---

Оставайтесь на связи

Подпишитесь на нашу рассылку новостей и объявлений, связанных с Colormind

---

Советы по использованию

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

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

---

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

---

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

---

Типы цветовых решений | GEOG 486: Картография и визуализация

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

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

Рисунок 4.3.1 Яркость цвета, демонстрирующая порядок данных.

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

Рисунок 4.3.2 Скриншот с Colorbrewer.org.

Авторы и права: Синтия Брюэр, Марк Харроуэр и Государственный университет Пенсильвании, ColorBrewer2.org.

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

Рисунок 4.3.3 Последовательные цветовые схемы с использованием яркости цвета.

Кредит: Кэри Андерсон, Университет штата Пенсильвания; спецификации цвета через ColorBrewer2.org.

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

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

Кредит: Кэри Андерсон, Университет штата Пенсильвания; спецификации цвета через ColorBrewer2.org.

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

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

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

Рисунок 4.3.6 Расходящиеся цветовые схемы

Кредит: Кэри Андерсон, Университет штата Пенсильвания; спецификации цвета через ColorBrewer2.орг.

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

Рисунок 4.3.7 Карта с расходящейся цветовой схемой, показывающая критическую среднюю точку 0% изменения.

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

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

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

Рисунок 4.3.8 Расходящиеся схемы с критическим классом (слева) и критическим разрывом (справа).

Кредит: Кэри Андерсон, Университет штата Пенсильвания; спецификации цвета через colorbrew2.

Отражение ученика

Посмотрите карту на Рисунке 4.3.9 ниже. Почему здесь используется расходящаяся цветовая схема? Что вам говорит карта? О чем он вам не говорит? Вы бы спроектировали это иначе?

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

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

Рисунок 4.3.10 Качественные цветовые схемы.

Кредит: Кэри Андерсон, Университет штата Пенсильвания; спецификации цвета через ColorBrewer2.org.

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

Рисунок 4.3.11. Цветохроматическая карта.

Предоставлено: карта Кэри Андерсона, Государственный университет Пенсильвании, Источник данных: Границы, Перепись США. Выдуманы тематические данные.

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

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

Предоставлено: Кэри Андерсон, Университет штата Пенсильвания; Источник данных: Геологическая служба США, Национальная карта.

Человеческий глаз (без нарушения цветового зрения) может различать около двенадцати различных оттенков; зависит от читателя и дизайна карты, часто даже меньше. Многие карты, в частности карты землепользования / земельного покрова, содержат большее количество категорий.Частая стратегия состоит в том, чтобы сгруппировать категории в классы оттенков (например, зеленый для растительности), а затем использовать яркость и насыщенность для создания внутриклассовых различий. Например, на рис. 4.3.12 для леса используется зеленый оттенок, а для различения типов леса используются вариации освещенности.

Отражение ученика

Просмотрите категории земного покрова на Рисунке 4.3.12. Соответствует ли структура восприятия данных структуре восприятия назначенных цветов? Делается ли это разными способами?

Рекомендуемая литература

• Глава 8: Цвет на картах.