HEX-код цвета из параметров HSL

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

Инструмент решает задачу переноса цветовых схем из графических макетов в рабочую среду разработки.

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

Параметры цветовой модели HSL и система координат

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

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

• Hue (цветовой тон) задает угловую координату оттенка на замкнутом цветовом круге. Стандартный диапазон составляет от 0 до 360 градусов (deg). Точка отсчета 0° (и совпадающая с ней 360°) соответствует красному цвету, на отметке 120° расположен зеленый, а на 240° - синий. Поскольку ось замкнута в кольцо, при расчетах в таблицах стилей допустимы значения за пределами базового круга или отрицательные углы: например, координата -60° математически эквивалентна 300° (пурпурный). Помимо градусов в спецификациях CSS применяются альтернативные угловые единицы: радианы (rad, полный круг равен 2π или примерно 6.2832 rad), градианы (grad, круг разделен на 400 grad) и обороты (turn, где полный цикл равен 1 turn, а половина круга - 0.5 turn).
• Saturation (насыщенность) отвечает за радиальное расстояние от центральной вертикальной оси цилиндра к его внешней границе и измеряется в процентах от 0% до 100%. При значении 0% цвет полностью теряет хроматическую составляющую и превращается в ахроматический оттенок серого, независимо от того, какой угол выбран для Hue. Показатель 100% дает максимально чистый, концентрированный спектральный тон без примеси серого.
• Lightness (светлота) определяет положение точки по вертикальной оси от 0% до 100%. Нижний полюс (0%) всегда дает абсолютно черный цвет, а верхний полюс (100%) - абсолютно белый, при любых показателях тона и насыщенности. Чистый цвет без высветления и затемнения находится ровно посередине вертикальной шкалы при значении Lightness, равном 50%.

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

Синтаксис записи в стандартах CSS и работа с прозрачностью

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

Для управления непрозрачностью элемента в предметной области предусмотрено расширение HSLA и соответствующая функция hsla() , принимающая четвертый параметр - альфа-канал (от 0 до 1 или от 0% до 100%). В современном стандарте CSS Color 4 синтаксис унифицирован: запятые больше не требуются, основные координаты разделяются пробелами, а альфа-канал отделяется косой чертой внутри базовой функции hsl() . При этом функция hsla() сохранена как рабочий псевдоним для обратной совместимости.

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

/* Классический синтаксис с разделителями-запятыми */
color: hsl(210, 80%, 50%);
color: hsla(210, 80%, 50%, 0.75);

/* Современный синтаксис CSS Color 4 (через пробелы и слэш) */
color: hsl(210deg 80% 50%);
color: hsl(210 80% 50% / 75%);

/* Запись угла в альтернативных единицах измерения */
color: hsl(0.5833turn 80% 50%);
color: hsl(233.33grad 80% 50%);
color: hsl(3.6652rad 80% 50%);

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

Структура шестнадцатеричного кода HEX и связь с sRGB

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

В отличие от цилиндрической системы координат, ориентированной на визуальное восприятие человека, формат HEX представляет собой компактную запись аппаратных значений каналов Red (красный канал), Green (зеленый канал) и Blue (синий канал). Для каждого из трех каналов выделяется 1 байт (8 бит) информации, что позволяет задать 256 дискретных уровней яркости - от 0 до 255 в привычной десятичной системе счисления. В совокупности три 8-битных канала образуют 24-битную глубину цвета (Truecolor), охватывающую 16 777 216 уникальных цветовых комбинаций внутри профиля sRGB.

Устройство 6-значного кода #RRGGBB (hex triplet)

Базовый формат выходного результата представляет собой 6-значную строку с префиксом решетки #RRGGBB , технически именуемую шестнадцатеричным триплетом (hex triplet). Символ # сигнализирует парсеру браузера или графической подсистеме о том, что далее следует шестнадцатеричное число по основанию 16, где для записи значений от 0 до 9 используются арабские цифры, а для значений от 10 до 15 - латинские буквы от A до F (регистр букв в спецификациях не имеет значения: записи #ff5733 и #FF5733 идентичны).

