Conversor de HEX a HSL

El conversor de HEX a HSL transforma códigos hexadecimales como #3B82F6 en valores HSL como hsl(217, 91%, 60%). HSL describe un color por su Tono (el color en sí, 0–360°), su Saturación (qué tan vivo es, 0–100%) y su Luminosidad (qué tan brillante es, 0–100%), un modelo mucho más cercano a cómo las personas piensan el color que los dígitos HEX en bruto.

Una vez que el color está en HSL, crear una paleta es intuitivo: mantén el mismo tono y mueve la luminosidad para obtener tintes y sombras, o cambia solo la saturación para hacerlo más intenso o más apagado.

Por qué convertir a HSL

Tintes y sombras

Sube o baja la luminosidad para generar variantes más claras y más oscuras consistentes de un color base.

Ajustar la intensidad

Modifica solo la saturación para que un color resalte o para suavizarlo en fondos y estados de la interfaz.

Crear paletas

Rota el tono en pasos iguales para crear esquemas de color armónicos y bien distribuidos.

Cómo convertir de HEX a HSL

Introduce el código HEX

Escribe o pega un valor HEX, con o sin #. Se admiten tanto el formato abreviado de 3 dígitos (#F00) como el de 6 dígitos (#FF0000).

Lee el resultado HSL

El valor HSL aparece al instante mientras escribes, y la muestra en vivo se actualiza para que confirmes el color visualmente.

O elige un color

Haz clic en la muestra para abrir el selector nativo y elegir un color visualmente: los campos HEX y HSL se actualizan por ti.

Copia y reutiliza

Copia la cadena hsl() para tu CSS. El panel inferior también muestra el color como HEX, RGB, HSV y CMYK.

Características

Entender los canales HSL

Canal	Rango	Qué controla
Tono	0–360°	La posición del color en la rueda: 0° rojo, 120° verde, 240° azul.
Saturación	0–100%	Intensidad: 0% es gris, 100% es la versión más viva.
Luminosidad	0–100%	Brillo: 0% es negro, 50% es el tono puro, 100% es blanco.

Conversión instantánea

Resultados en vivo, en el navegador, que se actualizan mientras escribes — sin recargas ni envíos a un servidor.

Abreviatura y mayúsculas

El HEX de 3 dígitos se expande automáticamente y se ignoran las mayúsculas.

Vista previa y selector

Una muestra en vivo más un selector de color integrado para elegir visualmente.

Todos los formatos a la vez

HEX, RGB, HSL, HSV y CMYK mostrados juntos para cada color.

Preguntas frecuentes

¿Qué es HSL?

HSL significa Tono, Saturación y Luminosidad. El tono es el tipo de color (0–360°), la saturación es qué tan vivo es (0–100%) y la luminosidad es qué tan brillante es (0–100%).

¿Por qué usar HSL en lugar de HEX o RGB?

HSL es más intuitivo para las personas. Puedes crear sombras más claras u oscuras cambiando solo la luminosidad, y versiones más intensas o suaves cambiando solo la saturación, sin adivinar dígitos HEX.

¿HSL es compatible con CSS?

Sí. Todos los navegadores modernos admiten plenamente las funciones de color hsl() y hsla(), así que puedes pegar la salida directamente en una hoja de estilos.

¿Convertir de HEX a HSL pierde precisión?

Los valores HSL se redondean a números enteros para mayor legibilidad, así que al convertir de vuelta puede haber una diferencia de una unidad por canal. El color visible es prácticamente idéntico.

¿Cómo creo una versión más clara de mi color?

Mantén el mismo tono y saturación y aumenta el porcentaje de luminosidad. Para una sombra más oscura, redúcelo — por esto HSL es tan práctico para paletas.