Основи кольору. Частина 1. RGB модель. - Українське програмування

Головна

Інший матеріал

- Комп'ютерна графіка

Основи кольору. Частина 1. RGB модель.

Написав admin

Неділя, 28 лютого 2016 21:30

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

В цифровому світі основною системою (моделлю) кольору є RGB (Red Green Blue), яка відповідає за червону, зелену і синю складову кольору.

Це означає, що будь-який колір, можна отримати накладанням в різних кількостях трьох вищенаведених кольорів. Нижче наведена ілюстрація накладання цих кольорів.

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

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

Це зближене зображення LCD монітора, де чітко видно, що кожен піксель має 3 складові, аналогічні до нашої RGB моделі. Відповідно, корегуючи інтенсивність певної складової кольору, ми будемо отримувати різні кольори, які потім будуть виводитись пікселями. Оскільки неозброєне людське око не здатне розрізнити кожну таку маленьку частинку окремо, то кольори будуть накладатись і утворювати один колір.

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

Найчастіше колір в програмуванні зустрічається в двох виглядах:

1. у вигляді інтенсивності випромінювання певного кольору RGB. Від 0 до 255. Н-д, rgb(55, 134, 230). Відповідно, rgb(255, 255, 255) отримуємо білий колір, rgb(255, 0, 0) – червоний.

2. HEX презентації (шістнадцяткові цифри), в вигляді тьох пар шістнадцяткових чисел. Від 00 до FF. Н-д, 3786E6. Відповідно, FFFFFF отримуємо білий колір, FF0000 – червоний.

HEX формат дозволяє також, записувати колір в вигляді 3 чисел, якщо воно дублюються, тобто білий можна записати як FFF і це буде аналогом того ж FFFFFF.

HEX формат використовує 16-ву систему обчислень, в нюанси вдаватись не будемо, наведу тільки символьний ряд (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Такий формат часто можна побачити в веб програмуванні, ось домашня сторінка українського гугла.

На сторінці слово Україна синього кольору, в коді ми можемо побачити, що колір заданий з допомогою HEX формату. Зверніть уваги на символ #, який обов’язковий в такому записі.

Останнє, що можна додати, це те що ми можемо легко конвертувати формат запису кольору з 0..255 в 00..FF і навпаки.

Отже, беремо колір в HEX #4285F4, потрібно перетворити його в RGB формат. Для цього ми умовно ділимо на пари 6 чисел, а з трьома отриманими парами множимо перше число на 16 і додаємо до результату 2 число. Повинні отримати наступне:

42 -> 4*16+2 = 66

85 -> 8*16+5 = 133

F4 -> 15*16+4 = 244

rgb(66, 133, 244)

В зворотньому напрямку все навпаки, ділимо число на 16, отримуємо перший символ, а остача буде другим символом:

66 -> 64/16 + 2 = 42

133 -> 128/16 + 5 = 85

244 -> 240/16 + 4 = 15 + 4 = F4

Якщо я десь помилився, або написав узагалі повну дурню, не соромтесь написати про це в коментарях і виправити мене, або похвалити