Конвертер HSV в RGB
Переведите цвет из HSV в RGB, HEX, HSL и CMYK онлайн
Что такое HSV
HSV (Hue, Saturation, Value) — цветовая модель, в которой цвет описывается тоном (0–360°), насыщенностью (0–100%) и яркостью (0–100%). Эта модель ближе к тому, как человек воспринимает цвет.
Дизайнеры и художники выбирают цвета в HSV, а компьютеры рендерят их в RGB. Конвертер моментально переводит между двумя моделями.
Когда использовать HSV → RGB
HSV удобен для подбора палитр и градиентов, RGB — для CSS, Canvas, JS. При генерации цветов программно (например, equally-spaced палитра) проще варьировать Hue в HSV и переводить в RGB.
Для CSS3 уже доступна функция hsl(), но многие старые системы и графические библиотеки требуют RGB.
Формула перевода HSV → RGB
Перевод выполняется через промежуточные величины. Сначала считают хрому (насыщенность цвета) C = V × S при S и V в долях от 0 до 1. Затем вспомогательное значение X = C × (1 − |(H / 60) mod 2 − 1|) и смещение m = V − C. В зависимости от сектора тона H (каждые 60°) базовые компоненты (R′, G′, B′) берут из набора {C, X, 0}, после чего к каждой прибавляют m и умножают на 255.
Пример: HSV(210°, 50%, 80%). В долях S = 0,5, V = 0,8. Тогда C = 0,8 × 0,5 = 0,4; H / 60 = 3,5, X = 0,4 × (1 − |3,5 mod 2 − 1|) = 0,4 × 0,5 = 0,2; m = 0,8 − 0,4 = 0,4. Сектор 180–240° даёт (R′, G′, B′) = (0, X, C). Итог: R = (0 + 0,4) × 255 ≈ 102, G = (0,2 + 0,4) × 255 ≈ 153, B = (0,4 + 0,4) × 255 ≈ 204 → RGB(102, 153, 204).
Дизайнер дашборда
Татьяна создавала палитру для дашборда из 12 категорий. Она задала Saturation=70%, Value=80% и распределила Hue равномерно по кругу. Конвертер перевёл все цвета в RGB для разработчиков за минуту.
HSV — удобный язык для системного подбора цветов.
Факты
Модель HSV предложена Элви Рэем Смитом в 1978 году.
HSV также называют HSB (Hue, Saturation, Brightness).
Hue измеряется по цветовому кругу: 0° — красный, 120° — зелёный, 240° — синий.
При Saturation=0 цвет всегда серый, независимо от Hue.
HSV отличается от HSL: в HSV Value=100% даёт чистый цвет, в HSL Lightness=100% даёт белый.
Photoshop, Figma и Sketch используют HSV в палитрах подбора цвета.
Сравнение цветовых моделей HSV и RGB
| Параметр | HSV | RGB |
|---|---|---|
| Компоненты | Тон, Насыщенность, Яркость | Красный, Зелёный, Синий |
| Диапазон | H: 0–360°, S: 0–100%, V: 0–100% | R, G, B: 0–255 |
| Применение | Подбор цвета, графические редакторы | Мониторы, веб, CSS, HTML |
| Интуитивность | Высокая — соответствует восприятию | Средняя — аддитивное смешение |
| Кол-во цветов | Непрерывное пространство | 16 777 216 (8 бит на канал) |
Подсказка
Чтобы получить «приглушённый» цвет — снижайте Saturation. Чтобы «осветлить» — повышайте Value. Это интуитивнее, чем менять RGB.
Как перевести HSV в RGB — пошаговая инструкция
Введите HSV
Введите тон (0–360), насыщенность и яркость (0–100). Можно использовать слайдеры для подбора.
Получите RGB
Калькулятор моментально покажет r, g, b от 0 до 255 и HEX-эквивалент.
Скопируйте в проект
Возьмите готовое значение rgb() или #HEX для CSS, или массив для JS-кода.
Примеры использования конвертера HSV в RGB
🎨 Вёрстка по макету из Photoshop или Figma
Дизайнер передаёт цвет в HSV-формате: тон 210°, насыщенность 85%, яркость 90%. Верстальщик открывает конвертер, вводит HSV(210, 85, 90) и мгновенно получает CSS-код rgb(34, 115, 230) и HEX #2273E6 для подключения в стили. Нет необходимости вручную пересчитывать формулы или открывать графический редактор.
🖌️ Подбор палитры для сайта
Вы выбрали основной цвет бренда и хотите создать оттенки. В HSV меняйте насыщенность и яркость, сохраняя тон (Hue) постоянным. Конвертируйте каждый вариант в RGB и HEX, чтобы сформировать гармоничную цветовую палитру для веб-проекта.
📱 Разработка мобильных приложений
В Android и iOS цвета задаются в RGB или HEX. Если палитра подготовлена в HSV, конвертер позволяет быстро получить нужные значения для кода. Копируйте результат одним нажатием и вставляйте прямо в Xcode, Android Studio или Flutter.
🎓 Изучение теории цвета
Студенты и преподаватели используют конвертер для наглядного понимания взаимосвязи цветовых моделей. Перемещая ползунки HSV и наблюдая изменения RGB-значений в реальном времени, легко понять, как тон, насыщенность и яркость влияют на итоговый цвет.
🖨️ Подготовка к печати
Перед отправкой проекта в типографию нужно знать CMYK-значения. Конвертер показывает не только RGB, но и приблизительное значение CMYK, что помогает оценить, как цвет будет выглядеть на бумаге. Это ускоряет подготовку макетов для полиграфии.
Часто задаваемые вопросы о конвертации HSV в RGB
Что такое цветовая модель HSV и чем она отличается от RGB?
Зачем нужно конвертировать HSV в RGB?
HSV и HSB — это одно и то же?
Чем отличается HSV от HSL?
Насколько точна конвертация HSV в RGB?
Безопасно ли использовать онлайн-конвертер цветов?
Можно ли получить CMYK из HSV для печати?
Полезная информация
Для создания гармоничной палитры меняйте Saturation и Value, сохраняя Hue постоянным
Комплементарный цвет получается добавлением 180° к тону (Hue)
Пастельные тона — это низкая насыщенность (S: 20–40%) при высокой яркости (V: 80–100%)
Тёмные глубокие цвета — высокая насыщенность при низкой яркости (V: 20–50%)
Для текста на цветном фоне проверяйте контрастность по стандарту WCAG 2.1
В CSS используйте hsl() вместо rgb() для удобства работы с оттенками
Сохраняйте результаты конвертации в документе проекта для единообразия цветов
Смежные конвертеры цвета
После перевода HSV в RGB цвет часто нужен в другом формате или в обратную сторону. Эти конвертеры продолжают цепочку работы с цветом.
Комментарии
Пока нет комментариев
Будьте первым!