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

Цвет на экране — это сочетание красного, зелёного и синего света, и каждый формат записывает это сочетание по-своему. 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 XYZ, на котором основан LAB
HCG hcg(24, 100%, 0%) Тон, цветность и доля серого
Название цвета orangered Ближайший именованный цвет CSS
ANSI 16 91 Код одного из 16 основных цветов для терминала
ANSI 256 208 Код одного из 256 цветов для терминала
AppleScript RGB {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 — два названия одной и той же модели.