Conversor de HEX a HSL
Convierte códigos de color HEX a valores HSL al instante en tu navegador.
Convierte cualquier código de color HEX a HSL al instante con este conversor de HEX a HSL en línea y gratuito. Escribe un valor hexadecimal como #4f46e5 (o elige un color con la paleta) y obtén al momento la cadena hsl() correspondiente y los valores brutos de tono, saturación y luminosidad. Admite el atajo de 3 dígitos, el hexadecimal completo de 6 dígitos y el hexadecimal de 8 dígitos con transparencia, y todo funciona en tu navegador sin nada que instalar.
¿Qué es un conversor de HEX a HSL?
Un conversor de HEX a HSL transforma un código de color hexadecimal en el modelo de color HSL: tono (hue), saturación y luminosidad. Los códigos hexadecimales como #4f46e5 son compactos y habituales en CSS, pero el HSL es mucho más intuitivo de manejar: puedes girar el tono por la rueda de color, subir o bajar la saturación, o aclarar y oscurecer un color cambiando solo un número. Esta herramienta lee cualquier código hexadecimal válido y te muestra el valor hsl() exacto que hay detrás.
Cómo convertir HEX a HSL
Un código hexadecimal se divide primero en los canales de rojo, verde y azul (cada uno un número de 0 a 255) y, después, esos valores RGB se convierten en HSL. El tono es un ángulo de 0 a 360 grados en la rueda de color, mientras que la saturación y la luminosidad son porcentajes de 0% a 100%. Por ejemplo, #4f46e5 se convierte en hsl(243, 75%, 59%). Los atajos como #f0c se expanden antes a #ff00cc.
- Escribe o pega un código de color HEX en el campo HEX (el # es opcional).
- Consulta la cadena hsl() y los valores brutos de H, S, L, que se actualizan mientras escribes.
- Usa el selector de color si prefieres elegir un color de forma visual.
- Haz clic en Copiar para copiar el formato que necesites.
¿Por qué usar este conversor de HEX a HSL?
- 100% gratis, sin anuncios, registro ni límites.
- Conversión instantánea mientras escribes.
- Admite el atajo de 3 dígitos, el de 6 dígitos y el hexadecimal de 8 dígitos con transparencia.
- Copia la cadena hsl(), la cadena hsla() o los números brutos de H, S, L.
- Funciona por completo en tu navegador: tus colores nunca salen de tu dispositivo.
Preguntas frecuentes
¿Cómo convierto un color HEX a HSL?
Primero convierte el código hexadecimal a RGB dividiéndolo en tres pares de dígitos y luego convierte RGB a HSL: el tono como un ángulo (0 a 360°) y la saturación y la luminosidad como porcentajes. Por ejemplo, #4f46e5 se convierte en hsl(243, 75%, 59%). Esta herramienta hace todos los cálculos automáticamente.
¿Por qué usar HSL en lugar de HEX?
El HSL es más fácil de entender que el hexadecimal. Como el tono, la saturación y la luminosidad están separados, puedes crear tonos más claros u oscuros, variantes más apagadas o más vivas y paletas armoniosas ajustando un solo valor, algo mucho más difícil de hacer directamente con códigos hexadecimales.
¿Admite atajos hexadecimales como #f0c?
Sí. El atajo de tres dígitos se expande duplicando cada dígito, así que #f0c se trata como #ff00cc antes de convertirse a HSL.
¿Convierte hexadecimal con transparencia (alfa)?
Sí. Si introduces un código hexadecimal de 8 dígitos como #4f46e5cc, el último par se lee como el canal alfa y el resultado se muestra como un valor hsla() con el alfa entre 0 y 1.
¿Necesito el símbolo #?
No. Puedes pegar un código hexadecimal con o sin el # inicial; tanto 4f46e5 como #4f46e5 funcionan.