Цветовая модель HSL из каналов RGB

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

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

В процессе конвертации задействованы две группы параметров:

• Входные данные - три десятичных целочисленных значения от 0 до 255, определяющих яркость красного, зелёного и синего субпикселей экрана.
• Выходные координаты - угол цветового тона на круговой шкале от 0° до 360°, процент насыщенности от 0% до 100% и уровень светлоты от 0% до 100%.

Такое разделение параметров востребовано в веб-разработке и проектировании пользовательских интерфейсов. Зафиксировав базовый угол тона, разработчик может управлять светлотой и чистотой оттенка для создания состояний наведения, теней или тёмных тем оформления без пересчёта всех трёх исходных каналов.

Исходные данные: структура каналов модели RGB

Входными параметрами при расчёте выступают три числовых значения, образующие RGB-триплет - упорядоченный набор координат (R, G, B), где каждая позиция отвечает за интенсивность красного, зелёного и синего каналов. В стандартном цветовом пространстве sRGB итоговый оттенок формируется методом аддитивного синтеза, то есть путём сложения световых потоков. Физической основой этого процесса служит работа матрицы дисплея: каждый пиксель состоит из трёх близко расположенных субпикселей, которые светятся с заданной силой и при смешении на уровне восприятия сливаются в единую цветовую точку.

Формат и разрядность цветовых каналов

В цифровой графике и таблицах стилей интенсивность каждого из трёх каналов кодируется в 8-битном формате. На один цветовой канал отводится ровно 1 байт информации, что даёт 2 в восьмой степени, или 256 возможных градаций яркости. В десятичной системе счисления этот объём данных выражается целочисленным диапазоном от 0 до 255, где нулевая отметка означает полное отключение субпикселя, а 255 соответствует его предельной мощности.

Суммарная глубина цвета для всего RGB-триплета составляет 24 бита (по 8 бит на каждый из трёх каналов). Перемножение доступных уровней яркости всех трёх компонентов (256 × 256 × 256) формирует палитру из 16 777 216 уникальных цветовых комбинаций, доступных для передачи в качестве исходных данных при конвертации.

Базовые комбинации и формирование нейтральных тонов

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

Характерные состояния RGB-триплета определяются соотношением значений внутри тройки чисел:

• Нулевая комбинация (0, 0, 0) означает полное отсутствие свечения всех трёх субпикселей, что формирует абсолютно чёрный цвет.
• Максимальная комбинация (255, 255, 255) задействует предельную интенсивность красного, зелёного и синего излучения одновременно, образуя чистый белый цвет.
• Равенство всех трёх каналов (R = G = B) при любых промежуточных значениях от 1 до 254 исключает доминирование какого-либо цветового тона и создаёт ахроматические градации серого.

При соблюдении условия R = G = B световые потоки уравновешивают друг друга, нейтрализуя хроматическую составляющую. Чем ближе одинаковые значения трёх каналов к нулю, тем темнее получается нейтральный оттенок; по мере их синхронного приближения к 255 серый цвет высветляется.

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

Любое отклонение от равенства R = G = B выводит цвет из ахроматической шкалы: доминирование одного или двух каналов над остальными создаёт хроматический оттенок, угловые и процентные координаты которого вычисляются при дальнейшем переходе к цилиндрической системе.

Параметры результата: координаты модели HSL

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

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

Тон и угловая шкала цветового круга

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

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

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

Вычисленный угол указывает только на спектральное семейство цвета. Сам по себе градус не сообщает, насколько этот оттенок яркий, приглушённый, светлый или тёмный - за эти свойства отвечают две остальные процентные координаты.

Насыщенность и радиус удаления от нейтральной оси

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

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

Светлота и вертикальный баланс яркости

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

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

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

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

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

Переход от целочисленных интенсивностей каналов R, G и B к полярным и линейным координатам H, S и L выполняется через детерминированную последовательность арифметических операций. Вычисления строятся на сопоставлении доминирующего и минимального цветовых компонентов с последующим масштабированием полученных пропорций в градусы и проценты.

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

