Gigi Tools

Conversor de color HSL

Convierte entre códigos de color HSL, HEX y RGB con vista previa en vivo

Ingrese los valores HSL
Vista previa del color
Resultado de la conversión
HEX#3C83F6
RGBrgb(60, 131, 246)
HSLhsl(217, 91%, 60%)
Conversión inversa: HEX → HSL

Ingrese un código de color HEX para convertirlo automáticamente a valores HSL y actualizar los controles deslizantes de arriba

Cómo usar

  1. Arrastre los controles deslizantes o ingrese valores directamente para ajustar H (Tono), S (Saturación), L (Luminosidad)
  2. Vea los códigos HEX, RGB, HSL correspondientes y la vista previa del color en tiempo real
  3. Haga clic en el botón "Copiar" junto a cada formato para copiar el código de color
  4. También puede ingresar un código HEX abajo para convertir inversamente a HSL

Preguntas frecuentes

¿Qué es el modelo de color HSL?

HSL significa Tono (Hue), Saturación (Saturation) y Luminosidad (Lightness). El Tono es una rueda de color de 0-360 grados (0°=rojo, 120°=verde, 240°=azul), la Saturación 0-100% va de escala de grises a color completo, y la Luminosidad 0-100% va de negro a blanco. HSL es más intuitivo que RGB para ajustes de color.

¿Cuál es la diferencia entre HSL y HSV/HSB?

Tanto HSL como HSV (también llamado HSB) usan el tono, pero definen el brillo de manera diferente. En HSL, L=50% es el color puro, L=0% es negro, L=100% es blanco. En HSV, V=100% es el color puro, V=0% es negro. HSL es más común en diseño web ya que CSS soporta nativamente la función hsl().

¿Por qué los valores HSL convertidos inversamente son ligeramente diferentes a los originales?

Esto se debe a que RGB usa valores discretos (enteros 0-255), mientras que la conversión HSL involucra matemáticas de punto flotante. Al convertir HSL → RGB → HSL ida y vuelta, los errores de redondeo pueden causar que los valores H, S, L difieran en 1-2 grados/porcentaje. Esta diferencia es prácticamente imperceptible en la práctica.