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

Что такое HSV

HSV означает Оттенок, Насыщенность и Значение. Он описывает цвета, используя угол оттенка на цветовом круге, насколько интенсивен этот оттенок и насколько ярким кажется результат по сравнению с черным.

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

Из-за этой структуры HSV распространен в программном обеспечении для рисования и цветовых пипетках. Он позволяет пользователям думать в терминах "насколько сильный" и "насколько яркий" цвет, не касаясь отдельных каналов RGB.

Что такое HSL

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

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

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

Формула преобразования HSV в HSL

hsv(h, s_v, v) -> hsl(h, s_l, l)

Дано:
  h   в [0, 360)
  s_v в [0, 100]  // HSV насыщенность
  v   в [0, 100]  // значение

1) Нормализуйте значения HSV:
   s_v' = s_v / 100
   v'   = v / 100

2) Преобразуйте HSV в RGB (промежуточный шаг):
   a) Вычислите хрома:
      c = v' * s_v'
   b) Вспомогательное значение:
      x = c * (1 - |((h / 60) mod 2) - 1|)
   c) Временная тройка на основе сектора оттенка:
      если    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)
   d) Добавьте смещение:
      m  = v' - c
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m

3) Преобразуйте RGB в HSL:
   a) Найдите max и min:
      max = max(r', g', b')
      min = min(r', g', b')
      delta = max - min
   b) Яркость:
      l = (max + min) / 2
   c) HSL насыщенность:
      если delta == 0 то s_l' = 0
      иначе s_l' = delta / (1 - |2 * l - 1|)

4) Преобразуйте в итоговые единицы:
   H   = h
   S_l = s_l' * 100
   L   = l * 100

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

Пример для hsv(196, 59%, 76%)
1) Нормализуйте s_v и v к диапазону [0, 1]
2) Вычислите c, x, m и получите r', g', b'
3) Найдите max, min и delta для RGB
4) Вычислите l и s_l, используя правила HSL
5) Округлённый результат (одно из возможных приближений):
   hsl(196, 49%, 54%)

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

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

hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> hsl(h, s, l)

Вот упрощенная инструкция для hsv(210, 57%, 24%).

• Шаг 1 - Интерпретировать HSV как RGB

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

  s_v' = 0.57
  v'   = 0.24
  rgb(26, 43, 60) после округления

• Шаг 2 - Получите параметры HSL из RGB

  Используйте максимальные и минимальные значения каналов для вычисления светлоты и измерения, насколько цвет далек от серого. Это распределение становится новой насыщенностью в пространстве HSL.

  max = max(r', g', b')
  min = min(r', g', b')
  l = (max + min) / 2
  if delta == 0 then s_l = 0 else s_l = delta / (1 - |2 * l - 1|)

• Шаг 3 - Выразите результат как hsl(h, s, l)

  Сохраните оригинальный угол оттенка, но замените насыщенность и значение HSV на новую насыщенность и светлоту. Цвет на экране остается прежним; меняется только нотация.

  hsl(210, 39%, 17%)

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

Когда использовать HSV и когда использовать HSL

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

Где HSV полезен

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

Где HSL подходит лучше

• Создание структурированных палитр: светлота предоставляет предсказуемый способ создания оттенков и тонов.
• Написание спецификаций дизайна: значения HSL, такие как hsl(210, 40%, 20%), легко читаются в документации и коде.
• Координация светлых и темных тем: регулировка диапазонов светлоты при сохранении стабильного оттенка помогает поддерживать согласованное восприятие.

Резюме

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

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

Обычно в одном проекте используются как HSV, так и HSL. Небольшое количество планирования может сделать так, чтобы эти модели работали вместе, а не конкурировали.

Отдельное редактирование и хранение

• Экспериментируйте в HSV: настраивайте оттенок, насыщенность и значение, пока цвет не будет выглядеть правильно в пипетке.
• Храните токены в HSL: сохраняйте окончательные значения в HSL, где их легче читать, настраивать и документировать.

Комбинируйте с другими форматами

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

Сохраняйте форматы последовательными

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

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

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

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

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

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

• Почему я должен преобразовывать HSV в HSL

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

• Определяют ли HSV и HSL разные цвета

  Нет. Это просто разные координатные системы для одного и того же цветового пространства на основе RGB. Любой допустимый цвет HSV имеет соответствующее представление HSL и наоборот.

• Остается ли оттенок прежним при преобразовании

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

• Могу ли я вернуться из HSL в HSV, не теряя данные

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

• Является ли одна модель лучше другой во всех случаях

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

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

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

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

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

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

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

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

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

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

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

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

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

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