Шесть символов после решетки строго разбиты на три последовательные пары, каждая из которых отвечает за свой цветовой канал в диапазоне от 00 (минимальная интенсивность, десятичный 0) до FF (максимальная интенсивность, десятичное число 255):

• Первая пара символов ( RR ) определяет яркость красного канала (Red).
• Вторая пара символов ( GG ) задает долю зеленого канала (Green).
• Третья пара символов ( BB ) кодирует интенсивность синего канала (Blue).

Каждая пара представляет собой двузначное шестнадцатеричное число, где первый символ является старшим разрядом (количество шестнадцаток, вес 16 ¹ ), а второй - младшим разрядом (количество единиц, вес 16 ⁰ ). Если десятичное значение канала меньше 16, в шестнадцатеричной записи перед цифрой обязательно ставится ведущий ноль (например, число 12 переводится как 0C ), чтобы сохранить фиксированную 6-символьную длину строки.

Ниже приведено распределение разрядов и диапазонов значений внутри стандартного 6-значного кода:

Сокращенная 3-значная запись (short HEX) и 8-значный формат с прозрачностью

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

Сокращенная запись (short HEX) имеет структуру #rgb и используется для оптимизации объема кода в тех случаях, когда в каждом из трех каналов оба шестнадцатеричных символа попарно совпадают. Правило сжатия работает строго при дублировании цифр внутри каждой пары: код вида #R 1 R 2 G 1 G 2 B 1 B 2 можно сократить до трех знаков только тогда, когда R 1 = R 2 , G 1 = G 2 и B 1 = B 2 одновременно. При обработке 3-значного кода браузер дублирует каждый символ, восстанавливая полную 6-значную формулу.

Обратите внимание: сокращение #rgb не является округлением. Например, код #336699 без потерь сжимается до #369 , а чистый белый цвет #FFFFFF - до #FFF . При этом код #306090 сократить нельзя, так как при раскрытии записи #369 получится совершенно другой оттенок ( #336699 вместо исходного #306090 ). Всего 3-значная нотация способна выразить 4096 цветов (16 × 16 × 16).

Для передачи сведений о непрозрачности элемента поверх 24-битного цвета sRGB применяется 8-значный формат #rrggbbaa (также обозначаемый как HEXA) и его сокращенный 4-значный аналог #rgba . В структуре #rrggbbaa первые шесть символов работают как обычный цветовой триплет, а последняя, четвертая пара символов ( aa ) кодирует альфа-канал в том же диапазоне от 00 до FF (десятичные 0-255):

• Значение 00 на конце означает полную прозрачность (0% видимости цвета, десятичный 0).
• Значение 80 задает примерно половинную непрозрачность (десятичное 128 из 255, что соответствует примерно 50,2%).
• Значение FF указывает на абсолютно сплошной, непрозрачный цвет (100% видимости, десятичное 255).

Примеры эквивалентных записей полных, сокращенных и расширенных шестнадцатеричных кодов:

/* Сплошной цвет: полный 6-значный и сокращенный 3-значный HEX */
color: #ffcc00;
color: #fc0;

/* Цвет с непрозрачностью 80% (204 из 255 = CC в шестнадцатеричной системе) */
color: #ffcc00cc;
color: #fc0c;

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

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

Ниже приведена полная последовательность вычислений из семи шагов, используемая для получения кода HEX из параметров HSL.

Нормализация процентных параметров и расчет хромы

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

S = S_percent / 100
L = L_percent / 100

На втором шаге вычисляется хрома ( C , от англ. Chroma) - величина, отражающая чистоту и размах цветового сигнала относительно нейтральной оси при заданной светлоте. Формула расчета хромы имеет следующий вид:

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

