17 октября 2012 в 19:55

Теория цвета

Первое впечатление — это все. Пословица «По одежке встречают, по уму провожают» актуальна не только в жизни, но и в дизайне. Впечатление от дизайна состоит из множества факторов, и один из важнейших — это цвет.

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

Основные цвета (Primary Colors)




Основные цвета палитры — красный, желтый и синий. Если говорить об основных цветах на экранах различных устройств — это RGB, красный, зеленый и синий.

Вторичные цвета (Secondary Colors)




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

Третичные цвета (Tertiary Colors)




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

Мы разобрались с основами «колеса цветов». С помощью него легко подбирать хорошо сочетающиеся цвета для дизайна. Перейдем к более сложным сочетаниям.

Дополняющие цвета  (Complementary Colors)






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

Аналогичные цвета (Analogous Colors)






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

Триады (Triads)






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

Расщепленные дополняющие цвета (Split Complementary Colors)



Такое сочетание цветов добавляет контраста и разнообразия дизайну.

Квадратная схема (Square Colors)




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

Прямоугольная схема (Tetradic Colors)




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

Использование света и тени (Tints and Shades)




Придает дизайну объем и цветовое разнообразие.

Теплые и холодные цвета (Warm and Cool Colors)







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

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

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



Картинки колеса цветов отсюда.

PS shalaev добавил еще один отличный сервис — colorschemedesigner.com.
+134
150108
1767
grokru 199,5

Комментарии (84)

+4
bobermaniac, #
Вероятно, не дополнительные, а взаимодополняющие. Или сопряженные. Или это устоявшийся курьез, как поток?
0
grokru, #
Спасибо, согласен с вами, изменил на «дополняющие». Но в других публикациях встречал «дополнительные».
0
bobermaniac, #
Я тоже, именно поэтому и спрашиваю.

В русском языке слово «дополнительный» имеет значение подчиненности. А здесь цвета равноправные, значит «дополнительные» к ним неприменимо.
+2
JerryJJ, #
В русском языке вовсю используется термин «дополнительные»
+2
bobermaniac, #
Он имеет неправильное значение. Это курьез, вроде перевода thread как «поток», или какой в этом смысл?
0
JerryJJ, #
Я этот термин узнал раньше, чем английский язык :) Просто исторически принятый в русском языке термин
+1
idle, #
Совершенно верно — смысла никакого.
И в тиражировании подобных «курьёзов» тоже смысла нет, потому как неверный перевод провоцирует неверные ассоциации.
0
bubuq, #
В русском языке существует слово «комплементарный».
+1
JerryJJ, #
В русскоязычной литературе, изданной до появления локализованных графических редакторов (да и вообще, графических редакторов :)), писали «дополнительные», то есть «дополняющие друг друга». По крайней мере, в той литературе, которая мне попадалась.

Не сошелся свет клином на селекторе цвета в Corel Draw и переводе названий его элементов. Есть еще и литература по предметной области :)
0
Suirey, #
Я обычно их называю «комплиментарными», кажется у Иттена в первый раз это прочел, соответственно так и называю.
0
bobermaniac, #
Можно и комплиментарными, лишних коннотаций у этого слова нет.
+1
ColorCat, #
Нет, все правильно называется, просто в статье очень много недоговаривается.
Смешение трех основных цветов (желтый, красный, синий) дают ахроматический цвет (черный или белый, в зависимости от того, с чем мы имеем дело: с пигментом или со светом).

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

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

Лучше, конечно, на эту тему почитать книгу Иттена «теория цвета», там очень кратко и по делу рассказывается.
+15
kazkar, #
Основные, вторичные и третичные цвета есть на более удобном цветовом круге:
image
+13
Ostrovski, #
Хотелось бы примеры дизайнов исходя из полученных нами знаний.
–3
grokru, #
По сути многие сайты, которые радуют глаз и нравятся с первого взгляда сбалансированы именно в цветовом смысле.
+5
pro169, #
можно несколько линков на эти многие сайты
0
shaman007, #
facebook.com, ya.ru, yahoo.com.
+6
KirAmp, #
а мне никогда не нравились цветовые решения лицокниги и яндекса, хотя тут скорее вопрос личного восприятия
+4
lunaticman, #
тоесть дальтоник выбрал сбалансированые цвета? кто бы мог подумать.
–1
Krypt, #
Похожая статья была вот тут, только в другом контексте:
issuu.com/nemeless-box/docs/ruscomix_03?mode=window&pageNumber=1
14я страница
Там есть примеры, но они про комиксы, а не сайты
+10
shalaev, #
В топике должна быть эта ссылка — colorschemedesigner.com
0
grokru, #
Спасибо, добавил в пост.
+2
Ganga, #
Поддерживаю. Очень полезное приложение, позволяющая не просто очень легко подбирать цветовые схемы, но и тут же увидеть пример сайта с данной цветовой схемой, а также возможностью «сохранить» схему, получив на нее URL.
+1
romy4, #
В таком случае дополню сайтом любителей цветовых схем www.colourlovers.com/
+2
m0nhawk, #
Я так понял это перевод? А почему не отмечено?

