Цветовая модель HSL из HEX-значения

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

Шестнадцатеричная запись HEX ориентирована на аппаратное восприятие экрана и задает цвет через интенсивность свечения красного, зеленого и синего каналов RGB. Изменить яркость или приглушить такой цвет вручную сложно, поскольку для этого приходится одновременно пересчитывать все три шестнадцатеричные пары.

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

Структура исходного шестнадцатеричного кода HEX

Входные данные в формате HEX представляют собой компактную текстовую запись цвета в пространстве sRGB. Значение строится на базе шестнадцатеричной системы счисления с основанием 16. В отличие от привычной десятичной системы, здесь для записи чисел используется шестнадцать символов: арабские цифры от 0 до 9 и латинские буквы от A до F. Буквенные обозначения соответствуют десятичным числам от 10 до 15, где A равняется 10, B - 11, C - 12, D - 13, E - 14, а F обозначает максимальное значение разряда - 15. Регистр букв не влияет на итоговое числовое значение.

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

• первая пара RR задает интенсивность красного канала;
• вторая пара GG определяет уровень зеленого канала;
• третья пара BB отвечает за долю синего канала.

Каждая пара символов кодирует ровно один байт информации, что эквивалентно 8 битам. В шестнадцатеричном исчислении этот диапазон простирается от минимального значения 00 до максимального FF . При переводе в десятичную систему один байт охватывает 256 градаций яркости - от 0 до 255. Полное отсутствие свечения во всех трех каналах записывается как 000000 , а максимальная интенсивность всех компонентов образует код FFFFFF .

Сокращенная трехзначная и расширенная восьмизначная запись

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

Трехзначная запись формата RGB является сокращением стандартного кода. Она используется в тех случаях, когда внутри каждой из трех пар символы дублируют друг друга. При обработке такого значения каждый символ удваивается для восстановления полной шестизначной структуры. Например, трехзначный код F0C раскрывается в полный триплет FF00CC , где F превращается в FF , 0 - в 00 , а C - в CC .

Восьмизначная структура вида RRGGBBAA расширяет базовый триплет четвертой парой символов. Первые шесть знаков по-прежнему определяют цвет в пространстве sRGB, а завершающая пара AA кодирует альфа-канал, отвечающий за непрозрачность. Этот компонент также занимает один байт и изменяется в пределах от 00 до FF (от 0 до 255 в десятичном виде). Значение 00 делает цвет полностью прозрачным, 80 (128 в десятичной системе) соответствует примерно 50% непрозрачности, а FF означает полностью плотный, непрозрачный цвет.

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

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

Параметры цветовой модели HSL: тон, насыщенность и светлота

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

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

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

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

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

Промежуточные углы отвечают за смежные оттенки: например, на отметке 30° располагается оранжевый, а на 270° - фиолетовый.

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

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

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

Светлота (Lightness)

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

Распределение яркости в модели HSL построено вокруг центральной экваториальной плоскости:

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

Смещение показателя от 50% вверх визуально работает как добавление белой краски к исходному пигменту, а движение от 50% вниз - как постепенное подмешивание черного.

Стандарт записи результата для CSS

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

Свойства каждого параметра и правила их форматирования в итоговой строке сведены в общую таблицу.

Для плотных непрозрачных цветов используется шаблон hsl(H, S%, L%) - например, чистый синий цвет записывается как hsl(240, 100%, 50%) . Если исходный шестнадцатеричный код содержал дополнительный байт прозрачности, результат оформляется через расширенную функцию hsla(H, S%, L%, A) , где четвертый параметр A задает плотность альфа-канала в виде десятичной дроби от 0 до 1 или в процентах.

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

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

Пошаговый порядок вычислений

Для получения точных значений HSL исходный код проходит следующие этапы обработки:

• Перевод шестнадцатеричных пар R, G и B в десятичную систему счисления. Каждая двухсимвольная пара преобразуется в целое число в диапазоне от 0 до 255 по формуле позиционного веса: старший разряд умножается на 16, к результату прибавляется значение младшего разряда.
• Нормализация каналов RGB. Десятичные значения каждого канала приводятся к единичному отрезку от 0 до 1 путем деления на максимальную разрядность 255: R' = R / 255 , G' = G / 255 , B' = B / 255 .
• Определение экстремумов и хромы. Среди трех нормализованных величин выбираются максимальное значение Cmax = max(R', G', B') и минимальное значение Cmin = min(R', G', B') . Разница между ними определяет размах цветовой составляющей - хрому (Chroma): Δ = Cmax - Cmin .
• Расчет светлоты (Lightness). Показатель вычисляется как среднее арифметическое между самым ярким и самым темным каналами: L = (Cmax + Cmin) / 2 . Для перевода в проценты полученная десятичная дробь умножается на 100.
• Расчет насыщенности (Saturation). Если Δ = 0 , все три канала равны между собой, цвет является ахроматическим, а насыщенность принимает значение S = 0 . Если хрома отлична от нуля, применяется формула S = Δ / (1 - |2L - 1|) , где знаменатель учитывает сужение цветового пространства по мере приближения светлоты к черному или белому полюсу. Итоговое число умножается на 100 для записи в процентах.
• Расчет цветового тона (Hue). Угол рассчитывается в зависимости от того, какой из трех каналов имеет максимальную интенсивность Cmax .

Выбор конкретной формулы для вычисления градуса тона на шестом шаге зависит от доминирующего канала и величины хромы.

Сквозной пример расчета

Рассмотрим практическое преобразование на примере приглушенного сине-зеленого оттенка с кодом #288C78 .

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

• Красный канал 28 : 2 × 16 + 8 = 40
• Зеленый канал 8C : 8 × 16 + 12 = 140
• Синий канал 78 : 7 × 16 + 8 = 120

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

• R' = 40 / 255 ≈ 0.1569
• G' = 140 / 255 ≈ 0.5490
• B' = 120 / 255 ≈ 0.4706

На третьем шаге определяются пограничные значения и хрома. Максимальным является зеленый канал Cmax = 0.5490 , минимальным - красный Cmin = 0.1569 . Размах хромы составляет:

Δ = 0.5490 - 0.1569 = 0.3921

На четвертом шаге вычисляется уровень светлоты:

L = (0.5490 + 0.1569) / 2 = 0.7059 / 2 ≈ 0.3529 (или 35.29%)

На пятом шаге рассчитывается насыщенность, так как Δ > 0 :

S = 0.3921 / (1 - |2 × 0.3529 - 1|) = 0.3921 / (1 - |-0.2942|) = 0.3921 / 0.7058 ≈ 0.5555 (или 55.55%)

На шестом шаге находится угол цветового тона. Поскольку максимальное значение принадлежит зеленому каналу ( Cmax = G' ), применяется формула со смещением +2:

H = 60° × (((0.4706 - 0.1569) / 0.3921) + 2) = 60° × ((0.3137 / 0.3921) + 2) = 60° × (0.8000 + 2) = 60° × 2.8 = 168°

После математического округления дробных процентов до целых чисел итоговые координаты для кода #288C78 принимают вид: тон - 168°, насыщенность - 56%, светлота - 35%. В стандартной функциональной записи для таблиц стилей результат оформляется как hsl(168, 56%, 35%) .

Синтаксис HSL в CSS и работа с переменными в веб-разработке

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

В спецификации CSS Color Level 4 функции hsl() и hsla() были унифицированы. Отдельная функция hsla() сохранена для обратной совместимости, но стандартная запись hsl() теперь самостоятельно принимает необязательный четвертый параметр прозрачности (альфа-канал), который отделяется косой чертой (слэшем). Сравнение двух стандартов записи приведено в таблице ниже:

Смешивание двух форматов внутри одного объявления (например, использование запятых вместе со слэшем hsl(120, 100%, 50% / 0.8) ) является синтаксической ошибкой CSS и приведет к тому, что браузер проигнорирует свойство.

Единицы измерения угла для параметра Hue

По умолчанию координата цветового тона записывается как безразмерное число, которое интерпретируется браузером как градусы. Однако спецификация CSS допускает явное указание геометрических единиц измерения угла (тип данных <angle> ), что удобно при математических расчетах и анимациях:

• deg - градусы (полный круг составляет 360deg ). Запись hsl(168deg 56% 35%) полностью эквивалентна hsl(168 56% 35%) .
• turn - обороты (полный круг равен 1turn ). Например, 0.5turn соответствует 180deg , а 0.25turn - 90deg .
• rad - радианы (полный круг равен 2π , или приблизительно 6.2832rad ).
• grad - градианы или гоны (полный круг разделен на 400grad , прямой угол равен 100grad ).

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

Декомпозиция координат в CSS Custom Properties

Главное практическое преимущество перевода HEX в HSL раскрывается при работе с пользовательскими свойствами (CSS-переменными). Если сохранить шестнадцатеричный код в переменную целиком, изменить его яркость или прозрачность средствами самого CSS без замены всего значения затруднительно. Раздельное хранение (декомпозиция) вычисленных параметров тона, насыщенности и светлоты в псевдоклассе :root позволяет динамически управлять состояниями интерфейса и темами оформления с помощью математической функции calc() без повторной конвертации кодов.

При таком подходе результат преобразования цвета #288C78 - координаты 168 , 56% и 35% - разбивается на атомарные переменные:

:root {
  --brand-h: 168;
  --brand-s: 56%;
  --brand-l: 35%;
  
  /* Базовый цвет собирается из отдельных каналов */
  --color-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
}

Управление интерактивными состояниями элементов

Имея независимый доступ к каналу светлоты --brand-l и альфа-каналу, разработчик может программно генерировать состояния наведения ( :hover ), нажатия ( :active ), блокировки ( :disabled ) и полупрозрачные подложки, сохраняя исходный цветовой тон и насыщенность неизменными:

.button {
  background-color: var(--color-primary);
  /* Полупрозрачная тень того же оттенка через слэш-нотацию */
  box-shadow: 0 4px 12px hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.35);
}

.button:hover {
  /* Осветление кнопки на 8% при наведении курсора */
  background-color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 8%));
}

.button:active {
  /* Затемнение на 5% от базового уровня в момент клика */
  background-color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 5%));
}

.button:disabled {
  /* Снижение насыщенности и увеличение светлоты для неактивного элемента */
  background-color: hsl(var(--brand-h) calc(var(--brand-s) - 40%) calc(var(--brand-l) + 30%));
}

Переключение светлой и темной темы (Dark Mode)

Декомпозиция каналов упрощает адаптацию интерфейса под темный режим оформления. Вместо ручного подбора и конвертации новой палитры HEX-кодов достаточно переопределить базовые переменные светлоты или инвертировать их значения через медиазапрос prefers-color-scheme или селектор атрибута темы:

:root {
  --surface-h: 210;
  --surface-s: 20%;
  --surface-l: 96%; /* Светлый фон по умолчанию */
  --text-l: 15%;    /* Темный текст по умолчанию */
}

[data-theme="dark"] {
  --surface-l: 12%; /* Темный фон того же оттенка 210° */
  --text-l: 90%;    /* Светлый текст */
  
  /* При необходимости в темной теме слегка приглушается насыщенность */
  --surface-s: calc(20% - 8%);
}

body {
  background-color: hsl(var(--surface-h) var(--surface-s) var(--surface-l));
  color: hsl(var(--surface-h) 10% var(--text-l));
}

Если в дизайн-системе потребуется изменить основной фирменный оттенок, достаточно перевести один новый HEX-код и обновить три числа в блоке :root - все производные состояния кнопок, тени, фоны и темная тема пересчитаются в браузере пропорционально.

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

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

Генерация монохромной шкалы оттенков от 100 до 900

