Конвертер HEX в HSL

Что такое HEX-код цвета?

HEX-цвет — это шестисимвольное значение в шестнадцатеричной системе, записанное в формате #RRGGBB. Каждая пара символов соответствует одному цветовому каналу: красному, зелёному или синему.

Значения пар находятся в диапазоне от 00 до FF. Значение ближе к 00 означает минимальный вклад канала, ближе к FF — максимальный. Например, #000000 не содержит ни красного, ни зелёного, ни синего, а #FFFFFF задаёт максимальные значения для всех каналов.

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

Что такое HSL?

HSL — это модель цвета, основанная на трёх параметрах: Hue (оттенок), Saturation (насыщенность) и Lightness (светлота). Цвет описывается через положение на цветовом круге, интенсивность и яркость.

Оттенок задаётся углом в градусах от 0 до 360 и определяет базовую группу цвета. Насыщенность указывается в процентах от 0% до 100% и показывает, насколько цвет насыщенный или приглушённый.

Светлота также задаётся в процентах и определяет близость цвета к чёрному или белому. При 0% цвет чёрный, при 100% — белый, при 50% — средний по яркости. Пример: hsl(200, 80%, 50%).

Формула преобразования HEX в HSL

#RRGGBB -> hsl(h, s, l)

1) Преобразуйте каждую пару в десятичное число:
   RR, GG, BB -> r, g, b в [0, 255]
2) Нормализуйте к диапазону [0, 1]:
   r' = r / 255, g' = g / 255, b' = b / 255
3) Найдите максимум и минимум r', g', b':
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min
4) Вычислите светлоту:
   l = (max + min) / 2
5) Вычислите насыщенность:
   если delta == 0, то s = 0
   иначе s = delta / (1 - |2 * l - 1|)
6) Вычислите оттенок:
   если delta == 0, то h = 0
   иначе если max == r', то h = 60 * (((g' - b') / delta) mod 6)
   иначе если max == g', то h = 60 * (((b' - r') / delta) + 2)
   иначе если max == b', то h = 60 * (((r' - g') / delta) + 4)
7) Преобразуйте h в [0, 360), s и l в проценты:
   H = h
   S = s * 100
   L = l * 100

Используется стандартный алгоритм преобразования RGB в HSL. Сначала HEX-цвет декодируется в RGB-компоненты, после чего вычисляются значения H, S и L.

Пример для #4FA3C2

1) HEX в RGB:
   #4FA3C2 -> (79, 163, 194)
2) Нормализация:
   r' = 79 / 255
   g' = 163 / 255
   b' = 194 / 255
3) Вычислите max, min, delta, затем h, s, l
4) Итоговый HSL (округлённый):
   hsl(196, 47%, 54%)

Как работает преобразование HEX в HSL по шагам

Преобразование из HEX в HSL всегда проходит через модель RGB. Сначала HEX-значение разбивается на пары, затем они преобразуются в RGB и далее в HSL.

#1A2B3C
разделить на [1A, 2B, 3C]
-> rgb(26, 43, 60)
-> hsl(h, s, l)

Ниже показан этот процесс на примере цвета #1A2B3C.

• Шаг 1 — Разделение HEX-значения

  [1A] [2B] [3C]

• Шаг 2 — Преобразование каждой пары в десятичное число

  Каждая пара символов представляет собой шестнадцатеричное число. Оно переводится в десятичное значение в диапазоне от 0 до 255.

  1A = (1 * 16) + 10 = 26
  2B = (2 * 16) + 11 = 43
  3C = (3 * 16) + 12 = 60

• Шаг 3 — Преобразование RGB в HSL

  Значения RGB нормализуются до диапазона от 0 до 1, вычисляются минимальное и максимальное значения каналов, после чего по формуле получаются H, S и L.

  hsl(210, 39%, 17%)

Этот алгоритм применяется ко всем корректным HEX-цветам.

Когда использовать HEX и когда HSL

Оба формата поддерживаются в CSS. Выбор зависит от задачи и способа работы с цветами.

Когда подходит HEX

• Короткая запись: HEX — компактный формат, широко используемый в дизайн-инструментах и документации.
• Статичные палитры: Подходит для брендовых цветов и дизайн-токенов, которые редко изменяются.
• Простое копирование: Одна строка, например #4FA3C2, легко передаётся между инструментами.

Когда лучше использовать HSL

• Работа с темами: Можно изменять светлоту, не затрагивая оттенок.
• Контроль насыщенности: Интенсивность цвета регулируется одним параметром.
• Понятные изменения: Проще видеть, какие именно параметры были изменены.

Итог

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

Рекомендации по использованию HSL в CSS

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

Использование HSL для темизируемых палитр

• Один оттенок, разная светлота: Оттенок и насыщенность остаются фиксированными, светлота меняется для состояний hover, active и disabled.
• Согласование светлой и тёмной тем: Используется один оттенок с разными диапазонами светлоты для разных фонов.

Комбинирование HSL с другими форматами

• HSL с альфа-каналом: Для прозрачности используется hsla() или современный синтаксис hsl(200 80% 50% / 0.5).
• Совместное использование с HEX и RGB: Брендовые цвета могут храниться в HEX и преобразовываться в HSL при необходимости вычислений.

Распространённые ошибки

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

Эти рекомендации позволяют поддерживать предсказуемую и управляемую цветовую систему.

Таблица преобразования HEX в HSL

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

Значения округлены для удобства. Для точных расчётов используйте конвертер на этой странице.

FAQ: HEX → HSL

• Зачем преобразовывать HEX в HSL?

  HEX подходит для хранения фиксированных цветов. HSL удобнее для изменения яркости, насыщенности и работы с темами.

• Какие диапазоны используются для H, S и L?

  Оттенок измеряется в градусах от 0 до 360. Насыщенность и светлота задаются в процентах от 0% до 100%. В CSS часто используется форма hsl(h, s%, l%).

• Поддерживает ли HSL прозрачность?

  Да. Используется hsla(h, s%, l%, a) или синтаксис hsl(h s% l% / a), где альфа-значение находится в диапазоне от 0 до 1.

• Точнее ли HSL, чем HEX?

  Оба формата описывают одни и те же цвета. Различие заключается только в форме представления.

• Можно ли использовать HEX, RGB и HSL в одном проекте?

  Да. Главное — соблюдать единый подход внутри дизайн-системы и использовать конвертацию вместо ручных правок.

Связанные конвертеры:

• Конвертер HEX в RGB

  Мгновенный расчет hex в rgb

• Конвертер HEX в HSV

  Мгновенный расчет hex в hsv

• Конвертер RGB в HEX

  Мгновенный расчет rgb в hex

• Конвертер RGB в HSL

  Мгновенный расчет rgb в hsl

• Конвертер RGB в HSV

  Мгновенный расчет rgb в hsv

• Конвертер HSL в RGB

  Мгновенный расчет hsl в rgb