Значения RGB из параметров HSL

Онлайн-конвертер вычисляет точные значения RGB из параметров HSL для прямой передачи цветовых кодов в таблицы стилей, программные скрипты и графические редакторы. На вход подаются три координаты: цветовой тон в градусах от 0 до 360, насыщенность в процентах и уровень светлоты от 0% до 100%. Алгоритм пересчитывает эти показатели в интенсивность свечения красного, зеленого и синего каналов в стандартном диапазоне от 0 до 255. Результат готов к немедленной вставке в рабочий код.

Операция выполняет переход от цилиндрической системы координат к аппаратно-ориентированной аддитивной модели. Если модель HSL удобна для визуального подбора палитр, настройки яркости или генерации теней за счет изменения одного ползунка, то физические экраны, графические API и ряд инструментов верстки требуют побайтового указания трех базовых лучей.

Автоматический пересчет исключает ошибки округления при переводе дробных коэффициентов в целые числа. Это необходимо при синхронизации дизайн-систем между графическими макетами и кодом, формировании массивов пикселей для рендеринга или проверке контрастности текста по формулам относительной яркости. Вы получаете точное математическое соответствие выбранного оттенка без визуальных искажений на целевом устройстве.

Входные параметры модели HSL: оттенок, насыщенность и светлота

Цветовая модель HSL представляет собой полярную систему координат, геометрия которой строится в виде цилиндра или двойного шестиугольного конуса (bi-hexcone). В отличие от кубической структуры аппаратных пространств, здесь цвет разделен на три независимых свойства, понятных человеческому восприятию: базовый тон, его чистоту и количество света. Для выполнения точного пересчета каждая из трех координат задается в своих строгих единицах измерения.

Цветовой тон (Hue)

Первый параметр определяет сам цветовой оттенок и измеряется в угловых градусах от 0° до 360°. Геометрически это угол поворота вокруг центральной вертикальной оси цветового круга. Точка отсчета 0° (совпадающая с полным оборотом в 360°) всегда указывает на чистый красный цвет. При движении по окружности против часовой стрелки спектр последовательно проходит через все радужные тона.

Опорные углы на шкале цветового круга распределены с шагом в 60 градусов и фиксируют первичные и вторичные цвета:

• 0° (или 360°) - базовый красный;
• 60° - желтый;
• 120° - базовый зеленый;
• 180° - голубой (циан);
• 240° - базовый синий;
• 300° - пурпурный (маджента).

Насыщенность (Saturation)

Второй параметр отвечает за интенсивность и спектральную чистоту выбранного тона. Значение измеряется в процентах от 0% до 100% и геометрически соответствует радиусу - удалению точки от центральной оси цилиндра к его внешней стенке. Чем выше этот показатель, тем меньше в цвете нейтральной серой примеси.

При значении 100% оттенок обладает максимальной возможной яркостью и чистотой для текущего уровня освещенности. По мере снижения процента цвет выцветает, становится приглушенным и пастельным. Когда насыщенность падает до 0%, цвет полностью теряет хроматическую составляющую и превращается в ахроматический оттенок серого. В этой точке на центральной оси цилиндра координата угла Hue перестает влиять на итоговый результат: любой градус тона при нулевой насыщенности даст один и тот же серый цвет.

Светлота (Lightness)

Третий входной параметр задает уровень освещенности цвета по вертикальной оси от 0% до 100%. В геометрии двойного конуса эта ось проходит от нижней вершины к верхней. Особенность модели HSL заключается в том, что чистый спектральный цвет без затемнения и высветления располагается ровно посередине шкалы - на отметке 50%.

Смещение от экватора конуса к его полюсам радикально меняет характер оттенка:

• 0% - точка абсолютного черного цвета; при нулевой светлоте значения оттенка и насыщенности игнорируются, так как в цвете полностью отсутствует свет.
• Диапазон от 1% до 49% - область темных тонов, которые формируются за счет постепенного добавления черного к базовому цвету.
• 50% - эталонный чистый цвет (при условии, что насыщенность равна 100%) без примеси белил или черноты.
• Диапазон от 51% до 99% - область разбеленных оттенков, где базовый тон смешивается с белым светом.
• 100% - точка абсолютного белого цвета; независимо от выставленного угла Hue и процента Saturation, максимальная светлота всегда возвращает чистый белый.

Отличие оси светлоты в HSL от моделей HSV и HSB