Исходные восьмибитные значения каждого канала находятся в целочисленном диапазоне от 0 до 255. Для выполнения тригонометрических и долевых расчётов эти величины приводятся к единичному отрезку с плавающей точкой [0, 1] путём деления на максимальное значение разрядной сетки:

R' = R / 255
G' = G / 255
B' = B / 255

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

• Максимальный компонент: Cmax = max(R', G', B')
• Минимальный компонент: Cmin = min(R', G', B')
• Амплитуда (дельта): Δ = Cmax - Cmin

Показатель Δ служит ключевым индикатором хроматичности: если все три исходных канала равны между собой, то Cmax совпадает с Cmin , а значение Δ обращается в ноль. В остальных случаях положительная дельта задаёт базовый масштаб для расчёта насыщенности и смещения углового тона.

Формулы вычисления светлоты и насыщенности

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

L = (Cmax + Cmin) / 2

Геометрически такое усреднение фиксирует вертикальную координату цвета: чем ближе сумма обоих экстремумов к 2 (то есть оба значения стремятся к 1), тем ближе результат к белому полюсу.

Расчёт насыщенности S требует предварительной проверки разности каналов. При Δ = 0 цвет лежит строго на нейтральной оси, поэтому насыщенность приравнивается к нулю без деления. Если же Δ > 0 , показатель вычисляется как отношение дельты к максимально возможной хроме на данном уровне светлоты:

При Δ = 0:  S = 0
При Δ > 0:  S = Δ / (1 - |2 × L - 1|)

Выражение с модулем |2 × L - 1| в знаменателе компенсирует сужение цветового пространства при удалении от центральной плоскости L = 0.5 . В точке L = 0.5 знаменатель равен единице, и насыщенность прямо совпадает с Δ ; по мере приближения L к 0 или 1 знаменатель уменьшается, растягивая локальную шкалу насыщенности до полных 100% даже при небольшой разнице между каналами.

Поскольку из приведённых уравнений параметры L и S выходят в виде десятичных дробей на отрезке [0, 1], на завершающем этапе оба значения умножаются на 100 для перевода в процентную запись.

Кусочно-заданное определение угла тона

Угловая координата H зависит от того, какой именно из трёх нормализованных каналов оказался равен Cmax . Цветовая окружность разбита на шесть секторов по 60°, где узловые точки 0° (красный), 120° (зелёный) и 240° (синий) выступают центрами отсчёта, а отношение двух оставшихся каналов определяет точное смещение внутри сектора.

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

При вычислении по первой хроматической ветви ( Cmax = R' ), если нормализованный синий канал B' превышает зелёный G' , числитель дроби становится отрицательным. В прямом арифметическом расчёте без операции остатка от деления mod 6 это даёт отрицательный угол в пределах от -60° до 0°. Для приведения результата к стандартному положительному диапазону [0°, 360°] к любому полученному отрицательному значению H прибавляется полный оборот окружности ( +360° ).

Влияние арифметики с плавающей точкой и округления

Деление на 255 на этапе нормализации и деление на Δ при поиске тона и насыщенности почти всегда порождают бесконечные периодические или длинные десятичные дроби. Так как итоговые координаты в стандартной спецификации принято представлять целыми числами (градусы от 0 до 360 и проценты от 0 до 100), промежуточные результаты с плавающей точкой проходят процедуру математического округления до ближайшего целого.

Округление вносит погрешность квантования: два близких триплета, отличающихся на единицу в одном из каналов (например, при переходе от 127 к 128), после расчёта и отбрасывания дробной части могут дать абсолютно одинаковые целые координаты H, S и L. По этой же причине при ручной проверке формул промежуточные переменные R' , G' , B' , Δ и L необходимо удерживать с точностью не менее четырёх-пяти знаков после запятой, выполняя округление только над финальными значениями градусов и процентов.

Примеры расчёта цветовых значений из RGB в HSL

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

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

В качестве исходных данных возьмём приглушённый сине-зелёный цвет со значениями каналов R = 45 , G = 140 , B = 115 . Все три компонента не равны друг другу, поэтому задействуются полные ветви расчёта тона и насыщенности:

• Перевод целочисленных каналов в диапазон [0, 1] путём деления на 255 с удержанием пяти знаков после запятой: R' = 45 / 255 ≈ 0.17647 , G' = 140 / 255 ≈ 0.54902 , B' = 115 / 255 ≈ 0.45098 .
• Выявление экстремумов и расчёт размаха: наибольшее значение принадлежит зелёному каналу Cmax = G' = 0.54902 , наименьшее - красному Cmin = R' = 0.17647 . Разница между ними составляет Δ = 0.54902 - 0.17647 = 0.37255 .
• Вычисление светлоты: L = (0.54902 + 0.17647) / 2 = 0.72549 / 2 ≈ 0.36275 . При переводе в процентную шкалу и математическом округлении до целого получается L = 36% .
• Определение насыщенности: поскольку Δ ≠ 0 , подставляем некруглённое значение светлоты в знаменатель формулы: S = 0.37255 / (1 - |2 × 0.36275 - 1|) = 0.37255 / (1 - |-0.27450|) = 0.37255 / 0.72550 ≈ 0.51351 . В процентах после округления это даёт S = 51% .
• Нахождение угла тона: так как максимум приходится на G' , используется ветвь со смещением +2 : H = 60° × (((0.45098 - 0.17647) / 0.37255) + 2) = 60° × ((0.27451 / 0.37255) + 2) = 60° × (0.73684 + 2) = 60° × 2.73684 ≈ 164.21° . После округления до целых градусов фиксируется значение H = 164° .

Итоговый результат преобразования триплета (45, 140, 115) в целых числах записывается как H = 164° , S = 51% , L = 36% .

Пример коррекции отрицательного угла при доминировании красного канала

Отдельного внимания заслуживает ситуация, когда максимальным является красный канал ( Cmax = R' ), но при этом синий компонент превышает зелёный ( G' < B' ). Рассмотрим ягодный оттенок с координатами R = 210 , G = 50 , B = 120 .

После нормализации получаем R' ≈ 0.82353 , G' ≈ 0.19608 , B' ≈ 0.47059 . Экстремумы равны Cmax = 0.82353 и Cmin = 0.19608 , откуда Δ = 0.62745 . Светлота составляет L = (0.82353 + 0.19608) / 2 ≈ 0.50981 (округлённо 51% ), а насыщенность равна S = 0.62745 / (1 - |2 × 0.50981 - 1|) = 0.62745 / 0.98038 ≈ 0.64001 (округлённо 64% ).

При вычислении угла по формуле для максимума в красном канале разность в числителе оказывается отрицательной: H = 60° × ((0.19608 - 0.47059) / 0.62745) = 60° × (-0.27451 / 0.62745) = 60° × (-0.43750) = -26.25° . Для перевода координаты в стандартный положительный сектор к результату прибавляется полный круг: -26.25° + 360° = 333.75° , что после округления даёт H = 334° . Итоговые координаты цвета: 334° , 64% , 51% .

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

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

В строке со средне-серым цветом значения каналов равны 128 : поскольку 8-битная шкала включает 256 уровней (от 0 до 255), у неё нет строгого целочисленного центра. При делении 128 / 255 получается приблизительно 0.50196 (или 50.2% ), что при стандартном округлении до целых процентов закономерно приводится к 50% светлоты.

Использование полученных значений HSL в CSS и вёрстке

После перевода исходного цвета из каналов RGB полученные координаты H, S и L напрямую подставляются в таблицы стилей CSS для оформления элементов интерфейса. Во фронтенд-разработке такая запись заменяет функцию rgb() там, где требуется наглядное управление параметрами цвета прямо в коде без повторного обращения к графическим редакторам или повторного пересчёта каналов.

Синтаксис функции hsl() в стандартах CSS

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

Сравнение форматов записи одного и того же цвета на примере параметров H = 210 , S = 80% , L = 50% приведено в таблице ниже:

Современные браузеры одинаково корректно обрабатывают оба варианта, однако запись через пробелы (CSS Color Level 4) стала стандартом при работе с дизайн-токенами и динамическими вычислениями в стилях.

Дизайн-токены и пользовательские свойства в :root

При использовании записи rgb(38, 128, 217) невозможно изменить яркость или насыщенность элемента средствами чистого CSS, не пересчитывая все три канала заново. Перевод этого же цвета в координаты hsl(210 70% 50%) решает проблему: каждую координату можно сохранить в отдельную CSS-переменную (custom property) внутри глобального селектора :root .

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

• В одну переменную выносится неизменяемая основа цвета - тон и насыщенность, либо каждый из трёх параметров записывается отдельно: --brand-h: 210; , --brand-s: 70%; , --brand-l: 50%; .
• Базовый цвет компонента собирается путём подстановки переменных через функцию var() внутри hsl() .
• Для интерактивных состояний и модификаторов (наведение курсора :hover , нажатие :active , заблокированное состояние :disabled ) тон и насыщенность остаются прежними, а координата светлоты вычисляется динамически с помощью функции calc() .

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

:root {
  --primary-h: 210;
  --primary-s: 70%;
  --primary-l: 50%;
}

.button {
  background-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  color: hsl(0 0% 100%);
}

.button:hover {
  background-color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 8%));
}

.button:active {
  background-color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 15%));
}

В этом коде при наведении курсора на кнопку браузер вычитает 8% из исходной светлоты 50% , делая фон темнее ( 42% ), но сохраняя исходный оттенок 210 и насыщенность 70% . Если впоследствии потребуется сменить основной цвет сайта, достаточно подставить в :root новые значения H, S и L из конвертера - все состояния :hover и :active пересчитаются сами.

Переключение цветовых тем интерфейса

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

:root {
  --surface-h: 220;
  --surface-s: 15%;
  --surface-bg-l: 96%;
  --surface-text-l: 12%;
}

[data-theme="dark"] {
  --surface-bg-l: 14%;
  --surface-text-l: 92%;
}

.card {
  background-color: hsl(var(--surface-h) var(--surface-s) var(--surface-bg-l));
  color: hsl(var(--surface-h) var(--surface-s) var(--surface-text-l));
}

При таком подходе фон карточки и текст сохраняют лёгкий холодный оттенок синего ( H = 220 , S = 15% ) как в светлом, так и в тёмном режиме, а инверсия интерфейса происходит за счёт смены значений всего двух переменных светлоты.

Построение цветовых палитр и тональных шкал на базе HSL

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

Генерация монохроматических тональных шкал

Монохроматическая шкала строится вокруг одного базового цвета и включает набор его градаций от почти белого до глубокого тёмного. В дизайн-системах такие растяжки обычно разбивают на ступени (например, от 50 до 900) и применяют для фонов, разделителей, рамок, бейджей и текста.

