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)
HSV(210°, 89%, 90%) Ctrl+C
HSL(210°, 80%, 50%)
H: 210°S: 80%L: 50%
CSS: hsl(210, 80%, 50%)Variantes de luminosidad
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
| Variable | Fórmula | Ejemplo (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.