HEX a HSL
Convierte cualquier color HEX a HSL y viceversa. Pega un código como #2f6b4f o mueve los controles de tono, saturación y luminosidad, y copia el HSL, el HEX, el RGB o un fragmento de CSS listo para usar.
Última actualización:
Acepta #rgb, #rgba, #rrggbb y #rrggbbaa, con o sin #.
Escala de luminosidad Mismo tono y saturación, haz clic para cargar
Cómo usar HEX a HSL
- Pega un código HEX como #2f6b4f o #fa0 y pulsa Convertir (también se convierte mientras escribes).
- Lee el valor HSL en los resultados, por ejemplo hsl(152, 39%, 30%), junto con el HEX y el RGB.
- Ajusta el color con los controles H, S y L o con los campos numéricos; el código HEX se actualiza al instante.
- Añade transparencia con el control alfa para obtener hsla() y un HEX de 8 dígitos.
- Pulsa Copiar junto a cualquier formato, o copia el fragmento CSS con propiedades personalizadas listas para usar.
Fórmula de HEX a HSL
Tomemos #2f6b4f como ejemplo:
- Divide en canales y divide entre 255: R = 0x2f = 47 → 0.184, G = 0x6b = 107 → 0.420, B = 0x4f = 79 → 0.310.
- Máx = 0.420 (verde), mín = 0.184, diferencia d = 0.235.
- Luminosidad L = (máx + mín) ÷ 2 = 0.302 → 30%.
- Saturación S = d ÷ (1 − |2L − 1|) = 0.235 ÷ 0.604 = 0.390 → 39%.
- Tono cuando el verde es el máximo: H = 60 × ((B − R) ÷ d + 2) = 60 × (0.536 + 2) = 152°.
Resultado: hsl(152, 39%, 30%).
Colores comunes en HEX y HSL
| Color | HEX | HSL |
|---|---|---|
| Rojo | #ff0000 | hsl(0, 100%, 50%) |
| Naranja | #ffa500 | hsl(39, 100%, 50%) |
| Amarillo | #ffff00 | hsl(60, 100%, 50%) |
| Verde | #008000 | hsl(120, 100%, 25%) |
| Azul Dodger | #1e90ff | hsl(210, 100%, 56%) |
| Morado | #800080 | hsl(300, 100%, 25%) |
| Gris | #808080 | hsl(0, 0%, 50%) |
| Blanco | #ffffff | hsl(0, 0%, 100%) |
Cómo trabajar con HSL en CSS
- Tonos más oscuros y más claros: mantén el tono y la saturación y cambia solo la luminosidad. Baja L un 5–10% para los estados hover y active.
- Versiones apagadas: baja la saturación para que un color sea más sobrio sin cambiar su tono.
- Temas de color: guarda el tono, la saturación y la luminosidad como propiedades personalizadas de CSS y combínalos con
calc(), como en el fragmento de arriba. - Transparencia: añade un valor alfa, hsl(152 39% 30% / 0.5), en lugar de crear un color aparte.
Preguntas frecuentes
¿Cómo convertir HEX a HSL?
Divide el código HEX en rojo, verde y azul (00–FF cada uno) y divide entre 255. La luminosidad es (máx + mín) ÷ 2, la saturación es (máx − mín) ÷ (1 − |2L − 1|) y el tono depende de qué canal es el mayor. Para #2f6b4f el resultado es hsl(152, 39%, 30%).
¿Qué significa HSL?
Hue, saturation y lightness: tono, saturación y luminosidad. El tono es la posición en la rueda de color de 0 a 360 grados (0 rojo, 120 verde, 240 azul), la saturación es la intensidad del color del 0% (gris) al 100%, y la luminosidad va del 0% (negro), pasando por el 50% (color puro), al 100% (blanco).
¿Por qué HSL no vuelve a convertirse exactamente en el mismo HEX?
Los valores HSL suelen redondearse a números enteros, lo que puede desplazar un canal un paso al convertir de vuelta. La fila de HSL exacto muestra valores decimales que permiten volver al valor original con precisión.
¿Puedo usar HSL en CSS?
Sí. Todos los navegadores modernos admiten hsl(152, 39%, 30%) y la forma más reciente separada por espacios hsl(152 39% 30%), incluido un valor alfa como hsl(152 39% 30% / 0.5).
¿Por qué usar HSL en lugar de HEX?
HSL es más fácil de ajustar a mano: puedes hacer un color más claro, más oscuro o más apagado cambiando un solo número, y crear tonos coherentes para botones, estados hover y temas a partir de un único tono.
¿Qué es un color HEX de 8 dígitos?
Los dos últimos dígitos son el alfa (opacidad), de 00 (transparente) a FF (opaco). #2f6b4f80 es el mismo verde con aproximadamente un 50% de opacidad, igual a hsla(152, 39%, 30%, 0.5).
¿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.