Конвертер из RGB в HSL

Что такое RGB и как он описывает цвет на экранах

Любой современный монитор, телевизор или экран смартфона строит изображение по аддитивному принципу: три источника света — красный (Red), зелёный (Green) и синий (Blue) — смешиваются в разных пропорциях. Каждый канал кодируется целым числом от 0 до 255, что даёт 256 градаций на канал и в сумме более 16,7 миллиона цветов. Значения задают интенсивность свечения субпикселя: 0 — полностью выключен, 255 — максимальная яркость. Так, чистый красный — это 255, 0, 0, чистый белый — 255, 255, 255, а чёрный — 0, 0, 0.

Рабочим пространством для подавляющего большинства веб-проектов является sRGB — стандарт, принятый в 1996 году совместными усилиями HP и Microsoft. Именно в этом пространстве ваш браузер интерпретирует RGB-значения. Поэтому все преобразования на данной странице выполняются в sRGB, без привязки к более широким гаммам вроде Adobe RGB или Display P3. Когда вы вводите, скажем, 79, 70, 229, инструмент сразу понимает, что речь идёт о трёх интенсивностях в sRGB. Введённые числа не покидают ваш компьютер: расчёты происходят локально, в браузере, с помощью JavaScript.

Модель HSL — цвет, понятный человеку

RGB удобен для железа, но не для человека. Скажите дизайнеру «увеличь красный на 30» — и он не сможет предсказать, какой оттенок получится. HSL (Hue, Saturation, Lightness) решает эту проблему, переводя цвет в три интуитивные характеристики:

• Hue (оттенок) — угол на цветовом круге от 0° до 360°. 0° — красный, 120° — зелёный, 240° — синий, 360° снова красный.
• Saturation (насыщенность) — от 0% (серый) до 100% (полностью чистый цвет при данной светлоте).
• Lightness (светлота) — от 0% (чёрный) до 100% (белый). 50% — «нормальный» цвет без затемнения или высветления.

Например, RGB 79, 70, 229 инструмент пересчитает в HSL 243°, 75%, 59%. Это тёмно-синий с высокой насыщенностью. Если вы захотите сделать его светлее, достаточно увеличить параметр Lightness, не меняя угол 243° — оттенок останется тем же синим, а не «уплывёт» в другой цвет, как могло бы случиться при прямом изменении RGB-каналов.

Почему HSL предпочтительнее RGB для работы с палитрами

Возможность независимо менять светлоту, сохраняя оттенок, — главная причина, по которой HSL стал стандартом де-факто для генерации цветовых схем, тем и контрастных вариаций. Рассмотрим три базовые операции:

Разработчики интерфейсов постоянно создают светлые и тёмные темы для одного и того же бренда. С HSL это делается одной строкой CSS: hsl(243, 75%, 80%) вместо перебора комбинаций в RGB. А инструмент на этой странице даёт мгновенную обратную связь: вы редактируете поле HSL — и HEX, HSV, CMYK, LAB пересчитываются автоматически. Если ввести HSL неправильно — например, 243, 75, 59 без знака процента — появится сообщение: «Введите HSL как оттенок 0–360 с двумя процентами, например 243, 75%, 59%.»

Как устроено математическое преобразование RGB в HSL

Алгоритм, выполняемый в вашем браузере, состоит из нескольких шагов. Понимание механики помогает отлавливать ошибки и предсказывать поведение инструмента.

1. Нормализация. Значения каждого канала R, G, B делятся на 255, переводя их в диапазон. Для 79, 70, 229 это примерно 0,31; 0,275; 0,898.
2. Нахождение min и max. Вычисляются минимум и максимум из трёх нормализованных чисел. Здесь min = 0,275 (G), max = 0,898 (B). Разность delta = max - min = 0,623.
3. Расчёт Lightness. L = (max + min) / 2. В примере (0,898 + 0,275) / 2 ≈ 0,5865, то есть 58,65%, что инструмент округляет до 59%.
4. Расчёт Saturation. Если delta = 0, насыщенность равна 0, и оттенок не определён (обычно берётся 0). Иначе:
   • при L < 0,5: S = delta / (max + min)
   • при L ≥ 0,5: S = delta / (2 - max - min) Для нашего случая L ≈ 0,5865 (≥0,5), поэтому S = 0,623 / (2 - 0,898 - 0,275) = 0,623 / 0,827 ≈ 0,753, то есть 75%.
5. Расчёт Hue. Оттенок определяется в зависимости от того, какой канал оказался максимальным:
   • Если max = R: H = ( (G - B) / delta ) mod 6
   • Если max = G: H = (B - R) / delta + 2
   • Если max = B: H = (R - G) / delta + 4 У нас max = B, значит H = (0,31 - 0,275) / 0,623 + 4 = 0,056 + 4 = 4,056. Умножаем на 60 для перевода в градусы: 4,056 × 60 ≈ 243,4°, округляем до 243°.

Итог: hsl(243°, 75%, 59%) — инструмент выдаёт именно это.

Использование HSL для обеспечения доступности (WCAG)

