Якщо ви коли-небудь намагалися розробити дизайн веб-сайту, створити логотип або надрукувати візитну картку, ви одразу зіткнулися з заплутаною алфавітною таблицею кодів кольорів: HEX, RGB, HSL та CMYK. Чому існує так багато способів описати простий відтінок синього?
Правда полягає в тому, що комп’ютери та принтери «бачать» світло принципово різними способами. Крім того, те, як комп’ютери обробляють світло, не обов’язково відповідає тому, як людський мозок інтерпретує колір. Розуміння цих форматів — це не просто теорія — це позбавить вас від розгортання веб-сайтів із недоступним коефіцієнтом контрастності або від сплати тисяч доларів за рекламні листівки, які друкуються брудними й темними.
Адитивне проти субтрактивного світла
Перш ніж зануритися в код, ми повинні встановити фізичну різницю між екранами та папером.
- Екрани випромінюють світло (додаткове). Якщо вимкнути всі пікселі, екран буде чорним. Щоб зробити білим, екран випромінює червоне, зелене та синє світло з максимальною інтенсивністю.
- Папір відбиває світло (субтрактивний). Чистий аркуш паперу вже білий (він відбиває все світло). Щоб створити чорний колір, принтер накладає блакитне, пурпурове та жовте чорнило одне на одне, щоб поглинати все світло.
1. RGB (червоний, зелений, синій)
RGB є рідною мовою монітора вашого комп’ютера. Він визначає колір, повідомляючи екрану, скільки саме червоного, зеленого та синього світла випромінювати. Кожен канал представлено цілим числом від 0 (вимкнено) до 255 (максимальна інтенсивність).
Наприклад, чистий червоний — rgb(255, 0, 0). Чистий білий — це rgb(255, 255, 255).
Найкраще для: редагування зображень (Photoshop) і цифрової фотографії. Він безпосередньо маніпулює апаратними пікселями.
2. HEX (шістнадцятковий)
HEX-коди, як-от #FF5733, точно такі ж, як RGB. Єдина різниця – це математика. Замість використання чисел з основою 10 (0-255) використовуються шістнадцяткові числа з основою 16 (від 00 до FF). Перші дві літери означають червоний колір, дві середні – зелений, а останні дві – синій.
Чому веб-розробники використовують HEX? Бо воно коротше. Написання #FFF набагато швидше для розробника CSS, ніж написання rgb(255, 255, 255).
Найкраще для: жорсткого кодування фірмових кольорів у CSS. Він стислий і його легко копіювати між такими інструментами дизайну, як Figma, і редакторами коду.
Миттєво перетворюйте коди кольорів
Не витрачайте час на виконання шістнадцяткових розрахунків у своїй голові. Використовуйте наш офлайн-інструмент для миттєвого перекладу між HEX, RGB, HSL і CMYK із візуальним попереднім переглядом.
Відкрийте Color Converter3. HSL (відтінок, насиченість, освітленість)
RGB і HEX жахливі для людей. Якщо я покажу вам код #4A90E2, ви не зможете легко здогадатися, якого він кольору. Якщо я попрошу вас «зробити цей синій на 20% темнішим», зробити математику в HEX майже неможливо.
HSL був розроблений для людського мозку. Він визначає колір у 360-градусному кольоровому колі.
- Відтінок (0-360): фактичний колір. 0 — червоний, 120 — зелений, 240 — синій.
- Насиченість (0-100%): наскільки інтенсивний колір. 0% – сірий, 100% – яскравий.
- Яскравість (0-100%): наскільки темний або яскравий. 0% - чорний, 100% - білий.
Якщо ваш фірмовий синій колір — hsl(210, 100%, 50%) і вам потрібен темніший відтінок для ефекту наведення кнопки, просто змініть останню цифру: hsl(210, 100%, 40%). Це магія для архітектури CSS.
4. CMYK (блакитний, пурпуровий, жовтий, ключовий/чорний)
CMYK призначений виключно для фізичного світу. Він визначає, як принтер змішує фізичне чорнило. Оскільки чорнило поглинає світло, колірний простір фізично менший, ніж RGB. Є яскраві неонові зелені, які може випромінювати екран (у RGB), які принтер фізично не може надрукувати (у CMYK).
Золоте правило: ніколи не надсилайте файл RGB до комерційної друкарні. Принтер примусово перетворить його на CMYK, у результаті чого ваші яскраві кольори виглядатимуть каламутними та розмитими. Завжди перетворюйте свої дизайни в CMYK, перш ніж надсилати їх у друкарню.
Матриця порівняння
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Часті запитання (FAQ)
Який формат використовувати для темного режиму CSS?
Завжди використовуйте HSL для динамічного оформлення тем. Зберігаючи відтінок і насиченість постійними, ви можете просто інвертувати значення освітленості, щоб ідеально перетворити колір світлого режиму в колір темного режиму.
Чи можна використовувати CMYK на веб-сайті?
Ні. Веб-браузери розуміють лише світлові кольорові формати (RGB, HEX, HSL). Якщо ви завантажуєте CMYK JPEG на веб-сайт, деякі веб-переглядачі намагатимуться відобразити його, але кольори виглядатимуть пошкодженими або інвертованими.
Що таке альфа-канал?
Буква «A» в RGBA або HSLA означає Alpha, який контролює прозорість. Альфа 1,0 є повністю твердою, а 0,5 – 50% прозорою. Сучасний CSS тепер також забезпечує прозорість безпосередньо в HEX-кодах, додаючи дві додаткові цифри (наприклад, #FFFFFF80).