При подготовке входных данных важно не путать координаты HSL со схожими моделями HSV и HSB, которые часто используются в палитрах графических редакторов. Хотя первые две буквы в этих системах обозначают одно и то же, третья координата работает по разным математическим правилам.

В модели HSL максимальная чистота и насыщенность цвета достигаются при светлоте 50%, а показатель 100% всегда уводит любой тон в абсолютно белый цвет, имитируя ослепляющее освещение. В системах HSV и HSB третий параметр (Value или Brightness) регулирует мощность свечения самого пигмента: при 100% яркости и 100% насыщенности там получается чистый базовый цвет (например, ярко-красный). Чтобы получить белый цвет в HSV или HSB, необходимо одновременно поднять яркость до 100% и сбросить насыщенность до 0%. Если по ошибке подставить координаты из HSB-палитры в расчет для HSL, все цвета с яркостью 100% после конвертации превратятся в белый.

Сводные характеристики трех входных координат и их поведение в крайних точках диапазона приведены в таблице:

Интерпретация результата: цветовые каналы и структура модели RGB

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

Принцип аддитивного синтеза и работа субпикселей

Модель RGB построена на принципе аддитивного синтеза, то есть сложения световых потоков. Итоговый цвет формируется путем смешивания трех базовых излучений: красного (Red), зеленого (Green) и синего (Blue). На физическом уровне каждый пиксель цифровой матрицы состоит из трех микроскопических светоизлучающих элементов - субпикселей соответствующих цветов. Рассчитанные при конвертации числа определяют, с какой именно мощностью должен светиться каждый из трех субпикселей для получения нужного визуального оттенка.

В отличие от смешивания физических красок на бумаге, при сложении направленных световых лучей общая яркость всегда возрастает:

• Полное отсутствие свечения во всех трех каналах воспринимается глазом как абсолютно черный цвет (экран не излучает свет).
• Сложение двух базовых лучей на максимальной мощности дает более светлые вторичные оттенки: смешивание красного и зеленого образует желтый, зеленого и синего - голубой (циан), синего и красного - пурпурный (мадженту).
• Одновременное свечение всех трех каналов на предельной интенсивности сливается в чистый белый свет.
• Любые равные между собой промежуточные значения всех трех каналов лишают цвет выраженного тона и формируют нейтральную шкалу серых оттенков разной степени яркости.

Форматы представления выходных данных

Выходные значения интенсивности для красного, зеленого и синего каналов записываются в виде упорядоченной тройки чисел - RGB-триплета. В зависимости от среды применения и этапа вычислений этот результат представляется в двух основных форматах: целочисленном 8-битном или нормализованном с плавающей точкой.

В стандартной 8-битной глубине кодирования на каждый цветовой канал отводится ровно 1 байт (8 бит) информации. Это дает 2 в 8-й степени, то есть 256 дискретных уровней яркости. Диапазон выражается целыми числами от 0 до 255 включительно. В такой записи триплет (0, 0, 0) означает полностью погашенные субпиксели (черный цвет), а комбинация (255, 255, 255) - максимальную мощность свечения всех трех элементов (белый цвет). Комбинирование 256 градаций по трем независимым каналам позволяет закодировать более 16,7 миллиона уникальных цветовых оттенков.

В низкоуровневых графических API, трехмерном моделировании и промежуточных математических расчетах используется нормализованный диапазон (float range). Здесь интенсивность каждого канала приводится к дробному числу с плавающей точкой от 0.0 до 1.0, где 0.0 соответствует полному отсутствию света, а 1.0 - стопроцентной мощности излучения. Нормализация позволяет выполнять точные цветовые вычисления без привязки к конкретной битности оборудования, после чего дробные коэффициенты масштабируются до нужного целочисленного формата.

Соотношение двух форматов записи выходных значений и их роль в формировании базовых цветов наглядно демонстрирует таблица:

Математический алгоритм и формула перевода HSL в RGB

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

Подготовка входных параметров и расчет хромы

На первом шаге процентные показатели насыщенности и светлоты приводятся к единому математическому масштабу - десятичным дробям в интервале от 0 до 1. Угол цветового тона остается в градусах от 0° до 360° (при этом крайнее значение 360° в расчетах приравнивается к 0°). Нормализация выполняется простым делением исходных процентов на сто:

• S = S_проценты / 100
• L = L_проценты / 100