Модуль выражения |2 × L - 1| обеспечивает симметричное затухание хромы при движении от центрального сечения модели (где L = 0.5 и C = S ) к обоим полюсам - черному ( L = 0 ) и белому ( L = 1 ), в которых хрома обращается в ноль независимо от уровня насыщенности.

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

Третий шаг алгоритма связывает круговую шкалу H с тремя первичными каналами цвета. Для этого полный круг в 360 градусов делится на шесть равных секторов по 60 градусов каждый, после чего вычисляется промежуточный компонент X (второй по величине цветовой канал в текущем секторе):

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

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

Выбор временной тройки и смещение светлоты

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

Распределение значений C , X и 0 по каналам в зависимости от градусной меры угла H или сектора H' приведено в таблице:

Пятый шаг вводит поправку на светлоту. Поскольку значения R1 , G1 и B1 имеют нижнюю границу на уровне нуля, к каждому из них необходимо прибавить одинаковое смещение светлоты m :

m = L - (C / 2)

Прибавление константы m переводит временную тройку в нормализованные координаты целевого пространства в диапазоне [0, 1] : (R1 + m, G1 + m, B1 + m) .

Масштабирование каналов и сборка шестнадцатеричной строки

Заключительная часть алгоритма отвечает за переход от дробных коэффициентов к стандартному 8-битному представлению каждого канала и строковому форматированию:

• На шестом шаге нормализованные значения умножаются на 255 и округляются по правилам математического округления ( round ) до ближайшего целого числа из диапазона 0-255:

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

• На седьмом шаге каждое десятичное число R , G и B переводится в шестнадцатеричную систему счисления с основанием 16 (операция dec_to_hex ). Целая часть от деления числа на 16 дает старший разряд (первый символ пары), а остаток от деления на 16 - младший разряд (второй символ пары), где значениям от 10 до 15 сопоставляются латинские буквы от A до F .
• Если десятичное значение канала меньше 16 (от 0 до 15), результат перевода состоит всего из одного шестнадцатеричного символа (от 0 до F ). Для сохранения строгой 6-значной структуры к таким значениям слева добавляется ведущий ноль (выравнивание строки методом padStart до двух символов: например, 5 преобразуется в 05 , а 12 преобразуется в 0C ).
• Итоговая строка формируется путем конкатенации префикса # и трех двухсимвольных пар в строгом порядке следования каналов: # + Hex(R) + Hex(G) + Hex(B) .

Примеры расчёта и таблица соответствия цветов HSL и HEX

Для проверки последовательности вычислений рассмотрим конвертацию сложного небазового оттенка - приглушенного сине-фиолетового цвета с координатами hsl(210, 60%, 40%) . Входными данными выступают угол цветового тона H = 210° , насыщенность S = 60% и светлота L = 40% .

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

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

• Перевод процентных показателей насыщенности и светлоты в десятичные дроби из диапазона от 0 до 1:

  S = 60 / 100 = 0.6
  L = 40 / 100 = 0.4

• Вычисление хромы C , определяющей амплитуду чистого тона при заданной светлоте:

  C = (1 - |2 × 0.4 - 1|) × 0.6 = (1 - |-0.2|) × 0.6 = 0.8 × 0.6 = 0.48

• Нахождение сектора оттенка H' и промежуточного компонента X для второго по величине цветового канала:

  H' = 210 / 60 = 3.5
  X = 0.48 × (1 - |3.5 mod 2 - 1|) = 0.48 × (1 - |1.5 - 1|) = 0.48 × 0.5 = 0.24

