RGB — це ще не все: колірні нотації HSL, CMYK та OKLCH

У попередній статті, Як комп’ютер створює кольори: RGB, HEX та двійкові числа, ми з’ясували, що колір — це лише три числа: червоний, зелений, синій, кожне від 0 до 255. Для екрана цього цілком достатньо. Але щойно людина починає працювати з кольором, RGB стає незручним дуже швидко.

RGB зручний, але не інтуїтивний

«Трохи яскравіший червоний.» Як це зробити в RGB? Потрібно одночасно трохи підняти всі три канали. «Хочу лише знизити насиченість» — дивлячись лише на RGB, незрозуміло, що зменшувати. «Надрукуй цей колір на папері так само» — у RGB це взагалі неможливо.

Інші системи кольорів виникли саме для розв’язання цих проблем.

HSL — так думає людина

HSL описує колір трьома параметрами: відтінок · насиченість · яскравість. hsl(14, 100%, 60%) — той самий колір, що й #FF5733, але одразу зрозуміло, що за що відповідає.

Якщо RGB — мова комп’ютера, то HSL — мова дизайнера. Той самий колір можна описати з погляду що саме потрібно змінити.

Hue — відтінок на колі 360°

Відтінок рухається по колу, як годинникова стрілка: від 0° до 360°. 0° і 360° — однаковий червоний.

Saturation — насиченість кольору

Якщо знижувати насиченість при тому самому відтінку — колір поступово наближається до сірого.

Lightness — яскравість від чорного до білого

L = 0% — завжди чорний, L = 100% — завжди білий. 50% — «природна» яскравість кольору.

Справжня сила HSL — побудова палітри

Зберігаючи той самий Hue і змінюючи лише L, отримуємо набір кольорів, що гармонійно поєднуються. Щоб зробити те саме в RGB, потрібно вручну порахувати кожне з 9 значень; у HSL достатньо рівномірно змінювати L від 12% до 92%.

Обидві палітри вище можна описати кількома рядками.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... просто змінюємо L з кроком 10 */
}

Саме тут HSL розкриває свій потенціал — при побудові дизайн-систем.

CMYK — мова чорнила

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

Чому чорний позначається «K», а не «B»? Тому що B плутається з Blue. Крім того, «K» походить від друкарського терміну «Key plate» — еталонна форма, відносно якої вирівнюються решта фарб.

Світло яскравішає від додавання, а чорнило темнішає

Головна відмінність RGB від CMYK — спосіб змішування.

Червона фарба виглядає червоною, тому що поглинає інше світло і відбиває лише червоне. Чорнило вилучає світло. Тому що більше фарб — то темніше. Теоретично суміш CMY повинна давати чорний, але на практиці виходить каламутний коричневий. Ось чому існує окрема чорна фарба (K).

Де використовується CMYK

Якщо ви займаєтеся дизайном для екранів, CMYK майже не знадобиться. Він потрібен лише для друку на папері.

• При передачі файлів у друкарню — візитки, постери, книги, пакування. Друкарня сама перетворить RGB у CMYK.
• При роботі в Photoshop / Illustrator для друку — з самого початку встановлюйте режим кольору CMYK.
• У брендбуці — разом з HEX для екранів вказують CMYK для друку, щоб фірмовий колір виглядав схоже на обох носіях.

Чому кольори на екрані й на друку відрізняються — Gamut

Діапазон кольорів, доступний екрану (RGB gamut), і діапазон, доступний чорнилу (CMYK gamut), — різні. Яскравий неоново-рожевий з екрана не вийде в друці: такого кольору просто не існує в чорнилах.

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

Як записуються значення CMYK

Вказується відсоток кожної фарби. 0% — не наносимо, 100% — максимум.

Якщо використовувати лише K 100%, чорний виходить каламутним, близьким до сірого. Тому в друкарнях додають CMY, щоб отримати глибший чорний.

OKLCH — координати людини

Кольорова модель, що набула популярності у 2020-х. Ключова ідея одна: «природно для людського ока».

Три координати схожі за назвами на HSL:

