Convertidor HSV a RGB

Convierte valores HSV/HSB (Tono, Saturación, Brillo) a RGB para uso en CSS, programación y herramientas web.

Valores HSV/HSB

H
°
S
%
V
%
HSV(12°, 83%, 80%)
RGB(204, 68, 35)
R: 204G: 68B: 35
HEX: #CC4423

Cómo Usar el Convertidor HSV a RGB

1Ingresa H (Tono) — Selecciona el color base en el espectro (0°-360°). Copia el valor H directamente desde Photoshop.
2Ajusta S y V — Saturación (S: 0%-100%) y Valor/Brillo (V: 0%-100%) definen la intensidad y luminosidad.
3Obtén RGB y HEX — Los valores se actualizan en tiempo real. Copia RGB para programación o HEX para CSS.

¿Cómo Funciona la Conversión HSV → RGB?

El algoritmo mapea las coordenadas cilíndricas HSV al cubo RGB en 4 pasos:

PasoCálculoEjemplo (H=12°, S=83%, V=80%)
1. Sectori = H / 60 (entero)i = 0 (sector rojo-amarillo)
2. ChromaC = V × SC = 0.80 × 0.83 = 0.664
3. Componente XX = C × (1 − |H/60 mod 2 − 1|)X = 0.664 × 0.6 = 0.133
4. Ajuste + Mapeom = V − C; RGB = (R'+m, G'+m, B'+m) × 255RGB(204, 68, 35)

¿Por Qué Convertir HSV a RGB?

Desarrollo Web

Si diseñaste en Photoshop con HSB y necesitas los colores en CSS, esta herramienta te da el RGB y HEX equivalentes para implementar directamente en tu hoja de estilos.

💻 Programación

APIs de canvas, WebGL, procesamiento de imágenes y la mayoría de librerías gráficas trabajan en RGB internamente. Convertir desde HSV es necesario para renderizar.

Apps Móviles

UIKit (iOS) y Android SDK aceptan colores en RGB/HEX. Si tu diseñador te pasa colores en HSB de Photoshop, necesitas convertir para implementar en la app.

Preparación de Impresión

La cadena de conversión HSV → RGB → CMYK te permite llevar colores de Photoshop a impresión. El primer paso (HSV→RGB) es esencial en este flujo.

Limitaciones

  • Redondeo: Los valores RGB son enteros (0-255). Valores HSV muy precisos pueden sufrir un redondeo de ±1 en cada canal.
  • No perceptual: HSV no es perceptualmente uniforme. Dos colores con el mismo V no se perciben con el mismo brillo. Para uniformidad, considera OKLAB/OKLCH.
  • Sin soporte CSS: CSS no tiene función hsv(). El resultado debe usarse como rgb() o hex en tus estilos.

Preguntas Frecuentes

¿HSV a RGB pierde calidad o información?
No, la conversión es matemáticamente exacta y reversible. Ambos modelos representan el mismo espacio sRGB con coordenadas diferentes. El único redondeo posible es al convertir a enteros RGB (0-255).
¿Puedo copiar los valores HSB de Photoshop y usarlos aquí?
Sí, directamente. HSB en Photoshop = HSV en esta herramienta. Los valores H, S, B que ves en el selector de color de Photoshop corresponden exactamente a H, S, V de nuestro convertidor.
¿Cómo uso el resultado RGB en CSS?
Usa la función rgb(): color: rgb(204, 68, 34);. También puedes usar el HEX mostrado: color: #CC4422;. Ambos producen el mismo resultado en el navegador.
¿Cuál es la diferencia al convertir HSV→RGB vs HSL→RGB?
Los algoritmos son diferentes porque HSV y HSL representan el color de formas distintas. HSV(0°, 100%, 100%) = rojo puro, pero HSL(0°, 100%, 50%) = rojo puro. El resultado RGB final puede coincidir, pero solo si los valores H, S están correctamente mapeados al modelo correcto.
¿Puedo usar esta conversión para OpenCV o procesamiento de imágenes?
Sí. OpenCV trabaja en HSV (con H escalado a 0-180 en vez de 0-360). Divide nuestro H entre 2 para obtener el valor de OpenCV. Los canales S y V usan escala 0-255 en OpenCV, en vez de 0-100%.