#056 · Herramienta para desarrolladores

Conversor HEX a HSL

Convierte un color hexadecimal a HSL para trabajar con ajustes de matiz, saturación y luminosidad en CSS. El cálculo normaliza los canales RGB, obtiene máximos y mínimos y aplica la fórmula HSL estándar. El resultado es especialmente útil cuando quieres generar variaciones de una paleta modificando luminosidad o saturación de forma más intuitiva que en RGB.

Datos de entrada

Color HEX
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Introduce un HEX de 3 o 6 dígitos.
  2. Convierte.
  3. Revisa H, S y L.
  4. Copia la función hsl().

Qué hace esta herramienta para desarrolladores

HSL separa el matiz angular de la intensidad cromática y la luminosidad, lo que facilita crear variantes visuales.

RGB se normaliza a 0–1. La luminosidad es (máximo + mínimo)/2; saturación y matiz dependen de la diferencia entre canales.

Los redondeos a grados y porcentajes pueden producir pequeñas diferencias al convertir de vuelta.

Ejemplo

#336699 → hsl(210, 50%, 40%)

Casos de uso

  • Variantes de tema.
  • Tokens de color.
  • Ajustes de luminosidad.

Consejos para obtener resultados fiables

  • Modifica L para tonos claros u oscuros.
  • Reduce S para colores más neutros.
  • Comprueba accesibilidad después de modificar.
  • Evita asumir que pasos iguales en HSL son perceptualmente iguales.

Detalles del procesamiento

El cálculo usa la definición HSL habitual sobre valores sRGB.

HSL no es un espacio perceptualmente uniforme; para ajustes visuales finos pueden ser preferibles OKLCH u otros espacios.

Preguntas frecuentes

¿Cómo se calcula HSL a partir de un color HEX?

Primero se convierte HEX a RGB normalizado y después se calculan máximo, mínimo, diferencia, luminosidad, saturación y matiz.

¿Qué significa 0 grados en HSL?

Corresponde al eje del rojo; el matiz recorre 0–360 grados.

¿Por qué un gris tiene saturación 0% en HSL?

Cuando R, G y B son iguales no existe diferencia cromática, por lo que la saturación es cero.

¿Puedo usar directamente el resultado hsl() en CSS?

Sí, la salida usa sintaxis CSS tradicional hsl(H, S%, L%).

¿HSL es adecuado para calcular contraste WCAG?

No por sí solo. El contraste requiere luminancia relativa calculada desde componentes sRGB linealizados.

Datos del resultado

DatoDescripción
MatizValor calculado por Conversor HEX a HSL.
SaturaciónValor calculado por Conversor HEX a HSL.
LuminosidadValor calculado por Conversor HEX a HSL.
HEXValor calculado por Conversor HEX a HSL.

Centro de categoría

Consulta más utilidades de Color y CSS.