В современных дизайн-системах и фреймворках по аналогии с Tailwind CSS для каждого базового цвета формируется градиентная шкала из девяти или десяти шагов - от самого светлого с индексом 50 или 100 до самого темного с индексом 900. Центральным элементом такой шкалы обычно выступает индекс 500, соответствующий исходному цвету бренда после конвертации.

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

• Светлые оттенки (tints) формируются для индексов 100-400 путем последовательного увеличения параметра Lightness в сторону 95-98%. Такие значения используются для подложек уведомлений, фонов карточек и выделения активных строк в таблицах.
• Тени (shades) создаются для индексов 600-900 за счет пошагового уменьшения параметра Lightness вплоть до 10-15%. Темные градации применяются для основного текста, акцентных заголовков, иконок и контрастных границ.
• Приглушенные тона (tones) получаются путем снижения показателя Saturation при сохранении неизменного угла Hue. Уменьшение насыщенности до 5-20% позволяет получить нейтральные серо-голубые или серо-бежевые поверхности, которые визуально гармонируют с яркими элементами бренда, не создавая цветового шума.

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

Математический расчет цветовых гармоний

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

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

• Аналогичная гармония (смещение на ±30 градусов). Цвета располагаются в соседних секторах круга. Для исходного тона 200° соседними будут 170° и 230° . Схема применяется для создания спокойных градиентов и смежных категорий данных на диаграммах.
• Комплементарная пара (смещение на +180 градусов). Противоположный сектор круга обеспечивает максимальный цветовой контраст. Для базового цвета с углом 30° комплементарным является 210° . Пара подходит для выделения критических элементов внимания поверх основного оформления.
• Триадная схема (смещение на +120 и +240 градусов). Три цвета делят круг на равные части. От базового угла 10° образуются точки 130° и 250° . Триада востребована при подборе различимых палитр для дашбордов, тегов и многоуровневой инфографики.
• Раздельно-комплементарная схема (смещение на +150 и +210 градусов). Вместо прямого противоположного тона берутся два соседних от него сектора, что снижает визуальную резкость на стыке объектов.

Параметр Lightness и проверка контрастности по стандарту WCAG 2.2

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

Человеческий глаз неодинаково чувствителен к разным участкам спектра: зеленый и желтый цвета воспринимаются значительно ярче, чем синий или фиолетовый при той же физической интенсивности излучения. Поэтому стандарт доступности веб-контента WCAG 2.2 оценивает читаемость не по параметру Lightness из HSL, а на основе относительной яркости (Relative Luminance, обозначается как Y или L _WCAG ). В формуле расчета относительной яркости для линейных каналов используются неравномерные весовые коэффициенты: 0.2126 для красного, 0.7152 для зеленого и лишь 0.0722 для синего.

Разница между математической светлотой в HSL и воспринимаемой яркостью наглядно проявляется при сравнении двух чистых цветов с одинаковой координатой L = 50% на белом и черном фоне:

Как показывает сопоставление, при идентичном параметре L = 50% белый текст на синей кнопке обеспечивает высокую читаемость и проходит строгий норматив AAA (требующий коэффициента Color Contrast Ratio не менее 7:1 для обычного текста и 4.5:1 для уровня AA). Тот же белый текст на желтой кнопке с L = 50% полностью сливается с фоном, давая коэффициент 1.07:1 . По этой причине после формирования цветовой шкалы через изменение параметра Lightness каждую пару «текст - фон» необходимо дополнительно сверять по формуле контрастности WCAG 2.2 и при необходимости вручную смещать светлоту для желтых, салатовых и голубых оттенков.

Отличия HSL от цветовых моделей RGB, HSV (HSB) и OKLCH

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

Сравнение HSL и аппаратной записи RGB или HEX

Запись цвета в форматах RGB и HEX ориентирована на физическое устройство дисплея. Каждый пиксель экрана состоит из трех субпикселей, и код задает точную интенсивность свечения каждого из них. Однако человеку крайне сложно мысленно складывать световые волны: глядя на произвольный код вроде #3A7CA5 , невозможно сразу определить, как именно нужно изменить каждую из трех пар символов, чтобы сделать этот оттенок ровно на 15% светлее или немного менее насыщенным без искажения самого цветового тона. При попытке вручную увеличить только один канал цвет неизбежно смещается в сторону красного, зеленого или синего спектра.

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

Разница между HSL и моделью HSV или HSB в графических редакторах

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

Главное геометрическое и математическое различие заключается в том, какую точку модели считают максимальной по яркости:

• В модели HSL верхняя граница светлоты L = 100% всегда дает абсолютно белый цвет независимо от выбранного тона и насыщенности. Чистый, максимально яркий спектральный цвет без примеси белил или черноты располагается ровно посередине шкалы при L = 50% и S = 100% .
• В модели HSB (или HSV) параметр яркости отражает интенсивность свечения самого цвета под воображаемым источником света. При максимальной насыщенности S = 100% и максимальной яркости B = 100% получается чистый спектральный цвет (что в системе HSL соответствует L = 50% ). Чтобы получить в HSB чистый белый цвет, необходимо при B = 100% полностью сбросить насыщенность до S = 0% .

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

Геометрическая модель HSL против перцептивно однородных пространств OKLCH и CIELAB

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

Для преодоления этого ограничения в спецификациях современного веба и цифрового дизайна применяются перцептивно однородные цветовые пространства, такие как CIELAB и созданная для CSS цилиндрическая модель OKLCH. В отличие от HSL, в пространстве OKLCH первая координата светлоты рассчитывается с учетом восприятия глазом. Если задать в OKLCH два разных оттенка (например, синий и желтый) с одинаковой перцептивной светлотой L = 70% , они будут выглядеть для наблюдателя одинаково светлыми и покажут практически идентичный коэффициент контрастности по стандарту WCAG 2.2. Кроме того, при вращении цветового круга в OKLCH не происходит резких скачков визуальной яркости, а само пространство способно описывать расширенные цветовые охваты современных дисплеев за пределами стандартного sRGB, тогда как классический формат HSL ограничен возможностями исходной шестнадцатеричной палитры.

Таблица соответствия базовых цветов в форматах HEX, RGB и HSL

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

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

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

• Равенство пар в ахроматических кодах: если в шаблоне #XXYYZZ все три шестнадцатеричные пары идентичны ( XX = YY = ZZ , как в кодах #000000 , #808080 , #FFFFFF или любом промежуточном оттенке вроде #CCCCCC ), амплитуда между каналами отсутствует. Это автоматически обнуляет цветовой тон и насыщенность ( H = 0° , S = 0% ), оставляя изменяемым только параметр светлоты L , который линейно растет от 0% до 100% пропорционально значению пары.
• Условие максимальной насыщенности и базовой светлоты: любой чистый спектральный цвет в модели HSL имеет координаты S = 100% и L = 50% . В формате HEX такому состоянию всегда соответствует строгое условие: как минимум одна пара символов должна иметь максимальное значение FF ( 255 ), а как минимум одна другая - минимальное значение 00 ( 0 ).
• Шаг цветовых секторов в 60 градусов: первичные цвета аддитивной палитры, где задействован ровно один канал на максимуме ( #FF0000 , #00FF00 , #0000FF ), располагаются на круге с шагом 120° ( 0° , 120° , 240° ). Вторичные цвета, образуемые смешением двух каналов с максимальной интенсивностью FF при нулевом третьем ( #FFFF00 , #00FFFF , #FF00FF ), занимают позиции ровно посередине между первичными - на отметках 60° , 180° и 300° .

Понимание этих опорных точек упрощает визуальную проверку CSS-кода при верстке. Например, если в шестнадцатеричном коде отсутствует значение 00 (все каналы больше нуля), итоговая светлота L никогда не опустится до нуля, а при отсутствии FF она не достигнет 100% . Заметив одинаковые символы во всех трех разрядах HEX-кода, разработчик сразу понимает, что перед ним нейтральный серый цвет без цветовой примеси, для которого любое изменение градуса H в стилях не даст визуального эффекта, пока насыщенность S остается равной нулю.