Convertir HEX a HSL
HEX a HSL convierte un color hexadecimal en tono, saturación y luminosidad. Los tres canales se escalan a 0–1 y, a partir de ahí, el mayor y el menor producen la respuesta: la luminosidad es su punto medio, la saturación es la distancia entre ellos y el tono es cuál de los canales es el mayor y por cuánto. El resultado es exacto y reversible — pero la luminosidad de HSL no es la luminosidad que percibe tu ojo, algo que conviene saber antes de construir nada sobre ella.
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 HEX a HSL?
HSL es otro conjunto de coordenadas para los mismos tres bytes. Escala cada canal a 0–1, encuentra el mayor y el menor, y lo demás se sigue solo: la luminosidad es su punto medio, el croma es la distancia entre ellos, y el tono queda determinado por qué canal es el mayor y cómo están los otros dos respecto a él.
De dónde sale el número del tono
La rueda se divide en seis sectores de 60°, uno por cada color primario y secundario. Si el rojo es el canal mayor, estás en el sector del rojo, y la posición dentro de él la fija la distancia a la que el verde adelanta o va por detrás del azul. Para #ff8800 : el rojo es el máximo, el verde es 0.533, el azul es 0, así que el tono es (0.533 − 0) / 1 × 60 = 32°. Cada cálculo de tono que has visto es esto, escrito de forma más compacta.
La saturación es relativa, lo que sorprende a la gente
El mismo croma produce un número de saturación distinto según la luminosidad, porque cambia el denominador: es chroma / (1 − |2L − 1|). Un color muy oscuro o muy claro tiene poco espacio para el croma, así que una diferencia absoluta pequeña entre canales se reporta como una saturación alta. Por eso #010200 sale como 100% saturado — es casi negro, y dentro de lo posible a esa luminosidad es todo lo colorido que puede ser.
La luminosidad de HSL no es la luminosidad percibida
Esto es lo que vale la pena llevarse. hsl(60 100% 50%) es amarillo y hsl(240 100% 50%) es azul, y HSL dice que ambos son 50% de luminosidad. Uno es casi blanco para el ojo y el otro casi negro. La fórmula pondera los tres canales por igual, y el ojo no — el verde aporta unas diez veces más al brillo percibido que el azul.
La consecuencia práctica: una escala de tintes construida escalonando la luminosidad de HSL tiene pasos que se ven desiguales por muy iguales que sean los números, y una paleta rotada por los tonos de HSL sale con algunos colores encandiladores y otros invisibles. Si el valor va a alimentar una escala, una mezcla o cualquier juicio sobre el brillo, usa OKLCH — está en la salida de abajo, y todos los navegadores actuales lo aceptan en CSS.
Un color hexadecimal
#ff8800
Tono, saturación, luminosidad
hsl(32 100% 50%) max 255 / 255 = 1.000 (red) min 0 / 255 = 0.000 (blue) lightness = (1 + 0) / 2 = 50% chroma = 1 − 0 = 1.000 → saturation 100%
¿Qué opciones y casos límite admite Convertir HEX a HSL?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| Tono | 0–360deg | 0 = rojo | Posición en la rueda. 120 es verde, 240 es azul. Es cíclico, así que 370 y 10 son el mismo color. |
| Saturación | 0–100% | — | Croma relativo al máximo que permite esta luminosidad. 0% es gris en cualquier matiz. |
| Luminosidad | 0–100% | — | 0% es negro y 100% es blanco en cualquier matiz. 50% es donde un matiz está más saturado. |
| Alfa | 0–1 | 1 | Se escribe después de una barra en la sintaxis moderna: hsl(32 100% 50% / 50%). |
| hsl() vs hsla() | — | igual | hsl() acepta alpha ahora. hsla() es un alias heredado y no está obsoleto. |
| Gris | S = 0 | — | Sin saturación, el matiz es arbitrario y noporta información. Se reporta como 0 aquí en lugar de como ruido. |
| Ida y vuelta | exacto | — | De Hex a HSL y vuelta devuelve el mismo color. La fórmula es un cambio de coordenadas, no una aproximación. |
| OKLCH | alternativa | — | Misma idea: un ángulo de matiz, un croma y una luminosidad, pero con un eje de luminosidad que coincide con lo que el ojo percibe. |
Preguntas frecuentes
¿Cómo convierto de hex a HSL a mano?
Convierte el hex en tres canales de 0–255, divide cada uno entre 255 y toma el mayor y el menor. La luminosidad es (max + min) / 2. El croma es max − min; si es cero, el color es gris y ya terminaste. Si no, la saturación es chroma / (1 − |2L − 1|), y el tono sale de qué canal era el mayor: rojo da ((G − B) / chroma) × 60, verde da ((B − R) / chroma + 2) × 60, azul da ((R − G) / chroma + 4) × 60.
¿Por qué un color casi negro muestra 100% de saturación?
Porque la saturación de HSL es relativa al croma máximo disponible a esa luminosidad, no absoluta. A 1% de luminosidad casi no hay espacio para el croma, así que una diferencia mínima entre canales es todo lo colorido que esa luminosidad permite — y se reporta como 100%. Se comporta correctamente; simplemente mide algo distinto de lo que la mayoría espera.
¿La luminosidad de HSL es lo mismo que el brillo?
No, y ahí está la trampa. HSL pondera los tres canales por igual, mientras que el ojo pondera el verde mucho más que el azul. hsl(60 100% 50%) y hsl(240 100% 50%) reclaman la misma luminosidad; uno es un amarillo encandilador y el otro es casi negro. Para cualquier cosa que dependa del brillo percibido — una escala de tintes, una decisión de contraste, una mezcla — OKLCH da la respuesta correcta donde HSL da una respuesta errónea pero plausible.
¿Debería usar HSL en CSS?
Está bien para lo que hace bien: ajustar un tono, desaturar algo o escribir un color que quieras poder leer de un vistazo. Es la herramienta equivocada para generar una escala o interpolar entre dos colores, porque su eje de luminosidad no es perceptual. Esos trabajos quieren oklch(), que todos los navegadores actuales admiten.
¿Convertir de hex a HSL pierde precisión?
La conversión en sí es exacta — es un cambio de coordenadas sobre los mismos tres bytes. Lo que pierde precisión es la impresión: un tono redondeado al grado y una saturación a la décima de porcentaje no siempre se convierten de vuelta al hex idéntico. Los valores de aquí se imprimen con precisión suficiente para el viaje de ida y vuelta, y si necesitas un viaje de ida y vuelta exacto garantizado, quédate con el hex.
¿Cómo aclaro u oscurezco un color sin alterar su tono?
Conviértelo a HSL y mueve solo la luminosidad. Mantener fijo el tono y la saturación mientras se escalona la luminosidad — 50%, 60%, 70% — es lo que produce una escala de tintes que todavía se lee como un solo color. Ajustar un hex a mano no puede hacer esto: sumar la misma cantidad a los tres canales cambia el tono además del brillo.
¿Qué herramientas relacionadas debería usar después?
- Convertir coloresConvierte entre HEX, RGB, HSL, HSV, OKLCH y CMYK en ambos sentidos
- Convertir HEX a RGBPasa un color hex a sus valores rgb(), incluido el alfa de 8 dígitos
- Convertir RGB a HEXPasa valores rgb() o rgba() a color hex, en 3, 6 u 8 dígitos
- Convertir HSL a HEXConvierte tono, saturación y luminosidad en un color hex