• Распределение значений по временной тройке (R1, G1, B1) . Поскольку угол 210° попадает в четвертый сектор (интервал от 180° до 240°, что соответствует 3 ≤ H' < 4 ), компонентам присваиваются значения (0, X, C) :

  R1 = 0
  G1 = 0.24
  B1 = 0.48

• Определение коэффициента смещения светлоты m и сложение его с каждым из временных каналов:

  m = 0.4 - (0.48 / 2) = 0.4 - 0.24 = 0.16
  R_norm = 0 + 0.16 = 0.16
  G_norm = 0.24 + 0.16 = 0.40
  B_norm = 0.48 + 0.16 = 0.64

• Масштабирование каналов к 8-битному диапазону 0-255 с математическим округлением до целых чисел:

  R = round(0.16 × 255) = round(40.8) = 41
  G = round(0.40 × 255) = round(102.0) = 102
  B = round(0.64 × 255) = round(163.2) = 163

• Перевод полученных десятичных значений в шестнадцатеричную систему счисления путем деления на 16:

  Для R (41): 41 / 16 = 2 (остаток 9) → 29
  Для G (102): 102 / 16 = 6 (остаток 6) → 66
  Для B (163): 163 / 16 = 10 (остаток 3), где 10 соответствует символу A → A3

После объединения пар символов с префиксом решетки формируется итоговый шестнадцатеричный код: #2966A3 .

Аналогичным образом проверяются граничные случаи, требующие добавления ведущего нуля. Например, для темно-красного оттенка hsl(0, 80%, 5%) расчет дает десятичные каналы R = 23 , G = 3 , B = 3 . При переводе в шестнадцатеричный формат число 23 превращается в 17 , а тройки в зеленом и синем каналах дают одиночный символ 3 , который дополняется нулем слева до 03 , формируя код #170303 .

Справочная таблица базовых, вторичных и ахроматических цветов

Для быстрой проверки расчетов и сверки опорных точек цветового круга в таблице ниже приведены координаты основных спектральных и нейтральных оттенков, их промежуточные десятичные значения в каналах RGB и результирующие 6-значные коды HEX.

В ахроматических цветах (белом, черном и всех градациях серого) хрома C и компонент X всегда равны нулю. В этих точках итоговые значения каналов определяются исключительно параметром светлоты L через смещение m , поэтому изменение угла H от 0° до 360° при нулевой насыщенности или на полюсах светлоты (0% и 100%) не влияет на получаемый код HEX.

Отличия HSL от смежных цветовых моделей в графических редакторах

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

Разница в геометрии и расчете HEX между HSL и HSB

В обеих системах первая координата задает одинаковый угол цветового тона на круге от 0° до 360°. Расхождения начинаются на второй и третьей осях, что приводит к разным результатам при конвертации одних и тех же чисел в HEX.

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

В моделях HSB и HSV третья координата отвечает за яркость свечения относительно черного цвета. Максимально чистый и яркий тон здесь достигается тогда, когда и вторая, и третья координаты одновременно равны 100%. Белый цвет в HSB находится в точке с нулевой насыщенностью и максимальной яркостью (0%, 100%).

Ниже приведено сравнение итоговых кодов HEX при подстановке идентичных числовых параметров для чистого красного тона (0°) в обе системы координат:

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

Место HSL среди современных цветовых пространств CSS

Помимо классической цилиндрической системы и шестнадцатеричной записи HEX, спецификация CSS включает другие модели, решающие специфические задачи работы с цветом:

• HWB - аппаратно-ориентированная цилиндрическая модель, работающая внутри стандартного охвата sRGB. Вместо насыщенности и светлоты она использует тот же угол тона от 0° до 360°, к которому в процентном соотношении напрямую домешиваются доли белой и черной краски. Как и HSL, эта модель легко и однозначно переводится в 6-значный код HEX.
• LCH, OKLAB и OKLCH - перцептивно равномерные цветовые пространства. В модели HSL цвета с одинаковой математической светлотой 50% (например, синий #0000FF и желтый #FFFF00 ) воспринимаются человеческим глазом как совершенно разные по визуальной яркости. Пространства OKLAB и OKLCH устраняют этот оптический перекос: изменение тона в них не меняет воспринимаемую светлоту цвета. Кроме того, они охватывают расширенные цветовые диапазоны современных дисплеев, выходящие за рамки стандартного sRGB, поэтому не каждый цвет из OKLCH может быть без потерь записан в традиционный формат HEX.

Практическое применение конвертации во фронтенд-разработке и дизайне

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

Формирование тоновых шкал и гармонических палитр для дизайн-систем

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

Разработчики и UI/UX-дизайнеры выстраивают палитры в цилиндрических координатах по следующим принципам с последующим переводом каждого шага в HEX:

• Создание монохроматических шкал, тинтов и шейдов. Базовый цвет фиксируется по углу оттенка и насыщенности, после чего изменяется только параметр светлоты. Увеличение светлоты от базового уровня к 90-95% формирует тинты (осветленные вариации для фонов плашек и состояний наведения), а уменьшение к 10-20% создает шейды (затемненные оттенки для границ, теней и акцентного текста).
• Построение цветовых гармоний. Изменение угла оттенка на фиксированный шаг позволяет математически точно находить сочетающиеся цвета: смещение на 180° дает дополнительный (комплементарный) цвет, шаг в ±30° формирует аналогичную палитру, а прибавление 120° и 240° выстраивает контрастную триадную схему.

После расчета координат полученные комбинации переводятся в 6-значные HEX-коды для записи в файлы конфигурации, например в объект темы Tailwind CSS или JSON-схемы дизайн-токенов. Ниже приведен пример тоновой шкалы для базового синего цвета с углом тона 220° и насыщенностью 80%, где каждый уровень светлоты пересчитан в статическое шестнадцатеричное значение:

Адаптация под светлую и темную тему и ограничения совместимости

При верстке адаптивных интерфейсов с переключением UI themes (светлый и темный режимы) часто применяются кастомные CSS-свойства, объявленные в псевдоклассе :root . Разработчики выносят базовый тон и насыщенность в отдельные переменные, а при смене темы инвертируют шкалу светлоты и слегка приглушают насыщенность (например, снижают ее с 85% до 65%), чтобы яркие элементы не вызывали зрительного утомления на темном фоне.

Несмотря на гибкость CSS-переменных, во фронтенд-разработке регулярно возникает необходимость конвертировать динамически подобранные HSL-значения в фиксированные строки HEX:

• Интеграция со сторонними JS-библиотеками. Инструменты визуализации данных, графиков (на базе Canvas или WebGL) и картографические сервисы нередко принимают настройки цветовой схемы исключительно в виде шестнадцатеричных строк и не умеют парсить CSS-функции.
• Экспорт и инлайновая разметка SVG. При передаче векторных иконок во внешние среды, генерации PDF-документов или встраивании графики в почтовые рассылки атрибуты заливки fill и обводки stroke заполняются строгими HEX-кодами для гарантии одинакового отображения во всех почтовых клиентах и программах просмотра.
• Поддержка спецификаций мобильных и кроссплатформенных фреймворков. При передаче дизайн-токенов из веб-проекта в разработку под нативные мобильные платформы шестнадцатеричная запись остается единым универсальным форматом обмена данными.

Контроль доступности и расчет контрастности по стандартам WCAG

Обеспечение читаемости текста и распознаваемости элементов управления регламентируется руководствами по доступности веб-контента WCAG 2.1 и WCAG 2.2. Стандарты устанавливают минимальные пороги коэффициента контраста между текстом и фоном: для базового уровня AA требуется соотношение не менее 4.5:1 для обычного текста и 3:1 для крупного шрифта, а для расширенного уровня AAA - не менее 7:1 и 4.5:1 соответственно.

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

Сама математическая формула оценки контрастности по стандарту WCAG не работает напрямую с координатами HSL. Для расчета относительной яркости цветов требуется разложить их на нелинейные каналы sRGB, которые лежат в основе шестнадцатеричного кода HEX. После выбора подходящей светлоты в HSL параметры переводятся в HEX, из шестнадцатеричных пар извлекаются значения красного, зеленого и синего каналов, вычисляется относительная яркость обеих поверхностей и проверяется выполнение нормативов AA или AAA.