Resultado
Esta página no tiene parte de servidor en absoluto. La tabla que pegas la procesa JavaScript dentro de tu propio navegador, el gráfico se dibuja en un elemento canvas de tu máquina y el archivo de exportación se arma localmente. Nada se sube, se almacena ni se escribe en ningún registro. Puedes desconectar la red después de cargar la página y todo seguirá funcionando: es la forma más sencilla de comprobarlo tú mismo.
Datos y límites del método
| Tono (H) | De 0 a 360 grados — posición en el círculo cromático |
|---|---|
| Saturación (S) | De 0% (gris) a 100% (color puro) |
| Luminosidad (L) | De 0% (negro) a 100% (blanco), 50% es el color "puro" sin negro ni blanco mezclado |
| Redondeo | Los tres valores se redondean a números enteros |
Cuándo induce a error
- La conversión HEX → HSL es una fórmula matemática exacta sin pérdida de información: convertir de vuelta HSL → HEX a partir de esos mismos valores redondeados puede producir un código HEX que difiera en 1 unidad en algún canal debido al redondeo acumulado de números intermedios.
- Para colores puramente grises (R=G=B), el tono no está matemáticamente definido (la saturación es cero, y cualquier valor de tono se ve visualmente igual de gris) — el conversor muestra un tono de 0° en ese caso, que es una convención técnica, no un error.
- Los tres valores se redondean a números enteros por legibilidad — si se necesita mayor precisión (por ejemplo, para una reproducción exacta en un sistema de diseño), usa directamente los valores intermedios no enteros de la fórmula matemática.
- Al igual que RGB y HEX, HSL no lleva información de perfil de color — es simplemente otra forma de describir los mismos números, no un espacio de color distinto con distinta precisión perceptual.
Cómo se calcula
El código HEX se convierte primero a RGB normal (tres números de 0 a 255), como en el conversor de HEX a RGB.
Los valores RGB se normalizan al rango de 0 a 1 (se dividen entre 255). La luminosidad es el promedio entre el canal máximo y el mínimo.
Si los canales máximo y mínimo son iguales (el color es gris), la saturación y el tono son cero. En caso contrario, la saturación se calcula a partir de la diferencia entre el máximo y el mínimo en relación con la luminosidad, y el tono se calcula según cuál de los tres canales (R, G o B) sea el máximo.
Las fracciones resultantes de tono, saturación y luminosidad se convierten a grados (0–360) y porcentaje (0–100) y se redondean a números enteros.
Preguntas y respuestas
¿Por qué un color gris muestra un tono de 0°?
Para un color completamente gris (donde R=G=B), el tono no está matemáticamente definido porque la saturación es cero — cualquier valor de tono se ve igual con saturación cero. 0° es solo una convención, no un valor con significado.
¿Qué significa una luminosidad del 50%?
Es el color "puro" de ese tono y saturación, sin negro (más cerca del 0%) ni blanco (más cerca del 100%) mezclado.
¿Es HSL más preciso que HEX?
No, es solo otra forma de escribir el mismo color — ambos formatos describen el mismo punto en el espacio de color, solo con coordenadas distintas.
¿Se envían mis datos a algún sitio?
No, todo el cálculo se ejecuta en tu navegador.