Conversor de Color Hex a HSL
Convierte un código de color hex CSS a HSL (tono, saturación, luminosidad) en un clic.
¿Esta herramienta respondió tu pregunta?
Gracias: esto nos ayuda a mejorar la herramienta.
Cómo usar esta herramienta
- Ingresa un código de color hex de 6 dígitos (por ejemplo #ff5733). El # inicial es opcional.
- La herramienta lo convierte a HSL: tono en grados, saturación y luminosidad como porcentajes.
- Copia la cadena hsl() en tu CSS u hoja de estilos.
Pega un código de color hex y obtén el valor HSL equivalente para usar en funciones CSS hsl() o herramientas de diseño.
Fórmula
Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.
Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.
Preguntas frecuentes
- ¿Por qué convertir hex a HSL?
- HSL es más fácil de razonar al ajustar el brillo o la saturación. Puedes mantener el tono fijo y ajustar saturación/luminosidad para crear matices y sombras.
- ¿Esto soporta hex de 3 dígitos?
- Sí: #abc se trata como #aabbcc.