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

Что такое RGB

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

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

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

Что такое HSL

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

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

Низкое значение насыщенности приближает цвет к нейтральному серому. Светлота контролирует, насколько темным или ярким является цвет: 0% дает черный, 50% — яркую версию оттенка, а 100% — белый. Из-за этого HSL часто кажется более интуитивным для создания палитр и вариаций состояний в пользовательских интерфейсах.

Формула RGB в HSL

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

1) Нормализуйте каналы к [0, 1]:
   r' = r / 255
   g' = g / 255
   b' = b / 255

2) Найдите max и min:
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

3) Вычислите яркость:
   l = (max + min) / 2

4) Вычислите насыщенность:
   если delta == 0 то
     s = 0
   иначе
     s = delta / (1 - |2 * l - 1|)

5) Вычислите оттенок:
   если 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)

6) Преобразуйте в итоговые единицы:
   H = h             // градусы в [0, 360)
   S = s * 100       // проценты
   L = l * 100       // проценты

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

Пример для rgb(79, 163, 194)
1) Нормализуйте r, g, b к диапазону [0, 1]
2) Вычислите max, min, delta
3) Вычислите h, s, l, используя правила выше
4) Округлённый результат:
   hsl(196, 49%, 54%)

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

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

rgb(26, 43, 60)
[26, 43, 60] -> hsl(h, s, l)

Давайте рассмотрим этапы более подробно, используя rgb(26, 43, 60) в качестве примера.

• Шаг 1 — Нормализуйте каналы:

  r' = 26 / 255
  g' = 43 / 255
  b' = 60 / 255

• Шаг 2 — Найдите максимум, минимум и светлоту:

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

  max = max(r', g', b')
  min = min(r', g', b')
  l = (max + min) / 2

• Шаг 3 — Вычислите насыщенность и оттенок:

  Если все три канала почти одинаковы, цвет близок к серому, и насыщенность низкая. Когда один канал явно доминирует, насыщенность увеличивается, и оттенок указывает на сегмент цветного круга, где этот канал наиболее силен.

  hsl(210, 39%, 17%)

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

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

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

Когда RGB удобен

• Работа на низком уровне в графике и коде: многие API и форматы изображений работают напрямую с RGB значениями.
• Эффекты на основе каналов: вы можете настроить один канал в JavaScript или CSS при создании фильтров, градиентов или переходов.
• Совместимость с существующим кодом: наследуемые стили и библиотеки часто ожидают значения RGB или HEX, поэтому RGB является естественной отправной точкой.

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

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

Резюме

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

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

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

Сохраняйте оттенок стабильным для брендовых цветов

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

Перемещение между HSL и другими форматами CSS

• Конвертируйте один раз для токенов: вы можете экспериментировать с цветами в HSL, а затем зафиксировать окончательные значения как HSL, RGB или HEX в ваших дизайнерских токенах.
• Обрабатывайте альфа отдельно: для прозрачности вы можете использовать функции hsla() или rgba(), при этом продолжая думать о базовом цвете в HSL.

Избегайте распространенных ошибок

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

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

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

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

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

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

• Почему я должен конвертировать RGB в HSL

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

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

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

• Изменяет ли конвертация в HSL цвет

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

• Чем HSL отличается от HSV

  Обе модели имеют оттенок и насыщенность, но третье значение определяется по-разному. HSL использует светлоту, которая сравнивает цвет с черным и белым, в то время как HSV использует значение, которое сравнивает цвет только с черным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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