Я, конечно, допускаю что я в чём-то могу ошибаться, но переводы следует оформлять как переводы.
+3
grokru, #
Это не перевод. На хабре есть проблема: когда делаешь перевод в вольном стиле, начинают обвинят в неточности перевода. А когда делаешь точные перевод, начинают указывать на неточности у первоисточника, а менять уже что-то неправильно — это ведь перевод.
+3
Antelle, #
Это краткий пересказ Иттена )
–11
Rome, #
Я как-то отказался от услуг дизайнера, у него напрочь отсутствовало понимание сочетаемости цветов, он смешивал черный с розовым и синий с черным.
+8
grokru, #
Черный с розовым — классическая гамма эмо )
–8
Rome, #
я знаю, поэтому эмо выбрали розовый с черным
+17
TheShock, #
напрочь отсутствовало понимание сочетаемости цветов

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

синий с черным.

У нас вот на работе отлично смотрятся сине-чёрные стулья, а я сижу в классняцом сине-чёрном реглане.

Ну или вот смотрите:


Сочетание синего и чёрного в одежде. И сочетание синего и чёрного на фоне. Что одно, что другое смотрится вполне естественно.

Другое дело, что дизайнер мог не выдерживать контраст цветов или просто не иметь вкуса.
+17
maxshopen, #
Да черный вообще неплохо сочетается с любыми цветами
+1
Rome, #
Отлично сочетается с белым. Пример у вас перед носом.
0
maxshopen, #
Не понял что вы хотели мне этим сказать. Белый входит в множество «любых цветов», и разумеется сочетается с черным
0
Rome, #
У вас логическое нарушение, я обратил на это внимание. Вы сказали с «любыми цветами», что означает со всеми.
+1
Mezomish, #
Что-то я не пойму, в чём у него нарушение. Он сказал «неплохо сочетается с любыми цветами». Вы сказали «отлично сочетается с белым», тем самым приведя один из примеров, подтверждающих его высказывание. В чём нестыковка-то?
0
Rome, #
1. неплохо сочетается с любыми цветами
2. отлично сочетается с белым

Вы, правы, я неправильно прочел фразу. Неплохо, это терпимо. Можно потерпеть синий текст на черном фоне. Это будет «неплохо». Но лучше, чтобы было «отлично», это черный текст на белом фоне.
+1
TheShock, #

0
weiss, #
Светловат для синего.
–1
TheShock, #
У синего много разных оттенков.
0
weiss, #
Если взять синий, контрастности будет недостаточно для удобного чтения.
–2
Rome, #
ну, так про то и речь, что вкуса у него не было, именно это я имел ввиду
+2
TheShock, #
Но Вы ведь сказали, что у него отсутствовало понимание сочетаемости цветов, потому что он смешивал черный с розовым и синий с черным.
0
Rome, #
Ну, так если он лепит розовый текст на черном фоне и в результате ничего не видно, это можно назвать чувством вкуса?
0
iago, #
Скорее всего, вы не совсем точно выразили свою мысль, поэтому вас не поняли. Розовые буквы на чёрном фоне — зло, но само по себе сочетание в другом контексте может выглядеть неплохо. На мой, программерский, взгляд
0
Rome, #
По цветовому тесту Роршаха выбор черного в сочетании розовым означает признаки депрессии. Собственно, именно поэтому эмо выбрали эти цвета. Черный — грусть, розовый — эмоции. Они выбирали по значению, а не по сочетаемости.
0
DjOnline, #
синий с чёрным в Android >4.0?
–3
Mystex, #
Земляк, ты поражаешь своей продуктивностью. Столько хороших статей пишешь. Спасибо!
0
grokru, #
спасибо, но я уже давно не уфимец :)
0
CheGevara, #
Под Хромом юзаю вот это для подобной подборки цветов: https://chrome.google.com/webstore/detail/color-sphere/knomilfbnhpkmibhmleppnkmcempglag?hl=ru&utm_source=chrome-ntp-launcher
+21
yojick, #
По-моему, статья ни о чем. Нет никакого обоснования того, что, рисуя геометрические фигуры на цветовом круге, мы получим приятные глазу сочетания. Приведенные сочетания цветов в большинстве своем ужасны, и никак не иллюстрируют в целом верные идеи. Кроме того, использовать сочетания нескольких чистых цветов одновременно нужно с очень большой осторожностью, в статье же все иллюстрации используют именно чистые цвета. Почему основные цвета являются таковыми — не сказано. Никаких отсылок к теории цвета, ничего.

0
Setti, #
Поддерживаю. Статья построена на одном из основных постулатов теории цвета. Но автор даже не приводит его. Звучит он примерно так: гармония цвета достигается за счет варьирования насыщенностью, яркостью и тоном. Один или больше из этих компонентов должен полярно отличаться от другого или остальных. Вот и всё.

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

Теория также объясняет, почему белый, серый и чёрный всегда сочетаются с остальными цветами — они всегда не совпадают по тону.
+6
CyberAP, #
В примере про Tint и Shade вот такая картинка должна быть:



У вас там к цвету просто чёрный и белый добавляется. (и это несмотря на тот факт что картинка у вас вообще в jpg)
0
Antelle, #
Нет, это не тон (tint). Tint — это именно добавление белого.
А у вас на картинке — цвет.
0
CyberAP, #
Хм, да, похоже вы правы: en.wikipedia.org/wiki/Tints_and_shades
Только не тон, а оттенок.
Но комбинирование тинта и изменения тона мне больше нравится чем обычное добавление белого.
0
Antelle, #
Тон :) Оттенок — это чистый цвет + чёрный (запомнить легко: оттенок от слова тень), тон — чистый цвет + белый.
+1
CyberAP, #
Говоря Тон я вот что имею ввиду: Тон (цвет)
Не могу сказать 100% корректный это перевод Hue или нет.
+1
Antelle, #
Тьфу, я наврал конечно. Спасибо что поправили, пора спать )
+1
CyberAP, #
Да и меня спасибо что поправили, хоть буду знать что такое Tint
+6
Alexufo, #
Одна большая проблема, просто проблемища! В таких статьях «теория цвета» никогда не учитывается форма объектов. А это крайне важно. Формой можно легко любое правило разрушить элементарно. И посути эти подбиралки цветов так и не прижились. Ну нет алгоритма качественного дизайна, качественных цветов. Ну нету.
НЛО прилетело и опубликовало эту надпись здесь
+1
ymik, #
С подбором гармоничных цветов не всё так просто, необходимо манипулировать ещё и яркостью-насыщенностью — года три назад как раз исследовал триадные наборы для дальтоников :)

habrahabr.ru/post/60426/
+1
despoth, #
Данное колесо прекрасно и всем дизайнерам хорошо известно. Проблема заключается лишь в том, что если провести линии между синим, зеленым и красным (экранная цветовая схема RGB), то получится весьма непонятный кривой треугольник. Для тех же, кто работает с печатью, и вовсе сложно построить цветовое взаимодействие — желтый есть, а вот явно циана и мадженты нет, но хотя бы с натяжкой можно притянуть, но уж черного точно нету (цветовая схема CMYK). Так что этот круг со всеми его комплиментарными теориями гармонии — сугубо вещь теоретическая. Но таки классная. Проще, в общем говоря, не заморачиваться, есть куча сервисов вроде адобовского кулера или там которые гуглятася по «color scheme», которые с той или иной легкостью помогут подобрать нужные цвета к имеющемуся. Приментяь же всю эту высшую тригонометрию гипотетического круга к RGB/CMYK — абсолютно никчемная престидижитация.
0
drzerg, #
Сочетание цвета и цветовая палитра это совершенно разные вещи.

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

Никакой высшей тригонометрии тут вообще нет. Всё просто и логично, как в природе.

А по CMYK — выбрал цвет, и практически любая графическая программа сконвертировала его в ту или иную цветовую модель.
+8
Reey, #
Цветовой круг никак не соотносится с аддитивной (rgb) и субстрактивной (cmy) моделями.
Цветовой круг построен на трех спектральных цветах, которые называются основными, потому как не могут быть получены путем смешения других цветов. Цветовой круг имеет больше теоретическое значение для подбора цвета, а также обладает самым большим охватом спектра, в то время как цветовые модели это скорее технические решения со своими тараканами.
В RGB модели смешивается свет. Аддитивной модель называется потому что параметр освещенности увеличивается в результате наложения цветов. На черной подложке смешение red, green и blue даст нам белый.
image
Модель CMYK же построена по противоположной схеме. Белая подложка является самым светлым пятном. Освещенность уменьшается при наложении.
image
В общем как вы и сказали: «Применять же всю эту высшую тригонометрию гипотетического круга к RGB/CMYK — абсолютно никчемная престидижитация.» Точно так же как, например применять цветовой круг к LAB.

