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

Что такое HSV

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

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

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

Что такое RGB

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

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

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

Формула HSV в RGB

hsv(h, s, v) -> rgb(r, g, b)

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

1) Normalize saturation and value:
   s' = s / 100
   v' = v / 100

2) Compute chroma:
   c = v' * 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  = v' - c
   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)

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

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

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

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

hsv(210, 57%, 24%)
-> rgb(r, g, b)

Вот схема процесса для hsv(210, 57%, 24%).

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

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

  s' = 57 / 100
  v' = 24 / 100
  c = v' * 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)

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

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

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

Типичные применения для HSV

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

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

• Низкоуровневый рендеринг: многие графические API и форматы изображений используют значения RGB напрямую.
• CSS и веб-разметки: функции, такие как rgb() и rgba(), широко поддерживаются и легко интегрируются в таблицы стилей.
• Совместимость с другими форматами: Преобразования HEX и HSL обычно проходят через RGB под капотом.

Резюме

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

Практические советы по работе с HSV и RGB

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

Используйте HSV для редактирования, RGB для хранения

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

Сочетайте с другими цветовыми форматами

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

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

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

С четким разделением между HSV для редактирования и RGB для реализации вы получаете как интуитивные элементы управления, так и предсказуемый рендеринг.

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

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

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

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

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

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

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

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

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

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

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

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

• Является ли HSV лучше, чем RGB во всех случаях

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

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

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

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

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

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

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

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

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

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

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

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

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

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