Herramientas
Conversor HSL
Conversor HSL a HEX y RGB
Pasa colores de HSL a HEX o RGB y al revés, con vista previa del color.
#3b82f659, 130, 2460.2314, 0.5098, 0.9647217, 91%, 60%54.5 8.5 -65.554.5 66.0 277.50.64 -0.01 -0.150.64 0.15 264Sobre esta herramienta
HSL describe un color con tres números fáciles de razonar: tono en grados (0–360), saturación y luminosidad en porcentaje. Por eso es cómodo para crear variantes, como un botón más oscuro al pasar el ratón o un fondo más claro, con solo mover la luminosidad. Esta página convierte ese HSL al HEX o RGB que te piden el diseño o el código.
La herramienta arranca con «HSL» seleccionado y el ejemplo hsl(8, 100%, 55%). Cámbialo por tu color, con o sin el símbolo de porcentaje, y verás el HEX y el RGB destacados arriba de la tabla. La muestra de la izquierda se actualiza para que compruebes el tono. Para hacer el camino inverso, elige HEX o RGB en «Formato» y lee la fila de HSL.
Las cuentas se hacen en tu navegador, sin enviar nada. El resultado se redondea a valores enteros de 0 a 255 por canal, así que un HSL con decimales puede dar un HEX que, al volver a HSL, difiera en una décima. No se admite canal alfa (hsla) ni ángulos en otras unidades como turn o rad.
Preguntas frecuentes
¿Qué significan los tres valores de HSL?
H es el tono en grados sobre la rueda de color (0 rojo, 120 verde, 240 azul), S la saturación y L la luminosidad, ambos en porcentaje. Con L al 50 % obtienes el color más puro.
¿Cómo oscurezco un color manteniendo el tono?
Baja solo el valor L en HSL, por ejemplo de 55 % a 40 %, y convierte el resultado a HEX. El tono y la saturación se mantienen.
¿HSL y HSB/HSV son lo mismo?
No. Comparten el tono, pero HSB (el de Photoshop) usa brillo en lugar de luminosidad, y al 100 % de brillo no se obtiene blanco. Los valores no son intercambiables.
¿Por qué dos colores con la misma L no parecen igual de claros?
HSL no es perceptualmente uniforme: un amarillo y un azul con L 50 % se ven muy distintos. Si necesitas luminosidad percibida coherente, usa OKLCH, que también aparece en la tabla.