Для формирования такой шкалы угол Hue фиксируется на значении, полученном после конвертации основного цвета из RGB, а параметр Lightness изменяется с заданным шагом:

• Светлые оттенки (tints) формируются за счёт увеличения Lightness в диапазоне выше 50% по направлению к 100%. Значения в пределах 85-98% дают мягкие пастельные тона, подходящие для заливки фоновых плашек, строк таблиц и неактивных контейнеров.
• Тёмные тени (shades) получаются путём снижения Lightness ниже 50% по направлению к 0%. Градации в интервале 10-35% сохраняют хроматическую связь с основным цветом бренда и используются для типографики, иконок, акцентных границ или подложек в тёмном интерфейсе.

При сборке шкалы в качестве примера можно взять базовый цвет rgb(37, 99, 235) , который при переводе даёт координаты hsl(221, 83%, 53%) . Удерживая тон на отметке 221° и насыщенность на уровне 83% , за счёт шага светлоты в 15-20% получают светлый фон для информационного блока hsl(221, 83%, 93%) и глубокий тёмно-синий цвет для текста внутри этого блока hsl(221, 83%, 20%) . Чтобы на крайних светлых или тёмных ступенях цвет не выглядел слишком «кислотным» или, наоборот, грязным, дизайнеры иногда дополнительно корректируют параметр Saturation на 5-15%.

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

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

