Convertidor de HEX a HSL
Pega un valor HEX y lee su equivalente en HSL, con una muestra para ver lo que estás convirtiendo y la notación restante al lado. Usa los selectores para cambiar de dirección o de destino. Todo ocurre en tu navegador.
- HSL
- hsl(201, 100%, 53%)
El texto lo procesa tu propio navegador y no sale de tu dispositivo: esta página no tiene servidor al que enviarlo.
El mismo color en: RGB HSL a HEX
Cómo funciona
El valor se descompone en los canales de rojo, verde, azul y alfa, y se reescribe en HSL. La conversión es exacta en ambos sentidos para colores opacos, y el alfa se mantiene cuando la entrada lo lleva, así un hex de ocho dígitos sigue siendo translúcido como rgba() o hsla().
hsl() es la que se edita a mano: mantienes el tono, mueves la luminosidad y obtienes un tinte o una sombra coherentes del mismo color en vez de adivinar canales nuevos.
Preguntas frecuentes
¿La conversión de HEX a HSL pierde información?
Para cualquier color que puedas escribir en HEX, no: ambas notaciones describen el mismo punto sRGB, así que ir y volver devuelve el valor de partida. El redondeo solo aparece en pantalla, donde los porcentajes de hsl() se muestran en números enteros por legibilidad.
¿Qué pasa con la transparencia?
Se conserva. Un hex de ocho dígitos como #ff000080 sale como rgba() o hsla() con el alfa en decimal, y un alfa de exactamente 1 se omite para darte la forma opaca corta en lugar de un 1 final inútil.
¿Por qué mi color se ve distinto en el navegador y en mi herramienta de diseño?
Casi siempre es el perfil de color, no un error de conversión. Las herramientas de diseño pueden trabajar en Display P3 o con el perfil del documento, mientras que un valor CSS a secas se interpreta como sRGB. Los números de aquí son exactos dentro de sRGB; si una exportación de gama amplia se ve más apagada en la página, lo que se ha movido es el perfil, no el cálculo.