El conversor acepta todas las formas hex de CSS: el formato de 6 dígitos #3366cc, el abreviado de 3 dígitos #36c, y los formatos de 4 y 8 dígitos con canal alfa, con o sin el #. Muestra la cadena hsl() o hsla(), los valores planos y un desglose por componente, además de una fila inversa de HSL a HEX cuando necesites ir en el otro sentido. Todo se ejecuta en tu navegador, sin subir archivos, sin cuenta y sin límites.
Conversor de HEX a HSL
Funciona del todo en tu navegador: sin subir nada y sin registro.
CSS
hsl(220, 60%, 50%)Cómo se convierte
Tono220
Saturación60%
Luminosidad50%
¿Al revés? HSL a HEX
#3366cc¿Cómo se convierte HEX a HSL?
Primero lee el código hex como rojo, verde y azul (0-255), y luego expresa ese mismo color como tono, saturación y luminosidad. El tono es el ángulo en la rueda de color (0-360), la saturación es lo vivo que se ve (0-100%) y la luminosidad, lo claro u oscuro (0-100%). #3366cc se convierte en hsl(220, 60%, 50%). Este conversor lo hace al instante mientras escribes.
Cómo se usa
- 1Introduce un código hex. Escribe o pega un color hex como #3366cc (o #36c), o elige uno con el selector de color. La # es opcional.
- 2Lee el valor HSL. La cadena hsl(), los valores planos y una vista previa en vivo del color se actualizan mientras escribes, con un desglose por componente de tono, saturación y luminosidad.
- 3Copia el formato que necesites. Pulsa Copiar junto a la cadena hsl() o los valores en bruto. ¿Necesitas lo contrario? Introduce tono, saturación y luminosidad más abajo para obtener el código hex de vuelta.
Para quién es
- Desarrolladores front-end que pasan un código hex a hsl() para ajustar la luminosidad en estados hover y focus sin tener que elegir un color totalmente nuevo.
- Diseñadores que arman paletas y mantienen el tono fijo mientras varían la saturación y la luminosidad para generar tintes y sombras a partir de un solo color de marca.
- Quienes documentan temas y design tokens y guardan los colores en HSL porque es mucho más fácil de leer y ajustar a mano que una cadena hex.
- Cualquiera que tenga que igualar colores entre herramientas donde una pide hex (Figma, la mayoría de CSS) y otra pide HSL (helpers de SCSS, algunos sistemas de color).
Preguntas frecuentes
¿Es gratis este conversor de HEX a HSL?
Sí, es 100% gratis, sin registro y sin límites. Se ejecuta por completo en tu navegador.
¿Se suben mis colores a algún sitio?
No. La conversión es JavaScript puro que corre en tu dispositivo, no se envía nada a un servidor, y sigue funcionando sin conexión una vez cargada la página.
¿Qué es HSL?
HSL son las siglas de tono (hue), saturación y luminosidad. El tono es un ángulo de 0 a 360 grados en la rueda de color, la saturación va de 0 a 100 por ciento según lo vivo que sea el color, y la luminosidad va de 0 por ciento (negro) pasando por el color puro en el 50 por ciento hasta el 100 por ciento (blanco).
¿Cómo se convierte hex a HSL a mano?
Convierte el hex a rojo, verde y azul y divide cada valor entre 255. Toma el máximo y el mínimo de los tres: la luminosidad es su media, la saturación es (máximo - mínimo) dividido entre (1 - |2L - 1|), y el tono sale de cuál canal es el máximo, escalado de 0 a 360 grados.
¿Admite el formato abreviado de 3 dígitos como #36c?
Sí. En la forma abreviada de CSS cada dígito se duplica, así que #36c se expande a #3366cc y se convierte en hsl(220, 60%, 50%). El formato de 4 dígitos funciona igual, con el último dígito como alfa.
¿Cómo maneja la transparencia (HSLA)?
Un código hex de 8 dígitos lleva el alfa en su último par. Ese byte (0-255) se divide entre 255 para obtener el alfa de 0 a 1 que espera hsla(), redondeado a tres decimales, así que #3366cc80 se convierte en hsla(220, 60%, 50%, 0.502).
¿Puede convertir HSL de vuelta a HEX?
Sí. Usa la fila de HSL a HEX bajo el resultado: introduce el tono (0-360) más la saturación y la luminosidad (0-100%) y devuelve el código hex al instante. Los valores fuera de rango se ajustan al intervalo permitido.
¿Por qué usar HSL en vez de hex?
HSL se lee de forma humana: puedes aclarar un color subiendo la L, apagarlo bajando la S, o cambiar su familia moviendo el H, todo sin tener que adivinar dígitos hex. Por eso es ideal para construir paletas coherentes, estados hover y design tokens.