Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab





Доброго часу доби, дорогі читачі, знайомі, відвідувачі, мімопроходящіе особистості та інші дивні істоти! Сьогодні ми поговоримо про трохи специфічною, але безсумнівно важливої ​​речі для будь-якого користувача, а саме про таку штуку: подання кольору в комп’ютері.

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Як не крути, але рано чи пізно все зіткнуться з практичною необхідністю розуміння, що таке колірна модель, та й просто це вміння корисно з точки зору розширення кругозору та усвідомлення — що і як працює в комп’ютері і з чого він складається як з програмною, так і з фізичної точки зору.

Поїхали.

Що таке колірна модель

У загальному вигляді колірна модель — це деяка абстрактна річ, в якій колір представляється у вигляді сукупності чисел. І кожна така модель має свої особливості і недоліки. По суті, це як з мовою, наприклад, якщо колір — це слово «будинок», то на різних мовах воно буде писатися і звучати по-різному, але при цьому зміст слова скрізь буде однаковий. Так само і з кольором.

Ми розглянемо найосновніші моделі. Їх 5. Як правило, використовується одночасно декілька різних моделей, тому деякі найзручніше використовувати у візуальному вигляді, а інші в чисельному.

Що таке колірна модель RGB

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Це найпоширеніша модель представлення кольору. У ній будь-який колір розглядається як відтінки трьох основних (або базових) кольорів: червоний (Red), зелений (Green) і синій (Blue). При цьому існує два види цієї моделі: восьмібітного уявлення, де колір задається числами від 0 до 255 (наприклад, колір [0,0,255] буде відповідати синьому, а [255, 255, 0] — жовтому), і шістнадцятибітну, яке найчастіше використовується в графічних редакторах і html, де колір задається числами від 0 до ff (зелений — # 00ff00, синій — # 0000ff, жовтий — # ffff00).

Різниця уявлень в тому, що в восьмібітного вигляді для кожного базового кольору використовується окрема шкала, а в шістнадцятибітну вже відразу вводиться колір. Іншими словами, восьмібітного подання — три шкали з кожним основним квітів, шістнадцятибітну — одна шкала з трьома кольорами.

Особливість цієї моделі в тому, що тут новий колір виходить шляхом додавання відтінків основних кольорів, тобто «Змішування».

На зображенні вище видно, як кольори змішуються один з одним, утворюючи нові кольори (жовтий — [255,255,0], пурпурний — [255,0,255], блакитний — [0,255,255] і білий [255,255,255]).

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

При цьому ця модель найчастіше використовується саме в чисельному вигляді, а не у візуальному (коли колір задається введенням його значення в соотв. Поля, а не вибирається мишкою). Для візуального налаштування кольору використовуються інші моделі. Тому що візуально модель RGB являє собою тривимірний кубик, який, як Ви бачите на зображенні вище, не дуже зручно використовувати Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Так що це найпоширеніша модель у веб-дизайнерів (передаємо полум’яний привіт css) і програмістів.

Недолік цієї моделі в тому, що вона залежить від апаратної частини, іншими словами, одна і та ж картинка буде неоднаково виглядати на різних моніторах (бо в моніторах використовується так званий люмінофор — речовина, яка перетворює поглинається їм енергію в світлове випромінювання, а тому в Залежно від якості цієї речовини будуть визначатися базові кольори).

Що таке колірна модель CMYK

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Це теж дуже поширена модель, але багато про неї могли взагалі нічого не чути Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

А все через те, що вона використовується виключно для друку. Вона розшифровується як Cyan, Magenta, Yellow, Black (або Key Color), тобто Блакитний, пурпурний, жовтий і Чорний (або ключовий колір).

Використання цієї моделі на друку обумовлено тим, що змішувати по три відтінки для кожного нового кольору занадто витратно і брудно, тому коли на папір спочатку наноситься один колір, потім поверх нього другий і потім поверх них третій колір, по-перше, папір сильно намокає (якщо струменевий друк), по-друге, зовсім не факт, що вийде саме той відтінок, що Ви хотіли. Так, фізика вона така Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Найбільш уважні могли помітити, що на зображенні присутні три кольори, а чорний виходить шляхом змішування цих трьох. Так, стало бути, навіщо його винесли окремо? Знову ж причина в тому, що, по-перше, змішувати три кольори це затратно з точки зору використання тонера (спец. Порошок для картриджа від принтера, який використовується замість чорнила в лазерних принтерах), по-друге, папір сильно мокне, що збільшує час просушування, по-третє, кольори в дійсності можуть не змішатися належним чином, а бути більш бляклими, наприклад. Картинка нижче показує цю модель в реальності

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Таким чином, вийде швидше не чорний, а брудно-сірий або брудно-коричневий.

Тому (і не тільки) ввели ще чорний колір, щоб не бруднити папір, не витрачатися на тонери і взагалі жити було простіше Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Колір в цій моделі задається числами від 0 до 100, де ці числа часто називають «частинами» або «порціями» обраного кольору. Наприклад, колір «хакі» виходить шляхом змішування 30 частин блакитної фарби, 45 — пурпурової, 80 — жовтою і 5 — чорною, тобто колір хакі буде [30,45,80,5].

Труднощі цієї моделі полягають в тому, що в суворих реаліях (або в реальних суворо) колір залежить не стільки від числових даних, скільки від характеристики паперу, фарби в тонері, способі нанесення цієї фарби і т.п. Так що числові значення будуть однозначно визначати колір на моніторі, але вони не покажуть реальної картини на папері.

Що таке колірна модель HSV (HSB) і HSL

Ці дві колірні моделі я об’єднав, тому вони схожі за своїм принципом.

Тривимірна реалізація HSL (ліворуч) і HSV (праворуч) моделей представлена ​​у вигляді циліндра нижче, але на практиці в ПЗ (програмному забезпеченні) не використовується, бо .. бо тривимірна Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

HSV (або HSB) означає Hue, Saturation, Value (ще може називатися Brightness), де:

Hue — колірний тон, тобто відтінок кольору.

Saturation — насиченість. Чим вище цей параметр, тим «чистіше» буде колір, а чим нижче, тим ближче він буде до сірого.

Value (Brightness) — значення (яскравість) кольору. Чим вище значення, тим яскравіше буде колір (але не біліше). А чим нижче, тим темніше (0% — чорний)

HSL — Hue, Saturation, Lightness

Hue — Ви вже знаєте

Saturation — аналогічно

Lightness — це светлота кольору (не плутати з яскравістю). Чим вище параметр, тим світліше колір (100% — білий), а чим нижче, тим темніше (0% — чорний).

Більш поширена модель — HSV, вона часто використовується разом з моделлю RGB, де HSV показана у візуальному вигляді, а числові значення задаються в RGB. Наприклад в Paint.NET:

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Тут RGB-модель обведена червоним і значення відтінків задаються числами від 0 до 255, або відразу можна вказати колір в шістнадцятковому вигляді. А синім обведена HSV модель (візуальна частина в лівому прямокутнику, числова — у правому). Також часто можна вказати непрозорість (так званий альфа-канал).

Така модель найчастіше використовується в простій (або непрофесійної) обробці зображень, т.к. за допомогою неї зручно регулювати основні параметри фотографій, не вдаючись до купи різних фільтрів або окремих налаштувань.

Наприклад у всіма улюбленому (або проклинали) фотошопі присутні обидві моделі, тільки одна з них знаходиться в редакторі вибору кольору, а інша — у вікні налаштувань Hue / Saturation

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Тут червоним показу RGB-модель, синім — HSB, зеленим — CMYK і блакитним Lab (про неї трохи пізніше), що видно на зображенні Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

А HSL-модель знаходиться в такому ось віконці:

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Недолік HSB-моделі в тому, що вона також залежить від апаратної частини. Вона просто не відповідають сприйняттю людського ока, тому оний сприймає кольору з різною яскравістю (наприклад, синій сприймається нами більш темним, ніж червоний), а в цій моделі у всіх квітів однакова яскравість. У HSL аналогічні проблеми Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Таких недоліків хотіли уникнути, тому одна відома компанія CIE (Міжнародна комісія з освітлення — Commission Internationale de l’Eclairage) придумала нову модель, покликану не залежати від апаратної частини. І назвали її Lab (ні, це не скорочення від Laboratory).

Що таке колірна модель Lab або L, a, b

Ця модель є однією з стандартних, хоча і маловідома пересічному користувачеві.

Розшифровується вона таким чином:

L — Luminance — освітленість (це сукупність яскравості та інтенсивності)

a — один з компонентів кольору, змінюється від зеленого до червоного

b — другий з компонентів кольору, змінюється від синього до жовтого

На малюнку показані діапазони компонент a і b для освітленості 25% (ліворуч) і 75% (праворуч)

Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Яскравість в цій моделі відділяється від кольорів, тому за допомогою неї зручно регулювати контраст, різкість і інші светопоказателі, не чіпаючи при цьому кольори Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Однак ця модель зовсім неочевидна для використання і нею досить важко користуватися на практиці. Тому її використовують в основному в обробці зображень і для конвертації оних з однієї колірної моделі в іншу без втрат (так, це єдина модель, яка робить це без втрат), звичайним же смертним стражденним користувачам достатньо, як правило, HSL і HSV плюс фільтри.

Ну і як приклад роботи моделі HSV, HSL і Lab ось картинка з Вікіпедії (клікабельно)

Оригінальна картинка

Lab модель (значення L)

HSV модель (значення V)

HSL модель (значення L)

На сим все Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

Післямова

Такі ось пироги. Сподіваюся, Вам сподобалося і Ви цим коли-небудь скористаєтеся, ну або хоча б приймете до відома і будете знати, що до чого і чому.

Як і завжди будемо раді Вашим доповненням, питань, благодарностям, критиці і всьому такому іншому. Пишіть коментарі Знайомимося з кольором. Все про колірних моделях RGB, CMYK, HSVHSL, Lab

P.S. За існування оной статті окреме спасибі одному проекту та члену нашої команди під ніком «barn4k».