Cómo convertir de HEX a HSL
Convierte códigos de color HEX a HSL al instante. Escribe un valor HEX o RGB, o usa los controles deslizantes, y todos los formatos se actualizan a la vez, con vista previa, la fórmula y una tabla de colores comunes.
- Escribe o pega un valor HEX, por ejemplo #3B82F6, en su campo de arriba.
- El valor HSL se actualiza al instante: #3B82F6 es hsl(217, 91%, 60%). También se actualizan los demás formatos y la vista previa del color.
- Copia el valor HSL en tu CSS, tu herramienta de diseño o tu código.
La fórmula de HEX a HSL
Escala los canales rojo, verde y azul a 0-1. La luminosidad es la media del canal más alto y el más bajo, la saturación crece con la diferencia entre ambos y el tono es la posición del canal dominante en la rueda de color de 360°:
#3B82F6 → hsl(217, 91%, 60%)
Colores comunes en HEX y HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
Qué son HEX y HSL
Un color HEX es una # seguida de seis dígitos hexadecimales: dos para el rojo, dos para el verde y dos para el azul, de 00 (nada) a FF (máximo). Es la forma más común de escribir colores en CSS y en herramientas de diseño.
HSL describe un color por su tono (un ángulo de 0 a 360 en la rueda de color), saturación y luminosidad (ambas en %). Facilita crear variantes más claras, más oscuras o más apagadas del mismo color.
Preguntas frecuentes
¿Cambia el color al convertirlo?
HEX, RGB y HSL describen los mismos colores de pantalla, así que la conversión entre ellos es exacta (HSL se redondea a números enteros). CMYK es para imprenta: el resultado impreso depende del perfil de color de la impresora, así que toma los valores CMYK de pantalla como punto de partida.
¿Puedo usar el resultado en CSS?
Sí. CSS acepta directamente hex (#3B82F6), rgb(59, 130, 246) y hsl(217, 91%, 60%). CMYK no es un formato de CSS; se usa en imprenta y en programas de diseño.
¿Y la transparencia?
Añade un valor alfa: hex de 8 dígitos (#3B82F680) o rgba()/hsla() en CSS. El conversor trabaja con el color sólido; el valor alfa es el mismo en todos los formatos.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.