Convertidor HSV a HSL

Convierte valores HSV/HSB (Photoshop) a HSL (CSS) para implementar colores de diseño en tu hoja de estilos con precisión.

Valores HSV/HSB (Photoshop)

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

Cómo Usar el Convertidor

1Ingresa HSV de Photoshop — Copia los valores H, S, B del selector de color de Adobe. B (Brightness) = V (Value).
2Lee los valores HSL — H permanece igual, S y L se recalculan con la fórmula correcta.
3Copia el CSS — Haz clic en "Copiar CSS hsl()" para pegar directamente en tu stylesheet.

¿Por Qué Convertir HSV a HSL?

💻 Photoshop → CSS

El flujo de trabajo más común: tu diseñador elige colores en Photoshop (HSB) y tú necesitas implementarlos en CSS con hsl() para poder generar variantes fácilmente.

🧩 Design Systems

Si tu equipo define colores en Figma/Photoshop (HSB) pero el design system usa HSL para tokens programáticos, esta conversión unifica ambos mundos.

🌗 Temas Dark Mode

HSL es ideal para dark mode (invertir L). Si partes de HSV de Photoshop, convierte a HSL primero para manipular luminosidad de forma predecible.

Variables CSS

Separa H, S, L en custom properties para crear sistemas de color dinámicos. Imposible lograr con HSV directamente, porque CSS no lo soporta.

La Fórmula HSV → HSL

VariableFórmulaEjemplo (210°, 89%, 90%)
H_hsl= H_hsv (sin cambio)210°
L= V × (1 − S/2)0.90 × (1 − 0.89/2) = 0.50
S_hsl= (V − L) / min(L, 1−L)(0.90 − 0.50) / 0.50 = 0.80

Preguntas Frecuentes

¿Puedo copiar valores HSB de Photoshop y convertirlos a CSS hsl()?
Sí, exactamente. Ingresa los valores H, S, B de Photoshop como H, S, V en nuestra herramienta. El resultado HSL se puede usar directamente en CSS: color: hsl(210, 80%, 50%);
¿El tono (H) cambia en la conversión?
No, H es idéntico en HSV y HSL. Solo cambian S y L/V. Si tu color en Photoshop tiene H=210°, el resultado HSL también tendrá H=210°.
¿Por qué la S de Photoshop y la S de CSS son diferentes?
Porque miden cosas distintas. S en HSV mide cuánto "color puro" hay respecto al brillo máximo. S en HSL mide cuánto color hay respecto a un gris del mismo brillo. Son fórmulas diferentes para el concepto de "saturación".
¿La conversión es exacta?
Sí, 100% exacta y reversible. No hay pérdida de información. HSV y HSL son dos maneras de representar los mismos colores sRGB.
¿Puedo usar el resultado en Tailwind CSS?
Sí, Tailwind v3+ acepta colores HSL en la configuración. En tailwind.config.js: colors: { brand: "hsl(210, 80%, 50%)" }. Tailwind v4 usa OKLCH por defecto pero sigue aceptando HSL.