🎨

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

Переведите цвет из HSV в RGB, HEX, HSL и CMYK онлайн

Авто-конвертация

Тон (Hue) — 0°

#FF0000

H (тон)0 – 360

S (насыщенность)0 – 100%

V (яркость)0 – 100%

Готовые цвета

Смежные конвертеры цвета

RGB → HSVОбратный перевод в HSV HSV → HEXТот же цвет сразу в HEX HSL → RGBПеревод из модели HSL Генератор палитрСоберите гармоничную палитру

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Почту и пароль указывать не нужно · публикуем после проверки, обычно за 1–2 дня · если вам ответят, ответ появится здесь же

Что такое 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 (Hue, Saturation, Value) — цветовая модель, описывающая цвет через тон (оттенок на цветовом круге), насыщенность (чистота цвета) и яркость (светлота). В отличие от RGB, где цвет задаётся смешением трёх каналов (красный, зелёный, синий), HSV ближе к человеческому восприятию цвета. Именно поэтому HSV широко используется в палитрах графических редакторов для интуитивного подбора оттенков.

Зачем нужно конвертировать HSV в RGB?

RGB — стандартный формат цвета для всех экранов: мониторов, телефонов, телевизоров. Браузеры и языки программирования (CSS, HTML, JavaScript, Python, Swift) используют RGB или HEX для задания цвета. Если вы подобрали цвет в HSV (например, в Photoshop, Illustrator, GIMP), для использования его на сайте или в приложении нужно перевести в RGB.

HSV и HSB — это одно и то же?

Да, HSV и HSB (Hue, Saturation, Brightness) — это одна и та же модель с разными названиями. В Adobe Photoshop и Illustrator используется термин HSB, а в программировании и ряде других программ чаще пишут HSV. Наш конвертер подходит для обоих обозначений — результат идентичен.

Чем отличается HSV от HSL?

HSV и HSL — родственные, но разные модели. В HSV параметр Value (яркость) при максимуме даёт чистый яркий цвет, а чёрный достигается при V = 0. В HSL параметр Lightness (светлота) при 50% даёт чистый цвет, 0% — чёрный, 100% — белый. HSL чаще используется в CSS (функция hsl()), а HSV — в графических редакторах. Наш конвертер выдаёт оба формата одновременно.

Насколько точна конвертация HSV в RGB?

Конвертация выполняется по стандартному математическому алгоритму и является абсолютно точной. Единственное ограничение — RGB работает с целыми числами 0–255, поэтому при промежуточных значениях HSV возможно округление на ±1 единицу. Это не влияет на визуальное восприятие цвета и полностью соответствует работе профессиональных графических редакторов.

Безопасно ли использовать онлайн-конвертер цветов?

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

Можно ли получить CMYK из HSV для печати?

Да, наш конвертер автоматически рассчитывает приблизительные значения CMYK из результата RGB. Важно учитывать, что точный перевод в CMYK зависит от цветового профиля принтера (ICC-профиль). Полученные значения подходят для ориентировочной оценки. Для полиграфии рекомендуется использовать специализированные программы с поддержкой ICC-профилей.

Полезная информация

Для создания гармоничной палитры меняйте Saturation и Value, сохраняя Hue постоянным

Комплементарный цвет получается добавлением 180° к тону (Hue)

Пастельные тона — это низкая насыщенность (S: 20–40%) при высокой яркости (V: 80–100%)

Тёмные глубокие цвета — высокая насыщенность при низкой яркости (V: 20–50%)

Для текста на цветном фоне проверяйте контрастность по стандарту WCAG 2.1

В CSS используйте hsl() вместо rgb() для удобства работы с оттенками

Сохраняйте результаты конвертации в документе проекта для единообразия цветов

Смежные конвертеры цвета

После перевода HSV в RGB цвет часто нужен в другом формате или в обратную сторону. Эти конвертеры продолжают цепочку работы с цветом.

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

Обратный перевод: из RGB в модель HSV

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

Тот же цвет сразу в HEX-код

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

Перевод из близкой модели HSL в RGB

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

Из HEX-кода обратно в HSV

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

Перевод RGB в HEX для CSS

Генератор палитр

Соберите гармоничную палитру цветов

Руслан АвдеевОт автора проекта
Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.