Базовые цвета и универсальные цвета - в чем разница. Какие цвета называют основными

Солнечный свет

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

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


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


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

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

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

Голубой + лиловый = синий
Лиловый + жёлтый = красный
Голубой + жёлтый = зелёный

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


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

Дополняющие цвета.

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


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


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


Лиловый – зелёный,
голубой – красный,
жёлтый – синий

Они образуют те же пары, что и пигментные цвета.


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


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

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


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

2. Зелёный


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

3. Жёлтый


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

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

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

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


Голубой мешается со следующими цветами:
1-й ряд – с белым,
2-й ряд – с чёрным,
3-й ряд – дополняющий цвет плюс голубой и тёмно-синий,
4-й ряд – с «королевским синим»

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

Чёрный или серые оттенки.

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

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

1.Тенденция к фиолетовому цвету
1 часть красного, 1 часть синего и немного жёлтого

2. Нейтральный цвет
1 часть красного, 2 части синего и 1 часть жёлтого

3. Тенденция к зелёному цвету
1 часть синего, 2 части жёлтого и 1 часть красного

4. К красному
2 части красного,1 часть жёлтого и 1 часть синего

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

Коричневые тона .

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

Цель урока: познакомить студентов с основными и дополнительными цветами.

План урока:

1. Основные три цвета.

2. Дополнительные цвета.

Студент должен:

знать: основные и дополнительные цвета.

Ответы на вопросы плана урока:

1 . Практика художников наглядно показывала, что очень многие цвета и оттенки можно получить смешением небольшого количества красок. Стремление натурфилософов найти «первоосновы» всего на свете, анализируя явления природы, всё разложить «на элементы», привело к выделению «основных цветов» , в качестве которых не сразу выбрали красный, зелёный и синий. В Англии основными цветами долго считали красный, жёлтый и синий, лишь в 1860 г. Максвелл ввел аддитивную систему RGB (красный, зелёный, синий). Эта система в настоящее время доминирует в системах цветовоспроизведения для электронно-лучевых трубок (ЭЛТ) мониторов и телевизоров. Цветовой круг можно разделить на три широких сектора: красный, зеленый и синий. Эти цвета называются основными, смешивая их в разных пропорциях получают любой другой цвет. Между основными цветами расположены еще три сектора, образованные дополнительными цветами: пурпурным (сине-красным), желтым и голубым (зелено-синим). На цветовом круге основной и дополнительный цвета находятся друг против друга. К примеру, пурпурный расположен против зеленого и является его дополнительным цветом. Каждый дополнительный цвет представляет собой смесь двух основных, а когда соединяются два дополнительных цвета, они образуют общий основной цвет. Например, голубой (синий и зеленый) и пурпурный (синий и красный) дают синий. Эта взаимосвязь между основными и дополнительными цветами называется «субтрактивной» и положена в основу обработки и печати цветных фотоматериалов.

2. Понятие «дополнительный цвет» было введено по аналогии с «основным цветом». Было установлено, что оптическое смешение некоторых пар цветов может давать ощущение белого цвета. Так, к триаде основных цветов Красный-Зелёный-Синий дополнительными являются Голубой-Пурпурный-Жёлтый - цвета. На цветовом круге эти цвета располагают оппозиционно, так что цвета обеих триад чередуются. В полиграфической практике в качестве основных цветов используют разные наборы. Мы называем два цвета дополнительными, если их пигменты, будучи смешанными, дают нейтральный серо-чёрный цвет. В физике два хроматических света, которые при смешивании дают белый свет, также считаются дополнительными. Два дополнительных цвета образуют странную пару. Они противоположны друг другу, но нуждаются один в другом. Расположенные рядом, они возбуждают друг друга до максимальной яркости и взаимоуничтожаются при смешивании, образуя серо-чёрный тон, как огонь и вода. Каждый цвет имеет лишь один единственный цвет, который является по отношению к нему дополнительным. В цветовом круге дополнительные цвета расположены диаметрально один другому. Они образуют следующие пары дополнительных цветов:


жёлтый – фиолетовый; жёлто-оранжевый - сине-фиолетовый; оранжевый – синий; красно-оранжевый - сине-зелёный; красный – зелёный; красно-фиолетовый - жёлто-зелёный.

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

жёлтый - фиолетовый = жёлтый, красный + синий;

синий - оранжевый = синий, жёлтый + красный;

красный - зелёный = красный, жёлтый + синий.

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

Вопросы для повторения:

1. Назовите основные цвета?

2. Дайте понятие «дополнительные» цвета?

3. Как образуются дополнительные цвета?

Литература:

1. Ящухин А.П. Живопись. М.: Просвещение. 1979.

2. Виннер А. В. Как работают мастера живописи, М., 1965.

3. Гренберг Ю. И. Технология станковой живописи, М., 1982.

Основные цвета – это тона, с помощью которых можно получить все остальные оттенки.

Это КРАСНЫЙ ЖЕЛТЫЙ СИНИЙ (для печати — это МАДЖЕНТА, ЖЕЛТЫЙ, ЦИАН, ЧЕРНЫЙ см. ниже)

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

Желтый, красный, синий — разные , в которой на пике. Если их перевести в черно белый формат, то вы отчетливо увидите .

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

Построение оттенков из основных цветов

Пары из «упряжки» основных цветов образуют следующие краски второго круга:

ОРАНЖЕВЫЙ_____________ФИОЛЕТОВЫЙ_______________ЗЕЛЕНЫЙ____

ЖЕЛТЫЙ + КРАСНЫЙ = ОРАНЖЕВЫЙ (см. )
КРАСНЫЙ + СИНИЙ = ФИОЛЕТОВЫЙ
СИНИЙ + ЖЕЛТЫЙ = ЗЕЛЕНЫЙ (см. ?)


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

ЖЕЛТО-ОРАНЖЕВЫЙ_____КРАСНО-ОРАНЖЕВЫЙ_____КРАСНО-ФИОЛЕТОВЫЙ___

ЖЕЛТЫЙ + ОРАНЖЕВЫЙ = ЖЕЛТО-ОРАНЖЕВЫЙ
КРАСНЫЙ + ОРАНЖЕВЫЙ = КРАСНО-ОРАНЖЕВЫЙ
КРАСНЫЙ + ФИОЛЕТОВЫЙ = КРАСНО-ФИОЛЕТОВЫЙ

ФИОЛЕТОВО-СИНИЙ___________СИНЕ-ЗЕЛЕНЫЙ___________САЛАТОВЫЙ___

СИНИЙ + ФИОЛЕТОВЫЙ = СИНЕ-ФИОЛЕТОВЫЙ
СИНИЙ + ЗЕЛЕНЫЙ = СИНЕ-ЗЕЛЕНЫЙ
ЖЕЛТЫЙ + ЗЕЛЕНЫЙ = САЛАТОВЫЙ

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

ЖЕЛТЫЙ + ФИОЛЕТОВЫЙ (КРАСНЫЙ + СИНИЙ ) = КОРИЧНЕВЫЙ
КРАСНЫЙ + ЗЕЛЕНЫЙ (ЖЕЛТЫЙ + СИНИЙ ) = КОРИЧНЕВЫЙ
СИНИЙ + ОРАНЖЕВЫЙ (КРАСНЫЙ + ЖЕЛТЫЙ ) = КОРИЧНЕВЫЙ

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

Основные цвета краски для печати

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

МАДЖЕНТА, ЖЕЛТЫЙ, ЦИАН, ЧЕРНЫЙ

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

Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал Pierre Bonnard : «Цвет не просто делает дизайн приятным для глаз, но и подкрепляет его».

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

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

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

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

Как выстроить палитру

Но как выбрать эти два-три цвета? Тут вам поможет цветовой круг.

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

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

Одноцветные палитры

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

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

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

Родственные цвета - это те, которые располагаются рядом друг с другом на круге.

Такие гаммы строятся на базе родственных цветов: один из них становится опорным, а остальные используются, чтобы обогатить палитру. Здесь все тоже достаточно просто, но фокус заключается в том, чтобы правильно выбрать яркость используемых цветов - она будет задавать тон для всей гаммы. Например, Clear , утилита для организации списка дел с жестовым управлением, использует кричащие цвета, чтобы визуально привлечь внимание к тем задачам, которые пользователь выполняет в данный момент. Напротив, в приложении для медитации Calm предпочтение отдается паре родственных цветов «синий+зеленый», чтобы создать у пользователей ощущение покоя и умиротворения.

Палитры из комплементарных цветов

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

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

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


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

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

2. Черпайте вдохновение в природе

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


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

3. Старайтесь придерживаться пропорции 6/3/1

При составлении палитры вам также пригодится вечно актуальное правило от дизайнеров интерьеров: пропорция 6/3/1 позволяет создать идеальный баланс цветов в любом пространстве.

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

