Convertidor de HSL a HEX
Convierte cualquier color HSL o HSLA a código HEX. Arrastra los controles de tono, saturación, luminosidad y alfa o pega un valor CSS como hsl(152, 39%, 30%), y copia el código HEX, RGB o CSS moderno.
Última actualización:
Acepta hsl(), hsla(), la sintaxis moderna hsl(152 39% 30% / 50%) y números sin formato.
Escala de luminosidad (mismo tono y saturación)
Cómo usar Convertidor de HSL a HEX
- Ajusta el tono (0–360°) y luego la saturación y la luminosidad (0–100%) con los controles o las casillas numéricas.
- O pega un color CSS como hsl(152, 39%, 30%), hsla(210, 60%, 45%, 0.5) o hsl(210 60% 45% / 50%).
- Ajusta el alfa si necesitas transparencia; el código HEX pasa a tener 8 dígitos.
- Copia el resultado: código HEX, RGB/RGBA o hsl() de CSS.
- Elige una versión más clara u oscura en la escala de luminosidad para crear colores de hover o de fondo.
Fórmula de HSL a HEX
HSL describe un color por su tono (su posición en la rueda de color, 0–360°), su saturación (del 0% gris al 100% vivo) y su luminosidad (0% negro, 50% color puro, 100% blanco). Para obtener HEX, primero se convierte el color a RGB con la fórmula estándar de la especificación CSS Color, usando S y L como fracciones de 0 a 1:
- Croma: C = (1 − |2L − 1|) × S
- Segundo componente: X = C × (1 − |(H ÷ 60) mod 2 − 1|), y m = L − C ÷ 2
- Por sector de tono: 0–60° → (C, X, 0); 60–120° → (X, C, 0); 120–180° → (0, C, X); 180–240° → (0, X, C); 240–300° → (X, 0, C); 300–360° → (C, 0, X)
- Suma m a cada componente, multiplica por 255 y redondea: eso es RGB.
- Escribe R, G y B como dos dígitos hexadecimales cada uno: #RRGGBB. Un valor alfa se convierte en un cuarto par (alfa × 255).
Ejemplo: hsl(152, 39%, 30%) da C = 0.234, X ≈ 0.125, m = 0.183, así que RGB ≈ (47, 106, 78) = #2F6A4E.
Colores HSL comunes en HEX
| Color | HSL | HEX | RGB |
|---|---|---|---|
| Rojo | hsl(0, 100%, 50%) | #FF0000 | 255, 0, 0 |
| Naranja | hsl(30, 100%, 50%) | #FF8000 | 255, 128, 0 |
| Amarillo | hsl(60, 100%, 50%) | #FFFF00 | 255, 255, 0 |
| Verde | hsl(120, 100%, 50%) | #00FF00 | 0, 255, 0 |
| Verde bosque | hsl(152, 39%, 30%) | #2F6A4E | 47, 106, 78 |
| Cian | hsl(180, 100%, 50%) | #00FFFF | 0, 255, 255 |
| Azul cielo | hsl(200, 80%, 60%) | #47B4EB | 71, 180, 235 |
| Azul | hsl(240, 100%, 50%) | #0000FF | 0, 0, 255 |
| Morado | hsl(270, 60%, 50%) | #8033CC | 128, 51, 204 |
| Magenta | hsl(300, 100%, 50%) | #FF00FF | 255, 0, 255 |
| Rosa | hsl(330, 80%, 75%) | #F28CBF | 242, 140, 191 |
| Gris | hsl(0, 0%, 50%) | #808080 | 128, 128, 128 |
| Negro | hsl(0, 0%, 0%) | #000000 | 0, 0, 0 |
| Blanco | hsl(0, 0%, 100%) | #FFFFFF | 255, 255, 255 |
Consejos para trabajar con HSL
- Mantén fijos el tono y la saturación y cambia solo la luminosidad para crear una paleta coherente de tintes y sombras. La escala de luminosidad de arriba hace exactamente eso.
- Girar el tono 180° da el color complementario; los saltos de 120° dan un esquema triádico. La rueda de color muestra todas las armonías.
- La misma luminosidad HSL no significa el mismo brillo percibido: el amarillo al 50% parece mucho más claro que el azul al 50%. Comprueba los colores de texto con el verificador de contraste de color.
- Para la conversión inversa, usa HEX a HSL.
Preguntas frecuentes
¿Cómo se convierte HSL a HEX?
Primero convierte HSL a RGB: C = (1 − |2L − 1|) × S, X = C × (1 − |(H / 60) mod 2 − 1|), m = L − C / 2. Según el sector de 60° en que esté el tono, (R', G', B') es una combinación de C, X y 0; después R = (R' + m) × 255, y así sucesivamente. Redondea cada valor y escríbelo como dos dígitos hexadecimales para obtener #RRGGBB.
¿Cuánto es hsl(0, 100%, 50%) en HEX?
Es rojo puro, #FF0000. En HSL, una luminosidad del 50% da la versión más viva de un tono; el 0% siempre es negro y el 100% siempre es blanco.
¿Cómo convierto HSLA a HEX con transparencia?
Ajusta el control de alfa o incluye el alfa en el valor pegado. El alfa se convierte en un cuarto par de dígitos hexadecimales: alfa × 255, redondeado. Por ejemplo, hsla(0, 100%, 50%, 0.5) se convierte en #FF000080.
¿Por qué dos valores HSL dan el mismo código HEX?
HEX guarda números RGB enteros de 0 a 255, mientras que HSL puede tener decimales. Pequeñas diferencias en HSL pueden redondearse a los mismos valores RGB, así que al volver de HEX a HSL puedes obtener números ligeramente distintos a los iniciales.
¿Es mejor HSL que HEX en CSS?
Ambos describen los mismos colores sRGB y son compatibles en todas partes. HSL es más fácil de ajustar a mano (cambias la luminosidad para un estado hover y mantienes el tono), mientras que HEX es más corto y habitual en herramientas de diseño y guías de marca.
¿Qué unidades de tono puedo pegar?
Los números sin unidad y deg son grados. También puedes usar turn (1turn = 360°), rad y grad, como permite CSS.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.