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

Что такое HSL

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

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

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

Что такое RGB

RGB — это цветовая модель, основанная на трех компонентах света: красном, зеленом и синем. Каждая компонента — это целое число от 0 до 255. Значение 0 означает, что канал выключен, а 255 означает полную интенсивность.

Когда эти каналы комбинируются, они формируют пиксели на экранах. Например, rgb(255, 255, 255) — это белый, rgb(0, 0, 0) — черный, а rgb(0, 128, 255) — яркий синий, часто используемый для ссылок и кнопок.

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

Формула HSL в RGB

hsl(h, s, l) -> rgb(r, g, b)

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

1) Normalize saturation and lightness:
   s' = s / 100
   l' = l / 100

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

3) Find a helper value:
   x = c * (1 - |((h / 60) mod 2) - 1|)

4) Compute a temporary rgb triple in [0, c]:
   if        0 <= h < 60  then (r1, g1, b1) = (c, x, 0)
   else if  60 <= h < 120 then (r1, g1, b1) = (x, c, 0)
   else if 120 <= h < 180 then (r1, g1, b1) = (0, c, x)
   else if 180 <= h < 240 then (r1, g1, b1) = (0, x, c)
   else if 240 <= h < 300 then (r1, g1, b1) = (x, 0, c)
   else                        (r1, g1, b1) = (c, 0, x)

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

6) Convert to final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

Формула сначала создает цвет с заданным хроматическим значением и оттенком, затем изменяет его так, чтобы окончательная яркость соответствовала целевому значению. В конце нормализованные каналы масштабируются в диапазон от 0 до 255, используемый в RGB.

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

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

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

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

Вот более подробное описание для hsl(210, 39%, 17%).

• Шаг 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 — Добавьте смещение и масштабируйте обратно в RGB:

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

  rgb(26, 43, 60)

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

Где полезны HSL и RGB

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

Типичные применения HSL

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

Типичные применения RGB

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

Резюме

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

Практические советы по использованию HSL вместе с RGB

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

Создавайте палитры в HSL, храните значения в RGB или HEX

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

Обрабатывайте прозрачность отдельно

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

Соблюдайте последовательность форматов

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

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

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

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

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

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

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

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

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

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

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

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

• Как мне обрабатывать прозрачность с HSL и RGB

  Используйте hsla() или rgba(), когда вам нужен альфа-канал. Оба обозначения расширяют базовый цветовой формат четвертым параметром, который контролирует непрозрачность.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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