Convertidor HSL a HSV

Convierte valores HSL (Tono, Saturación, Luminosidad) a HSV/HSB (Tono, Saturación, Valor) para Photoshop y herramientas de diseño.

Valores HSL (CSS)

H
°
S
%
L
%
HSL(210°, 80%, 50%)
HSV(210°, 89%, 90%)
H: 210°S: 89%V: 90%

Cómo Usar el Convertidor

1Ingresa valores HSL — Copia H, S, L desde tu CSS (ej: hsl(210, 80%, 50%)).
2Lee los valores HSV — El tono (H) se mantiene igual; S y V se recalculan.
3Usa en Photoshop — Ingresa H, S, B (=V) en el selector de color de Adobe.

Diferencias entre HSL y HSV

PropiedadHSLHSV/HSB
NombreHue, Saturation, LightnessHue, Saturation, Value/Brightness
Color puroS=100%, L=50%S=100%, V=100%
BlancoL=100% (cualquier H y S)S=0%, V=100%
NegroL=0%V=0%
Gris neutroS=0%S=0%
Uso principalCSS, design tokens, webPhotoshop, selectores, OpenCV

Clave: El tono (H) es idéntico en ambos modelos. La saturación (S), aunque comparte nombre, se calcula diferente y no es intercambiable entre HSL y HSV.

¿Por Qué Convertir HSL a HSV?

CSS → Photoshop

Definiste colores en CSS con hsl() y necesitas replicarlos exactamente en Photoshop. Sin conversión, los valores de Saturación no coinciden.

🤖 Filtros OpenCV

Si generas colores con HSL en tu app web y necesitas crear filtros de detección en OpenCV (que trabaja en HSV), esta conversión es el puente necesario.

🎮 Desarrollo de Juegos

Los shaders HSV son comunes en Unity/Unreal. Si tomas colores de una interfaz CSS (HSL), necesitas convertir para efectos de post-procesado y partículas.

Consistencia Multi-Herramienta

Un mismo color definido en CSS se ve diferente si ingresas los mismos números en Photoshop porque S tiene significados distintos. Esta herramienta garantiza consistencia.

Preguntas Frecuentes

¿Por qué H es igual en HSL y HSV?
Ambos modelos comparten el componente Hue (Tono) idéntico. H representa la posición en la rueda cromática (0°-360°) y es el mismo en ambos modelos. Solo S y L/V difieren en su cálculo.
¿Cuándo necesito HSV si ya tengo HSL?
Cuando trabajas con Adobe Creative Suite (Photoshop usa HSB=HSV), OpenCV para visión por computadora, shaders en motores de juegos (Unity/Unreal), o cualquier selector de color basado en el cuadrado saturación×brillo.
¿La saturación (S) es la misma en HSL y HSV?
No. S en HSL y S en HSV son valores diferentes, aunque ambas se llaman "saturación". S_HSL mide la pureza relativa a la luminosidad, mientras S_HSV mide la pureza relativa al brillo máximo. Por eso esta conversión es necesaria.
¿La conversión pierde información?
No, es exacta y reversible. HSL y HSV son dos representaciones del mismo espacio sRGB. Ningún color se pierde en la conversión.
¿Puedo usar esta herramienta para pasar colores CSS a Photoshop?
Sí, ese es exactamente su propósito principal. CSS usa hsl(), Photoshop usa HSB (=HSV). Ingresa los valores de tu CSS y obtén los valores HSB para Photoshop.