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

Что такое HSL

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

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

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

Что такое HSV

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

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

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

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

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

Дано:
  h в [0, 360)
  s_l в [0, 100]  // HSL насыщенность
  l   в [0, 100]  // яркость

1) Нормализуйте значения HSL:
   s_l' = s_l / 100
   l'   = l / 100

2) Преобразуйте в RGB (промежуточное представление):
   a) Вычислите хрома:
      c = (1 - |2 * l' - 1|) * s_l'
   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  = l' - c / 2
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m

3) Преобразуйте RGB в HSV:
   a) Найдите max и min:
      max = max(r', g', b')
      min = min(r', g', b')
      delta = max - min
   b) Значение:
      v = max
   c) HSV насыщенность:
      если max == 0 то s_v' = 0
      иначе s_v' = delta / max

4) Преобразуйте в итоговые единицы:
   H = h
   S_v = s_v' * 100
   V   = v * 100

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

Пример для hsl(196, 47%, 54%)
1) Нормализуйте и вычислите хрома для HSL
2) Получите промежуточный RGB цвет
3) Вычислите max, min, delta и v для HSV
4) Итоговый HSV (округлённый) может выглядеть так:
   hsv(196, 59%, 76%)

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

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

hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> hsv(h, s, v)

Вот схема процесса для hsl(210, 39%, 17%).

• Шаг 1 — Интерпретируйте HSL как цвет RGB

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

  h = 210, s_l = 39, l = 17
  rgb(26, 43, 60) после округления

• Шаг 2 — Выведите HSV из RGB

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

  max = max(r', g', b')
  min = min(r', g', b')
  delta = max - min
  v = max
  if max == 0 then s_v = 0 else s_v = delta / max

• Шаг 3 — Выразите результат как hsv(h, s, v)

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

  hsv(210, 57%, 24%)

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

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

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

Где HSL преуспевает

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

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

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

Резюме

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

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

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

Определите четкий рабочий процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Могу ли я вернуться из HSV в HSL без потерь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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