Herramientas para desarrolladores

Convertidor de Hex a RGB

Convierte colores hex a RGB, RGBA y HSL al instante: conversor de dos vías con selector de color en vivo y generador de paleta de marca de 9 pasos.

O empieza desde valores RGB
HEX
#2563EB
RGB
rgb(37, 99, 235)
RGBA
rgba(37, 99, 235, 1.00)
HSL
hsl(221, 83%, 53%)

Paleta de marca desde este color

Nueve pasos desde el blanco hasta tu color y hasta el negro: matices claros a la izquierda, oscuros a la derecha. Haz clic en cualquier muestra para copiar su HEX.

🔒 Privacidad: la conversión ocurre por completo en tu navegador. Nada se sube ni se almacena.

Más herramientas para desarrolladores

Cómo funciona esta calculadora

Un convertidor de hex a RGB traduce entre las dos formas en que las pantallas describen el color. HEX es la forma compacta que ves en CSS y en las herramientas de diseño: seis dígitos donde cada par fija el canal rojo, verde y azul en una escala de 0 a 255, así que #2563eb significa rojo 37, verde 99, azul 235. Escribe cualquier código hex en la herramienta o elige un color visualmente, y todos los formatos se actualizan en vivo. Las entradas numéricas RGB también funcionan en sentido inverso, así que un valor copiado de una herramienta de diseño se convierte directo a su código hex.

La salida RGBA añade el canal alfa, la opacidad del color de 0 (totalmente transparente) a 100 por ciento (totalmente opaco). El deslizador muestra la transparencia en la muestra y el fragmento se actualiza, por ejemplo rgba(37, 99, 235, 0.50) para un azul medio transparente. HSL es la tercera notación: tono como un ángulo de 0 a 360 grados en la rueda de color, saturación y luminosidad como porcentajes. Los diseñadores usan HSL cuando quieren aclarar u oscurecer un color sin cambiar su familia, porque esos ajustes se corresponden directamente con los números S y L.

El generador de paletas convierte cualquier color inicial en una escala de marca utilizable. Nueve pasos van del blanco a tu color y hasta el negro: la mitad izquierda mezcla tu color con blanco para matices claros, la derecha lo mezcla con negro para matices oscuros. Haz clic en cualquier muestra para copiar su código hex para botones, estados hover, fondos y texto. Como cada herramienta de este sitio, la conversión corre por completo en tu navegador, nada de lo que escribes se sube ni se almacena, y no hay cuenta ni límites.

Preguntas frecuentes

¿Cómo convierto hex a RGB?
Cada par de dígitos hex se convierte en un canal de 0 a 255: #2563eb se convierte a rgb(37, 99, 235) porque 25 en hex es 37, 63 es 99 y eb es 235. Escribe el código en la herramienta y todos los formatos se actualizan al instante.
¿Cómo convierto RGB de vuelta a hex?
Usa las entradas numéricas RGB de la página: introduce los valores de rojo, verde y azul de 0 a 255 y el código hex se actualiza en vivo. Por ejemplo rgb(37, 99, 235) se convierte de vuelta a #2563eb.
¿Cuál es la diferencia entre HEX, RGB y HSL?
Son tres notaciones para el mismo color. HEX (#2563eb) es la forma compacta usada en CSS y herramientas de diseño. RGB (rgb(37, 99, 235)) detalla los canales rojo, verde y azul y es más fácil de leer. HSL (hsl(221, 83%, 53%)) describe tono, saturación y luminosidad, lo que lo hace el más fácil para ajustar qué tan vivo u oscuro es un color.
¿Qué significa el valor alfa de RGBA?
Alfa es la opacidad: 100% es totalmente opaco, 0% es totalmente transparente. El deslizador de la página muestra la transparencia en la muestra, así que rgba(37, 99, 235, 0.50) se muestra como un azul medio transparente sobre lo que esté detrás.
¿Cómo funciona el generador de paleta de marca?
Mezcla tu color inicial con blanco para producir cinco matices claros a la izquierda y con negro para cuatro matices oscuros a la derecha, nueve pasos en total. Haz clic en cualquier muestra para copiar su código hex para botones, estados hover, fondos y bordes.
¿Mis datos de color se suben a algún lado?
No. Las matemáticas de conversión corren por completo en tu navegador con JavaScript. Nada de lo que escribes se envía a un servidor, se registra ni se almacena.
Aviso: Los resultados son estimaciones solo para fines de planificación y no constituyen asesoramiento financiero. Los términos reales de préstamos, impuestos y rendimientos de inversión varían. Consulta a un profesional calificado antes de tomar decisiones financieras.