Кольорові коди HEX, RGB і HSL: пояснення на пальцях

Якщо ви колись відкривали файл дизайну, копіювали #3B82F6 і дивувалися, чому той самий синій з'являється ще і як rgb(59, 130, 246), і як hsl(217, 91%, 60%), — ви натрапили на три формати кольору, якими рано чи пізно мусить вільно володіти кожен вебдизайнер і фронтенд-розробник. Усі вони описують той самий піксель. Просто описують його різними мовами, і кожна мова гарна для своєї задачі.

Я випускав дизайн-системи, де неправильний вибір формату коштував годин роботи. Дайте розробнику стіну з hex-кодів для стану кнопки при наведенні — і отримаєте гадання навмання. Дайте йому шкалу HSL — і зв'язок між кольорами стане очевидним. Тож це не сухий перелік специфікацій, а радше робоча ментальна модель, яку я хотів би отримати на старті: що насправді кодує кожен формат і коли до нього варто братися.

HEX: формат, який копіюють, а не той, у якому міркують

Hex-код кольору — це просто RGB в іншому вбранні. #RRGGBB — це шість шістнадцяткових цифр, розбитих на три пари: червоний, зелений, синій, і кожна пара — це один байт. Шістнадцяткова система (за основою 16) іде від 0 до 9, потім від A до F, тож дві hex-цифри покривають діапазон від 00 до FF, тобто від 0 до 255 у десятковій. Це рівно один 8-бітний канал на колір. Три канали, три байти й знайомі 16 777 216 можливих кольорів (256 × 256 × 256).

Ось чому цифр саме шість: по одному байту на R, G і B. Візьмімо #3B82F6. Розбиваємо: 3B, 82, F6. Переводимо кожну пару з hex у десяткову — 3B це 59, 82 це 130, F6 це 246 — і ви щойно вручну зробили конвертацію hex у RGB. Це rgb(59, 130, 246). Той самий колір, жодної магії.

Існує скорочення: #RGB розгортається подвоєнням кожної цифри, тож #F00 стає #FF0000 (чистий червоний), а #0AF — #00AAFF. Воно працює лише тоді, коли кожен канал випадково складається з повторюваної цифри, тому ви здебільшого бачите його для круглих значень на кшталт #FFF, #000 чи #333. Зручно для CSS, написаного руками, та марно для довільних відтінків синього, які реально випускає бренд.

Hex також уміє в прозорість, що багатьох дивує. CSS Color Module Level 4 додав восьмизначний hex, #RRGGBBAA, де остання пара — це альфа: 00 — повна прозорість, FF — повна непрозорість. Тож #3B82F680 — це той самий синій приблизно при 50% непрозорості. Є й чотиризначне скорочення (#RGBA), де діють ті самі правила подвоєння, що й для #RGB, і кожна цифра дублюється. Воно підтримується в усіх сучасних основних браузерах; хіба що древній Internet Explorer його не розуміє — у такому разі запасним варіантом буде rgba().

Сильна сторона hex у тому, що він компактний і однозначний — один токен, легко скопіювати, легко вставити в інструмент дизайну чи CSS-змінну. Слабкість же в тому, що мозку він майже нічого не каже. #3B82F6 світліший чи темніший за #2563EB? Прочитавши їх, ви цього щиро не визначите. Ось той обрив, з якого hex падає.

RGB: як насправді мислить екран

RGB — це адитивна колірна модель, на якій працює ваш монітор. Кожен піксель — це три крихітні вогники: червоний, зелений, синій, а значення кажуть, наскільки яскраво світить кожен, від 0 до 255. Усі три на 0 — це чорний (усі вогники вимкнено). Усі три на 255 — це білий (усі вогники на повну). Виведіть на максимум червоний і зелений, а синій залиште вимкненим — і отримаєте жовтий, що здається протиприродним, якщо ви виросли на змішуванні фарб, де червоний із зеленим дають бруд. Екрани додають світло; фарби його віднімають. Це і є суть адитивного кольору, і за неї варто триматися, бо вона пояснює багато моментів із серії «чому цей колір отаке витворяє».

У CSS ви пишете rgb(59 130 246) (сучасний синтаксис через пробіли) або rgb(59, 130, 246) (застарілий через коми); обидва годяться. Альфу додавайте через скісну риску — rgb(59 130 246 / 50%) — що тихцем замінило стару окрему функцію rgba(), хоча rgba() досі працює всюди.

RGB читабельніший за hex, бо числа десяткові, а канали явні. Якщо ви бачите rgb(250, 250, 250), то одразу розумієте, що це майже білий, бо всі три значення зашкалюють угору. Та він поділяє справжню ваду hex: ним кепсько коригувати колір. Щоб зробити rgb(59, 130, 246) на 10% темнішим, ви не можете просто підкрутити одне число — доводиться рухати всі три канали злагоджено, а підібрати правильні пропорції вручну — справа марна. Що й підводить нас до формату, який це насправді вирішує.

HSL: той, у якому варто міркувати

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

• Hue (тон) — це кут на колірному колі, від 0 до 360 градусів. 0 (і 360) — це червоний, 120 — зелений, 240 — синій. Обертайте кут — і ви крокуєте веселкою.
• Saturation (насиченість) — наскільки колір яскравий, від 0% до 100%. На 0% ви отримуєте сірий незалежно від тону; на 100% він настільки інтенсивний, наскільки дозволяє екран.
• Lightness (світлість) — наскільки колір світлий чи темний, від 0% до 100%. 0% — завжди чорний, 100% — завжди білий, а 50% — це «чиста» версія тону.

Наш синій — це hsl(217, 91%, 60%). А тепер дивіться, що HSL робить елементарним. Хочете темніший тон для стану натиснутої кнопки? Знизьте світлість: hsl(217, 91%, 45%). Світліший відтінок для фону при наведенні? Підніміть її: hsl(217, 91%, 92%). Приглушену, припилену версію для неактивного елемента? Зменшіть насиченість: hsl(217, 40%, 60%). Тон не зрушив із місця, тож увесь час безпомилково читається той самий синій. Спробуйте провернути щось із цього, редагуючи канали RGB, — і зрозумієте, навіщо взагалі існує HSL.

Саме тому HSL — природна мова для побудови шкал, світлих відтінків і темних тонів. Зафіксуйте тон, прокрокуйте світлість кроками — 95%, 85%, 70%, 55%, 40%, 25% — і у вас є цілісна шкала від блідого фонового відтінку до глибокого кольору тексту, де всі ланки доказово споріднені. Це хребет того, як я будую масштабовані колірні токени для дизайн-системи, і механіка, що стоїть за світлими відтінками, темними тонами й приглушеними тонами. HSL навіть перетворює колірну гармонію на арифметику: комплементарний колір — це просто ваш тон плюс 180 градусів, тріада — три тони на відстані 120 градусів. Якщо хочете глибшу версію цього, розуміння колірної гармонії в UI-дизайні розкладає все по поличках.

CSS-синтаксис дзеркалить решту: hsl(217 91% 60%) або застаріле hsl(217, 91%, 60%), з альфою через hsl(217 91% 60% / 50%). Тон може нести одиницю deg, але вона не обов'язкова. Одне чесне застереження: світлість у HSL — це не те саме, що сприймана яскравість. Повністю насичений жовтий при 50% світлості видається вашому оку значно яскравішим за синій при тих самих 50%. Це обмеження моделі, а не баг ваших очей, і саме тому існує перевірка контрасту, а не довіра до значення L — про це нижче.

То який же з них реально брати?

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

• HEX — для зберігання й передачі одного кольору: бренд-гайдлайни, CSS-змінна, відправлення значення колезі. Це лінгва франка; його читає геть усе.
• RGB — коли ви працюєте поканально або взаємодієте з кодом, що очікує числові канали: canvas, обробка зображень чи будь-який випадок, де потрібні сирі значення 0–255. А також коли вам потрібна проста альфа й не хочеться думати в hex-парах.
• HSL — щойно потрібно змінити чи пов'язати кольори: будуючи стани наведення й активності, генеруючи шкалу відтінків, підбираючи гармонійний акцент або налаштовуючи палітру темного режиму, де ви раз у раз підкручуєте світлість і прибираєте насиченість, щоб кольори не вібрували на темному фоні.

Мій реальний робочий процес: я міркую й експериментую в HSL, а потім випускаю фінальні значення як hex-змінні. Обираю тон, знаходжу шкалу світлості, перевіряю яскравість насиченістю — і заморожую кожен крок як hex-токен, який споживає решта команди.

Є одна річ, від якої вас не врятує жоден формат, — контраст. Ні HEX, ні RGB, ні HSL не скажуть, чи буде текст читабельним на фоні; для цього потрібен справжній розрахунок яскравості за коефіцієнтами WCAG. Офіційні рекомендації W3C щодо контрасту вимагають щонайменше 4.5:1 для звичайного основного тексту. Саме тому генератор доповнює свої показники HSL і RGB вбудованою перевіркою контрасту — щоб ви могли посунути повзунок світлості й спостерігати, як коефіцієнт оновлюється наживо, замість випускати гарний синій, якого ніхто не може прочитати.

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