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»? Чтобы не путать с Blue. Буква K происходит от типографского термина «Key plate» — опорная пластина, по которой выравниваются все остальные краски.

Чем больше света, тем светлее; чем больше чернил, тем темнее

Главное различие RGB и CMYK — это способ смешения.

Красная краска выглядит красной потому, что поглощает весь остальной свет и отражает только красный. Краска «отнимает» свет. Поэтому, чем больше красок смешиваешь, тем темнее становится цвет. Теоретически смешение CMY должно давать чёрный, но на практике получается мутно-коричневый. Именно поэтому в CMYK используется отдельная чёрная краска (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, чтобы получить естественную тёмную тему
• Доступность — позволяет точно предсказать контраст между текстом и фоном
• Градиенты — плавный переход без серой полосы посередине

OKLCH официально принят в 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 точно захватывает цвет любого пикселя на экране. Это всё равно что вынести пикер, доступный только внутри Figma или Photoshop, на системный уровень.

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

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

Eyedropper → автоматически в буфер обмена → снова достать из пикера буфера обмена — поток не прерывается. Не нужно запускать отдельную программу вроде Digital Color Meter или каждый раз нажимать сочетание для копирования.

Буфер обмена автоматически распознаёт цвета

История буфера обмена fns автоматически определяет, является ли скопированный текст цветовым кодом, — независимо от формата.

Когда достаёшь скопированный цвет из истории, по одному тексту сложно вспомнить, что это был за цвет. fns показывает рядом с каждой записью маленький цветной чип — сразу видно, что за цвет.

Только цвета — отдельным списком

Одной клавишей можно отфильтровать в истории буфера обмена только цветовые коды. Когда во время дизайн-работы нужно посмотреть недавно использованные цвета, больше не придётся перебирать текст, URL и код.

• В том же пикере введите фильтр вроде color: → видны только цветовые записи
• Поиск по имени цвета — введите «blue» или «red», и отобразятся только оттенки этого цвета
• Похожие цвета визуально группируются вместе

Один цвет в другом формате

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

Не нужно каждый раз открывать конвертер при переключении между Figma (HSB) и CSS (HSL/HEX/OKLCH).

Текстовые сокращения для брендовых цветов

Часто используемые фирменные цвета можно зарегистрировать как текстовые аббревиатуры.

Одно и то же сокращение работает везде: в поле цвета CSS, в Figma, в сообщениях в Slack, в редакторе кода. Больше не нужно каждый раз искать брендовый цвет и копировать его из брендбука.

Попробуйте fns, чтобы избавиться от постоянного открытия конвертеров и ручного перевода цветовых кодов из формата в формат.

Хотите разобраться, откуда вообще берутся эти числа — основы трёх каналов RGB, двоичного кода и нотации HEX? Начните с Как компьютер создаёт цвета: RGB, HEX и двоичные числа.