Введите цвет в формате RGB и мгновенно получите точное значение HSV, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод RGB в HSV
RGB берут из кадров камеры, файлов изображений и CSS, но многие инструменты подходят к цвету как художник: сначала выбрать оттенок, затем решить, насколько он насыщен и насколько ярок. Так устроен HSV, он же HSB. Типичные причины перевода: ввести цвет в поля HSB пипетки Photoshop или Figma, задать пороги для поиска цвета в скрипте обработки изображений или выбрать основу для генерации цветовых схем. Введите красный, зелёный и синий каналы и получите оттенок, насыщенность и яркость.
Где это пригодится
- Задать диапазоны цвета для слежения за цветным предметом в скрипте OpenCV или похожем коде компьютерного зрения.
- Ввести снятый RGB-цвет в поля HSB пипетки Photoshop или Figma.
- Проверить, что должен вернуть Color.RGBToHSV в Unity для известного цвета, пока отлаживаете шейдер или скрипт.
Как перевести RGB в HSV
HSV (другое название: HSB) вычисляет тон так же, как HSL, но две другие оси определяет иначе: яркость равна наибольшему каналу, V = max, а насыщенность S = Δ / max (для чёрного 0).
Поэтому чистый насыщенный цвет в HSV имеет V = 100%, а в HSL имеет L = 50%. Обратный перевод восстанавливает каналы через цветность C = V × S.
Пример расчёта
- Нормализуем каналы: R′ = 142 ÷ 255 = 0.557, G′ = 68 ÷ 255 = 0.267, B′ = 173 ÷ 255 = 0.678
- max = 0.678 (B′), min = 0.267 (G′), Δ = 0.412
- V = max = 0.678 → 68%
- S = Δ ÷ max = 0.412 ÷ 0.678 = 0.607 → 61%
- H = 60 × ((R′ − G′) ÷ Δ + 4) = 60 × ((0.557 − 0.267) ÷ 0.412 + 4) ≈ 282°
rgb(142, 68, 173) = hsv(282, 61%, 68%)
Совет: Для поиска цвета в видео переведите кадр в HSV и сначала ограничьте оттенок, а границы насыщенности и яркости задавайте шире. Красный переходит через начало круга, поэтому для него часто нужны два интервала: около 0 и около 360 (179 в OpenCV).
Популярные цвета: RGB в HSV
| Цвет | RGB | HSV |
|---|---|---|
| Красный | rgb(255, 0, 0) | hsv(0, 100%, 100%) |
| Оранжевый | rgb(255, 165, 0) | hsv(39, 100%, 100%) |
| Жёлтый | rgb(255, 255, 0) | hsv(60, 100%, 100%) |
| Лайм | rgb(0, 255, 0) | hsv(120, 100%, 100%) |
| Зелёный | rgb(0, 128, 0) | hsv(120, 100%, 50%) |
| Голубой | rgb(0, 255, 255) | hsv(180, 100%, 100%) |
| Бирюзовый | rgb(0, 128, 128) | hsv(180, 100%, 50%) |
| Синий | rgb(0, 0, 255) | hsv(240, 100%, 100%) |
| Тёмно-синий | rgb(0, 0, 128) | hsv(240, 100%, 50%) |
| Фиолетовый | rgb(128, 0, 128) | hsv(300, 100%, 50%) |
| Пурпурный | rgb(255, 0, 255) | hsv(300, 100%, 100%) |
| Розовый | rgb(255, 192, 203) | hsv(350, 25%, 100%) |
| Коричневый | rgb(165, 42, 42) | hsv(0, 75%, 65%) |
| Серый | rgb(128, 128, 128) | hsv(0, 0%, 50%) |
| Чёрный | rgb(0, 0, 0) | hsv(0, 0%, 0%) |
| Белый | rgb(255, 255, 255) | hsv(0, 0%, 100%) |
Часто задаваемые вопросы
Почему OpenCV показывает другое число оттенка?
В 8-битных изображениях OpenCV хранит оттенок в диапазоне 0-179, то есть вдвое меньше градусов, а насыщенность и яркость масштабирует до 0-255. Поделите оттенок со страницы на 2, а проценты умножьте на 2.55, чтобы получить шкалу OpenCV.
Совпадает ли яркость в пипетке со значением V?
В большинстве палитр да: оба названия обозначают наибольший из каналов красного, зелёного и синего в процентах от 0 до 100. Яркость 100% не означает белый цвет, а лишь то, что хотя бы один канал включён полностью.
Чем HSV отличается от HSL?
Тон у них общий, но V в HSV означает яркость самого сильного канала (у чистого цвета V = 100%), а L в HSL ставит чистые цвета на 50%, посередине между чёрным и белым. Палитры графических редакторов обычно используют HSV, а CSS использует HSL.
Где используется HSV?
В палитрах графических редакторов (Photoshop, GIMP, Figma), в обработке изображений и компьютерном зрении (например, цветовые пороги в OpenCV), везде, где удобно отделять цветность от яркости.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →