Convertidor Gratuito

HSL a Convertidor HEX

Convierte valores de color HSL a códigos de color HEX al instante — convertidor de colores gratuito y en tiempo real.

Matiz
Saturación (%)
Luminosidad (%)

Salida HEX

#368CE2
R:54
G:140
B:226

Copiar formato

Formato #HEX#368CE2
Formato hsl()hsl(210°, 75%, 55%)
Formato rgb()rgb(54, 140, 226)

Acerca de esta herramienta

Convierta valores de color HSL (Tono, Saturación, Luminosidad) a códigos hexadecimales. HSL es un modelo de color intuitivo donde Tono es el ángulo de color (0-360°), Saturación es la intensidad del color (0-100%) y Luminosidad controla qué tan claro u oscuro es el color (0-100%). Útil para diseñadores que trabajan en HSL y necesitan códigos hexadecimales para CSS.

Cómo usarla

  1. Ingrese el valor de Tono (0-360 grados en la rueda de colores).
  2. Establezca Saturación (0-100%) y Luminosidad (0-100%).
  3. El código hexadecimal se calcula y se muestra en tiempo real.
  4. Copie el código hexadecimal para usarlo en su CSS o herramienta de diseño.

Preguntas frecuentes

¿Por qué utilizar HSL en lugar de hexadecimal o RGB?
HSL es más intuitivo para los humanos. ¿Quieres un tono más oscuro? Disminuir la luminosidad. ¿Quieres una versión apagada? Disminuir la saturación. Estas relaciones no son obvias en hexadecimal o RGB, donde sería necesario ajustar los tres canales.
¿Qué significa un tono de 0 frente a 360?
Tanto 0° como 360° son rojos: la rueda de tono gira. Tonos principales: 0° = rojo, 60° = amarillo, 120° = verde, 180° = cian, 240° = azul, 300° = magenta.
¿Qué sucede al 0% y al 100% de saturación?
Con una saturación del 0%, cualquier tono se convierte en un tono de gris (determinado únicamente por la luminosidad). Con una saturación del 100%, obtienes la versión más pura y vívida de ese tono.
¿Cómo funciona la ligereza?
El 0% de luminosidad siempre es negro independientemente del tono/saturación. El 100% es siempre blanco. El 50% da la versión más pura y vibrante del color. Los valores entre 0-50% son tonos más oscuros, 50-100% son tintes más claros.