Conversor de HEX a HSL
Convierte un código de color HEX en tono, saturación y luminosidad para crear fácilmente variantes más claras y más oscuras.
Entrada hex
Resultado · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
Cómo usarlo: HEX a HSL
- 1
Introduce un color
Escribe un código de color o elige un color con el selector: cada campo acepta el formato que muestra.
- 2
Mira la conversión
El resultado se actualiza al instante mientras escribes, junto con una vista previa en vivo del color.
- 3
Copia el código
Copia el valor que necesitas con un clic y pégalo en tu diseño, tu CSS o tu configuración de impresión.
Colores HEX y HSL
HEX es la forma de escribir colores en CSS y en las herramientas de diseño: un # seguido de tres pares de dígitos hexadecimales para el rojo, el verde y el azul. HSL describe el mismo color tal como lo imaginamos: el tono como un ángulo en la rueda de colores de 0 a 360°, y la saturación y la luminosidad en porcentaje.
Convertir a HSL es práctico cuando necesitas variaciones de un color: mantén el tono y cambia la luminosidad para obtener variantes más claras y más oscuras para estados hover, fondos y bordes. Los navegadores entienden las dos notaciones, por ejemplo hsl(342, 100%, 62%). Pega un código de tres o seis dígitos, con o sin el signo #, y copia el resultado hsl(); también se muestran RGB, HSV y CMYK.
Todo se ejecuta localmente en tu navegador: tus imágenes nunca se suben a un servidor.