Conversor de HEX a HSL: del código hexadecimal al modelo perceptivo
¿Qué hace exactamente esta página?
El conversor de HEX a HSL acepta un código de color hexadecimal —tanto la forma completa de seis dígitos como #1E90FF o la abreviatura de tres dígitos como `#abc»— y devuelve al instante su equivalente en HSL, con el tono (hue) en grados (0‑360), la saturación en porcentaje (0‑100%) y la luminosidad (lightness) también en porcentaje (0‑100%). Además de la representación HSL, la página muestra el mismo color en otros cinco formatos: HEX (de vuelta), RGB, HSV, CMYK y LAB. Todos los campos se actualizan simultáneamente mientras editas el código de entrada.
La página solo admite códigos hexadecimales válidos de seis o tres dígitos, con o sin el símbolo # inicial. Si introduces un valor incorrecto, el error que aparece es: «Enter a hex color like #4f46e5 or #abc.» No hay canal alfa: el HEX estándar (seis o tres dígitos) no incluye transparencia, y HSL tampoco tiene componente alfa. Toda conversión trabaja exclusivamente con colores completamente opacos.
Cómo funcionan los códigos hexadecimales
Un código HEX de seis dígitos como #4F46E5 representa un color en el espacio RGB mediante tres pares de dígitos hexadecimales (base 16). El primer par (4F) codifica la componente roja, el segundo (46) la verde y el tercero (E5) la azul. Cada par se convierte a un valor decimal entre 0 y 255: 4F = 4×16 + 15 = 79, 46 = 4×16 + 6 = 70, E5 = 14×16 + 5 = 229. Así, #4F46E5 equivale a RGB(79, 70, 229).
La abreviatura de tres dígitos, como #abc, duplica cada dígito: a → aa, b → bb, c → cc. Por tanto #abc es equivalente a #AABBCC y produce RGB(170, 187, 204). Esta forma compacta da acceso a 4096 colores, mientras que la de seis dígitos permite 16,7 millones. La página acepta ambas y las expande internamente antes de la conversión.
La estructura de HSL: tono, saturación y luminosidad
HSL son las siglas en inglés de Hue (tono), Saturation (saturación) y Lightness (luminosidad). El tono se mide en grados sobre un círculo cromático: 0° es rojo, 60° amarillo, 120° verde, 180° cian, 240° azul, 300° magenta, y 360° vuelve a rojo. La saturación indica la intensidad del color, del 0% (gris) al 100% (color puro). La luminosidad expresa la claridad, del 0% (negro) al 100% (blanco), siendo el 50% el valor neutro donde el color se muestra sin añadir ni blanco ni negro.
Por ejemplo, el #4F46E5 del párrafo anterior se convierte en HSL(244°, 73%, 59%). Su tono está cerca del azul‑violeta (240°), con una saturación alta (73%) y una luminosidad media‑alta (59%). Si quisieras una versión más clara para un hover, bastaría aumentar la luminosidad al 75% manteniendo tono y saturación; HSL permite ese ajuste directo que HEX no facilita.
Por qué HSL es más intuitivo que HEX para tareas humanas
HEX es compacto y está muy difundido en CSS y herramientas de diseño, pero su estructura es opaca para la percepción humana. Saber que #4F46E5 es un azul violáceo exige memoria o consulta, y cambiar su luminosidad requiere modificar tres pares hexadecimales sin relación directa con el resultado visual. HSL, en cambio, fue diseñado para que podamos razonar sobre el color de forma natural.
Los desarrolladores front‑end que reciben un color HEX de un mockup pueden pasarlo a HSL para generar variantes con facilidad: un tema oscuro solo necesita bajar la luminosidad; un hover, subirla ligeramente o cambiar la saturación. Los diseñadores de UI/UX que piensan en términos de tono, saturación y luminosidad usan HSL para construir paletas complementarias, análogas o monocromáticas ajustando un solo parámetro. Los auditores de accesibilidad web encuentran HSL más manejable que HEX o RGB para verificar que el contraste cumple WCAG, porque la luminosidad se corresponde directamente con la claridad percibida.
La página entrega ese valor HSL listo para copiar, y de paso muestra el color en todos los demás formatos, por si necesitas RGB para una API, CMYK para una simulación de impresión, o LAB para cálculos de diferencia cromática.
La conversión matemática: de HEX a HSL
La página realiza la conversión dentro del navegador, sin enviar datos al servidor. El proceso comienza normalizando el HEX a seis dígitos (expandiendo si es abreviatura), convirtiendo cada par a un entero R, G, B entre 0 y 255, y luego dividiendo entre 255 para obtener valores en rango. A partir de ahí se aplican las fórmulas estándar de la transformación RGB → HSL.
Sean R', G', B' los valores normalizados (0‑1). Se calculan:
- Cmax = max(R', G', B')
- Cmin = min(R', G', B')
- Δ = Cmax − Cmin
La luminosidad L = (Cmax + Cmin) / 2 (después se expresa en porcentaje).
Si Δ = 0, la saturación S = 0 y el tono H no está definido (se asigna 0). En otro caso:
- S = Δ / (1 − |2L−1|) (para saturación en fracción; luego se pasa a porcentaje).
- El tono H depende de qué componente sea Cmax:
- Si Cmax = R': H = 60° × ((G' − B') / Δ mod 6)
- Si Cmax = G': H = 60° × ((B' − R') / Δ + 2)
- Si Cmax = B': H = 60° × ((R' − G') / Δ + 4)
El resultado H se ajusta al rango [0°, 360°]. En la página, el tono se redondea a un entero próximo; saturación y luminosidad se muestran con un decimal o entero según el valor.
Tomemos #1E90FF (Dodger Blue). RGB(30, 144, 255): R'=0.118, G'=0.565, B'=1. Cmax=1 (B), Cmin=0.118, Δ=0.882. L = (1+0.118)/2 = 0.559 → 55.9%. S = 0.882 / (1 − |2×0.559−1|) = 0.882 / 0.882 = 1 → 100%. H = 60 × ((0.118−0.565)/0.882 + 4) = 60 × ( −0.447/0.882 + 4) = 60 × (−0.507 + 4) = 60 × 3.493 ≈ 209.6°. Redondeado: hsl(210°, 100%, 56%). Coincide con lo que devuelve la página.
Relación con otros espacios de color y advertencias de gamut
Además de HEX y HSL, la página muestra el color en RGB, HSV, CMYK y LAB. RGB es el modelo nativo de las pantallas, con componentes de 0 a 255. HSV (tono, saturación, valor) es similar a HSL pero la tercera componente es el brillo máximo (value) en lugar de la luminosidad media, lo que produce resultados distintos para colores oscuros. CMYK es una estimación para impresión en cuatricromía; la ficha advierte que estos valores son una aproximación en pantalla y no deben usarse para impresión profesional sin calibración previa. LAB es un espacio perceptualmente uniforme diseñado por la CIE, útil para medir diferencias de color de forma objetiva.
Hay un caso límite importante: si introduces un color en otro espacio (como CMYK o LAB) y ese valor está fuera del gamut visible del monitor (RGB), la página ajusta el color al más próximo que pueda mostrarse. Al convertir ese color ajustado de vuelta a HEX, puede producirse un pequeño desplazamiento respecto al valor original. La ficha lo especifica claramente. En uso normal con HEX‑válido, no hay ajuste porque todo HEX representa un color dentro del gamut RGB.
Preguntas frecuentes
¿Qué pasa si introduzco un código HEX sin la #?
La página lo acepta igualmente, siempre que sean exactamente seis o tres caracteres hexadecimales. Si faltan o sobran, aparece el mensaje de error.
¿Por qué HSL(0°, 100%, 50%) y HSL(360°, 100%, 50%) son el mismo color?
Porque el tono es un círculo: 0° y 360° representan el mismo rojo puro. La página suele mostrar el valor normalizado entre 0 y 359, o 360 en algunos casos, pero ambos son equivalentes.
¿En qué se diferencia HSL de HSV?
En HSV el tercer componente es value (brillo máximo), que va de 0 a 100% sin relación directa con el blanco y negro. Por ejemplo, un amarillo puro en HSL tiene L=50%, pero en HSV tiene V=100%. La página ofrece ambos formatos para que puedas elegir según tus necesidades.
¿Funciona con códigos HEX de 8 dígitos con alfa?
No. La página solo admite códigos de seis o tres dígitos, sin transparencia. Si necesitas manejar alfa, deberías usar otro conversor que trabaje con HSLA o RGBA.
¿Puedo usar los valores HSL directamente en CSS?
Sí. CSS acepta la función hsl() con los mismos parámetros: tono, saturación y luminosidad. Ejemplo: background-color: hsl(210, 100%, 56%); es equivalente a background-color: #1E90FF;. Es práctica común definir variables CSS con HSL y luego modificar solo la luminosidad para temas.
¿Qué precisión tienen los valores CMYK que muestra la página?
Son una conversión matemática estándar desde RGB sin perfil de impresión. Para diseño gráfico profesional es necesario calibrar el monitor y usar perfiles ICC. La página advierte que no debe confiarse ciegamente en esos valores para impresión final.