Введите цвет в формате HSV и мгновенно получите точное значение RGB, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод HSV в RGB
Палитры в графических редакторах и игровых движках часто показывают бегунки оттенка, насыщенности и яркости, потому что они соответствуют тому, как люди подбирают цвет. Но на выходе всё равно нужен RGB: CSS, файлы изображений, шейдеры и экраны работают с красным, зелёным и синим. Переводите HSV в RGB, когда копируете значение из палитры в код, когда строите градиент, меняя яркость от 0 до 100, или когда проверяете процедурную палитру. Оттенок вводите в градусах, насыщенность и яркость в процентах.
Где это пригодится
- Скопировать показания HSB из палитры в стиле Photoshop в CSS как значение rgb().
- Проверить результат Color.HSVToRGB в Unity или colorsys.hsv_to_rgb в Python на известном входе.
- Получить выборку оттенков при полной насыщенности и яркости для радужного градиента в легенде диаграммы.
Как перевести HSV в RGB
HSV (другое название: HSB) вычисляет тон так же, как HSL, но две другие оси определяет иначе: яркость равна наибольшему каналу, V = max, а насыщенность S = Δ / max (для чёрного 0).
Поэтому чистый насыщенный цвет в HSV имеет V = 100%, а в HSL имеет L = 50%. Обратный перевод восстанавливает каналы через цветность C = V × S.
Пример расчёта
- C = V × S = 0.9 × 0.4 = 0.36
- X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.36 × (1 − |(35 ÷ 60) mod 2 − 1|) = 0.21
- m = V − C = 0.9 − 0.36 = 0.54
- 0° ≤ H < 60°: (R′, G′, B′) = (C, X, 0) = (0.36, 0.21, 0)
- R = (R′ + m) × 255 = (0.36 + 0.54) × 255 = 230
- G = (G′ + m) × 255 = (0.21 + 0.54) × 255 = 191
- B = (B′ + m) × 255 = (0 + 0.54) × 255 = 138
hsv(35, 40%, 90%) = rgb(230, 191, 138)
Совет: Чтобы градиент получился плавным, меняйте равными шагами только оттенок или только яркость, а остальные два параметра держите постоянными. Переведите здесь несколько опорных точек и доверьте интерполяцию CSS, вместо того чтобы перечислять каждый шаг.
Популярные цвета: HSV в RGB
| Цвет | HSV | RGB |
|---|---|---|
| Красный | hsv(0, 100%, 100%) | rgb(255, 0, 0) |
| Оранжевый | hsv(39, 100%, 100%) | rgb(255, 165, 0) |
| Жёлтый | hsv(60, 100%, 100%) | rgb(255, 255, 0) |
| Лайм | hsv(120, 100%, 100%) | rgb(0, 255, 0) |
| Зелёный | hsv(120, 100%, 50%) | rgb(0, 128, 0) |
| Голубой | hsv(180, 100%, 100%) | rgb(0, 255, 255) |
| Бирюзовый | hsv(180, 100%, 50%) | rgb(0, 128, 128) |
| Синий | hsv(240, 100%, 100%) | rgb(0, 0, 255) |
| Тёмно-синий | hsv(240, 100%, 50%) | rgb(0, 0, 128) |
| Фиолетовый | hsv(300, 100%, 50%) | rgb(128, 0, 128) |
| Пурпурный | hsv(300, 100%, 100%) | rgb(255, 0, 255) |
| Розовый | hsv(350, 25%, 100%) | rgb(255, 192, 203) |
| Коричневый | hsv(0, 75%, 65%) | rgb(165, 42, 42) |
| Серый | hsv(0, 0%, 50%) | rgb(128, 128, 128) |
| Чёрный | hsv(0, 0%, 0%) | rgb(0, 0, 0) |
| Белый | hsv(0, 0%, 100%) | rgb(255, 255, 255) |
Часто задаваемые вопросы
Почему яркость 100% не всегда даёт белый цвет?
Яркость задаёт наибольший канал, а не белизну. hsv(0 100% 100%) равен rgb(255 0 0), то есть чистому красному. Белый получается при яркости 100% и насыщенности 0%, а любая яркость при насыщенности 0% даёт серый.
Какие диапазоны ждут игровые движки и библиотеки?
Color.HSVToRGB в Unity и colorsys.hsv_to_rgb в Python принимают для всех трёх компонентов значения от 0 до 1, причём оттенок задаётся долей круга: 180 градусов превращаются в 0.5. Перед вызовом делите градусы на 360, а проценты на 100.
Чем HSV отличается от HSL?
Тон у них общий, но V в HSV означает яркость самого сильного канала (у чистого цвета V = 100%), а L в HSL ставит чистые цвета на 50%, посередине между чёрным и белым. Палитры графических редакторов обычно используют HSV, а CSS использует HSL.
Где используется HSV?
В палитрах графических редакторов (Photoshop, GIMP, Figma), в обработке изображений и компьютерном зрении (например, цветовые пороги в OpenCV), везде, где удобно отделять цветность от яркости.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →