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
#
Colores populares
#6C5CE7
HSL(248°, 75%, 64%)
H: 248° S: 75% L: 64%
CSS: hsl(248, 75%, 64%) Variantes de luminosidad
Cómo Usar el Convertidor HEX a HSL
1Ingresa el HEX — Escribe un código hexadecimal, selecciona un color popular de la cuadrícula, o usa la rueda de color para explorar visualmente.
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 de luminosidad para inspirarte.
¿Cómo Funciona la Conversión?
La conversión HEX → HSL es un proceso de dos pasos:
| Paso | Proceso | Ejemplo (#6C5CE7) |
|---|---|---|
| 1. HEX → RGB | Decodificar hexadecimal | 6C=108, 5C=92, E7=231 |
| 2. RGB → HSL | Calcular H, S, L | H=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.
Estados de UI
Hover, active, disabled: cada estado necesita un color ligeramente diferente. Con HSL, solo ajustas L o S sin repensar el color.
Modo Oscuro
Generar paletas dark mode es natural en HSL: mantén H y S, ajusta L. Un color con L=60% se convierte en L=40% para dark mode.
CSS Custom Properties
Separa H, S, L en variables CSS: --hue: 210; color: hsl(var(--hue), 80%, 50%).
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.
¿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.
¿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.