Что означают все эти цветовые форматы?

Цвет на экране — это сочетание красного, зелёного и синего света, и каждый формат записывает это сочетание по-своему. CSS и инструменты для дизайна используют HEX-коды и значения RGB. HSL, HSV и HWB описывают цвет через его тон — угол на цветовом круге, — а также насыщенность и светлоту, поэтому их проще настраивать вручную. CMYK задаёт количество голубой, пурпурной, жёлтой и чёрной краски для печати. LAB, LCH, OKLab и OKLCH устроены так, что одинаковые приращения чисел воспринимаются глазом как одинаковые изменения цвета. Это полезно при создании палитр и градиентов, а современный CSS поддерживает все четыре формата. Терминалы используют цветовые коды ANSI, а в CSS есть и названия цветов, например tomato.

Вот один и тот же оранжевый цвет в разных форматах:

Формат Пример Что означают значения
HEX #ff6600 Красный, зелёный и синий — по две шестнадцатеричные цифры каждый
RGB rgb(255, 102, 0) Красный, зелёный и синий в диапазоне от 0 до 255
HSL hsl(24, 100%, 50%) Тон, насыщенность и светлота
HSV hsv(24, 100%, 100%) Тон, насыщенность и значение; также называется HSB
HWB hwb(24 0% 0%) Тон, доля белого и доля чёрного
CMYK cmyk(0%, 60%, 100%, 0%) Голубая, пурпурная, жёлтая и чёрная краска
LAB lab(62.31, 55, 71.33) Светлота CIE, ось от зелёного к красному и ось от синего к жёлтому
LCH lch(62.31, 90.07, 52.36) Светлота CIE, цветность и тон
OKLab oklab(69.58% 0.1482 0.1406) Светлота и две цветовые оси в более новой модели, чем LAB
OKLCH oklch(69.58% 0.2043 43.49) Светлота, цветность и тон в OKLab
XYZ xyz(46, 30.77, 3.52) Цветовое пространство CIE 1931, на котором основан LAB
HCG hcg(24, 100%, 0%) Тон, цветность и доля серого
Название цвета orangered Ближайший цвет с названием в CSS
ANSI 16 91 Код одного из 16 основных цветов для терминала
ANSI 256 208 Код одного из 256 цветов для терминала
RGB AppleScript {65535, 26214, 0} Красный, зелёный и синий в диапазоне от 0 до 65535, как их записывает AppleScript
Оттенки серого gray(46.7%) Яркость в диапазоне от 0% до 100%

Описание инструмента

Этот инструмент преобразует цвет между 17 форматами и показывает его образец под результатом. Все конвертеры цветов здесь работают одинаково — от общего конвертера цветов до инструментов для одной пары форматов, например HEX в RGB, RGB в CMYK или HEX в название цвета: по умолчанию выбраны форматы, указанные в названии инструмента, а меню «Источник» и «Целевой формат» позволяют переключиться на любые другие. Вставьте цвет, и результат появится по мере ввода — его можно сразу скопировать. Если в качестве источника выбран режим «Автоопределение», с которого начинается работа общего конвертера цветов, инструмент определит формат по записи цвета. Кнопка обмена меняет направление преобразования.

Примеры

Ввод Целевой формат Результат
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Название цвета tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Что можно вставить

  • HEX-коды из 3, 4, 6 или 8 цифр, с # или без него. Четвёртая цифра или последняя пара задаёт прозрачность.
  • Функции, например rgb(), hsl() или oklch(), со значениями, разделёнными запятыми или пробелами, и необязательной прозрачностью в качестве четвёртого значения или после косой черты: rgba(37, 99, 235, 0.5) или rgb(37 99 235 / 50%).
  • Проценты для красного, зелёного и синего, например rgb(100%, 40%, 0%), а также значения тона в deg, rad, grad или turn, например hsl(0.5turn, 100%, 50%).
  • Обычные числа без названия функции, например 255, 102, 0. Режим «Автоопределение» распознаёт три числа как RGB или как HSL, если два последних указаны в процентах, а четыре числа — как CMYK, если только они не похожи на значения RGB с прозрачностью.
  • Названия цветов в любом регистре, с пробелами или без: вариант Rebecca Purple тоже работает.
  • Значения HSB в записи hsb(), а также цвета AppleScript в фигурных скобках, например {65535, 26214, 0}.

Как это работает

Вычисления выполняет color-convert — библиотека на JavaScript для преобразования цветов.

  • Прозрачность сохраняется в HEX, RGB, HSL, HWB, OKLab и OKLCH, где её можно указать. В остальных форматах она не учитывается.
  • LAB, LCH и XYZ используют значения CIE с белой точкой D65. В CSS для lab() и lch() используется белая точка D50, поэтому значения немного отличаются.
  • LAB, LCH, OKLab и OKLCH могут описывать цвета, которые не отображаются на экранах. При преобразовании в HEX, RGB или другой экранный формат значения цветовых каналов такого цвета ограничиваются диапазоном от 0 до 255, поэтому oklch(70% 0.3 145) преобразуется в #00c800.
  • В качестве результата указывается ближайший цвет с названием в CSS, поэтому он будет точным только для цветов, которым присвоено название: для #ff6600 результатом будет orangered, то есть #ff4500.
  • Результаты ANSI 16 и ANSI 256 приблизительны, поскольку в этих палитрах всего 16 или 256 цветов. Результаты ANSI 16 — это коды цвета переднего плана от 30 до 37 и от 90 до 97; коды фона от 40 до 47 и от 100 до 107 распознаются как те же цвета.
  • Значение CMYK вычисляется по базовой формуле без цветового профиля принтера, поэтому значения CMYK для того же цвета могут отличаться в типографии.
  • Оттенки серого вычисляются как среднее значение красного, зелёного и синего.

Советы

  • Результаты в HEX, RGB, HSL, HWB, OKLab, OKLCH и в виде названий цветов соответствуют CSS, поэтому их можно вставлять в таблицу стилей без изменений.
  • Режим «Автоопределение» распознаёт трёхзначное число, например 208, как короткий HEX-код, поэтому для кодов терминала выберите в качестве источника ANSI 256 или ANSI 16.
  • HSV и HSB — два названия одной и той же модели.