• L — Lightness (яскравість, 0–1)
• C — Chroma (насиченість, 0–приблизно 0.4)
• H — Hue (відтінок, 0–360°)

Але в HSL є прихована проблема. Навіть при однаковому L = 50% різні кольори сприймаються зовсім по-різному на вигляд. Порівняймо.

Коротко — RGB і HSL — координати машини. OKLCH — координати людини.

L · C · H — роль кожного параметра

Подивимося, що відбувається, якщо змінювати лише одну координату.

Де застосовується

• Рівномірна за яскравістю палітра — коли потрібно, щоб 8 кольорів категорій виглядали однаково яскраво
• Автоматичне перемикання темної/світлої теми — досить просто інвертувати L
• Доступність — точне прогнозування контрасту між текстом і фоном
• Градієнти — плавний перехід без сірої смуги посередині

Офіційно прийнятий у CSS Color Level 4 — можна використовувати прямо в сучасних браузерах.

.btn { background: oklch(67% 0.18 30); }       /* помаранчевий */
.btn:hover { background: oklch(60% 0.18 30); } /* зменшуємо L на 7 → рівно настільки темніше */

Що і коли використовувати

Для більшості цифрових задач достатньо RGB/HEX. HSL варто пам’ятати при побудові палітри, а OKLCH дуже допомагає при дизайні темної/світлої теми.

Як працювати з кольорами у fns

Коли розумієш, що колір — це числа, наступний крок — тримати потрібні кольори під рукою. fns об’єднує вибір, збереження і використання кольорів за одним натисканням клавіші.

Eyedropper — підбираємо колір будь-де на екрані — ⌘+Shift+K

Eyedropper — інструмент, що точно захоплює колір будь-якого пікселя на екрані. Це як picker із Figma чи Photoshop, але доступний у всій системі.

Натисніть ⌘+Shift+K — Eyedropper fns відкриється де завгодно на екрані. Наведіть курсор на піксель у макеті, конкретну ділянку фото або фон іншого застосунку й клацніть — колір буде захоплено точно.

• Кожне клацання автоматично зберігає колір до буфера обміну. Окрема команда «копіювати» не потрібна.
• У вікні Eyedropper можна обрати, в якому форматі колір потрапить до буфера: RGB / HEX / HSL / CMYK / OKLCH.
• Відображається візуальний попередній перегляд захопленого кольору та найближчі системні кольори.

Eyedropper → автоматично до буфера → знову відкрити через picker — жодних переривань у процесі. Не потрібно відкривати окремий Digital Color Meter, як у macOS, і щоразу натискати клавішу копіювання.

Буфер обміну автоматично розпізнає кольори

Історія буфера обміну fns автоматично визначає, чи є скопійований текст кольоровим кодом. Формат не має значення.

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

Перегляд лише кольорів

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

• У тому самому picker: ключове слово фільтра на кшталт color: → показуються лише кольорові записи
• Пошук за назвою кольору — «blue», «red» — відображаються лише відтінки цієї групи
• Схожі кольори автоматично візуально групуються

Один колір — в іншому форматі

Можна перетворити один і той самий колір в інший формат і вставити. Скопіювали #FF5733 у Figma, а хочеться вставити у CSS у вигляді rgb(...) — оберіть цей запис у picker fns і натисніть один скорочений клавішний комбінації — перетворення відбудеться автоматично.

Перемикаючись між Figma (HSB) і CSS (HSL/HEX/OKLCH), більше не потрібно щоразу відкривати окремий конвертер.

Розширення тексту та групування

Часто використовувані фірмові кольори реєструються як текстові скорочення.

Ті самі скорочення працюють де завгодно: у полі кольору Figma, у CSS, у повідомленнях Slack, у редакторі коду. Більше не потрібно щоразу шукати й копіювати кольори з брендбука.

Спробуйте fns — і час, витрачений на відкриття конвертерів і перетворення кольорових кодів у різні формати, зникне.

Цікаво, звідки взагалі беруться ці числа — основи трьох каналів RGB, двійкового коду та нотації HEX? Почніть з Як комп’ютер створює кольори: RGB, HEX та двійкові числа.