Цветовые модели

Цветовые модели можно разделить на три класса:

• Аддитивные — основанные на сложении цветов.
• Субтрактивные — основанные на вычитании цветов.
• Перцепционные — основанные на восприятии (перцепция — чувственное восприятие, отражение вещей в сознании через органы чувств).

Аддитивные модели

RGB (Red — красный, Green — зелёный, Blue — синий) — аддитивная модель.

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

Субтрактивные модели

CMY (Cyan — голубой, Magenta — пурпурный, Yellow — жёлтый) — субтрактивная модель, используется в полиграфии (в том числе при печати картинок на принтере).

Бумага изначально белая. Из белого цвета можно “вычитать” цветовые RGB-компоненты и получать различные цвета от белого (ничего не вычитаем) до чёрного (вычитаются все компоненты с максимальной интенсивностью).

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

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

“Вычитание” CMY-цветами одной из RGB-компонент белого цвета основано на поглощении красителем соответствующего цвета:

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

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

  
  
  

• На создание чёрного цвета тратится много краски.
  
  
• Цветные красители дороже обычных чёрных.
  
  

По описанным выше причинам к трём основным краскам (голубая, пурпурная, жёлтая) добавляют ещё одну — чёрную, и модель CMY превращается в CMYK (Cyan — голубой, Magenta — пурпурный, Yellow — жёлтый, blacK — чёрный). Чёрный цвет в этой модели обозначается аббревиатурой K, чтобы не путать его с синим.

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

Следует отметить, что и модель RGB даже в режиме “True Color” не охватывает все цвета, которые способен воспринять человеческий глаз. Например, натуральный ярко-оранжевый “апельсиновый” цвет в экранной палитре отсутствует.

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

Перцепционные модели

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

HSB (от Hue — цветовой тон, оттенок; Saturation — насыщенность, контрастность; Brightness — яркость) — перцепционная модель.

Эта система представления цвета в разных редакторах называется по-разному. Можно встретить обозначение HSV (от Hue — цветовой тон, оттенок; Saturation — насыщенность, контрастность; Value — величина яркости) или HLS (от Hue — цветовой тон, оттенок; Lightness — освещённость; Saturation — насыщенность).

Оттенок (тон)

Эта компонента задаёт цвет на радуге — максимально яркий и насыщенный.

Насыщенность (контраст)

Эта компонента определяет пропорцию, в которой к цвету “чистого” тона добавляется равный ему по яркости бесцветный серый.

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

Изменение тона при нулевой насыщенности не приводит к изменению цвета — он остаётся серым.

Яркость

Максимальное значение этой компоненты превращает любой цвет в белый, а минимальное — в чёрный.

Разнообразие перцепционных интерфейсов

Перцепционные модели цвета могут быть по-разному представлены в графических редакторах. Рассмотрим несколько примеров.

На плоскости задаются тон и насыщенность, а на отдельной линейке устанавливается яркость:

На линейке устанавливается тон, а на плоскости подбираются насыщенность и яркость:

На круге устанавливается тон (по дуге) и насыщенность (по радиусу), а на линейке устанавливается яркость:

На кольце устанавливается тон, а на треугольнике подбираются насыщенность и яркость:

Диапазоны изменения перцепционных компонент

Наиболее логичными представляются схемы, в которых тон меняется от 0° до 360° (по цветовому кругу), а насыщенность и яркость от 0% до 100%:

В интерфейсной цветовой схеме редактора Paint все три HSB-компоненты меняются от 0 до 240 условных единиц.

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

Цвета радуги

Давайте посмотрим на тоновую палитру, склеенную в кольцо:

Можно заметить, что в радуге преобладают 6 цветов: три RGB-цвета — красный, зелёный, синий и три CMY-цвета, расположенные точно между ними — голубой, пурпурный, жёлтый. Вспомним соотношения между этими цветами:

синий + зелёный = голубой
красный + синий = пурпурный
красный + зелёный = жёлтый

Цвета, расположенные в верхней половине кольца относятся к тёплым цветам, а в нижней — к холодным.

Считается, что тёплый цвет приближает предмет, привлекая к нему внимание. Холодный — отдаляет, успокаивает.

Рекомендации по работе с цветом

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

При уменьшении площади, которую занимает цвет, оттенки становятся малоразличимы, и цвета визуально “теряют” насыщенность. Это особенно хорошо заметно на цветных текстах:

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

Чёрные и белые цвета “не терпят” примесей в небольших количествах. Лучше использовать их в “натуральном” виде. К белому можно добавлять немного “синьки”:

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

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

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

Например, маленький объект тускло-синего цвета внутри большого ярко-зелёного приобретает зелёный оттенок:

На границах цвета меняют свой вид. Тёмный цвет рядом со светлым становится ещё темнее, а светлый — ярче:

Практикум

Рабочие файлы для практикума расположены в каталоге:

.\draw\work\unit07\

Возможные результаты работы над заданиями приводятся ниже.

Задание 1. Волшебник Изумрудного Города

Задание 2. Бабочка

Задание 3. Медвежьи радости

Задание 4. Трубопровод

Задание 5. Красные шары

Задание 6. Аквариум

Задание 7. Кот и пёс

Задание 8. Хранитель

Ответы на вопросы

1. Как можно “забрать” цвет с готового рисунка?
   
   Ответ. Можно “забрать краску” с готового рисунка при помощи инструмента Выбор цветов:
   
   
   
   Краска для основного цвета (щелчок левой кнопкой) и цвета фона (щелчок правой кнопкой) набирается в пипетку с нужного участка рисунка:
   
   
   
   
2. Как закрасить замкнутую область?
   
   Ответ. Нужно выбрать инструмент Заливка:
   
   
   
   Щелчком левой кнопки область окрашивается в основной цвет, а щелчком правой — в цвет фона.

   

   
   
   

3. Что произойдёт, когда контур закрашиваемой области имеет разрыв?
   
   Ответ. Краска “вытечет” через разрыв наружу:
   
   
   
   
4. Расскажите алгоритм замена цвета рабочей палитры на цвет из основной или дополнительной палитры.
   
   Ответ.
   1. Выбираем в рабочей палитре цвет, который можно заменить новым, и выполняем на нем двойной щелчок (левой или правой) кнопкой:
      
      
   
   
   
   2. Выбираем новый цвет в появившемся окошке Изменение палитры (в Основной палитре или палитре Дополнительные цвета):
      
      
   
   
   
   3. Новый цвет появляется в рабочей палитре на месте старого:
      
      
   
   
   
5. Почему трава зелёная, а песок жёлтый?
   
   Ответ. Предметы часть светового спектра поглощают, а часть отражают. Мы видим отражённые лучи. Трава отражает зелёный цвет, а песок — жёлтый.
   
   
   
   
6. Что произойдёт, если белый цвет пропустить через стеклянную призму?
   
   Ответ. Белый свет является смесью цветных лучей, каждый из которых имеет свой угол преломления при прохождении через стеклянную поверхность. В результате при прохождении через стеклянную призму белый цвет разлагается на цветные составляющие:
   
   
   
   
7. Верно ли, что радуга состоит из 7 цветов?
   
   Ответ. Радуга (результат разложения белого цвета на составляющие) содержит все видимые цвета. Их условно объединяют в семь групп. Но так принято не всюду. Например, для англичанина в радуге 6 цветов (в языке голубой и синий цвет обозначается одним словом blue).
   
   
8. Объясните устройство человеческого глаза.
   
   Ответ. С помощью хрусталика, который работает как объектив фотокамеры, изображение формируется на сетчатке, содержащей нервные клетки. Информация с нервных клеток поступает в зрительный нерв, и по нему в мозг.
   
   
   
   
9. Какие нервные клетки отвечают за чёрно-белое, сумеречное зрение?
   
   Ответ. Палочки.
   
   
10. Какие нервные клетки отвечают за цветное зрение?
    
    Ответ. Колбочки.
    
    
11. Как формируется информация о цвете в зрительном нерве?
    
    Ответ. Колбочки можно разделить на “красные“ — воспринимают только спектр красного цвета, “зелёные“ — воспринимают только спектр зелёного цвета и “синие“ — воспринимают только спектр синего цвета. В зрительном нерве информация от “цветных” колбочек суммируется, что даёт представление о цвете, как о смеси трёх компонент.
    
    
12. Какой цвет получится, если смешивать красную, зелёную и синие компоненты?
    
    Ответ. В результате может получиться любой цвет. Всё зависит от пропорции компонент, входящих в состав смеси.
    
    
13. Какой цвет получится, если смешать равное количество красок чистого красного, зелёного и синего цвета?
    
    Ответ. Белый.
    
    
    
    
14. Какой цвет получится, если смешать равное количество красок чистого красного и зелёного цвета?
    
    Ответ. Жёлтый.
    
    
    
    
15. Какой цвет получится, если смешать равное количество красок чистого зелёного и синего цвета?
    
    Ответ. Голубой.
    
    
    
    
16. Какой цвет получится, если смешать равное количество красок чистого красного и синего цвета?
    
    Ответ. Пурпурный.
    
    
    
    
17. Как называется система кодирования цвета в компьютере?
    
    Ответ. RGB (от Red — красный, Green — зелёный, Blue — синий).
    
    
18. Как задаётся цвет в системе кодирования RGB?
    
    Ответ. Цвет задаётся в виде указания интенсивностей красной, зелёной и синей составляющей.
    
    
19. Назовите цвета 8-цветной палитры и их двоичные коды.
    
    Ответ.
    
    
    
    
20. Как получаются чёрные и белые цвета на экране компьютера?
    
    Ответ. Серый цвет содержит RGB-компоненты одинаковой интенсивности. Нулевая интенсивность всех компонент даёт чёрный цвет, максимальная — белый.
    
    
    
    
21. Почему при выборе монитора рекомендуется обращать внимание на цвет экрана в выключенном состоянии?
    
    Ответ. Цвет потушенного экрана — это цвет чёрного пиксела. Поэтому, чем чернее экран, тем более качественным получается на нем изображение.
    
    
22. Что такое цветовая палитра монитора?
    
    Ответ. Цветовая палитра монитора — это те цвета, которые он может отображать на экране.
    
    Такой характеристики как цветовая палитра у лучевого монитора нет. Число цветов на экране определяется настройками пользователя и зависит от выбранного разрешения экрана и размера видеопамяти.
    
    
23. Чем определяется число битов, необходимых для кодирования цвета одного пиксела?
    
    Ответ. Числом вариантов интенсивности для каждой RGB-компоненты.
    
    Если вариантов два: 0% и 100%, то для кодирования одной компоненты требуется один бит, а для кодирования цвета одного пиксела — три бита.
    
    Если интенсивность каждой компоненты принимает пять значений: 0%, 25%, 50%, 75%, 100%, то для кодирования одной RGB-компоненты потребуется 3 бита (с запасом), а для кодирования цвета одного пиксела — 9 бит.
    
    
24. Что хранится в видеопамяти компьютера?
    
    Ответ. В видеопамяти компьютера хранятся цветовые коды пикселов экрана (по строчкам).
    
    
25. От чего зависит размер видеопамяти, необходимой для показа на экране цветного изображения?
    
    Ответ. Размер видеопамяти, необходимой для показа цветного изображения, зависит от цветности экрана (множества значений каждой RGB-компоненты) и разрешения.
    
    
26. Как рассчитать необходимый размер видеопамяти?
    
    Ответ.
    
    V = p·w·h
    p = 3·b
    
    Здесь:
    
    • V — необходимый размер видеопамяти;
    • p — число бит цветового кода на один пиксел;
    • w и h — разрешение экрана (wxh);
    • b — число бит цветового кода одной компоненты RGB.
    
    Пусть k — число значений интенсивности одной RGB-компоненты. Тогда b вычисляется как минимальное значение, при котором выполняется неравенство:
    
    k < (или =) 2^b
    
    
    Например, при k равном пяти, шести, семи или восьми b = 3.
    
    
27. Как рассчитать цветность монитора, если задано число вариантов интенсивности RGB-компонент?
    
    Ответ.
    
    C = k³
    
    Здесь k — число вариантов интенсивности RGB-компоненты.
    
    
28. Как называется система кодирования цвета, на основе которой построен интерфейс подбора цвета в графическом редакторе?
    
    Ответ. HSB (от Hue — цветовой тон, оттенок; Saturation — насыщенность, контрастность; Brightness — яркость).
    
    
29. Как задаётся цвет в системе кодирования HSB?
    
    Ответ. Цвет задаётся в виде трёх компонент: цветового тона, насыщенности и яркости.
    
    
30. Что такое тон, насыщенность (контрастность) и яркость цвета?
    
    Ответ. Оттенок (тон) — это цвет на радуге. Насыщенность (контрастность) — это процент содержания в цвете серой примеси. Цвет максимальной насыщенности не содержит серого вообще, а при нулевой насыщенности все цвета серые. Яркость — это интенсивность, с которой излучается цвет. При максимальной яркости все цвета превращаются в белые, при нулевой — в чёрные.
    
    
31. Расскажите алгоритм конструирования цвета при помощи HSB-интерфейса.
    
    Ответ.
    
    

Решения зачётного класса

Зачёт 1 Арифметика компьютерного цвета

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

Зачёт 2 Определение цвета в палитре цветов

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

Задания построены на Web-палитре, рассчитанной на нормальное отображение цветов на экранах 256-цветных мониторов. В этой палитре каждая RGB-компонента может принимать 6 значений интенсивности. Всего в ней: 6 · 6 · 6 = 216 цветов.

Зачёт 3 Кодирование цвета в модели RGB

Задания рассчитаны на чувственное закрепление теории получения цвета смешением цветовых компонент разной интенсивности.

Зачёт 4 Двоичное кодирование цвета

Двоичное кодирование цвета. Восемь основных цветов: три RGB-цвета (красный, зелёный, синий), три CMY-цвета (голубой, пурпурный, жёлтый) и два универсальных цвета (белый, чёрный).