Conversor de color HEX a RGB

Ingresar cálculo

Código de color hexadecimal Introduce un código hex de 3 o 6 dígitos, con o sin la # inicial.

Resultados

Color RGB

rgb(52, 152, 219)

from #3498DB

Rojo (R)	52
Verde (G)	152
Azul (B)	219
Hex normalizado	#3498DB
CSS	rgb(52, 152, 219)

¿Qué es un conversor de HEX a RGB?

Un código de color hexadecimal es la representación de un color mediante seis dígitos en base 16, que se escribe como #RRGGBB. Cada pareja de dígitos codifica uno de los tres canales de color aditivos: rojo, verde y azul. Este conversor lee un código hex y devuelve su triplete RGB equivalente, donde cada canal es un número entero entre 0 y 255. RGB es el formato que utilizan por dentro las hojas de estilo CSS, los programas de diseño y la mayoría de las pantallas, así que pasar de un formato a otro es una tarea cotidiana para desarrolladores web y diseñadores.

Cómo usarlo

Escribe un código hex en la casilla, con o sin la almohadilla # inicial. Se aceptan tanto la forma completa de seis dígitos (#3498DB) como la abreviada de tres dígitos (#39C, que se expande a #3399CC). La herramienta limpia cualquier carácter sobrante, normaliza el código y muestra al instante los valores de rojo, verde y azul, junto a una muestra de color en vivo y el código CSS listo para copiar y pegar.

La fórmula al detalle

El sistema hexadecimal es base 16 y emplea los dígitos del 0 al 9 y las letras de la A a la F (donde A=10 … F=15). Una pareja de caracteres se convierte con la regla valor = primer dígito × 16 + segundo dígito. Así, FF = 15 × 16 + 15 = 255, el valor máximo, y 00 = 0, el mínimo. Las tres parejas se descodifican de forma independiente en R, G y B.

$$(R,\,G,\,B) = \bigl(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\bigr)_{16}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \left(\text{Hex Code}\ \text{digits 1-2}\right)_{16} \\ G &= \left(\text{Hex Code}\ \text{digits 3-4}\right)_{16} \\ B &= \left(\text{Hex Code}\ \text{digits 5-6}\right)_{16} \end{aligned} \right.$$

Un código hex se divide en tres pares, cada uno convertido en un valor de canal de 0 a 255.

Ejemplo resuelto

Tomemos #3498DB. La pareja roja es 34 = \(3 \times 16 + 4 = \mathbf{52}\). La pareja verde es 98 = \(9 \times 16 + 8 = \mathbf{152}\). La pareja azul es DB = \(13 \times 16 + 11 = \mathbf{219}\). El resultado es rgb(52, 152, 219), un azul muy popular en el diseño plano (flat design).

Un ejemplo práctico: un código hex mostrado como muestra junto a sus canales R, G y B.

Preguntas frecuentes

¿Acepta códigos hex abreviados como #FFF? Sí. Un código de tres dígitos se expande duplicando cada uno, de modo que #FFF se convierte en #FFFFFF = rgb(255, 255, 255).

¿Y el canal alfa (transparencia)? Esta herramienta trabaja con el color RGB de tres canales. Si introduces un hex de 8 dígitos con canal alfa, se recortan los seis primeros dígitos para hacer la conversión de color.

¿Cómo paso de RGB de vuelta a hex? Expresa el valor de cada canal como un número hexadecimal de dos dígitos y concaténalos después de una #. Por ejemplo: 52, 152, 219 → 34, 98, DB → #3498DB.