С точки зрения вышесказанного могу дополнить, что считать дополнительные цвета какими-то особо гармоничными бесполезно. Можно взять любые три цвета на круге и все они по какой-нибудь схеме (complementary, analogous, triad etc.) да окажутся сочетающимися.
Надо учитывать психилогический эффект от использования гаммы. Например серый при использовании с желтым будет выглядеть фиолетовее чем есть (симультанный контраст). Теплые тона кажутся ближе и больше чем холодные и т.д и т.п
Для художников дополнительные цвета полезны тем что при смешении дают серый. Дополнительным цветом можно приглушать, затемнять.
Короче всем читать Иоханнеса Иттена «Искусство цвета». Статья без книги бесполезна.
0
drzerg, #
А заодно и «Искусство формы».
НЛО прилетело и опубликовало эту надпись здесь
0
SLY_G, #
О, спасибо, давно хотел узнать.
А что делать, если мне нужен цвет, которого нет на круге? К примеру, розовый?
Как к нему подбирать эти дополняющие цвета?
0
KirAmp, #
цвета этого круг астрактные, их можно смещать на любую дельту, пока в одной части не появится нужный вам розовый.
+9
SLY_G, #
Да, и к слову — статья находится в противоречии с заголовком.
Теории в ней никакой нет. Только инструмент для подбора цвета.
В теории нужно было бы рассказать, как работает зрение, почему этот цветовой круг содержит именно столько и именно таких цветов.
+9
0n1y_0ne, #
Ээээээмм… О чем статья?
0
Jeket, #
О полезной ссылке в постскриптуме. Я серьезно, мне как инженеру не хватает подобных сервисов по подбору цветов для тестовых приложений.
0
dudeonthehorse, #
Хм… читал это в web creation, если кто-то помнит, что это такое.
+2
truezemez, #
А как эта теория применима на практике? Вот хочу я сделать простой шаблон для сайта. Мне нужны цвета: фона, текста, ссылок, заголовков и т.д. Как мне крутить эти Ваши цветные колеса, чтобы получить что-то вменяемое? Я в этом деле совсем деревянный. Может знает кто?
–1
beavis_1, #
Никогда не придавал особого значения подобным методикам. Хороший дизайнер такие вещи должен чувствовать сам, а не загонять себя в какие-то сомнительные рамки. Теория цвета — вещь, конечно, интересная, но также нужно уметь делать из этого правильные выводы, и не забывать думать своей головой :)
+1
dedsky, #
Кто-нибудь может мне объяснить, почему цвета в круге расположены с некоторым смещением. Диапазон от красного до зеленого сильно растянут, в то время как от зеленого к синему зажат. Ведь если взять математически RGB и равномерно разложить по кругу, то каждый новый (из этих трех цветов) должен начинаться через 120 градусов.
+8
Moskus, #
На самом деле, все просто. Картинки у автора — правильные, а слова про RGB к ним — неправильные.

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

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

Вот RYB:


А вот RGB:


Делайте выводы.
0
dedsky, #
Спасибо! Неожиданно. А где нибудь еще можно про это почитать?
0
Moskus, #
Честно говоря — не знаю. В википедии про Color wheel имеется статья с упоминанием всяких старинных книжек об этом.

Мне эта информация знакома по какому-то советскому учебнику рисования для школьников (раздел о цветовой композиции), который попался в руки уже слишком давно, еще в младших классах школы, чтобы вспомнить его выходные данные.
+1
danfe, #
Для начала имхо стоит погуглить на тему additive vs. subtractive color models.
0
iago, #
Ух ты, какая у вас тема Windows, не видел такой с Win 98 SE :) аж ностальгия проснулась. Правда, с темами не дружили 50% приложений с хардкодным цветом фона лэйблочек и кнопочек, но я всё равно менял их каждый день. Больше всего оливковая нравилась.
0
Moskus, #
Это XP. А я люблю зеленый, как можно догадаться. :) И она у меня такая как раз со времен 3.11.
+1
iago, #
А я не помню, чтобы ставил темы в 3.11… она мне итак чудом и верхом совершенства после синего нортона казалась, я даже не знал что там они есть :)
0
Alexufo, #
вы свой баланс серого смещаете в сторону красного)

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