Convertir hex a HSL

Qué es convertir hex a HSL

Un código hex es la forma más habitual de escribir un color en la web: tres (o cuatro) parejas de dígitos hexadecimales que representan la cantidad de rojo, verde y azul —y, opcionalmente, la opacidad—, como #3498DB. HSL describe ese mismo color de otra manera: como un punto en una rueda de color, definido por el tono (la posición angular, de 0 a 360 grados), la saturación (cuán intenso o apagado es) y la luminosidad (cuán claro u oscuro). Convertir hex a HSL no cambia el color, solo cambia el sistema de coordenadas con el que lo describes.

Esta herramienta acepta hex de 3, 4, 6 u 8 dígitos, con o sin el símbolo #, y calcula al momento el tono, la saturación y la luminosidad que le corresponden, mostrando el resultado como un valor hsl() listo para pegar en una hoja de estilos.

Es la dirección de conversión que se usa cuando ya tienes un color fijado —el azul de una marca, el verde de un botón— y quieres razonar sobre él en términos que se entienden de forma intuitiva, en lugar de tres pares de dígitos hexadecimales.

Cómo convertir hex a HSL

1. Escribe el código hex. Pégalo tal cual lo tengas —con o sin #, en 3, 4, 6 u 8 dígitos— en el campo de texto; el resultado se actualiza mientras escribes, sin botón de enviar ni archivos que subir.
2. Copia el valor HSL. El muestrario grande y el valor hsl() aparecen justo debajo; haz clic en cualquiera de los dos para copiarlo al portapapeles.
3. Consulta los otros formatos. La fila de otros formatos muestra el mismo color en hex y en RGB, cada uno con su propio clic para copiar, junto con un enlace al color con nombre más cercano y al selector de color completo.

Para qué sirve esta conversión

Convertir de hex a HSL sirve, sobre todo, para ajustar un color sin perder de vista cuál era. Si tienes el azul de marca #3498DB y necesitas una variante más clara para un estado hover o una más oscura para un texto sobre fondo claro, HSL te permite mover solo la luminosidad —subirla o bajarla unos puntos— y mantener exactamente el mismo tono y la misma saturación.

También sirve para entender de un vistazo qué tan saturado o qué tan claro es un color que solo conocías como una cadena de dígitos: un hex no dice si un color es pastel o vivo, apagado o brillante, pero su HSL sí, de forma inmediata.

Y una vez decidida la variante en HSL, la misma página te devuelve también el hex correspondiente en la fila de otros formatos, así que no hace falta convertir de vuelta a mano.

Qué tan exacta es esta conversión

La transformación matemática entre RGB —y por tanto hex— y HSL no pierde nada: convirtiendo los 16.777.216 colores sRGB posibles a HSL con precisión completa y volviéndolos a convertir a RGB, el color coincide con el original en los 16.777.216 casos, sin una sola excepción. El problema no está en la fórmula.

Está en la pantalla: como toda herramienta que muestra HSL, esta redondea el tono a grados enteros y la saturación y la luminosidad a porcentajes enteros. Partiendo de ese HSL redondeado y volviendo a hex, solo se recupera el color original en 1.775.570 de los 16.777.216 colores posibles —un 10,58%—; los otros 15.001.646 (89,42%) vuelven como un hex ligeramente distinto al que escribiste.

No es un defecto de esta calculadora, es aritmética: el HSL entero solo admite 360 × 101 × 101 combinaciones —3.672.360— para describir 16.777.216 colores, así que al menos un 78,11% tiene que compartir etiqueta con otro. El desvío medido, 89,42%, está por encima de ese mínimo, como cabía esperar, y suele ser pequeño: un punto en el canal más afectado en el 54,38% de los colores, dos puntos en el 32,06%; el peor caso registrado fue #02E4E6, que se muestra como hsl(181, 98%, 45%) y, al reconvertir, da #02DFE3.

Por eso conviene usar el HSL que entrega esta página para razonar sobre el color —subir o bajar la luminosidad, girar el tono— y quedarte con el hex original como referencia, en lugar de encadenar varias conversiones de ida y vuelta a través del valor redondeado. Y si el hex de partida es un gris exacto (rojo, verde y azul iguales), el tono no tiene ninguna dirección definida en la rueda de color; esta herramienta, siguiendo la convención habitual, lo muestra como 0.

Por qué es gratis

Toda la conversión ocurre en tu navegador: el código hex nunca sale de la página ni se envía a ningún servidor, así que no hay nada que subir ni que esperar. Por eso la herramienta no pide cuenta, no añade marca de agua y no impone un límite de usos: es un cálculo, no un servicio que cueste ejecutar.