Saltar al contenido principal
ToolsByUs

Convertir HSL a HEX

HSL a HEX convierte un ángulo de tono, una saturación y una luminosidad en un color hexadecimal. La saturación y la luminosidad fijan hasta dónde llega el color desde el gris; el ángulo de tono decide en qué sector de 60° de la rueda cae y, por tanto, qué canal es el mayor. Los tres canales salen como valores 0–255 y cada uno se convierte en dos dígitos hex.

Solo local
Entrada HSL

Introduce un color a la izquierda. Se aceptan valores hexadecimales con o sin almohadilla, rgb(), hsl(), oklch() y nombres de color CSS.

¿Cómo funciona Convertir HSL a HEX?

La conversión corre en tres pasos. El croma — la distancia del color al gris — sale de la saturación y la luminosidad juntas: (1 − |2L − 1|) × S. Ese factor es lo que hace que el croma se encoja hacia ambos extremos, porque un color a 5% o 95% de luminosidad tiene muy poco espacio para ser colorido.

El sector decide qué canal gana

Divide el tono entre 60 y caes en uno de seis sectores. Cada sector tiene un patrón fijo: un canal a croma pleno, uno a cero y uno subiendo entre ellos según lo avanzado que estés dentro del sector. A 32° estás apenas más allá de la mitad del camino del rojo hacia el amarillo, así que el rojo está a croma pleno, el verde a 0.53 de él y el azul a cero — que es el naranja de la parte superior de esta página.

Luego la luminosidad mueve el conjunto

Los tres valores hasta ahora describen el color en su punto más saturado. Sumar L − chroma / 2 a cada uno desplaza el conjunto arriba o abajo hasta la luminosidad pedida, sin cambiar las diferencias entre ellos — que es lo que mantiene el tono constante cuando cambia la luminosidad.

Por qué no se puede llegar a cualquier hex desde cualquier HSL

En realidad sí puedes: HSL y sRGB describen exactamente el mismo conjunto de colores y el mapeo es una biyección. Lo que no puedes es recuperar los mismos números HSL tras un viaje de ida y vuelta, porque el hex tiene 16.7 millones de valores y el HSL tal como se suele escribir — un tono en números enteros y una décima de porcentaje — tiene menos. Dos valores HSL cercanos pueden redondear al mismo hex, y convertir ese hex de vuelta da el que la fórmula produzca de los dos. Si importa la exactitud, quédate con el hex.

Una advertencia sobre construir escalas así

Un patrón muy común es tomar un color de marca, convertirlo a HSL y generar una paleta escalonando la luminosidad de 95% a 10%. Produce números parejos y colores desparejos: la luminosidad de HSL pondera los tres canales por igual, y el ojo no, así que los amarillos de la escala se ven mucho más claros que los azules con el mismo número. Si es eso lo que has venido a hacer, genera la escala en OKLCh — es lo que hace el selector de colores de este sitio, y los pasos salen tan parejos como se miden.

Tono, saturación, luminosidad

hsl(32 100% 50%)

El color hexadecimal

#ff8800

chroma      = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000
sector      = 32 / 60 = 0.53   (red → yellow)
channels    = 1.000, 0.533, 0.000
→ 255, 136, 0  →  ff 88 00

¿Qué opciones y casos límite admite Convertir HSL a HEX?

Referencia técnica y opciones
ParámetroTipoValor predeterminadoComportamiento y casos límite
hsl(32 100% 50%)modernaespaciosLa sintaxis CSS actual. La unidad de tono es opcional; 32 y 32deg son lo mismo.
hsl(32, 100%, 50%)antiguacomasSigue siendo válida en todas partes. No está obsoleta y no hay razón para reescribirla.
hsla(…)alias—La misma función que hsl(), que ahora toma directamente el alfa.
Tonocualquier númerose ajusta370 es 10, y −30 es 330. El ángulo es modular, por lo que los valores fuera de rango son válidos en lugar de errores.
Saturación 0%—grisProduce un gris con la luminosidad dada, sin importar el tono establecido.
Luminosidad 0% / 100%—negro / blancoAmbas colapsan cada tono y saturación en el mismo color.
Alfa0–1 o %1Se añade como un par hexadecimal cuarto. 0.5 se convierte en 80.
Fuera de rango—limitadoLa saturación y la luminosidad se limitan a 0–100 en lugar de ser rechazadas, como hace CSS.

Preguntas frecuentes

¿Cómo convierto de HSL a hex a mano?

Calcula el croma como (1 − |2L − 1|) × S con L y S como fracciones. Divide el tono entre 60 para encontrar el sector y calcula el canal intermedio como croma × (1 − |(hue/60 mod 2) − 1|). Asigna el croma, ese valor intermedio y cero a rojo, verde y azul según el sector, suma L − chroma/2 a los tres, multiplica por 255 y escribe cada uno como dos dígitos hex.

¿hsl(32 100% 50%) siempre da el mismo hex?

Sí. La conversión es determinista e igual en todos los navegadores y herramientas; hsl(32 100% 50%) es #ff8800 en todas partes. Lo que no está garantizado es el viaje de vuelta — convertir #ff8800 de regreso puede dar un tono de 31.9 según cómo redondee la herramienta, porque el hex contiene más valores distintos que un tono redondeado a número entero.

¿Por qué cambiar la luminosidad en HSL parece cambiar también el tono?

No cambia el número del tono, pero cambia lo que ves, porque el eje de luminosidad de HSL no es perceptual. Pasar de 50% a 70% de luminosidad en un azul parece un cambio mucho más pequeño que el mismo movimiento en un amarillo, así que un conjunto de colores que comparten número de luminosidad no parece que compartan la luminosidad. Trabajar en OKLCh elimina el efecto por completo.

¿Cuál es una buena forma de construir una escala de color a partir de un valor HSL?

No escalonando la luminosidad de HSL, que es el consejo habitual y produce pasos visiblemente desparejos. Convierte a OKLCh, escalona su luminosidad sobre una curva, mantén el tono y afina el croma en ambos extremos para que los pasos claros no sean fluorescentes y los oscuros no brillen. El selector de colores de este sitio hace exactamente eso y te entregará los once valores y las variables CSS.

¿Puedo escribir un tono por encima de 360 o por debajo de 0?

Sí, y CSS lo acepta. El ángulo de tono es modular, así que 370deg es 10deg y −30deg es 330deg. Es genuinamente útil en una animación o una paleta generada donde un ángulo se va incrementando y preferirías no escribir el salto de vuelta tú mismo.

¿Por qué otro conversor me da un hex con un dígito distinto?

Redondeo. HSL es continuo y cada canal hex tiene solo 256 pasos, así que un canal que cae en 127.5 tiene que irse por un lado o por otro; este conversor redondea al más cercano, y una herramienta que trunca aterriza uno más abajo. Los dos colores son indistinguibles en pantalla — la diferencia es 1/255 de un canal —, pero no son la misma cadena.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas