Какие цвета называют основными. Базовые цвета в одежде

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

Каждый охотник желает знать…

Каждый - Красный

Охотник - Оранжевый

Желает - Желтый

Знать – Зеленый

Где - Голубой

Сидит - Синий

Фазан – Фиолетовый

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

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

Человек и цвета

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

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

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

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

История

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

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

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

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

В аддитивной модели смешивания цвета получаются как смешивание лучей. При отсутствии лучей нет никакого цвета - чёрный белый . Примером аддитивной цветовой модели является 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 модели — голубой, пурпурный и желтый. основные цвета Первичные цвета в… … Справочник технического переводчика

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

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

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

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

«, начинающие художники!

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

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

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

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

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

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

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

Цветовая гамма и пигмент

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

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

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

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

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

Эффект, достигаемый противопоставлением дополнительных цветов

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

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

Создание цвета путем смешения первичных цветов

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

Создание зеленой цветовой гаммы

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

Синий ряд

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

Будьте осторожны с фуксином. Это очень насыщенный цвет и накладывать его надо легким слоем.

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

Оранжево-красный ряд

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

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

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

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

• Бумага должна быть акварельной, шероховатой, хорошего качества.
• Если в вашей коробке карандашей два синих или два красных карандаша, используйте лишь ярко-синий (зеленовато-голубой) и фуксин или пунцовый и, конечно, желтый карандаши.
• Подложите под рисующую руку защитную бумагу.
• Карандаш держите обычным путем, чуть выше, чем при письме.
• Сначала потренируйтесь на черновых листках бумаги того же типа, что будете применять на чистовиках.
• Техника создания первых цветовых рядов заключается в рисовании слева направо (или справа налево, если вы левша), нажимать на карандаш не надо, грифель лучше держать под острым углом к бумаге. Штрихи должны идти вертикально при передвижении руки вправо, становясь постепенно гуще и интенсивнее, для того, чтобы цветовой ряд изменился постепенно и равномерно.
• Под конец цветовую шкалу можно будет слегка подчистить; обязательно сделайте это, только постоянно следите за равномерностью перехода тонов в цветовом ряду в целом.

Таким образом у нас появилась палитра из 36 цветов:

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

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

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

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

или

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

На основе этой особенности восприятия цвета человеком была создана цветовая модель RGB (Red красный , Green зеленый , Blue синий ) для печати полноцветных изображений, в том числе и фотографий.

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

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

* Таблицы взяты из открытого доступа в Интернете.

Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал 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», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.

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