Подбор гармоничных цветов | Институт непрерывного и открытого образования ОмГУ им. Ф.М. Достоевского

Метки: 

• палитра
•  
• цвет

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

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

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

Рис. 1. Цветовой круг. А — оттенок; Б — насыщенность; В — яркость; Г — оттенок

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

Рис. 2. Цветовой круг, применяемый в дизайне

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

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

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

Цветовая модель HSB

Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками (рис. 1).

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

Насыщенность (Saturation). Обозначает видимую яркость, или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность). На цветовом круге насыщенность показана параметром Б (рис. 1), увеличиваясь от центра круга к краям.

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

С помощью Photoshop можно изменять цвет, варьируя значениями этих параметров.

Контрастные цвета

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

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

Использование модели RGB

1. Выбираем любой нужный цвет, к которому подберем контрастный, например, оранжевый #FFCC33 (255, 204, 51 в RGB).

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

3. В результате математических операций получаем следующие параметры: 0 (255-255), 51 (255-204) и 204 (255-51). После перевода из десятичной системы в шестнадцатеричную имеем цвет #0033CC.

Использование модели RGB неудобно и приведено лишь для примера. Более простой способ подбора контрастных цветом связан с моделью HSB.

Использование модели HSB

1. Выбираем любой нужный цвет (рис. 3), например, все тот же оранжевый #FFCC33 (45, 80, 100 в HSB).

Рис. 3. Параметры цвета в модели HSB

2. Первый параметр, обозначенный буквой H, является оттенком цвета или углом на цветовом круге. Поскольку контрастные цвета расположены на цветовом круге в 180° друг от друга, легко получить нужный цвет прибавив (или отняв) к значению оттенка число 180 (рис. 4).

Рис. 4. Изменением одного лишь параметра Hue можно получить контрастный цвет

3. Вводим значение 225 в поле оттенка (45+180) и получаем новый цвет (225, 100, 80 в HSB). Заметьте, что изменяется лишь один параметр, все остальные остаются прежними.

Замечание

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

Нюансовые сочетания

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

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

1. Выбираем любой нужный цвет (рис. 5), например, темно-синий #000080 (240, 100, 50 в HSB).

Рис. 5. Оттенки одного цвета можно получать изменяя параметры насыщенности (S) и яркости (B)

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

3. Получится следующее (рис. 6).

Рис. 6. Получение нового нюансового цвета

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

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

Еще один способ подбора нюансовых сочетаний предоставляют готовые цвета Pantone, для их выбора существует кнопка Custom, показанная на рис. 7.

Рис. 7. Кнопка для открытия цветов Pantone

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

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

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

Подбор трех цветов

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

Рис. 10. Гармоничные цвета расположены на цветовом круге на одинаковом расстоянии друг от друга

Рассмотрим на примере.

1. Первый цвет выбираем самостоятельно, пусть это будет темно-синий #000080 (240, 100, 50 в HSB).

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

3. Отнимаем от значения Hue нашего синего цвета число 120. Остальные параметры оставляем неизменными. Получаем новый цвет со значениями 120, 100, 50.

4. Еще раз отнимаем 120 у значения Hue, но уже у нового цвета. Получится 0, 100, 50.

5. В итоге имеем следующие цвета.

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

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

Резюме

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

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

Метки: 

• свет
•  
• Хеджкоу
•  
• цвет

Автор: Джон Хеджкоу

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

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

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

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

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

Рис. 1. Цветовой круг

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

Рис. 2. Сходные цвета

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

Рис. 3. Контрастные цвета

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

Красные тона имеют также свойство «приближаться» к наблюдателю, а синие, кажется, удаляются от него. Не исключено, что это впечатление связано с той «силой», которую все народы приписывают красному цвету. А может быть, причина кроется в простом физиологическом явлении: красные лучи труднее сфокусировать, чем синие, то есть глаз вынужден в большей степени изменять кривизну хрусталика, чтобы сфокусировать красные лучи. То же самое приходится делать глазу, чтобы перевести фокус с дальних объектов на ближние, и, возможно, поэтому при одинаковом расстоянии от наблюдателя всегда кажется, что красные объекты расположены ближе, чем синие. С другой стороны, ощущение «удаленности» синих тонов возникает у нас, возможно, под влиянием того, что, когда мы смотрим на горизонт и отдаленные горы, они часто предстают перед нами в синеватой дымке — результат рассеяния синих лучей молекулами в атмосфере (рис.  4).

Рис. 4. Вечерний пейзаж

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

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

Рис. 5. Сочетание цветов между собой

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

По материалам книги: Джон Хеджкоу. Искусство цветной фотографии. Издательство «Планета», 1988

Метки: 

• палитра
•  
• цвет
•  
• цветовой круг

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

Основные понятия

Всем известно, что спектр состоит из семи цветов, названия которых глубоко запали в голову еще со школы благодаря мнемоническому заклинанию «Каждый Охотник Желает Знать, Где Сидит Фазан». На рис. 1 показана полоса, полученная путем разложения луча белого света на составляющие цвета с помощью стеклянной призмы.

Рис. 1. Спектральные цвета

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

Рис. 2. Спектральный цветовой круг

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

Рис. 3. Упрощенный цветовой круг

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

Рис. 4. Основные цвета

Основные цвета входят в аддитивную цветовую модель (от add — складывать), при которой сложение всех трех цветов образует белый цвет. К такой модели относится RGB.

Замечание

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

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

Рис. 5. Комплиментарные или дополнительные цвета

Эти цвета очень важны для субстрактивной цветовой модели (от subtract — вычитать), при которой цвет формируется за счет частичного поглощения и отражения лучей света от объекта. К такой модели относится CMYK.

Основной характеристикой цветового круга является угол, он определяет нужный цвет. Отсчет угла ведется от красного цвета по часовой стрелке, диапазон значений может быть от 0 до 360 градусов или от -180 до 180 градусов (рис. 6).

Рис. 6. Угол для задания цвета

Значениям 0 и 360 градусов соответствует красный цвет, он начинает и замыкает точку отсчета. Основные и дополнительные цвета отстоят друг от друга на 60 градусов, так, для зеленого цвета угол будет равен 120 градусов, а для голубого цвета — 180.

Принципы цветового круга

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

• Цвета расположенные напротив друг друга, т.е. отстоящие на 180  градусов, являются контрастными. При их смешении в аддитивной модели получается белый цвет. К контрастным парам относят цвета желтый с синим и красный с голубым.
• Контрастные цвета взаимно исключают друг друга. Если в изображении повысить уровень красного цвета, это автоматически уменьшит уровень голубого. И наоборот, если понизить уровень красного цвета, то это приведет к повышению уровня голубого.
• Любой цвет получается смешиванием близлежащих к нему цветов. Так, желтый цвет образуется сложением красного и зеленого.
• Поскольку каждый цвет в некотором роде является смесью других цветов, то усиление значения одного цвета в изображении автоматически приводит и к повышению уровня его составляющих, и наоборот. Например, зеленый цвет получается смешением желтого и голубого цвета. Если повысить значение зеленого цвета в изображении, то одновременно произойдет усиление и желтого с голубым. Верно и обратное, изменение желтой и голубой компоненты влияет на уровень зеленого цвета. 
• Каждому цвету можно противопоставить не один контрастный цвет, а пару, которая его образует. Чтобы понизить значение красного цвета, можно усилить значение голубого цвета или одновременно усилить уровень зеленого и синего, что приведет к тому же результату.

Использование цветового круга

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

Рис. 7. Исходная фотография

Инструмент Color Balance (Баланс цвета)

Принципы цветового круга наглядно используются при работе с инструментом Color Balance(Image > Adjustments > Color Balance. ..), который легко можно активизировать с помощью комбинации <Ctrl>+<B>. На рис. 8 представлен вид панели.

Рис. 8. Панель инструмента Color Balance

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

Любое изображение характеризуется такими показателями яркости, как: тени (Shadows), средние тона (Midtones) и света (Highlights). Для каждого из них можно менять свои настройки цвета в ту или иную сторону. После выставления значений цвета, приведенных на рис. 8, исходная фотография приобретает оранжевый оттенок (рис. 9).

Рис. 9. Изменение цвета в фотографии

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

Инструмент Curves (Кривые)

Следующий инструмент, Curves (Image > Adjustments > Curves…, активация клавишами<Ctrl>+<M>), который активно применяется для цветокоррекции изображений, также основан на работе цветового круга, хотя и не так явно, как предыдущий инструмент.

Рис. 10. Панель инструмента Curves

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

Рис. 11. Кривая для уменьшения значения компоненты цвета

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

Рис. 12. Кривая для повышения значения компоненты цвета

Резюме

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

 

Как работать с цветами в digital-маркетинге — БЛОГ ADVENTUM

Подбирать цвета убийственно сложно: все эти RGB, CMY, RYB, HSV больше мешают, чем помогают. Разобрались, как удачно подобрать цвета для проекта и сэкономить на дизайнере.

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

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

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

 

На этом принципе построена работа всех современных устройств. Модель, по которой свет распадается и собирается обратно, — RGB

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

Спустя 150 Гете в «Теории цвета» анализирует цвет с точки зрения восприятия человека. Гете создает цветовой круг, который впоследствии улучшает художник Иоханнес Иттен:

Цветовой круг. Основные цвета — Красный, Желтый и Синий (Модель RYB).

Цветовые модели и сочетания цветов

Существует 5 популярных цветовых моделей: RYB, RGB, CMY (иногда указывается как CMYK), HSL (она же HSV) и LAB. LAB и HSV мы не будем рассматривать, потому что они не помогут научиться подбирать цвета. Остановимся на анализе RYB, RGB и CMY.

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

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

RYB — классическая цветоваяцветова, начало которой положил Гете, а улучшил Иттен. Эта модель популярна у художников, потому что объясняет правила смешивания пигментов цветов. Хотя RYB не используется в электронике и печати, она содержит ряд важных наблюдений: на ее основе разработаны RGB и CMY, и по ее примеру комбинируются цвета внутри этих моделей.

Иттен полагал, что можно найти цветовую гармонию через цветовое колесо:

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

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

Тон — это чистый цвет: зеленый, синий, красный и так далее.

Оттенок — это добавление к чистому цвету белого цвета:

Тень — это добавление к чистому цвету черного цвета:

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

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

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

В RYB первичные цвета: Красный, Желтый и Синий.
В RGB: Красный, Зеленый и Синий.
В CMY: Циан, Пурпурный и Желтый.

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

Основные цвета RGB — это вторичные цвета CMY. Основные цвета CMY — это вторичные цвета RGB. Эти модели разные, но тесно связаны. RYB с ними связан меньше.

CMYK — это тот же CMY, но с добавлением «ключевого цвета» — черного. Дело в том, что смесь CMY не дает настоящего черного цвета, поэтому эффективнее и экономичнее использовать черную краску.

 

Как подобрать цвет для проекта

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

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

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

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

К счастью, подобрать цвет сегодня не так сложно:

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

Можно черпать идеи у сайтов, которые вам нравятся:

Загрузите скриншот понравившегося сайта и узнайте его цветовую палитру. Подборка цветов от Адобе: https://color.adobe.com/ru/create/color-wheel/

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

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

Черпать вдохновение можно на Дриббле и Дизайниспирейшене можно посмотреть работы дизайнеров и заимствовать их цветовые палитры.

 

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

 

Создание цветовой палитры.

Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Теперь у вас должен быть HEX-код цвета. HEX-код состоит из трех пар цифр и может принимать значения от 0 до 9 и букв от A до F.

Первая цифра уточняет цвет, вторая — оттенок. Чем больше значение пар, тем светлее цвет:

В уже знакомым нам RGB и CMY значения цветов будут такими:

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

Есть несколько простых техник работы с кодом:

• Переставлять одну пару в разные места кода
• Удвоение первой цифры в первой паре и разделение на два остальные первые цифры
• Комбинирование цветов из фото

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

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

Реально вам нужно только 2 цвета:

• основной цвет (в нашем случае это #30c9e8),
• акцентный цвет.

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

Как подобрать акцентирующий цвет

Зайдите в Палеттон и вбейте код цвета. Вы сможете быстро подобрать к нему удачный акцентирующий цвет

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

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

Осталось добавить серого

 

Подбираем гармоничный серый.

Подобрать серый можно в том же Дриббле и Дизайниспирейшене. Либо, если у вас есть Фотошоп, можно сделать так:

 

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

Посмотрите, какой кайф:

 

Как по-другому подобрать цвета.

Можно сначала сделать сайт в черно-белом исполнении, а уже потом расставлять акценты:

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

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

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

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

Убедитесь, что у вас достаточно контраста между фоном и текстом: так его проще читать и быстрее усваивать.

Гайдлайн по контрастам (на английском)
Проверка на контраст

 

Удачные и неудачные цветовые решения

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

 

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

 

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

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

Бонус

Классный ролик про тени (есть русские субтитры)

Попробуйте угадать, какого цвета эти квадраты (а потом проверьте значение HEX-кода в Фотошопе):

Источники:
Иоханнес Иттен, «Искусство цвета»
A Simple Web Developer’s Color Guide

 

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

IMGonline.com.ua

Обработка фотографий JPEG онлайн.

Палитра из 137 цветов с названиями, значениями RGB и HEX (HTML) кодом.

«>

Название цвета	RGB	Шестнадцатеричный
Бордовый	RGB(128,0,0)	#800000
Темно-красный	RGB(139,0,0)	#8B0000
Огнеупорный кирпич	RGB(178,34,34)	#B22222
Красный	RGB(255,0,0)	#FF0000
Лосось	RGB(250 128 114)	#FA8072
Помидор	RGB(255,99,71)	#FF6347
Коралловый	RGB(255,127,80)	#FF7F50
Оранжево-красный	RGB(255,69,0)	#FF4500
Шоколад	RGB(210,105,30)	#D2691E
Сэнди Браун	RGB(244,164,96)	#F4A460
Темно-оранжевый	RGB(255,140,0)	#FF8C00
Оранжевый	RGB(255,165,0)	#FFA500
ТемныйЗолотарник	RGB(184,134,11)	#B8860B
Золотарник	RGB(218,165,32)	#DAA520
Золото	RGB(255,215,0)	#FFD700
Олива	RGB(128,128,0)	#808000
Желтый	RGB(255,255,0)	#FFFF00
Желто-зеленый	RGB(154,205,50)	#9ACD32
Зеленый Желтый	RGB(173 255,47)	#ADFF2F
Шартрез	RGB(127,255,0)	#7FFF00
Зеленый газон	RGB(124,252,0)	#7CFC00
Зеленый	RGB(0,128,0)	#008000
Лайм	RGB(0,255,0)	#00FF00
Зеленый лайм	RGB(50,205,50)	#32CD32
Весенний зеленый	RGB(0,255,127)	#00FF7F
Средний весенне-зеленый	RGB(0,250,154)	#00FA9A
Бирюзовый	RGB(64 224 208)	#40E0D0
Светло-зеленый	RGB(32,178,70)	#20B2AA
Бирюзовый	RGB(72 209 204)	#48D1CC
Темно-голубой	RGB(0,139,139)	#008B8B
Аква	RGB(0,255,255)	#00FFFF
Темно-бирюзовый	RGB(0,206,209)	#00CED1
Темно-синий	RGB(0,191,255)	#00BFFF
Синий Доджер	RGB(30 144 255)	#1E90FF
Королевский синий	RGB(65 105 225)	#4169E1
Военно-морской флот	RGB(0,0,128)	#000080
Темно-синий	RGB(0,0,139)	#00008B
Средне-синий	RGB(0,0,205)	#0000CD
Синий	RGB(0,0,255)	#0000FF
Сине-фиолетовый	RGB(138,43,226)	#8A2BE2
Темная орхидея	RGB(153,50,204)	#9932CC
Темно-фиолетовый	RGB(148,0,211)	#9400D3
Фиолетовый	RGB(128,0,128)	#800080
Темно-пурпурный	RGB(139,0,139)	#8B008B
Пурпурный	RGB(255,0,255)	#FF00FF
Фиолетово-красный средний	RGB(199,21,133)	#C71585
Темно-розовый	RGB(255,20,147)	#FF1493
Ярко-розовый	RGB(255,105,80)	#FF69B4
малиновый	RGB(220,20,60)	#DC143C
Коричневый	RGB(165,42,42)	#A52A2A
Индийский красный	RGB(205,92,92)	#CD5C5C
Розово-коричневый	RGB(188 143 143)	#BC8F8F
Светло-коралловый	RGB(240 128 128)	#F08080
Снег	RGB(255 250 250)	#FFFAFA
Мисти Роуз	RGB(255 228 225)	#FFE4E1
Темный лосось	RGB(233 150 122)	#E9967A
Светлый лосось	RGB(255 160 122)	#FFA07A
Сиенна	RGB(160,82,45)	#A0522D
Си Шелл	RGB(255 245 238)	#FFF5EE
Коричневое седло	RGB(139,69,19)	#8B4513
Персик	RGB(255 218 185)	#FFDAB9
Перу	RGB(205,133,63)	#CD853F
Лен	RGB(250 240 230)	#FAF0E6
Бисквит	RGB(255 228 196)	#FFE4C4
Берливуд	RGB(222 184 135)	#DEB887
Желто-коричневый	RGB(210 180 140)	#D2B48C
Античный белый	RGB(255 235 215)	#FAEBD7
Белый навахо	RGB(255 222 173)	#FFDEAD
Бланшированный миндаль	RGB(255 235 205)	#FFEBCD
Кнут из папайи	RGB(255 239 213)	#FFEFD5
Мокасины	RGB(255 228 181)	#FFE4B5
Пшеница	RGB(245 222 179)	#F5DEB3
Олдлейс	RGB(253 245 230)	#FDF5E6
Цветочный белый	RGB(255 250 240)	#FFFFAF0
Кукурузный шелк	RGB(255 248 220)	#FFF8DC
Хаки	RGB(240 230 140)	#F0E68C
Лимонный шифон	RGB(255 250 205)	#FFFACD
Золотарник бледный	RGB(238 232 170)	#EEE8AA
Темный хаки	RGB(189 183 107)	#BDB76B
Бежевый	RGB(245 245 220)	#F5F5DC
Золотарник светло-желтый	RGB(250 250 210)	#ФАФАД2
Светло-желтый	RGB(255 255 224)	#FFFFFE0
Слоновая кость	RGB(255 255 240)	#FFFFFF0
Оливково-серый	RGB(107,142,35)	#6B8E23
Темно-оливковый зеленый	RGB(85,107,47)	№ 556B2F
Темно-зеленый	RGB(143 188 143)	#8FBC8F
Темно-зеленый	RGB(0,100,0)	#006400
Форест Грин	RGB(34,139,34)	#228B22
Светло-зеленый	RGB(144 238 144)	#90EE90
Бледно-зеленый	RGB(152 251 152)	#98FB98
Медовая роса	RGB(240 255 240)	#F0FFF0
Цвет морской волны	RGB(46 139,87)	#2E8B57
Средний морской зеленый	RGB(60 179 113)	#3CB371
Мятный крем	RGB(245 255 250)	#F5FFFA
Средний аквамарин	RGB(102 205 170)	#66CDAA
Аквамарин	RGB(127 255 212)	#7FFFD4
Темно-серый сланец	RGB(47,79,79)	#2F4F4F
Бледно-бирюзовый	RGB(179 238 238)	#АФЕЕЕЕ
светло-голубой	RGB(224 255 255)	#E0FFFF
Лазурный	RGB(245 255 255)	#F0FFFF
Синий кадет	RGB(95 158 160)	#5F9EA0
Синий порошок	RGB(176 224 230)	#B0E0E6
Голубой	RGB(173 216 230)	#ADD8E6
Небесно-голубой	RGB(135 206 235)	#87CEEB
Светло-голубой	RGB(135 206 250)	#87CEFA
Синяя сталь	RGB(70 130 180)	№ 4682B4
Элис Блю	RGB(240 248 255)	#F0F8FF
Шиферно-серый	RGB(112 128 144)	№ 708090
Светло-серый сланец	RGB(119 136 153)	#778899
Светло-стальной синий	RGB(176 196 222)	# B0C4DE
Васильковый	RGB(100 149 237)	#6495ED
Лаванда	RGB(230 230 250)	#E6E6FA
Призрачный белый	RGB(248 248 255)	#F8F8FF
Темно-синий	RGB(25,25,112)	№ 1
Синий сланец	RGB(106,90,205)	#6A5ACD
Темно-серый	RGB(72,61,139)	#483D8B
Средний серый	RGB(123 104 238)	#7B68EE
Средне-фиолетовый	RGB(147 112 219)	#9370DB
Индиго	RGB(75,0,130)	#4B0082
Средняя орхидея	RGB(186,85,211)	#BA55D3
Слива	RGB(221 160 221)	#DDA0DD
Фиолетовый	RGB(238 130 238)	#EE82EE
Чертополох	RGB(216 191 216)	#D8BFD8
Орхидея	RGB(218 112 214)	#DA70D6
Лаванда B пышная	RGB(255 240 245)	#FFF0F5
Бледно-фиолетовый красный	RGB(219,112,147)	#DB7093
Розовый	RGB(255 192 203)	#FFC0CB
Светло-розовый	RGB(255 182 193)	#FFB6C1
Черный	RGB(0,0,0)	#000000
Темно-серый	RGB(105 105 105)	#696969
Серый	RGB(128 128 128)	#808080
Темно-серый	RGB(169 169 169)	#A9A9A9
Серебро	RGB(192 192 192)	#C0C0C0
Светло-серый	RGB(211 211 211)	#D3D3D3
Гейнсборо	RGB(220 220 220)	#DCDCDC
Белый дым	RGB(245 245 245)	#F5F5F5
Белый	RGB(255 255 255)	#FFFFFF

Контакты | Карта сайта, ограничения | Украинская версия

© 2018 www.