Компьютерный цвет состоит из трёх составляющих: красной, зелёной и синей. В кинескоп вашего монитора, как и цветного телевизора, имеется три электронных "пушки", которые заставляют светиться точки на экране. Каждая точка экрана (она же пиксель) состоит из трёх частей: красной, зелёной и синей соответственно.
Если каждая "пушка" работает на полной мощности, то мы видим в этой месте экрана белую точку. Если не работают вообще — чёрную. Все остальные цвета получаются различной интенсивностью этих трёх составляющих. Это наиболее очевидная схема с точки зрения компьютера. Она называется RGB, по первым буквам английских названий цветов.
Так выглядит техническая сторона дела. Но я не думаю, что вы с лёгкостью скажете, сколько какой составляющей в любом цвете. Если смесь красного с синим даёт фиолетовый — это известно и детям, то то, что зелёный с красным даёт жёлтый догадается не каждый. Человеческому глазу не свойственно раскладывать цвет на такие составляющие.
Для него более свойственно раскладывать цвет на другие три составляющие: тон (Hue), насыщенность (Saturation) и яркость (Brightness). Такая система представления цвета называется HSB. Тон — это характеристика цвета, отвечающая за составляющею оттенка, при полной яркости и насыщенности. Яркость — это свойство цвета изменяющаяся между чёрным и полностью насыщенным цветом. Насыщенность, при полной ярости проходит диапазон от наиболее насыщенного и яркого цвета до белого - абсолютно ненасыщенного. Так с цветом поступает человеческий глаз.
Сейчас всё больше и больше компьютерных программ поддерживают эту цветовую схему, но не многие из них предоставляют удобные средства работы с цветом.
Составляющую цвета можно представить как круг. В ней будет последовательность цветов: красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый и, снова, красный… Фиолетовый цвет является особенным в этом круге. В этом месте происходит "склейка" круга. Фиолетового цвета не существует в чистом виде. Только как смещение красного и синего.
А как же тогда такие цвета как чёрный или белый? Чёрный цвет — это полное отсутствие цвета. Каждый цвет, если его яркость снизить до нуля, превращается в чёрный. Поэтому человеческий глаз всё достаточно тёмное считает чёрным и оттенок (тон) цвета практически не различим. Этим свойством человеческого глаза пользуется алгоритм сжатия видео MPEG4. Все тёмные места кадра заменяются чёрным, или почти чёрным цветом. Это мешает различить детали в тёмных сценах фильма в отличие от ярких сцен, где хорошо прорисованы детали. Обратите на это внимание, когда следующий раз будете смотреть такой фильм.
Белый же цвет — это, как известно каждому, смесь всех цветов радуги. На экране он получается смешением всех трёх составляющих (красной, зелёной и синей) в равных максимальных количествах. Если смотреть с точки зрения глаза, то белый будет выглядеть так. Любой цвет, яркость которого максимальная, а интенсивность минимальной - будет белым.
Любой оттенок серого цвета — это смешанные в равных пропорциях красная, зелёная и синяя цветовая составляющая. Для глаза это любой цвет с минимальной интенсивностью и какой-то яркостью. В зависимости от яркости, он приближается либо к чёрному, либо к белому цвету.
Может показаться, что не возможно отобразить все цвета простым разложением на эти составляющие. Но как бы неправдоподобно это не казалось — это так. Надо отметить следующее: количество цветов, которые возможно отобразить на экране гораздо шире, чем то, что можно напечатать. Поэтому некоторые яркие и красивые картинки, которые отлично смотрятся на экране не возможно напечатать. Это свойство экрана вызвано тем, что он светится сам, в отличие от печатной продукции, которая сама по себе не светится.
Путешествие по цветовому пространству
Да, действительно, цвет представляет собой трёхмерное пространство. Оно может быть выражено в разных системах координат (цветовых системах), но представить цвет, как набор менее чем из трёх составляющих — невозможно.
Давайте, отправимся в путешествие по этому пространству. Мы будем пользоваться схемой HSB, о которой было рассказано выше.
Принято различать, так называемые, тёплые и холодные цвета. Разделение между ними проходит примерно где-то между зелёным и голубым, и фиолетовым и красным. Снизу — холодные, сверху — тёплые цвета.
Мы пройдёмся по этому кругу, начиная с синего цвета, и пойдём по направлению против часовой стрелки. Синий цвет единственный, который не раздражает глаз, когда его интенсивность становится практически минимальной при полной яркости. Это цвет сверкания горных вершин. Холодных и недостижимых. Цвет безоблачного неба. Он не становится грязно белым как другие цвета, от этого его и использовали при стирке, добавляя в белое бельё синьку.
Продвигаясь дальше ближе к зелёному, мы попадаем в область морских волн, или штормящего моря, если продвинуться не очень сильно и затемнить этот цвет. Дальше лежит граница холодных и тёплых цветов. Пересекая её, мы попадаем в чисто зелёный, который при понижении яркости становится цветом травы и листьев деревьев. Становится гораздо более приятным и близким.
Двигаясь дальше к жёлтому, мы попадаем в болотно-зелёный цвет и цвет хаки, цвет защитных костюмов военных. Жёлтый, при небольшой интенсивности, выглядит грязно, как пыльная песчаная дорога. Если он находится чуть ближе к зелёному, нежели к красному при полной яркости, то тут мы находим цвет лимона. Чистый, яркий жёлтый — цвет солнца.
Яркий оранжевый цвет — цвет апельсина. Или при сильной яркости — цвет восхода солнца. Если это цвет затемнить, то мы получим грязно-коричневый, а, продвигаясь в сторону красного, он будет становиться всё более и более бордовым. Продвигаясь дальше за красный, мы снова пересекаем зону разделения тёплых и холодных цветов. Почти на этой зоне, но ещё в тёплой находится малиновый цвет.
Углубляясь в зону холодных цветов, мы приближаемся к фиолетовому. В этом месте лежит цвет заката солнца. Тёмно фиолетовый, ближе к синему — цвет грозовых облаков.
Максимальная способность к восприятию цвета, если верить учёным, лежит в зелёной зоне. Поэтому эта зона кажется несколько шире других и ярче. Если вы посмотрите на радугу, то наиболее широкой и хорошо различаемой полосой будет зелёная.
Мы прошлись каким-то одним путём, их может быть сотни. У меня возникли одни ассоциации, у вас могут возникнуть совершенно другие. Я обращал внимание на одни цвета, можно обратить внимание на другие.
Подбор цветов
Теперь мы поговорим о подборе цветов. О том какие цвета сочетаются, а какие не сочетаются. Дело это, конечно, сугубо индивидуальное, но есть некоторые законы, о которых стоит знать, чтобы не попадать в неприятные ситуации.
Цвет — дело относительное. В разных контекстах один и тот же цвет может выглядеть совершенно по-разному. Вы, наверное, замечали, что цвет глаз человека сильно зависит от освещения. Или, когда вы смотрите боковым зрением на женщину, одетую в ярко-красную блузку, её шея кажется вам зелёноватой. Это свойство цвета притягивать к себе противоположный, тоже надо учитывать.
Для начала, стоит посмотреть на вопрос контраста. Контраст — это резкое различие по какому-то свойству. Для цвета это может быть различие по тону, яркости или контрасту. При выборе сочетаний цветов нужно смотреть на все три составляющие.
Для того, чтобы цвета хорошо друг с другом сочетались они не должны быть сильно похожими друг на друга, а то эта не сильная разница будет истолковываться глазом, как ошибка и не аккуратность автора.
Также плохо сочетаются цвета полностью противоположные по всем трём составляющим. Они настолько не похожи друг на друга, что их альянс просто не клеится.
Давайте разберёмся, где та золотая середина, когда цвета хорошо сочетаются друг с другом.
Она находится, обычно там, где присутствует контраст по двум из трёх составляющих и одинаковость по третей. Это может быть контраст по насыщенности и яркости и одинаковость по тону.
Или контраст по тону и яркости и одинаковость по насыщенности.
Вариант с контрастом по тону и насыщенности и одинаковостью по яркости, обычно, несколько хуже.
Конечно, это не является способом на все случаи жизни. И не редко бывает, что цвета подобранные таким способом упорно не хотят работать вместе, а иногда встречаются сочетания, хорошо смотрящиеся, но не удовлетворяющие теории.
Давайте теперь посмотрим на контраст по тону, о котором написано выше. Если с контрастом по яркости и насыщенности всё ясно, то с тоном не всё так просто. Для того чтобы разобраться в этом, давайте снова взглянем на цветовой круг.
Контраст, в случае с тоном, достигается в отдаленности цветов дуг от друга на цветовом круге. Если вы хотите подобрать второй цвет, контрастирующий с данным, вы можете выбрать цвета находящиеся под углом в 180 градусов к исходному цвету. Для подбора трёх контрастирующих цветов возьмите цвета находящиеся под углом в 120 градусов друг к другу.
Вы, наверное, замечали, что к чёрному и белому цветам хорошо подходят другие. Это связано с тем, что чёрный можно представить, как цвет с любым тоном и минимальной яркостью. А белый, как цвет с любым тоном и минимальной насыщенностью (при полной яркости). У этих цветов самих по себе есть уже нечто общее с другими цветами — тон. Поэтому они и сочетаются с другими цветам.
Хотя, если вы выберите в пару к белому розовый цвет, который также как и белый является слабо насыщенным и ярким, то у вас ничего не получится. Эти цвета будут слишком близкими друг к другу.
Ничто не заменит вам тренировку в подборе цветов, но эта информация должна помочь свою исследовательскую работу в области цвета. Рассматривая цвет, старайтесь, чтобы он занимал как можно большую область на экране, в идеале — полный экран. Это поможет вам точно оценить цвет. Таким образом, вы исключите искажения вызванные наличиями других цветов.
Подбор цветов для текста
И в завершении - коснемся вопроса выбора цвета текста, например для web-страницы, и фона для него. Самым важным критерием в таком выборе будет удобность чтения. И это первое, о чём нужно думать.
Для того чтобы текст хорошо читался, он должен быть контрастным по отношению к фону. Но этот контраст не должен бить по глазам:
Также стоит избегать в качестве фона пёстрых текстур. На их фоне буквы читаются с огромным напряжением:
Исследования учёных показали, что текст, оформленный тёмным шрифтом по светлому фону, читается несколько легче, чем инвертированный: светлым по тёмному. Наиболее удобным сочетанием является чёрным по белому. Это обеспечивает максимальный контраст и удобство чтения. Поэтому большие объёмы текста рекомендуется оформлять только так.
Вот несколько популярных сочетаний:
- черный на желтом:
- зеленый на белом:
- красный на желтом:
- красный на белом:
- оранжевый на черном:
Хочу обратить внимание, что контраст я выбирал так, как описано выше. А из тех же самых описанных сочетаний цветов можно сделать как хорошие, так и отвратительные комбинации.
В связи с тем, что разрешение экране очень низкое, для вывода шрифтов используется анти-алиасинг. Это технология сглаживания экранных шрифтов. Она действует следующим образом. Когда сложная кривая формы буквы проходит не точно по границе между пикселями, а делит его на части, он заливается не фоновым и не цветом текста, а промежуточным между этими цветам. Этот цвет определяется пропорциональным смешением фонового цвета и цвета текста в зависимости от того, в какой пропорции кривая делит пиксель. Этот трюк позволяет делать хорошо читаемыми мелкие шрифты.
Выбирая цвет нужно помнить про эту особенность экранных шрифтов. Если подобрать сочетание цветов не правильно, то может получиться как в первом примере. Когда этот промежуточный цвет получается более тёмным по сравнению с текстом и фоном и возникает неприятный дополнительный контур между текстом и фоном, который портит вид и мешает чтению: