Порівняння колірних моделей у комп'ютерній графіці
Ця стаття надає вступну інформацію про кольорові моделі 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
ред.Модель HSV або HSB описує кольори з точки зору відтінку, насиченості та значення (яскравості). Зауважте, що діапазон значень для кожного атрибута довільно визначається різними інструментами або стандартами. Обов'язково визначте діапазони значень, перш ніж намагатися інтерпретувати значення.
Відтінок безпосередньо відповідає концепції відтінку в розділі основні кольори. Перевагами використання відтінку є
- Кутовий зв’язок між тонами навколо кола кольорю легко визначити
- Відтінки, глибину тону та тони можна легко створити, не впливаючи на відтінок
Насиченість безпосередньо відповідає концепції відтінку в розділі «основні кольори», за винятком того, що повна насиченість не дає відтінку, тоді як нульова насиченість створює білий, відтінок сірого або чорного.
Значення безпосередньо відповідає поняттю інтенсивності в розділі основні кольори.
- Чисті кольори випускаються шляхом визначення відтінку з повною насиченістю і значенням
- Відтінки випускаються, задаючи відтінок з повним насиченням і меншим, ніж повне значення
- Відтінки випускаються шляхом визначення відтінку з меншим, ніж повним насиченням і повним значенням
- Тони виробляються, задаючи відтінок і менше, ніж повне насичення та значення
- Білий утворюється шляхом визначення нульової насиченості та повного значення, незалежно від відтінку
- Чорний колір виробляється шляхом визначення нульового значення, незалежно від відтінку або насиченості
- Відтінки сірого утворюються шляхом визначення нульової насиченості та між нулем і повним значенням
Перевага HSV полягає в тому, що кожен його атрибут відповідає безпосередньо базовим кольоровим поняттям, що робить його концептуально простим. Недоліком HSV є те, що атрибут насиченості відповідає тонуванню, тому ненасичені кольори мають загальну інтенсивність у зростанні. З цієї причини стандарт CSS3 планує підтримувати RGB та HSL, але не HSV.[3]
HSL
ред.Модель 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 |
Зауважте, що фізична природа додаткового кольору заважає схемі працювати точно за винятком відтінків на півдорозі між первинним та вторинним кольорами. Однак загальна інтенсивність тонів, що виникає внаслідок зменшення насичення, набагато ближча, ніж тонування поодинці, як у ВПГ.
Дивись також
ред.- Схема кольору[en] Ця стаття описує різні способи поєднання кольорів приємно.
- ↑ а б Jirousek, Charlotte. Color, Value, and Hue. Art, Design, and Visual Thinking. Процитовано 23 жовтня 2011.
- ↑ Boddy-Evans, Marion. Painting Color Class: Tones or Values. About.Com Guide. Архів оригіналу за 20 жовтня 2011. Процитовано 24 жовтня 2011.
- ↑ а б W3C. 4.2.4. HSL color values. CSS Color Module Level 3. Процитовано 12 жовтня 2011.