Конвертер HSLA в HEXA

Что такое HSLA

HSLA - это модель HSL с альфа-каналом. Она записывается как hsla(h, s, l, a), где h - это оттенок в градусах, s - насыщенность, l - светлота, а a - непрозрачность.

Оттенок варьируется от 0 до 360 градусов. Насыщенность и светлота выражаются в процентах от 0% до 100%. Альфа - это дробь от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

HSLA удобно использовать для проектирования палитр и тем, потому что вы можете отдельно настраивать оттенок, насыщенность, светлоту и альфа-канал так, как это обычно делают дизайнеры.

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

HEXA код - это восьмизначный HEX цвет, который включает прозрачность. Формат - #RRGGBBAA, где каждая пара символов представляет красный, зеленый, синий или альфа.

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

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

Формула преобразования HSLA в HEXA

hsla(h, s, l, a) -> #RRGGBBAA

Given:
  h in [0, 360)
  s in [0, 100]
  l in [0, 100]
  a in [0, 1]

1) Clamp inputs:
   h_c = h
   s_c = clamp(s, 0, 100)
   l_c = clamp(l, 0, 100)
   a_c = clamp(a, 0, 1)

2) Normalize saturation and lightness:
   s' = s_c / 100
   l' = l_c / 100

3) Compute chroma:
   c = (1 - |2 * l' - 1|) * s'

4) Helper value:
   x = c * (1 - |((h_c / 60) mod 2) - 1|)

5) Temporary rgb triple in [0, c]:
   if      0 <= h_c < 60   then (r1, g1, b1) = (c, x, 0)
   else if 60 <= h_c < 120 then (r1, g1, b1) = (x, c, 0)
   else if 120 <= h_c < 180 then (r1, g1, b1) = (0, c, x)
   else if 180 <= h_c < 240 then (r1, g1, b1) = (0, x, c)
   else if 240 <= h_c < 300 then (r1, g1, b1) = (x, 0, c)
   else                      (r1, g1, b1) = (c, 0, x)

6) Add the lightness offset:
   m  = l' - c / 2
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

7) Scale to integer RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

8) Convert channels to HEX:
   RR = dec_to_hex(clamp(r, 0, 255))
   GG = dec_to_hex(clamp(g, 0, 255))
   BB = dec_to_hex(clamp(b, 0, 255))

9) Convert alpha to HEX:
   A_dec = round(a_c * 255)
   AA    = dec_to_hex(clamp(A_dec, 0, 255))

10) Join parts:
   #RRGGBBAA

Helpers:
   dec_to_hex(x) = to_hex(x).padStart(2, "0")
   clamp(x, min, max) = min if x < min, max if x > max, else x

Другими словами, конвертер сначала преобразует HSLA в цвет RGBA, а затем переписывает каждый канал как двузначный HEX фрагмент. Доля альфа масштабируется в диапазон от 0 до 255 перед тем, как быть преобразованной в конечную пару AA.

Пример для hsla(196, 49%, 54%, 0.8)
1) Преобразование HSLA в RGB:
   hsl(196, 49%, 54%) -> rgb(79, 163, 194) (округлено)
2) Преобразование RGB каналов в HEX:
   79  -> 4F
   163 -> A3
   194 -> C2
3) Преобразование альфа:
   A_dec = round(0.8 * 255) = 204
   204   -> CC
4) Итоговый HEXA:
   #4FA3C2CC

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

Преобразование HSLA в HEXA всегда проходит через RGB представление того же цвета. Сначала вы выражаете оттенок, насыщенность и светлоту в числовых каналах, затем записываете эти каналы и альфа в шестнадцатеричной форме.

hsla(210, 39%, 17%, 0.5)
-> hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBBAA

Вот упрощенный набросок для hsla(210, 39%, 17%, 0.5).

• Шаг 1 - Получите RGB из HSLA

  На мгновение игнорируйте альфа и выполните алгоритм HSL в RGB: вычислите хроматичность, найдите сектор оттенка, постройте временную тройку и добавьте смещение, чтобы соответствовать целевой светлоте.

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * s'
  ... -> rgb(26, 43, 60) (rounded)

• Шаг 2 - Преобразуйте RGB каналы в HEX

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

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

• Шаг 3 - Кодируйте альфа и объедините все

  Умножьте долю альфа на 255, преобразуйте результат в HEX и объедините все четыре пары с ведущим #.

  #1A2B3C80

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

Выбор между HSLA и HEXA

HSLA и HEXA оба кодируют цвет и прозрачность, но служат разным целям. HSLA описательный и удобен для ползунков, в то время как HEXA компактен и удобен для токенов.

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

• Исследование палитры и тем: оттенок, насыщенность и светлота позволяют вам структурированно перемещаться по цветовому пространству.
• Документация по дизайну: Значения HSLA четко показывают, как связанные цвета различаются по насыщенности или светлоте.
• Передача намерений: разговор о "увеличении светлоты" или "уменьшении насыщенности" напрямую соответствует параметрам HSLA.

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

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

Резюме

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

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

Обычно работают с HSLA в контексте дизайна и HEXA в реализации. Несколько простых правил делают это смешение легким для управления.

Выберите основной формат токенов

• Используйте один формат в качестве источника истины: многие команды выбирают HEXA для токенов или HSLA для палитр, а затем автоматически генерируют другой формат.
• Избегайте ручного дублирования: храните преобразования в скриптах или утилитах, чтобы не обновлять значения в нескольких местах.

Сочетайте с другими моделями

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

Сохраняйте систему предсказуемой

• Документируйте роли форматов: например, HSLA для спецификаций палитры, HEXA для отправленных токенов, RGBA в низкоуровневом коде.
• Используйте конвертеры вместо произвольных правок: это сохраняет цвета последовательными во всех форматах с течением времени.

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

Таблица преобразования HSLA в HEXA

Следующая таблица показывает несколько общих цветов HSLA с прозрачностью и их HEXA аналогами. Эти значения округлены для удобства чтения; для точной работы используйте конвертер в верхней части страницы.

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

Часто задаваемые вопросы: HSLA в HEXA

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

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

• Изменяет ли преобразование фактический цвет

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

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

  Оттенок от 0 до 360 градусов, насыщенность и светлота от 0 до 100 процентов, а альфа от 0 до 1 в виде дроби.

• Могу ли я преобразовать HEXA обратно в HSLA

  Да. Вы можете декодировать HEXA в RGBA, преобразовать RGB в HSL и повторно использовать значение альфа, чтобы снова получить HSLA.

• Должны ли токены храниться как HSLA или HEXA

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

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

• Конвертер HEXA в RGBA

  Мгновенный расчет hexa в rgba

• Конвертер HEXA в HSLA

  Мгновенный расчет hexa в hsla

• Конвертер HEXA в HSVA

  Мгновенный расчет hexa в hsva

• Конвертер RGBA в HSLA

  Мгновенный расчет rgba в hsla

• Конвертер HSLA в RGBA

  Мгновенный расчет hsla в rgba

• Конвертер HSLA в HSVA

  Мгновенный расчет hsla в hsva