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

Что такое HSLA

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

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

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

Что такое RGBA

RGBA — это модель RGB плюс альфа-канал. Она записывается как rgba(r, g, b, a), где r, g и b — целые числа от 0 до 255, а a — дробь между 0 и 1.

Три цветовых канала определяют, сколько красного, зеленого и синего света присутствует, в то время как альфа управляет непрозрачностью. Этот формат широко используется в CSS, HTML canvas и многих графических API.

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

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

hsla(h, s, l, a) -> rgba(r, g, b, a)

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 final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

8) Compose RGBA:
   rgba(r, g, b, a_c)

Helper:
   clamp(x, min, max) = min if x < min, max if x > max, else x

Значение альфа копируется напрямую из входных данных HSLA, поскольку оба формата используют один и тот же диапазон от 0 до 1 для прозрачности. Вся работа происходит на этапе преобразования HSL в RGB, который преобразует оттенок, насыщенность и светлоту в значения каналов.

Пример для hsla(196, 49%, 54%, 0.8)
1) Нормализуйте s и l до [0, 1] и вычислите c и x
2) Найдите временную тройку на основе сектора оттенка
3) Добавьте m к каждому каналу и масштабируйте до 0-255
4) Округленный RGB:
   rgb(79, 163, 194)
5) Итоговый RGBA:
   rgba(79, 163, 194, 0.8)

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

На самом деле преобразование HSLA в RGBA — это просто знакомый алгоритм HSL в RGB плюс проход через компонент альфа. Вы изменяете способ описания цвета, а не то, как он выглядит.

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

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

• Шаг 1 - Нормализуйте насыщенность и светлоту

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

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * s'

• Шаг 2 - Найдите сектор оттенка и временную тройку

  Разделите оттенок на 60, чтобы найти сегмент на цветовом круге, и выберите одну из временных троек, таких как (c, x, 0) или (0, x, c). Это настраивает, как красный, зеленый и синий соотносятся друг с другом перед окончательным сдвигом.

  h = 210
  h / 60 is between 3 and 4
  temporary triple uses (0, x, c)

• Шаг 3 - Добавьте смещение и скопируйте альфа

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

  rgba(26, 43, 60, 0.5)

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

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

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

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

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

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

• Стили на уровне компонентов: rgba() значения легко читать непосредственно в таблицах стилей и CSS-in-JS.
• Эффекты во время выполнения: Числовые каналы легко настраивать в JavaScript при изменении цветов или ограничении альфа.
• Интерфейс с графическими API: Многие функции рисования ожидают входные данные RGBA.

Резюме

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

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

Вы можете безопасно комбинировать HSLA и RGBA в одном проекте, если четко определите роль каждого формата в вашем рабочем процессе.

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

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

Комбинируйте с другими цветовыми нотациями

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

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

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

С этими соглашениями на месте HSLA и RGBA дополняют друг друга, а не конкурируют, и ваша цветовая система остается более удобной для эволюции со временем.

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

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

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

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

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

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

• Изменяет ли преобразование цвет

  Нет. Правильно преобразованное значение RGBA представляет тот же визуальный цвет и прозрачность, что и оригинальное значение HSLA.

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

  Оттенок измеряется в градусах от 0 до 360. Насыщенность и светлота — это проценты от 0 до 100. Альфа — это число между 0 и 1.

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

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

• Должен ли я стандартизироваться на HSLA или RGBA

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

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

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

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

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

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

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

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

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

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

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

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

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

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