Resultado
Todos los cálculos se hacen localmente en tu navegador: análisis, gráfico, exportación. Si desconectas la red, la página sigue funcionando.
Datos y límites del método
| Rango del tono | De 0° a 360° |
|---|---|
| Rango de saturación y valor | De 0% a 100% |
| Fórmula del valor | V = máx(R, G, B) / 255 |
| Fórmula de la saturación | S = (máx − mín) / máx, con máx = 0 → S = 0 |
Cuándo induce a error
- HSV no es el único modelo cilíndrico — no lo confundas con el modelo similar pero distinto HSL (el tono se define igual en ambos, pero la saturación y la luminosidad/valor se calculan de forma diferente).
- En colores muy oscuros (valor cercano a 0%) el tono y la saturación pierden relevancia — tonos visualmente distintos pueden verse como el mismo color casi negro.
- Con saturación cero (tonos de gris, incluidos negro y blanco) el tono no está matemáticamente definido — el conversor muestra 0° en ese caso.
- El resultado es solo otro sistema de coordenadas para el mismo color, no un espacio de color distinto — no lleva información de perfil de color de pantalla.
Cómo se calcula
Los valores R, G y B se normalizan dividiéndolos entre 255, dando números de 0 a 1.
El valor (V) es el máximo de los valores normalizados R, G, B.
La saturación (S) se calcula como la razón entre la diferencia del canal máximo y mínimo y el máximo (con máximo igual a cero, la saturación se toma como cero).
El tono (H) se calcula según cuál de R, G o B sea el máximo, usando una fórmula por tramos que da un valor de 0° a 360°.
Preguntas y respuestas
¿En qué se diferencia HSV de HSL?
El tono se define igual en ambos modelos, pero la saturación y la luminosidad/valor usan fórmulas distintas, así que porcentajes idénticos de S y L (o V) en HSL y HSV producen colores diferentes.
¿Por qué muestra un tono de 0° cuando S=0% y el color es gris?
El tono no está matemáticamente definido para tonos de gris, así que por convención se usa 0° — no afecta cómo se percibe el color gris.
¿Puedo usar HSV directamente en CSS?
El CSS moderno no admite una función hsv() directamente — para usarlo en estilos es más práctico convertir el resultado a HSL o HEX/RGB con otro conversor.
¿Se envían mis datos a algún sitio?
No, todo el cálculo se ejecuta en tu navegador.