Convertidor de HSL a HEX

¿Qué diferencia a esta página de otras?

Esta página está dedicada exclusivamente a la conversión de HSL a HEX. No es un conversor genérico ni una paleta interactiva; su único propósito es tomar un color expresado en matiz (hue), saturación y luminosidad —el modelo cromático más intuitivo para las personas— y devolver su equivalente hexadecimal, el formato que domina en CSS y en herramientas de diseño. La conversión es directa y sin pérdidas dentro del espacio de color sRGB. No hay ajuste de gama porque HSL y HEX describen el mismo espacio RGB; no ocurre lo mismo con conversiones que involucran LAB o CMYK, donde los colores fuera de gama se recortan o se aproximan.

Mientras que un modelo como RGB obliga a pensar en mezclas de rojo, verde y azul, HSL permite manipular la luminosidad manteniendo el matiz intacto. Por eso es la opción preferida para generar paletas de colores, temas de interfaz y simulaciones de contraste. Y cuando esos diseños pasan a producción, el código HEX es el estándar que esperan los navegadores y las hojas de estilo. Esta página tiende ese puente sin rodeos.

Cómo se introducen los valores y qué se obtiene

Introduces tres componentes:

• Tono (Hue): de 0 a 360 grados, que recorre todo el círculo cromático.
• Saturación (Saturation): un porcentaje de 0 % (gris) a 100 % (color puro).
• Luminosidad (Lightness): un porcentaje de 0 % (negro) a 100 % (blanco).

Por ejemplo, 243, 75%, 59%. El formato esperado es el que se muestra: tono seguido de dos porcentajes separados por comas. No hace falta escribir las palabras «h», «s» ni «l»; el campo reconoce la estructura.

En el mismo instante en que escribes o ajustas cualquiera de los valores, la página muestra el código HEX correspondiente. Si los tres canales RGB pueden representarse con un solo dígito hexadecimal cada uno (por ejemplo, rojo=0xAA, verde=0xBB, azul=0xCC), la herramienta ofrece también la forma abreviada de tres dígitos (#ABC). El código completo siempre tiene seis dígitos, con el carácter # delante, y se acepta en mayúsculas o minúsculas.

Además del HEX, todos los demás campos de color se actualizan al mismo tiempo: RGB (valores enteros de 0 a 255), HSV, CMYK y LAB. Esto permite ver cómo se sitúa el color en distintos modelos sin necesidad de cambiar de herramienta.

A continuación, un ejemplo con los valores típicos:

La tabla muestra que el matiz 243 ° produce un azul violeta intenso, y que los matices puros a saturación y luminosidad máximas corresponden a los primarios RGB.

Reglas importantes y casos límite

Cualquier edición en un campo actualiza de inmediato todos los demás. No hay botón de «convertir»; la respuesta es instantánea.

Si introduces valores fuera de los rangos válidos (tono 0–360, saturación 0–100 %, luminosidad 0–100 %), o escribes algo que no se ajuste al formato esperado (por ejemplo, olvidar el signo % o escribir una letra adicional), la página muestra el siguiente mensaje de error:

Introduce HSL como tono 0–360 con dos porcentajes, p. ej. 243, 75%, 59%.

Este mensaje es claro para que sepas exactamente qué corregir.

La conversión de HSL a HEX siempre permanece dentro del rango visible de RGB. A diferencia de espacios de color como LAB o CMYK, no se produce ningún recorte ni ajuste de gama; todo color HSL válido tiene una representación HEX dentro del sRGB.

Los valores CMYK que se muestran junto al resto son una estimación en pantalla. No deben tomarse como valores definitivos para impresión profesional, porque el perfil de tinta y el papel influyen en el resultado final.

Todo el procesamiento ocurre directamente en tu navegador. No se envía ningún dato a ningún servidor. Puedes trabajar con colores confidenciales de tu proyecto sin preocuparte por la privacidad.

¿Quién necesita esta herramienta?

• Diseñadores que crean paletas de color en HSL (por ejemplo, en Figma o Sketch) y necesitan el código HEX para implementarlo en código o en otras herramientas que no soporten HSL.
• Desarrolladores front‑end que reciben especificaciones de diseño con valores HSL y deben escribirlos en CSS como propiedades color o background-color con notación hexadecimal.
• Cualquier persona que ajuste temas de interfaz o aplique ratios de contraste de accesibilidad (WCAG). Al modificar la luminosidad en HSL y convertir el resultado a HEX, se puede comprobar inmediatamente si el contraste es suficiente sin perder el matiz original.

La herramienta es específica y no pretende ser un conversor universal; precisamente por eso evita distracciones y errores comunes.

Entendiendo el modelo HSL y su relación con HEX

HSL (Hue, Saturation, Lightness) es un modelo pensado para la percepción humana. El tono determina el color básico (rojo, verde, azul, etc.), la saturación controla la pureza (desde gris hasta color vivo), y la luminosidad gestiona la claridad (de negro a blanco). Este diseño facilita la creación de variaciones: por ejemplo, para un color de botón, se puede reducir la luminosidad para el estado :hover y aumentarla para el :active, manteniendo el mismo tono.

La notación hexadecimal (HEX) representa el mismo espacio RGB, pero como una cadena de seis dígitos hexadecimales (o tres en forma abreviada). Cada par de dígitos codifica un canal: los dos primeros para rojo, los dos siguientes para verde, los dos últimos para azul. Así, #4f46e5 significa rojo=0x4F (79), verde=0x46 (70), azul=0xE5 (229).

La conversión matemática es un proceso en dos etapas:

1. HSL → RGB: se aplica un algoritmo estándar que primero normaliza la saturación y la luminosidad (de porcentajes a fracciones de 0 a 1) y el tono (a grados). Luego, usando una serie de casos según el sector del círculo cromático, se obtienen los valores RGB normalizados (0–1). Finalmente se multiplican por 255 y se redondean.

2. RGB → HEX: cada valor RGB se convierte a su representación hexadecimal de dos dígitos (de 00 a FF). Si los tres pares son iguales en el sentido de que cada uno puede expresarse con un solo dígito repetido (por ejemplo, 0xAA, 0xBB, 0xCC), se permite la abreviatura de tres dígitos (#ABC equivale a #AABBCC).

Este proceso es determinista y no requiere redondeos que produzcan pérdida, porque tanto el dominio de entrada como el de salida están en el mismo espacio sRGB.

Casos prácticos: de HSL a HEX en el día a día

Generación de paletas: si tienes un color base en HSL (por ejemplo, 210, 100%, 50%), puedes crear variaciones cambiando solo la luminosidad (por ejemplo, 210, 100%, 30% para un tono más oscuro). Con esta página obtienes al instante el HEX de cada variante.

Temas en CSS: muchos frameworks y librerías (como Tailwind, Material UI) utilizan HSL como formato interno para generar escalas de color. Al final necesitas el HEX para las propiedades CSS estándar, salvo que uses la función hsl() de CSS, que no requiere conversión. Pero si tu proyecto exige compatibilidad con navegadores antiguos o usa variables en formato HEX, esta herramienta es imprescindible.

Accesibilidad: las pautas WCAG requieren un contraste mínimo entre texto y fondo. Al trabajar en HSL, puedes modificar la luminosidad con precisión (por ejemplo, subirla un 10 %) y convertir el resultado a HEX para medir el contraste con herramientas como el evaluador de contraste de WebAIM. Así conservas el matiz original y solo ajustas la claridad.

Entrega de diseño a desarrollo: en un handoff, el diseñador puede proporcionar los colores en HSL (más legibles) y el desarrollador usa esta página para obtener el HEX que insertará en el código. No hay riesgo de interpretación errónea.

Limitaciones de HEX frente a HSL

Aunque el HEX es ubicuo, tiene limitaciones que esta página no oculta:

• Sin canal alfa nativo: la forma de seis dígitos no incluye transparencia. Existe la notación de ocho dígitos (#RRGGBBAA), pero no es la que se genera aquí a menos que el usuario lo solicite (el fact sheet no menciona ocho dígitos, así que no se genera). Para transparencia en CSS se usa rgba() o la función hsl() con el cuarto parámetro alpha.
• Sin dimensión directa de luminosidad: en HEX no puedes aumentar la claridad sin recalcular todo el código. En HSL sí puedes, porque la luminosidad es un eje independiente. Para simularlo en HEX, necesitas convertir a otro modelo, ajustar y volver a HEX.
• Notación engañosa: el código #4f46e5 no te dice si es un azul vivo o apagado. Con HSL ves al instante la saturación y luminosidad.

Estas limitaciones no son defectos, sino consecuencia de que cada modelo fue diseñado para un propósito distinto. Esta página respeta esa diferencia y ofrece la conversión limpia.

Preguntas frecuentes

¿Puedo copiar el código HEX directamente?
Sí. El código se muestra en un campo de texto seleccionable. También puedes hacer clic en él (dependiendo de la implementación) para copiarlo al portapapeles.

¿Qué pasa si escribo «243, 75, 59» sin los porcentajes?
La herramienta espera el formato con el signo % tras saturación y luminosidad. Sin ellos, mostrará el mensaje de error: «Introduce HSL como tono 0–360 con dos porcentajes, p. ej. 243, 75%, 59%».

¿Por qué a veces veo un código HEX de tres dígitos?
Cuando los tres canales RGB pueden representarse con un solo dígito hexadecimal (por ejemplo, #AA → #A, #BB → #B, #CC → #C), la herramienta ofrece la forma abreviada. Es funcionalmente equivalente a la de seis dígitos.

¿Es precisa la conversión para impresión?
La conversión HSL a HEX es exacta para pantallas (sRGB). El color que ves en tu monitor puede variar según la calibración. Para impresión, los valores CMYK mostrados son solo una estimación; nunca uses esta herramienta para definir colores de impresión sin una prueba de color.

¿Se guarda algún dato al usar la página?
No. Todo ocurre en tu navegador. No se envía información a ningún servidor. Puedes trabajar con total privacidad.

¿Puedo usar la herramienta sin conexión a internet?
Depende de cómo esté implementada la página. Si se carga previamente en el navegador (por ejemplo, como una aplicación web progresiva), puede funcionar sin conexión. En general, al ser todo código del lado del cliente, una vez cargada la página, el conversor opera localmente.

Esta página no promete ser un conversor universal; es una herramienta especializada para un solo par de formatos, y cumple esa función con precisión.