В таблице ниже приведены правила расчёта основных цветовых гармоний на примере исходного оттенка rgb(220, 53, 69) , соответствующего hsl(354, 70%, 54%) :

Особенности восприятия яркости и контрастность по стандарту WCAG

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

Нагляднее всего эта разница проявляется при сравнении чистого жёлтого цвета ( H = 60° , S = 100% , L = 50% ) и чистого синего цвета ( H = 240° , S = 100% , L = 50% ). Математически оба цвета имеют светлоту ровно 50% . Однако визуально жёлтый воспринимается как очень светлый и слепящий, а синий - как тёмный и плотный.

Это свойство напрямую влияет на читаемость текста и соблюдение требований доступности по стандарту WCAG:

• Если разместить белый текст hsl(0, 0%, 100%) на синем фоне со светлотой 50% , контраст будет достаточным для комфортного чтения.
• Если применить правило замены тона в дизайн-системе и подставить под тот же белый текст жёлтый или салатовый фон ( H = 60-100° ) с той же математической светлотой 50% , текст станет нечитаемым и не пройдёт проверку контрастности WCAG.

Поэтому при создании унифицированных палитр для кнопок, бейджей и оповещений (например, зелёного для успеха, жёлтого для предупреждения и красного для ошибки) нельзя механически копировать одно и то же значение Lightness для всех тонов. Для спектральных участков в районе жёлтого, оранжевого и зелёного ( 45-150° ) параметр Lightness под тёмный или светлый текст приходится корректировать вручную с обязательной проверкой итогового коэффициента контрастности.

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

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

Сравнение HSL и шестнадцатеричного формата HEX

Формат HEX со структурой #RRGGBB не является отдельной цветовой моделью. Это компактная шестнадцатеричная форма записи тех же самых трёх каналов RGB, где каждому каналу отводится по два символа в диапазоне от 00 до FF (что соответствует десятичным числам от 0 до 255 ).

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

Разница между цилиндрическими моделями HSL и HSB / HSV

Наибольшее количество ошибок возникает при переносе значений между CSS-кодом и палитрами графических редакторов. В Adobe Photoshop по умолчанию используется модель HSB, а в Figma доступны как HSL, так и HSB. Форматы HSB и HSV математически идентичны, где третья координата обозначает Brightness или Value.

Несмотря на то что обе системы используют один и тот же цветовой круг для угла тона H (от 0° до 360° ), расчёт второй и третьей координат в них устроен по-разному:

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

Из-за разной геометрии третьей оси формулы расчёта насыщенности S в этих моделях также не совпадают. Если скопировать числовые значения H , S и B из окна выбора цвета в Adobe Photoshop и без пересчёта вставить их в CSS-функцию hsl() , на веб-странице отобразится совершенно другой оттенок - как правило, значительно более светлый и выбеленный.

В таблице ниже показано, как различаются числовые координаты одних и тех же эталонных цветов в рассматриваемых форматах:

Как видно на примере светло-голубого цвета rgb(128, 191, 255) , в системе HSL он остаётся стопроцентно насыщенным ( S = 100% ), а его пастельный характер задаётся повышенной светлотой L = 75% . В системе HSB / HSV этот же цвет имеет максимальную яркость V = 100% , но его разбелённость выражается через снижение насыщенности до S = 50% . Поэтому при работе с макетами в графических редакторах перед переносом параметров в таблицы стилей необходимо переключать инспектор свойств именно в режим HSL либо переводить в HSL исходные значения каналов RGB.