Второй этап - вычисление хромы (Chroma, обозначается как C ). Эта величина определяет чистую цветовую интенсивность и показывает разницу между максимально и минимально задействованными каналами в будущем цвете. В биконической геометрии максимальный размах цветности достигается строго на экваторе при L = 0.5 и линейно спадает к полюсам черного и белого. Формула расчета хромы учитывает это сжатие через модуль разности:

C = (1 - |2 × L - 1|) × S

Если светлота равна 0 или 1, выражение внутри модуля дает единицу, а итоговая хрома обнуляется независимо от выбранной насыщенности.

Определение сектора оттенка и промежуточного компонента

На третьем этапе цветовой круг делится на шесть равных секторов по 60° каждый. Границы секторов соответствуют трем первичным и трем вторичным цветам. Чтобы узнать, в какой именно сектор попадает заданный тон, угол H делится на 60°:

H' = H / 60°

Полученный коэффициент H' лежит в пределах от 0 до 6. Внутри каждого сектора один из каналов RGB всегда имеет максимальную амплитуду (равную хроме C ), один остается на нулевом уровне до учета общей яркости, а третий плавно меняется в зависимости от положения угла между границами сектора. Для нахождения этого переменного второго по величине компонента (Intermediate value, обозначается как X ) используется операция остатка от деления по модулю 2:

X = C × (1 - |(H' mod 2) - 1|)

Операция H' mod 2 возвращает остаток от деления дробного числа H' на 2, благодаря чему значение X равномерно возрастает от 0 до C в нечетных по счету секторах и симметрично убывает от C до 0 в четных.

Распределение предварительных каналов по секторам

Четвертый шаг связывает найденные коэффициенты C и X с конкретными цветовыми лучами. В зависимости от интервала, в котором оказалось значение H' , формируется тройка предварительных компонентов (R1, G1, B1) . Эти числа отражают пропорцию смешивания каналов для заданного оттенка, но пока без сдвига по оси светлоты.

Правила распределения предварительных значений для каждого из шести угловых диапазонов сведены в таблицу:

Смещение яркости и масштабирование к диапазону 0-255

Пятый этап добавляет к чистой цветовой пропорции базовую световую подложку. Для этого вычисляется коэффициент смещения яркости (Match value, обозначается как m ), который отвечает за долю белого света, одинаково добавляемую во все три канала:

m = L - (C / 2)

При сложении предварительных координат со смещением m получаются итоговые значения каналов в нормализованном формате от 0.0 до 1.0:

• R_float = R1 + m
• G_float = G1 + m
• B_float = B1 + m

На шестом, заключительном этапе дробные коэффициенты переводятся в стандартный 8-битный диапазон. Каждое число умножается на 255, после чего результат округляется до ближайшего целого по математическим правилам:

• R = round((R1 + m) × 255)
• G = round((G1 + m) × 255)
• B = round((B1 + m) × 255)

Необходимо учитывать, что при переходе к целым числам от 0 до 255 возникает неизбежная погрешность округления (Rounding error). Десятичные дроби на промежуточных этапах имеют высокую точность, тогда как 8-битная сетка ограничена 256 дискретными уровнями на канал. Из-за отбрасывания дробной части два близких, но математически разных оттенка HSL после округления могут дать идентичный целочисленный RGB-триплет, а при обратном пересчете из RGB в HSL исходные проценты могут сместиться на доли единицы.

Примеры расчета и таблица соответствия базовых цветов

Понимание логики работы математических формул проще всего закрепить на подстановке конкретных чисел. Разберем два характерных случая: вычисление сложного составного оттенка с дробными промежуточными значениями и перевод ахроматического цвета, при котором цветовая составляющая полностью обнуляется.

Пошаговый расчет произвольного сложного оттенка

Переведем в систему RGB приглушенный сине-зеленый оттенок с координатами H = 165° , S = 60% , L = 45% . Последовательность вычислений по шести этапам выглядит следующим образом:

• Нормализация процентных параметров к диапазону от 0 до 1: S = 60 / 100 = 0.6 , L = 45 / 100 = 0.45 .
• Вычисление хромы: C = (1 - |2 × 0.45 - 1|) × 0.6 = (1 - |-0.1|) × 0.6 = 0.9 × 0.6 = 0.54 .
• Определение сектора и промежуточного компонента: H' = 165° / 60° = 2.75 . Остаток от деления 2.75 mod 2 равен 0.75 . Подставляем в формулу: X = 0.54 × (1 - |0.75 - 1|) = 0.54 × (1 - 0.25) = 0.54 × 0.75 = 0.405 .
• Распределение предварительных каналов: так как значение H' = 2.75 попадает в третий сектор (интервал от 2 до 3), базовый вектор принимает вид (0, C, X) . Следовательно, R1 = 0 , G1 = 0.54 , B1 = 0.405 .
• Расчет смещения яркости: m = 0.45 - (0.54 / 2) = 0.45 - 0.27 = 0.18 .
• Сложение со смещением и масштабирование к 8-битной сетке: R = round((0 + 0.18) × 255) = round(45.9) = 46 ; G = round((0.54 + 0.18) × 255) = round(0.72 × 255) = round(183.6) = 184 ; B = round((0.405 + 0.18) × 255) = round(0.585 × 255) = round(149.175) = 149 .

Итоговый результат конвертации - целочисленный триплет (46, 184, 149) . В этом примере наглядно проявляется округление дробных значений на финальном этапе: все три канала имели десятые или тысячные доли до приведения к целым числам.

Расчет ахроматического цвета при нулевой насыщенности

Рассмотрим частный случай, когда насыщенность равна нулю: H = 280° , S = 0% , L = 75% . В цилиндрической системе при нулевой насыщенности точка находится строго на центральной вертикальной оси, поэтому угол оттенка H перестает влиять на итоговый цвет.

После нормализации получаем S = 0 и L = 0.75 . При расчете хромы умножение на ноль обнуляет весь результат: C = (1 - |1.5 - 1|) × 0 = 0 . Вслед за хромой нулевым становится и промежуточное значение X = 0 , а предварительные координаты в любом из шести секторов оказываются равными (0, 0, 0) .

Вся нагрузка по формированию цвета переходит на коэффициент смещения яркости: m = L - (0 / 2) = L = 0.75 . При добавлении m к нулевым каналам все три компонента получают одинаковое значение 0.75 . Умножение на 255 дает 0.75 × 255 = 191.25 , что после округления формирует светло-серый цвет с равными каналами (191, 191, 191) . Аналогичный математический сброс хромы до нуля происходит на полюсах светлоты - при L = 0% (черный) и L = 100% (белый), независимо от выставленных процентов насыщенности.

Справочная таблица эталонных цветов и тоновых вариаций

Для быстрой проверки расчетов и понимания того, как координаты одной модели отображаются в другой, удобно ориентироваться на контрольные точки цветового пространства. В таблице ниже собраны первичные и вторичные спектральные цвета, ахроматическая шкала, а также пример формирования темных тонов (Shades) и светлых оттенков (Tints) одного базового цвета путем изменения только параметра светлоты.

Три последние строки таблицы показывают механику работы оси светлоты на примере оранжевого цвета ( H = 30° , S = 100% ). В модели HSL для получения темного тона (Shade) или пастельного разбеленного оттенка (Tint) достаточно изменить только одну координату - уменьшить или увеличить L относительно 50%.

В пространстве RGB эта же операция требует пересчета сразу нескольких каналов по разным правилам. При затемнении (переход от L = 50% к L = 25% ) смещение m остается равным нулю, а значения активных каналов R и G просто делятся пополам, сохраняя нулевой синий канал. При осветлении (переход к L = 75% ) красный канал уже находится на максимуме 255 и расти не может; поэтому высветление происходит за счет подтягивания зеленого канала до 191 и принудительного включения ранее нулевого синего канала до 128, что добавляет в цветовую смесь белую подложку.

Синтаксис записи цветовых значений в CSS и графических технологиях

В таблицах стилей CSS и исходные координаты HSL, и полученные после пересчета каналы RGB задаются с помощью специальных функциональных нотаций. Вычисленные числовые значения подставляются внутрь круглых скобок после имени цветовой функции и передаются в стандартные свойства оформления: color для текста, background-color для заливки фона или border-color для рамок элементов.

Правила оформления цветовых функций в CSS прошли эволюцию от строгого разделения аргументов запятыми (стандарт CSS Color Module Level 3) до более лаконичной записи через пробел, введенной в спецификации CSS Color Module Level 4.

Классическая нотация и стандарт CSS Color Level 4

В традиционном синтаксисе все передаваемые в функцию параметры обязательно разделяются запятыми. Для указания прозрачности (альфа-канала, Opacity) использовались отдельные функции с суффиксом a - hsla() и rgba() , принимающие четвертый аргумент в виде десятичной дроби от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).

Современный стандарт CSS Color Level 4 унифицировал запись и сделал функции hsla() и rgba() устаревшими псевдонимами (legacy syntax), которые сохраняются браузерами только для обратной совместимости. В актуальном синтаксисе действуют следующие правила:

• Основные цветовые координаты внутри функций hsl() и rgb() разделяются одиночными пробелами без запятых.
• Альфа-канал передается прямо в базовую функцию hsl() или rgb() и отделяется от третьей координаты косой чертой (слэш-нотация).
• Прозрачность после слэша разрешено указывать как в виде числа от 0 до 1 (например, 0.5 ), так и в процентах ( 50% ).
• Внутри функции hsl() для первого параметра допустимо опускать знак градуса и писать просто число, либо указывать явные единицы измерения угла ( deg ), однако для второго и третьего параметров знак процента ( % ) обязателен даже при нулевом значении.
• Смешивать два стиля в одной записи (например, ставить запятые вместе со слэшем) запрещено - браузер посчитает такое свойство невалидным и проигнорирует правило.

В следующей таблице приведено сравнение классического и современного синтаксиса на примере уже рассчитанного выше чистого оранжевого цвета ( H = 30° , S = 100% , L = 50% и его эквивалента R = 255 , G = 128 , B = 0 ):

Применение в CSS-свойствах и пользовательских переменных

При прямой стилизации элементов в CSS оба формата работают идентично. Однако при построении гибких таблиц стилей с использованием пользовательских свойств (CSS Custom Properties, или CSS-переменных) полученные значения каналов RGB часто сохраняют не целиком в виде функции, а как изолированный список чисел.

Такой прием позволяет задать базовый цвет один раз в корневом псевдоклассе :root , а затем динамически менять его прозрачность в разных компонентах интерфейса через слэш-нотацию или запятую, не создавая десятки отдельных переменных для каждого уровня непрозрачности.

Ниже показан пример использования переведенных значений RGB ( 255, 128, 0 ) в CSS-переменных для оформления кнопки и уведомления с разной плотностью фона и рамки:

:root {
  /* Хранение чистых каналов RGB для современного синтаксиса через пробел */
  --brand-orange-rgb: 255 128 0;
  
  /* Вариант хранения через запятую для классической функции rgba() */
  --brand-orange-legacy: 255, 128, 0;
}

.alert-box {
  /* Сплошной цвет текста без прозрачности */
  color: rgb(var(--brand-orange-rgb));
  
  /* Полупрозрачный фон с плотностью 15% через слэш-нотацию */
  background-color: rgb(var(--brand-orange-rgb) / 0.15);
  
  /* Рамка с плотностью 60% */
  border-color: rgb(var(--brand-orange-rgb) / 60%);
}

.legacy-button {
  /* Применение переменной со значениями через запятую */
  background-color: rgba(var(--brand-orange-legacy), 0.85);
}

Если сохранить в переменную готовую строку rgb(255 128 0) целиком, подставить к ней альфа-канал внутри другого правила (например, background-color: var(--full-color) / 0.5 ) не получится - парсер CSS не сможет изменить уже закрытую функцию. Именно поэтому хранение трех отдельных чисел после конвертации из HSL остается стандартным подходом при верстке компонентов с динамической прозрачностью.

Прикладные сценарии перевода HSL в RGB во фронтенде и дизайне

Помимо организации CSS-переменных, перевод цветовых координат из HSL в RGB требуется на стыке проектирования интерфейсов, программирования графики и тестирования доступности. Цилиндрическая модель удобна для визуального выбора и математической модификации оттенков человеком, однако большинство программных сред, графических движков и стандартов верификации работают напрямую с интенсивностями красного, зеленого и синего каналов.

Формирование цветовых палитр и дизайн-токенов в UI/UX

При проектировании дизайн-систем и пользовательских интерфейсов в UI/UX базовые палитры и тоновые шкалы часто создаются в модели HSL. Фиксация угла оттенка позволяет дизайнеру предсказуемо генерировать состояния наведения, активные статусы, светлые фоновые подложки и темные акценты путем пошагового изменения светлоты или насыщенности.

Когда палитра сформирована, значения экспортируются в дизайн-токены - платформонезависимые переменные, которые хранятся в JSON- или YAML-файлах и синхронизируются между веб-приложениями, мобильными платформами и десктопным софтом. На этом этапе координаты HSL конвертируются в RGB по нескольким причинам:

• Нативные среды разработки под мобильные ОС и кроссплатформенные фреймворки инициализируют цвет через конструкторы, принимающие целочисленные значения от 0 до 255 или дробные коэффициенты от 0.0 до 1.0 для каналов R, G и B.
• Системы автоматической сборки дизайн-токенов требуют унифицированного аппаратного представления цвета для генерации таблиц стилей, конфигурационных файлов и ресурсов под разные целевые платформы.
• Анимационные библиотеки во фронтенде интерполируют переходы между цветами быстрее и без нежелательного смещения по цветовому кругу, если начальная и конечная точки заданы в виде массивов RGB.

Передача данных в низкоуровневые графические API и скрипты

Высокоуровневые таблицы стилей позволяют браузеру самостоятельно интерпретировать запись hsl() , но при прямой работе с растровой и трехмерной графикой через код разработчику необходимы чистые значения каналов RGB. Видеопамять и буферы кадра хранят каждый пиксель как последовательность байтов или чисел с плавающей точкой, не распознавая цилиндрические координаты.

Ниже приведены основные программные среды и технологии, где при написании скриптов требуется предварительный перевод из HSL в RGB:

Выполнение математического перевода оттенка заранее или на этапе инициализации скрипта избавляет графический конвейер от лишних тригонометрических и модульных вычислений при отрисовке каждого кадра.

Синхронизация цветовых схем между кодом и графическими редакторами

В командной разработке цветовые схемы постоянно переносятся между графическими редакторами (Figma, Adobe Photoshop, Illustrator) и кодовой базой проекта, например, файлом конфигурации Tailwind CSS. Несмотря на поддержку разных моделей, рабочие инструменты дизайнеров и фронтенд-разработчиков часто используют разные форматы по умолчанию.

В конфигурациях современных версий Tailwind CSS пользовательские палитры часто задаются через каналы RGB в CSS-переменных, чтобы сохранить работу встроенных модификаторов прозрачности (таких как bg-primary/50 ). Если дизайнер подобрал гармоничную схему в HSL, разработчику необходимо перевести каждый оттенок в тройку чисел R, G, B для внесения в tailwind.config.js .

Обратная ситуация возникает при переносе цветов из таблиц стилей в графические пакеты для подготовки иллюстраций, иконок или растровых макетов. В Adobe Photoshop и Illustrator стандартные окна выбора цвета (колор-пикеры) и панели настройки кистей ориентированы на модель HSB/HSV или побайтовый ввод RGB, а прямой ввод координат HSL без сторонних плагинов в ряде интерфейсов отсутствует. Точные числовые значения R, G и B позволяют перенести оттенок из CSS-кода в макет без визуальных искажений, которые неизбежно возникают при попытке подставить проценты Lightness в поле Brightness модели HSB.

Расчет относительной яркости и контрастности по стандарту WCAG

Параметр светлоты (L) в модели HSL не отражает реальное восприятие яркости человеческим глазом: чистый желтый цвет hsl(60, 100%, 50%) и чистый синий hsl(240, 100%, 50%) имеют одинаковую математическую светлоту 50%, но визуально желтый кажется намного светлее. Поэтому для проверки читаемости текста на фоне по стандарту доступности WCAG использовать параметр L нельзя.

Алгоритм WCAG опирается исключительно на линейные значения каналов RGB. Чтобы вычислить коэффициент контрастности между двумя цветами, заданными в HSL, выполняются следующие этапы:

• Исходные координаты HSL для цвета текста и цвета фона переводятся в стандартные значения RGB, нормализованные к диапазону от 0.0 до 1.0.
• К каждому из трех каналов (R, G, B) применяется гамма-коррекция для перехода к линейному пространству sRGB.
• Рассчитывается относительная яркость (Luminance) по формуле Y = 0.2126 × R + 0.7152 × G + 0.0722 × B , где весовые коэффициенты учитывают высокую чувствительность сетчатки глаза к зеленому спектру и низкую - к синему.
• Полученные значения относительной яркости более светлого (L1) и более темного (L2) цветов подставляются в итоговую формулу контрастности: (L1 + 0.05) / (L2 + 0.05) .

Такое преобразование используется при автоматизированном тестировании интерфейсов, создании доступных тем оформления и проверке читаемости шрифтов в соответствии с нормативами WCAG уровней AA и AAA.