Convertidor HEX a HSL

Convierte códigos HEX a HSL (Tono, Saturación, Luminosidad) para manipulación intuitiva de color en CSS moderno.

Código HEX

#
#6C5CE7
HSL(248°, 75%, 64%)
H: 248°S: 75%L: 64%
CSS: hsl(248, 75%, 64%)

Variantes automáticas

Cómo Usar el Convertidor HEX a HSL

1Ingresa el HEX — Escribe un código hexadecimal de 6 dígitos o selecciona un preset.
2Obtén HSL — Los valores H, S, L se calculan junto con la función CSS lista para copiar.
3Explora variantes — La herramienta genera automáticamente variantes más claras y oscuras para inspirarte.

¿Cómo Funciona la Conversión?

La conversión HEX → HSL es un proceso de dos pasos:

PasoProcesoEjemplo (#6C5CE7)
1. HEX → RGBDecodificar hexadecimal6C=108, 5C=92, E7=231
2. RGB → HSLCalcular H, S, LH=248°, S=75%, L=64%

¿Por Qué Convertir HEX a HSL?

Design Tokens

Los sistemas de diseño modernos definen colores base en HSL para generar escalas completas (50-950) programáticamente. Un solo valor H define el tono, luego S y L crean toda la rampa.

🔲 Estados de UI

Hover, active, disabled, focus: cada estado necesita un color ligeramente diferente. Con HSL, solo ajustas L (-10% para hover oscuro) o S (-30% para disabled) sin repensar el color.

🌗 Modo Oscuro

Generar paletas dark mode es natural en HSL: mantén H y S, invierte o ajusta L. Un color con L=60% se convierte en L=40% para dark mode, manteniendo el mismo tono.

CSS Custom Properties

Separa H, S, L en variables CSS y combínalas dinámicamente: --hue: 210; color: hsl(var(--hue), 80%, 50%). Cambia un valor para repintar todo el tema.

Preguntas Frecuentes

¿Puedo pegar un HEX de 3 dígitos?
Sí, la herramienta expande automáticamente los HEX cortos. #F0A se interpreta como #FF00AA, duplicando cada dígito.
¿Para qué sirve HSL si ya tengo el HEX?
HSL facilita la manipulación programática del color. Con HEX es difícil "oscurecer un 20%" o "desaturar", pero con HSL solo restas 20 a L o reduces S. Es ideal para generar variantes, estados hover y paletas.
¿HSL funciona en todos los navegadores?
Sí, hsl() es soportado en todos los navegadores modernos desde IE9+. CSS Level 4 también introduce la sintaxis sin comas: hsl(210 80% 50%).
¿La conversión HEX→HSL es exacta?
Sí, es matemáticamente exacta y reversible. HEX → RGB → HSL son transformaciones sin pérdida dentro del espacio sRGB. El único redondeo posible es al mostrar H, S, L como enteros.
¿Cómo genero un color más claro del HEX original?
Convierte a HSL, luego aumenta L. Por ejemplo, si obtienes HSL(210, 80%, 50%), cambiarlo a HSL(210, 80%, 70%) te da un azul más claro. También puedes bajar S para un tono más pastel.