Conversor de HSL a HEX

Convierte valores de color HSL y HSLA a códigos de color HEX al instante en tu navegador.

Convierte cualquier color HSL o HSLA a un código HEX al instante con este conversor de HSL a HEX en línea y gratuito. Escribe valores como hsl(243, 75%, 59%) (o simplemente 243, 75%, 59%), o elige un color con el selector, y obtén al momento el #4f46e5 correspondiente. Acepta números separados por comas, cadenas hsl() y hsla(), y un canal alfa opcional que se convierte en un valor de 8 dígitos #rrggbbaa — y todo se ejecuta en tu navegador, sin nada que instalar.

¿Qué es un conversor de HSL a HEX?

Un conversor de HSL a HEX transforma los valores de tono, saturación y luminosidad en un código de color hexadecimal. El HSL describe un color de la forma en que las personas suelen pensar en él: un ángulo de tono en la rueda de colores (0–360°), un porcentaje de saturación y un porcentaje de luminosidad. El HEX describe el mismo color como un código de seis dígitos como #4f46e5, que es el formato que usan CSS, las herramientas de diseño y la mayoría de los sitios web para definir colores. Convertir de HSL a HEX te permite diseñar con controles intuitivos de tono y luminosidad y, aun así, pegar el código exacto que necesita tu hoja de estilos.

Cómo convertir HSL a HEX

El tono elige un color base en la rueda, la saturación controla cuán vivo es y la luminosidad controla cuán claro u oscuro es. El conversor primero asigna el HSL a los canales rojo, verde y azul en el rango de 0 a 255, luego escribe cada canal como un par hexadecimal de dos dígitos y los une detrás de un #. Por ejemplo, hsl(243, 75%, 59%) se convierte en #5048e5. Si incluyes un valor alfa entre 0 y 1, se añade como un tercer par para formar un código de 8 dígitos #rrggbbaa.

  1. Escribe o pega valores HSL en el campo HSL (hsl(...), hsla(...) o números simples, todos funcionan).
  2. Lee el código HEX y, cuando añadas alfa, el valor HEX de 8 dígitos, actualizado a medida que escribes.
  3. Usa el selector de color si prefieres elegir un color de forma visual.
  4. Haz clic en Copiar para copiar el formato que necesites.

¿Por qué usar este conversor de HSL a HEX?

  • 100% gratuito, sin anuncios, registro ni límites.
  • Conversión instantánea a medida que escribes.
  • Acepta hsl(), hsla() y números simples separados por comas.
  • Genera #rrggbb listo para usar, además de #rrggbbaa de 8 dígitos cuando incluyes alfa.
  • Se ejecuta íntegramente en tu navegador — tus colores nunca salen de tu dispositivo.

Preguntas frecuentes

¿Cómo convierto un color HSL a HEX?

Primero convierte los valores HSL a los canales rojo, verde y azul en el rango de 0 a 255, luego escribe cada canal como un número hexadecimal de dos dígitos y únelos después de un #. Por ejemplo, hsl(243, 75%, 59%) se convierte en #5048e5. Esta herramienta hace el cálculo automáticamente.

¿Qué formatos de HSL acepta?

Puedes pegar hsl(243, 75%, 59%), hsla(243, 75%, 59%, 0.5) o simplemente números como 243, 75%, 59%. Los signos de porcentaje son opcionales, y los espacios, las comas y las barras entre los valores funcionan.

¿Puede convertir HSLA con transparencia a HEX?

Sí. Cuando incluyes un valor alfa entre 0 y 1, el resultado también muestra un código hexadecimal de 8 dígitos donde el par final codifica el canal alfa, como #5048e580 para un 50% de opacidad.

¿Cuál es la diferencia entre HSL y HEX?

Describen el mismo color de formas distintas. El HSL usa un ángulo de tono, un porcentaje de saturación y un porcentaje de luminosidad, mientras que el HEX empaqueta los canales rojo, verde y azul en un código hexadecimal de seis dígitos. El HSL suele ser más fácil de ajustar a mano, pero el HEX es la forma más común de escribir colores en CSS y archivos de diseño. Los navegadores modernos aceptan ambos.