Conversor HSL a HEX

HSL
Entrada
H
S%
L%
HEX
Resultado
RGB
R
G
B

Qué es Conversor HSL a HEX

Esta herramienta convierte valores HSL (Tono, Saturación, Luminosidad) a códigos de color HEX. Introduce el tono (0–360°), la saturación (0–100%) y la luminosidad (0–100%) y obtén el código HEX correspondiente. Útil cuando has diseñado una paleta en una herramienta basada en HSL y necesitas la cadena HEX para un archivo CSS.

Cómo usar

  1. Introduce los valores de Tono (0–360), Saturación (0–100) y Luminosidad (0–100) en los campos HSL.
  2. El código HEX y los valores RGB se actualizan al instante.
  3. Haz clic en el botón de copiar junto a HEX para copiar el código #RRGGBB.
  4. Cambia entre los 6 conversores usando los enlaces de modo arriba.

Cuándo usarla

¿Elegiste el color en un selector HSL pero tu tema de Tailwind necesita HEX? Introduce hsl(217, 91%, 60%) y copia #3B82F6 directamente en tu tailwind.config.js. Así ajustas el color en formato HSL y le pasas el código exacto al CSS sin adivinar la conversión.

Preguntas frecuentes

¿Qué es hsl(0, 100%, 50%) en HEX?

hsl(0, 100%, 50%) es #ff0000 — rojo puro. El tono 0° con saturación completa y 50% de luminosidad da el rojo más puro.

¿Qué es hsl(0, 0%, 100%) en HEX?

hsl(0, 0%, 100%) es #ffffff — blanco. El 100% de luminosidad siempre es blanco sin importar el tono o la saturación.

¿Qué es hsl(0, 0%, 0%) en HEX?

hsl(0, 0%, 0%) es #000000 — negro. El 0% de luminosidad siempre es negro.

¿Por qué mi resultado HSL a HEX puede diferir ligeramente de otras herramientas?

El redondeo en cálculos intermedios puede producir una diferencia de 1 dígito HEX. Esta diferencia de ±1 es visualmente imperceptible.

¿Puedo compartir esta herramienta con mis datos precargados?

Sí. La URL se actualiza automáticamente mientras escribes. Copia el enlace desde la barra de direcciones o usa el botón Compartir — quien lo abra verá tus datos ya cargados.

Herramientas relacionadas