Контраст текста и фона — критический параметр для пользователей с ослабленным зрением. Спецификация WCAG 2.1 требует коэффициента контрастности не менее 4,5:1 для основного текста. HSL позволяет регулировать Lightness для достижения нужного контраста, не трогая оттенок. Например, если основной цвет бренда — синий 243°, 75%, 59%, а фоновый — белый 0°, 0%, 100%, контраст может оказаться недостаточным для мелкого текста. Дизайнер снижает Lightness до 40% — оттенок остаётся тем же синим, но текст становится темнее, контраст растёт. При этом идентичность бренда не теряется, так как hue не изменился.

Инструмент на этой странице позволяет экспериментировать: вводите разные HSL-значения и смотрите, как меняется результирующий RGB. Однако помните: WCAG оперирует относительной яркостью, а не напрямую Lightness из HSL. Тем не менее, Lightness — удобная первая аппроксимация, особенно для быстрого прототипирования.

Ограничения модели HSL и когда стоит обращаться к LAB

HSL не лишена недостатков. Главный — отсутствие перцептивной равномерности. Жёлтый цвет при Lightness 50% визуально кажется гораздо светлее, чем синий при той же Lightness. Это связано с нелинейностью человеческого зрения: жёлтый стимулирует колбочки сильнее, чем синий. Если вам нужна шкала, где каждый шаг по светлоте воспринимается одинаково, лучше использовать модель LAB (CIELAB), которая была разработана именно для аппроксимации восприятия.

Инструмент выводит LAB-координаты наравне с HSL и CMYK. Если вы введёте LAB или CMYK-значение, которое лежит за пределами видимого RGB-гаммы (например, очень насыщенный цвет, который экран не может воспроизвести), страница скорректирует его до ближайшего отображаемого цвета. Это означает, что обратное преобразование может дать немного другой цвет — гистерезис неизбежен. Поэтому CMYK-вывод помечен как «оценка для экрана»: для профессиональной печати его нужно верифицировать на реальном оборудовании.

Применение HSL в веб-разработке: CSS и динамические стили

Современные браузеры полностью поддерживают функции hsl() и hsla() в CSS. Например:

.element {
  background-color: hsl(243, 75%, 59%);
}

Это удобно для создания тем через CSS-переменные: можно задать --hue: 243; и вычислять все остальные цвета на лету с помощью calc(). Допустим, тёмная тема использует hsl(var(--hue), 75%, 30%), а светлая — hsl(var(--hue), 75%, 80%). Никакого пересчёта RGB-каналов вручную.

На JavaScript HSL также удобен для программного управления цветом. Например, при создании цветовых шкал для графиков библиотеки вроде D3.js часто опираются именно на HSL, чтобы равномерно распределять оттенки по кругу 360°.

Инструмент на этой странице работает как конвертер «на лету»: вы меняете любое поле — и все остальные обновляются мгновенно. Это особенно полезно, когда нужно перенести цвет из дизайн-макета (где часто указывают RGB) в код, использующий HSL.

Часто задаваемые вопросы

1. Как правильно ввести RGB-цвет? Введите три целых числа от 0 до 255, разделённых запятой или пробелом. Например: 79, 70, 229. Если допустить ошибку (буквы, числа вне диапазона), появится сообщение: «Введите RGB как три числа 0–255, например 79, 70, 229.»

2. Почему CMYK-вывод нельзя использовать для печати напрямую? CMYK-значения, которые показывает инструмент, — это приближение для экрана, основанное на преобразовании из sRGB. Реальные печатные машины имеют другие цветовые профили, типографские краски и настройки. Всегда проверяйте CMYK на печатном оборудовании или используйте специализированные цветовые профили (например, FOGRA).

3. Что делать, если я ввёл HSL, а RGB изменился, но не совпадает с исходным? Если вы ввели HSL, который соответствует цвету за пределами видимого RGB-гаммы (например, очень высокую насыщенность при экстремальной светлоте), инструмент подгоняет результат к ближайшему отображаемому цвету. При обратном пересчёте может возникнуть небольшое смещение. Это нормальное поведение гамма-ограниченной модели.

4. Чем HSL отличается от HSV? HSV (Hue, Saturation, Value) использует яркость (Value) вместо светлоты. В HSL светлота 100% — всегда белый; в HSV Value 100% при любой насыщенности даёт чистый интенсивный цвет. HSL удобнее для создания оттенков и тонирования, HSV — для выбора чистых цветов. Инструмент выводит HSV в списке форматов, чтобы вы могли сравнить.

5. Можно ли в HEX без решётки? Да, инструмент автоматически распознаёт шестнадцатеричные коды как с символом #, так и без него (например, 4F46E5). После преобразования HEX отображается в стандартном формате с решёткой.

6. Зачем нужна LAB, если есть HSL? LAB (CIE Lab*) — перцептивно равномерная модель: изменение одного параметра вызывает субъективно равное изменение восприятия. HSL такой равномерностью не обладает. Если вы создаёте шкалы для научной визуализации или тестируете цвета для дальтоников, LAB даёт более точные результаты. Но для повседневных задач веб-дизайна HSL проще и быстрее.