Сравнение цветовых моделей в компьютерной графике
 | Эта статья нуждается в дополнительных цитатах для проверки . ( сентябрь 2017 г. ) |
В этой статье представлена вводная информация о цветовых моделях RGB, HSV и HSL с точки зрения компьютерной графики (веб-страницы, изображения). Для поддержки основного обсуждения также предоставляется введение в цвета.
Основы цвета
[ редактировать ]
Основные цвета и оттенки
[ редактировать ]Во-первых, «цвет» относится к субъективной интерпретации человеческим мозгом комбинаций узкого диапазона длин волн света. По этой причине определение «цвета» не основано на строгом наборе физических явлений. Поэтому даже базовые понятия, такие как «основные цвета», четко не определены. Например, традиционные «Цвета художника» используют красный, синий и желтый в качестве основных цветов, «Цвета принтера» используют голубой, желтый и пурпурный, а «Светлые цвета» используют красный, зеленый и синий. [1] «Цвета света», более формально известные как аддитивные цвета, образуются путем объединения красного, зеленого и синего света. В этой статье речь идет об аддитивных цветах, а красный, зеленый и синий считаются основными цветами.
Оттенок — это термин, описывающий чистый цвет, то есть цвет, не измененный тонированием или затенением (см. Ниже). В аддитивных цветах оттенки образуются путем объединения двух основных цветов. Когда два основных цвета объединяются с одинаковой интенсивностью, в результате получается «вторичный цвет».
Цветовое колесо
[ редактировать ]Цветовой круг — это инструмент, который обеспечивает визуальное представление отношений между всеми возможными оттенками. Основные цвета расположены по кругу с равными интервалами (120 градусов). (Предупреждение: цветовые круги часто изображают основные цвета «Цвета художника», что приводит к набору оттенков, отличному от аддитивных цветов.) На рисунке показан простой цветовой круг, основанный на аддитивных цветах. Обратите внимание, что положение (сверху, справа) начального цвета, обычно красного, произвольно, как и порядок зеленого и синего (по часовой стрелке, против часовой стрелки). На иллюстрации также показаны вторичные цвета: желтый, голубой и пурпурный, расположенные посередине (60 градусов) между основными цветами.
Дополнительный цвет
[ редактировать ]Дополнением оттенка является оттенок, который находится напротив него (180 градусов) на цветовом круге. При использовании аддитивных цветов смешивание оттенка и его дополнения в равных количествах дает белый цвет.
Оттенки и оттенки
[ редактировать ]В следующем обсуждении используется иллюстрация трех проекторов, направленных на одно и то же место на экране. Каждый проектор способен генерировать один оттенок. «Интенсивность» каждого проектора «согласована» и может быть одинаково отрегулирована от нуля до максимума. (Примечание: «Интенсивность» используется здесь в том же смысле, что и цветовая модель RGB. Тема сопоставления, или « гамма-коррекции », выходит за рамки этой статьи.)
Тень . создается путем «затемнения» оттенка Художники называют это «добавлением черного». На нашей иллюстрации один проектор настроен на полную яркость, второй — на некоторую интенсивность от нуля до полной, а третий — на ноль. «Затемнение» достигается путем уменьшения настройки интенсивности каждого проектора до одинаковой доли от начальной настройки.
В примере с тенью, при любом полностью затененном оттенке, все три проектора имеют нулевую интенсивность, в результате чего получается черный цвет.
Оттенок . получается путем «осветления» оттенка Художники называют это «добавлением белого». На нашей иллюстрации один проектор настроен на полную яркость, второй — на некоторую интенсивность от нуля до полной, а третий — на ноль. «Освещение» достигается путем увеличения настройки интенсивности каждого проектора на одну и ту же долю от начальной настройки до полной.
Обратите внимание, что в примере с тонировкой теперь вносит свой вклад третий проектор. Когда оттенок полностью осветлен, все три проектора работают на полную интенсивность, и в результате получается белый цвет.
Обратите внимание на атрибут общей интенсивности в аддитивной модели. Если полная интенсивность для одного проектора равна 1, то основной цвет имеет общую интенсивность 1. Вторичный цвет имеет общую интенсивность 2. Белый имеет общую интенсивность 3. Тонирование или «добавление белого» увеличивает общую интенсивность. оттенка. Хотя это просто факт, модель HSL будет учитывать этот факт при разработке.
Тоны
[ редактировать ]Тон — это общий термин, обычно используемый художниками для обозначения эффекта уменьшения «красочности» оттенка; [1] [2] художники называют это «добавлением серого». Обратите внимание, что серый — это не цвет и даже не отдельное понятие, а относится ко всему диапазону значений между черным и белым, где все три основных цвета представлены одинаково. Представлен общий термин, поскольку более конкретные термины имеют противоречивые определения в разных цветовых моделях. Таким образом, затенение принимает оттенок в сторону черного, тонирование — в сторону белого, а тона охватывают диапазон между ними.
Выбор цветовой модели
[ редактировать ]Ни одна цветовая модель не обязательно «лучше» другой. Обычно выбор цветовой модели диктуется внешними факторами, такими как графический инструмент или необходимость указания цветов по стандарту CSS2 или CSS3 . Следующее обсуждение описывает только то, как функционируют модели, сосредоточившись на понятиях оттенка, оттенка, оттенка и тона.
RGB
[ редактировать ]Подход модели RGB к цветам важен, потому что:
- Он напрямую отражает физические свойства дисплеев « Truecolor ».
- По состоянию на 2011 год большинство графических карт определяют значения пикселей в виде красного, зеленого и синего цветов. Типичный диапазон значений интенсивности для каждого цвета (0–255) основан на разбиении двоичного числа с 32 битами на четыре байта по 8 бит каждый. 8 бит могут содержать значения от 0 до 255. Четвертый байт используется для указания « альфа » или непрозрачности цвета. Непрозрачность вступает в игру, когда слои разных цветов накладываются друг на друга. Если цвет в верхнем слое не полностью непрозрачен (альфа < 255), цвет нижних слоев «просвечивает».
В модели RGB оттенки представляются путем указания одного цвета с полной интенсивностью (255), второго цвета с переменной интенсивностью и третьего цвета без интенсивности (0).
Ниже приведены некоторые примеры использования красного в качестве цвета полной интенсивности и зеленого в качестве цвета частичной интенсивности; синий всегда равен нулю:
| Красный | Зеленый | Результат |
|---|---|---|
| 255 | 0 | красный (255, 0, 0) |
| 255 | 128 | оранжевый (255, 128, 0) |
| 255 | 255 | желтый (255, 255, 0) |
Оттенки создаются путем умножения интенсивности каждого основного цвета на 1 минус коэффициент оттенка в диапазоне от 0 до 1. Коэффициент оттенка 0 не влияет на оттенок, коэффициент оттенка 1 дает черный цвет:
- новая интенсивность = текущая интенсивность * (1 – коэффициент затемнения)
Ниже приведены примеры использования оранжевого цвета:
| 0 | .25 | .5 | .75 | 1.0 |
|---|---|---|---|---|
| (255, 128, 0) | (192, 96, 0) | (128, 64, 0) | (64, 32, 0) | (0, 0, 0) |
Оттенки создаются путем изменения каждого основного цвета следующим образом: интенсивность увеличивается так, что разница между интенсивностью и полной интенсивностью (255) уменьшается на коэффициент оттенка в диапазоне от 0 до 1. Коэффициент оттенка 0 ничего не делает, коэффициент оттенка, равный 1, дает белый цвет:
- новая интенсивность = текущая интенсивность + (255 – текущая интенсивность) * коэффициент оттенка
Ниже приведены примеры использования оранжевого цвета:
| 0 | .25 | .5 | .75 | 1.0 |
|---|---|---|---|---|
| (255, 128, 0) | (255, 160, 64) | (255, 192, 128) | (255, 224, 192) | (255, 255, 255) |
Тона создаются путем применения как оттенка, так и тинта. Порядок выполнения этих двух операций не имеет значения со следующим ограничением: когда операция оттенка выполняется над оттенком, интенсивность доминирующего цвета становится «полной интенсивностью»; то есть вместо 255 необходимо использовать значение интенсивности доминирующего цвета.
Ниже приведены примеры использования оранжевого цвета:
| 0 | .25 | .5 | .75 | 1.0 | |
|---|---|---|---|---|---|
| 0 | (255, 128, 0) | (192, 96, 0) | (128, 64, 0) | (64, 32, 0) | (0, 0, 0) |
| .25 | (255, 160, 64) | (192, 120, 48) | (128, 80, 32) | (64, 40, 16) | (0, 0, 0) |
| .5 | (255, 192, 128) | (192, 144, 96) | (128, 96, 64) | (64, 48, 32) | (0, 0, 0) |
| .75 | (255, 240, 192) | (192, 168, 144) | (128, 112, 96) | (64, 56, 48) | (0, 0, 0) |
| 1.0 | (255, 255, 255) | (192, 192, 192) | (128, 128, 128) | (64, 64, 64) | (0, 0, 0) |
ВПГ
[ редактировать ]Модель HSV или HSB описывает цвета с точки зрения оттенка, насыщенности и значения (яркости). Обратите внимание, что диапазон значений каждого атрибута произвольно определяется различными инструментами или стандартами. Обязательно определите диапазоны значений, прежде чем пытаться интерпретировать значение.
Оттенок напрямую соответствует понятию оттенка из раздела «Основы цвета». Преимущества использования оттенка заключаются в том, что
- Угловое соотношение тонов вокруг цветового круга легко определить.
- Тени, оттенки и тона можно легко создавать, не влияя на оттенок.
Насыщенность напрямую соответствует концепции оттенка из раздела «Основы цвета», за исключением того, что полная насыщенность не дает оттенка, а нулевая насыщенность дает белый цвет, оттенок серого или черный цвет.
Значение напрямую соответствует понятию интенсивности из раздела «Основы цвета».
- Чистые цвета создаются путем указания оттенка с полной насыщенностью и значением.
- Оттенки создаются путем указания оттенка с полной насыщенностью и значением ниже полной.
- Оттенки создаются путем указания оттенка с менее чем полной насыщенностью и полным значением.
- Тона создаются путем указания оттенка и значения насыщенности и значения меньше полной.
- Белый создается путем указания нулевой насыщенности и полного значения независимо от оттенка.
- Черный создается путем указания нулевого значения независимо от оттенка или насыщенности.
- Оттенки серого создаются путем указания нулевой насыщенности и значения от нуля до полного.
Преимущество HSV в том, что каждый из его атрибутов напрямую соответствует базовым концепциям цвета, что делает его концептуально простым. Ощущаемый недостаток HSV заключается в том, что атрибут насыщенности соответствует тонированию, поэтому ненасыщенные цвета имеют увеличивающуюся общую интенсивность. По этой причине стандарт CSS3 планирует поддерживать RGB и HSL, но не HSV. [3]
ХСЛ
[ редактировать ]Модель HSL описывает цвета с точки зрения оттенка, насыщенности и яркости (также называемой яркостью). (Примечание: определение насыщенности в HSL существенно отличается от определения HSV, а яркость не является интенсивностью.) Модель имеет два важных свойства:
- Переход от черного к оттенку к белому симметричен и контролируется исключительно увеличением светлоты.
- Уменьшение насыщенности переходит в оттенок серого в зависимости от освещенности, таким образом сохраняя общую интенсивность относительно постоянной.
Упомянутые выше свойства привели к широкому использованию HSL, в частности, в цветовой модели CSS3. [3]
Как и в HSV, оттенок напрямую соответствует понятию оттенка из раздела «Основы цвета». Преимущества использования оттенка заключаются в том, что
- Угловое соотношение тонов вокруг цветового круга легко определить.
- Тени, оттенки и тона можно легко создавать, не влияя на оттенок.
«Яркость» сочетает в себе концепции растушевки и тонирования из раздела «Основы цвета». Предполагая полную насыщенность, яркость нейтральна при среднем значении, например 50 %, а оттенок отображается без изменений. Когда яркость снижается ниже средней точки, возникает эффект затенения. Нулевая яркость дает черный цвет. Когда значение увеличивается выше 50%, возникает эффект тонирования, а полная яркость дает белый цвет.
При нулевой насыщенности яркость управляет результирующим оттенком серого. Нулевое значение по-прежнему дает черный цвет, а полная яркость по-прежнему дает белый цвет. Значение средней точки дает «средний» оттенок серого со значением RGB (128 128 128).
Насыщенность или ее отсутствие создает тона эталонного оттенка, которые сходятся к оттенку серого с нулевой насыщенностью, который определяется яркостью. В следующих примерах используются оттенки красного, оранжевого и желтого со средней яркостью с уменьшением насыщенности. Отображается полученное значение RGB и общая интенсивность.
| 1.0 | .75 | .5 | .25 | 0 |
|---|---|---|---|---|
| (255, 0, 0), 256 | (224, 32, 32), 288 | (192, 64, 64), 320 | (160, 96, 96), 352 | (128, 128, 128), 384 |
| (255, 128, 0), 384 | (224, 128, 32), 384 | (192, 128, 64), 384 | (160, 128, 96), 384 | (128, 128, 128), 384 |
| (255, 255, 0), 512 | (224, 224, 32), 480 | (192, 192, 64), 448 | (160, 160, 96), 416 | (128, 128, 128), 384 |
Обратите внимание, что физическая природа аддитивного цвета не позволяет схеме работать точно, за исключением оттенков, находящихся посередине между основным и вторичным цветами. Однако общая интенсивность тонов, возникающих в результате уменьшения насыщенности, намного ближе, чем просто тонирование, как при ВПГ.
См. также
[ редактировать ]- Цветовая схема В этой статье описаны различные способы приятного сочетания цветов.
Ссылки
[ редактировать ]- ^ Перейти обратно: а б Йирусек, Шарлотта. «Цвет, значение и оттенок» . Искусство, дизайн и визуальное мышление . Проверено 23 октября 2011 г.
- ^ Бодди-Эванс, Мэрион. «Цветовой класс живописи: тона или значения» . Руководство About.Com . Архивировано из оригинала 20 октября 2011 года . Проверено 24 октября 2011 г.
- ^ Перейти обратно: а б W3C. «4.2.4. Цветовые значения HSL» . Модуль цвета CSS, уровень 3 . Проверено 12 октября 2011 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )