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

Что такое HSL

HSL означает Оттенок, Насыщенность и Яркость. Он описывает цвет по его основной семье на цветовом круге, насколько интенсивен этот цвет и является ли он более темным или светлым.

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

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

Что такое HEX цветовой код

Значение HEX — это компактный способ записи RGB цвета с использованием шестнадцатеричной системы счисления. Стандартная форма — это #RRGGBB, где каждая пара символов представляет красный, зеленый и синий каналы.

Каждая пара варьируется от 00 до FF. 00 означает, что канал почти не добавляет света, в то время как FF означает, что канал работает на полной интенсивности. Например, #000000 — это черный, #FFFFFF — это белый, а #FFA500 — это яркий оранжевый.

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

Формула HSL в HEX

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

Дано:
  h в [0, 360)
  s в [0, 100]
  l в [0, 100]

1) Преобразуйте HSL в RGB:
   a) Нормализуйте насыщенность и яркость:
      s' = s / 100
      l' = l / 100
   b) Вычислите хрома:
      c = (1 - |2 * l' - 1|) * s'
   c) Найдите вспомогательное значение:
      x = c * (1 - |((h / 60) mod 2) - 1|)
   d) Выберите временную тройку:
      если    0 <= h < 60   то (r1, g1, b1) = (c, x, 0)
      иначе если 60 <= h < 120 то (r1, g1, b1) = (x, c, 0)
      иначе если 120 <= h < 180 то (r1, g1, b1) = (0, c, x)
      иначе если 180 <= h < 240 то (r1, g1, b1) = (0, x, c)
      иначе если 240 <= h < 300 то (r1, g1, b1) = (x, 0, c)
      иначе                        (r1, g1, b1) = (c, 0, x)
   e) Добавьте смещение и масштабируйте:
      m  = l' - c / 2
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m
      r  = round(r' * 255)
      g  = round(g' * 255)
      b  = round(b' * 255)

2) Преобразуйте RGB в HEX:
   RR = dec_to_hex(r)
   GG = dec_to_hex(g)
   BB = dec_to_hex(b)

   dec_to_hex(x) = to_hex(x).padStart(2, "0")

3) Объедините части:
   #RRGGBB

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

Пример для hsl(196, 47%, 54%)
1) Преобразуйте HSL в RGB, используя алгоритм выше
2) Предположим, что округлённый результат RGB:
   rgb(79, 163, 194)
3) Преобразуйте каждый канал в HEX:
   79  -> 4F
   163 -> A3
   194 -> C2
4) Итоговый HEX:
   #4FA3C2

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

Хотя формула HSL в HEX написана в несколько этапов, она всегда следует одному и тому же шаблону. Вы определяете желаемый оттенок, насыщенность и яркость, преобразуете их в RGB, а затем преобразуете RGB в HEX.

hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBB

Вот более подробный взгляд на шаги для hsl(210, 39%, 17%).

• Шаг 1 — Вычислите RGB каналы из HSL

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

  h = 210, s = 39, l = 17
  rgb(26, 43, 60) после округления

• Шаг 2 — Переведите RGB каналы в HEX пары

  Преобразуйте каждый канал в шестнадцатеричный формат и добавьте ведущий ноль, если он состоит только из одной цифры. Это гарантирует, что окончательный HEX код всегда будет содержать ровно шесть символов после символа #.

  26 -> 1A
  43 -> 2B
  60 -> 3C

• Шаг 3 — Объедините части в окончательный HEX код

  Сконкатенируйте три пары и добавьте # в начале. Результат — это HEX версия оригинального HSL цвета.

  #1A2B3C

Та же рабочая схема применима к любому допустимому HSL вводу, поэтому удобно полагаться на конвертер или утилиту, а не повторять математику вручную.

Выбор между HSL и HEX

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

Когда HSL более практичен

• Проектирование и итерация палитр: сохраняйте оттенок постоянным и регулируйте насыщенность и яркость, чтобы создавать наборы связанных тонов.
• Работа над темами: HSL помогает вам координировать светлые и темные варианты одних и тех же базовых цветов, изменяя диапазоны яркости.
• Объяснение дизайнерских решений: значения, такие как hsl(210, 40%, 20%), легче обсуждать на дизайнерских обзорах, чем сырые HEX строки.

Когда HEX лучше подходит

• Стабильные дизайнерские токены: HEX строки короткие и хорошо работают как окончательная форма для брендовых цветов и нейтральных шкал в руководстве по стилю.
• Копирование между инструментами: многие редакторы по умолчанию отображают и экспортируют цвета в HEX, что облегчает их вставку в CSS или конфигурационные файлы.
• Сканирование больших списков цветов: HEX коды легко выстраиваются в таблицах или JSON файлах, когда вы поддерживаете десятки токенов.

Резюме

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

Лучшие практики использования HSL и HEX вместе

Реальные проекты редко придерживаются одного цветового формата. Небольшое количество планирования может помочь вам решить, где HSL, RGB и HEX каждый имеет наибольший смысл.

Определите источник правды

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

Комбинируйте HSL с другими обозначениями по мере необходимости

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

Остерегайтесь распространенных подводных камней

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

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

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

Справочная таблица ниже показывает выбор известных цветов как в HSL, так и в HEX формате. Значения округлены, чтобы их было легко читать, пока вы экспериментируете с темами и макетами.

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

Часто задаваемые вопросы: HSL в HEX

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

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

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

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

• Меняет ли преобразование в HEX цвет

  Нет. HSL, RGB и HEX все относятся к одной и той же цветовой модели. Пока математика верна, HSL цвет и его HEX аналог будут выглядеть идентично на экране.

• Как мне представить прозрачность

  HEX поддерживает расширенную форму #RRGGBBAA, где последние две цифры описывают альфа-канал. Вы также можете использовать hsla() или rgba() с отдельным аргументом альфа.

• Могу ли я смешивать HSL, HEX и RGB в одном проекте

  Да. Распространенный шаблон — определять палитры в HSL, хранить окончательные значения как HEX или RGB токены и автоматически преобразовывать между форматами в инструментах или утилитах.

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

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

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

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

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

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

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

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

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

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

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

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

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