utilix.mx
/
Ver todas →
/

Conversor de Color — HEX, RGB y HSL online

Convierte colores entre HEX, RGB y HSL en tiempo real. Color picker integrado, vista previa del color y botones para copiar en el formato exacto que necesitas.

#3B82F6

HEX

RGB

R (0–255)

G (0–255)

B (0–255)

HSL

H (0–360°)

S (0–100%)

L (0–100%)

Copiar valor

HEX

#3B82F6

HEX sin #

3B82F6

RGB CSS

rgb(59, 130, 246)

RGB valores

59, 130, 246

HSL CSS

hsl(217, 91%, 60%)

Generado en tu dispositivo — sin servidores, sin registro.

Cómo usar el conversor de colores

  1. Usa el color picker (cuadro de color) para elegir un color visualmente, o escribe directamente en los campos HEX, RGB u HSL.
  2. Todos los formatos se actualizan automáticamente al editar cualquier campo.
  3. Haz clic en «Copiar» junto al formato que necesitas para copiarlo al portapapeles.

Preguntas frecuentes

¿Cómo convierto HEX a RGB?

Cada par de caracteres hexadecimales representa un canal de color (Rojo, Verde, Azul) en base 16. Para #3b82f6: R=0x3b=59, G=0x82=130, B=0xf6=246 → rgb(59, 130, 246). Esta calculadora lo hace automáticamente al escribir el HEX.

¿Qué es el formato HSL?

HSL describe colores con tres valores: Hue (tono, 0–360°), Saturation (saturación, 0–100%) y Lightness (luminosidad, 0–100%). Es más intuitivo que RGB para ajustar colores: cambiar L hace un color más claro u oscuro sin alterar el tono, cambiar H rota el color en la rueda cromática.

¿Cuándo usar HEX, RGB u HSL en CSS?

HEX es el más compacto y el más usado en diseño web. RGB es preferido cuando necesitas transparencia: rgba(59,130,246,0.5). HSL es ideal en sistemas de diseño donde necesitas variantes de un color cambiando solo la luminosidad o saturación.

¿Cómo funciona el color picker?

Haz clic en el cuadro de color a la izquierda del campo HEX. El selector del navegador abre una paleta visual. Al elegir un color, todos los campos (HEX, RGB, HSL) se actualizan automáticamente.

¿Puedo pegar un color HEX directamente?

Sí. Pega el valor en el campo HEX con o sin el símbolo #. La calculadora normaliza el formato y actualiza RGB y HSL al instante.

¿Qué es el valor RGB para CSS variables?

En CSS moderno es común definir colores como variables sin el prefijo rgb() para poder usarlos con opacidad variable: --color: 59 130 246; y luego background: rgb(var(--color) / 50%). La opción «RGB valores» copia solo los números separados por coma para ese uso.

¿Esta herramienta guarda mis datos?

No. Todo el cálculo ocurre en tu navegador. No se envía ningún dato a servidores.