4. Сначала проектируйте в черно-белой гамме

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

Вводите цвет в последнюю очередь и очень целенаправленно.


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

5. Избегайте черного цвета

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

Если добавить в ваш комплект тщательно отобранных цветов черный, он «задавит» собой все остальные. Он так сильно бросается в глаза именно потому, что не воспринимается как естественный. Многие приложения, которыми мы пользуемся изо дня в день, добавляют в интерфейс якобы черные цвета, которые на самом деле темно-серые. Например, самый темный цвет в верхней панели приложения Asos - не #000000, а #242424. Так что не забывайте регулировать насыщенность.

6. Выстраивайте визуальную иерархию при помощи контраста

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


Благодаря контрасту одна область экрана заметно отличается от остальных.

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

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

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

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

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

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

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

Зеленый, Синий, Фиолетовый

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

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

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

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

Розовый (женственность, невинность, юность): Наиболее широко известная ассоциация с розовым цветом - это женственность.

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

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

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


Здесь важно отметить, что значения цветов могут сильно меняться в зависимости от обстоятельств и культурного контекста. Чтобы глубже ознакомиться с этой темой, прочитайте статью Symbolism Of Colors And Color Meanings Around The World .

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

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

Не используйте цвет в качестве единственного индикатора

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


Слева направо: цветовой круг глазами обычного человека - Цветовой круг глазами человека с дейтеранопическим типом дальтонизма - Цветовой круг глазами человека с протанопическим типом дальтонизма.

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


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

Делайте текст как можно контрастнее

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


Низкая контрастность может стать смертельным ударом для юзабилити.

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

  • Если текст мелкий, соотношение должно быть не меньше 4.5:1;
  • Для крупного текста (то есть 14 pt и выше для жирного шрифта, 18 pt и выше - для обычного) оптимально соотношение 3:1 и больше.
Но есть хорошая новость: вам не придется проверять все вручную. При помощи рассчитать коэффициент можно в несколько кликов.

Бонус: Инструменты, необходимые для UX дизайнера

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

Adobe Color CC
Adobe Color CC (раннее известный как Kuler) - отличное решение, чтобы находить, редактировать и создавать палитры. Вы можете модифицировать каждый цвет, входящий в состав гаммы, или устанавливать его в качестве опорного буквально в пару кликов. Готовые палитры можно сохранять и добавлять в библиотеку; кроме того, в открытом доступе на сайте находится большое количество цветовых гамм, созданных другими членами сообщества.


Dribbble Search-by-color
Если хотите посмотреть, как другие дизайнеры применяют тот или иной цвет в своих проектах, перейдите по адресу dribbble.com/colors и выберите нужный оттенок.


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


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


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


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


Симулятор дальтонизма в Adobe Photoshop
Photoshop позволяет проверить, насколько ваш дизайн универсально доступен. Достаточно перейти на вкладку View > Proof Setup и выбрать интересующий ваш тип (Protanopia type или Deuteranopia type).


NoCoffee Vision Simulator for Chrome
Чтобы удостовериться, что ваш дизайн доступен для всех, неплохо бы на себе испытать дальтонизм в процессе проектирования. NoCoffee Vision Simulator обеспечивает возможность создать для любого интерфейса симуляцию, показывающую, как она выглядит для людей с цветовой слепотой или слабым зрением. Например, применив фильтр «Deuteranopia» во вкладке «Color Deficiency», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.


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

История

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

Различные варианты выбора «основных цветов»

Смешивание цветов зависит от цветовой модели . Существуют аддитивная и субтрактивная модели смешивания.

Аддитивная модель

В аддитивной модели смешивания цвета получаются как смешивание лучей. При отсутствии лучей нет никакого цвета - чёрный белый . Примером аддитивной цветовой модели является RGB .

Субтрактивный синтез цвета

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

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

Биофизические предпосылки

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

Четыре «чистых» цвета

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

Технические варианты реализации модели использования «основных цветов»

Примечания

Ссылки

  • Handprint: do «primary» colors exist? - a comprehensive site on color primaries, color perception, color psychology, color theory and color mixing.
  • Смешивание цветов онлайн - Веб сервис для моделирования цвета при смешивании исходных цветов в любых пропорциях.

Wikimedia Foundation . 2010 .

Смотреть что такое "Основные цвета" в других словарях:

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

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

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

    Современная энциклопедия

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

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