Conversión de HEX a RGB: Guía completa de códigos de color

Ya sea que estés construyendo un sitio web, diseñando un logotipo o depurando estilos CSS, entender cómo convertir entre los formatos de color HEX y RGB es una habilidad esencial para desarrolladores web y diseñadores. Estos dos sistemas son la base de la representación digital del color, y saber cómo se relacionan hace que tu trabajo sea más rápido y preciso.

En esta guía, aprenderás exactamente qué son HEX y RGB, cómo convertir entre ellos manualmente y cuándo usar cada formato. También puedes usar nuestro Convertidor de Color para cambiar entre formatos al instante.

¿Qué es HEX?

HEX significa hexadecimal — un sistema de numeración en base 16 utilizado para representar colores en desarrollo web. Un código de color HEX es un código de seis dígitos precedido por un símbolo de almohadilla (#), donde cada par de dígitos representa la intensidad del rojo, verde y azul.

#RRVVAA

• RR — Componente rojo (00 a FF en hexadecimal, 0 a 255 en decimal)
• VV — Componente verde (00 a FF en hexadecimal, 0 a 255 en decimal)
• AA — Componente azul (00 a FF en hexadecimal, 0 a 255 en decimal)

Por ejemplo, #ff5733 significa rojo = FF (255), verde = 57 (87), azul = 33 (51).

HEX admite una notación abreviada cuando ambos dígitos de cada par son idénticos: #f00 equivale a #ff0000 (rojo puro).

¿Qué es RGB?

RGB significa Red, Green, Blue (Rojo, Verde, Azul) — el modelo de color aditivo utilizado por pantallas y displays digitales. Cada color se define mediante tres valores que van de 0 a 255:

rgb(R, G, B)

• R — Intensidad del rojo (0–255)
• G — Intensidad del verde (0–255)
• B — Intensidad del azul (0–255)

Por ejemplo, rgb(255, 87, 51) produce el mismo naranja cálido que #ff5733.

RGB es intuitivo porque se corresponde directamente con la forma en que las pantallas producen el color: combinando luz roja, verde y azul a diferentes intensidades.

HEX vs RGB: Comparación

Característica	HEX	RGB
Formato	#RRVVAA	rgb(R, G, B)
Sistema numérico	Base 16 (hexadecimal)	Base 10 (decimal)
Rango de valores	00–FF por canal	0–255 por canal
Notación abreviada	Sí (#f00 = #ff0000)	No
Uso en CSS	color: #ff5733;	color: rgb(255, 87, 51);
Soporte alfa	#RRVVAAAA (8 dígitos)	rgba(R, G, B, A)
Legibilidad	Compacto, común en herramientas de diseño	Más fácil de entender de un vistazo

Ambos formatos producen colores idénticos — la diferencia radica únicamente en cómo se escriben los valores.

Cómo convertir HEX a RGB: Paso a paso

Convertir un código de color hexadecimal a RGB implica tres pasos sencillos:

1. Separar el código HEX en tres pares de dos dígitos (después de eliminar el #).
2. Convertir cada par de hexadecimal a decimal.
3. Combinar los tres valores decimales en rgb(R, G, B).

Ejemplo: Convertir #3498db a RGB

1. Separar: 34, 98, db
2. Convertir cada par:
   • 34 → (3 × 16) + 4 = 52
   • 98 → (9 × 16) + 8 = 152
   • db → (13 × 16) + 11 = 219
3. Resultado: rgb(52, 152, 219) — un azul brillante.

La fórmula de conversión

La fórmula matemática para convertir un par hexadecimal de dos dígitos a decimal es:

decimal = (primer_dígito × 16) + segundo_dígito

Los dígitos hexadecimales usan 0–9 y A–F, donde:

• A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Ejemplos detallados

Ejemplo 1: #ff0000 (Rojo)

• FF → (15 × 16) + 15 = 255
• 00 → 0
• 00 → 0
• Resultado: rgb(255, 0, 0)

Ejemplo 2: #00ff00 (Verde)

• 00 → 0
• FF → 255
• 00 → 0
• Resultado: rgb(0, 255, 0)

Ejemplo 3: #1a2b3c (Verde azulado oscuro)

• 1A → (1 × 16) + 10 = 26
• 2B → (2 × 16) + 11 = 43
• 3C → (3 × 16) + 12 = 60
• Resultado: rgb(26, 43, 60)

Ejemplo 4: #abcdef (Azul grisáceo claro)

• AB → (10 × 16) + 11 = 171
• CD → (12 × 16) + 13 = 205
• EF → (14 × 16) + 15 = 239
• Resultado: rgb(171, 205, 239)

RGB a HEX: La conversión inversa

Para convertir RGB de vuelta a HEX, inviertes el proceso:

1. Convertir cada valor decimal (0–255) a su equivalente hexadecimal de dos dígitos.
2. Concatenar los tres pares hexadecimales con un prefijo #.

Fórmula

par_hex = decimal_a_hex(valor)

Divide el número decimal entre 16. El cociente es el primer dígito hexadecimal, y el residuo es el segundo.

Ejemplo: Convertir rgb(52, 152, 219) a HEX

• 52 ÷ 16 = 3 residuo 4 → 34
• 152 ÷ 16 = 9 residuo 8 → 98
• 219 ÷ 16 = 13 residuo 11 → db
• Resultado: #3498db

Valores de colores comunes

Aquí tienes una tabla de referencia de colores populares en ambos formatos:

Color	HEX	RGB
Rojo	#ff0000	rgb(255, 0, 0)
Verde	#00ff00	rgb(0, 255, 0)
Azul	#0000ff	rgb(0, 0, 255)
Blanco	#ffffff	rgb(255, 255, 255)
Negro	#000000	rgb(0, 0, 0)
Amarillo	#ffff00	rgb(255, 255, 0)
Cian	#00ffff	rgb(0, 255, 255)
Magenta	#ff00ff	rgb(255, 0, 255)
Naranja	#ff8c00	rgb(255, 140, 0)
Púrpura	#800080	rgb(128, 0, 128)
Gris	#808080	rgb(128, 128, 128)
Coral	#ff7f50	rgb(255, 127, 80)

Casos de uso en desarrollo web

Estilos CSS

Ambos formatos funcionan directamente en CSS:

/* Formato HEX */
.header { background-color: #3498db; }

/* Formato RGB */
.header { background-color: rgb(52, 152, 219); }

/* Con transparencia */
.overlay { background-color: rgba(52, 152, 219, 0.5); }
.overlay { background-color: #3498db80; }

Estilos HTML en línea

<div style="color: #e74c3c;">Mensaje de error</div>
<div style="color: rgb(231, 76, 60);">Mensaje de error</div>

Colores dinámicos en JavaScript

// Generar un color aleatorio
const randomHex = '#' + Math.floor(Math.random()*16777215).toString(16);

// Convertir HEX a RGB en JavaScript
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

Herramientas de diseño

Herramientas como Figma, Adobe Photoshop y Canva muestran colores en HEX por defecto, pero permiten cambiar a RGB. Al copiar valores de color de estas herramientas, es posible que necesites convertir entre formatos para tu código.

Para conversiones rápidas, el Convertidor de Color maneja formatos HEX, RGB y HSL al instante. Si necesitas convertir entre otros sistemas numéricos, el Conversor de Base Numérica también es útil.

Prueba nuestro convertidor de color gratuito

¿Necesitas convertir colores rápidamente? Nuestro Convertidor de Color soporta los formatos HEX, RGB y HSL con una vista previa de color en vivo. Simplemente pega tu valor de color y obtén todos los formatos al instante — sin registro.

También puedes explorar nuestro Conversor de Unidades para otras conversiones cotidianas.

Conclusión

HEX y RGB son dos caras de la misma moneda — ambos describen exactamente los mismos colores usando diferentes sistemas numéricos. HEX usa base 16 para una notación compacta, mientras que RGB usa valores decimales familiares. Entender la conversión entre ambos te ayuda a trabajar de manera más eficiente en CSS, JavaScript y herramientas de diseño.

Para profundizar en cómo se modelan los colores digitalmente, consulta nuestra guía sobre ¿Qué es un espacio de color?.

FAQ

¿La conversión de HEX a RGB tiene pérdida?

No. HEX y RGB representan exactamente los mismos valores en diferentes sistemas numéricos. La conversión entre ambos es perfectamente reversible sin ninguna pérdida de datos.

¿Puede HEX representar más colores que RGB?

No. Ambos formatos pueden representar exactamente 16.777.216 colores (256 × 256 × 256). Cubren el mismo espacio de color — solo que escritos de forma diferente.

¿Por qué los desarrolladores web prefieren HEX?

HEX es más compacto (#f00 vs rgb(255, 0, 0)) y ha sido el formato tradicional en HTML y CSS. Muchos diseñadores también lo encuentran más fácil de copiar desde las herramientas de diseño.

¿Cómo convierto un HEX de 3 dígitos a RGB?

Expande cada dígito duplicándolo: #f00 se convierte en #ff0000, luego conviérte normalmente. Entonces #f00 → rgb(255, 0, 0).

¿RGB soporta transparencia?

Sí — usa rgba(R, G, B, A) donde A es el canal alfa de 0 (totalmente transparente) a 1 (totalmente opaco). HEX también soporta transparencia con códigos de 8 dígitos: #RRVVAAAA.

¿Cuál es el código HEX del blanco?

El blanco es #ffffff en HEX, que equivale a rgb(255, 255, 255) — todos los canales a máxima intensidad.

¿Puedo usar HEX en propiedades personalizadas de CSS?

Sí. Los valores HEX funcionan en variables CSS como cualquier otro valor:

:root { --primary: #3498db; }

¿Cuál es la diferencia entre HEX y HSL?

HEX y RGB definen colores por la intensidad de cada canal, mientras que HSL (Tono, Saturación, Luminosidad) define colores por sus propiedades visuales. HSL suele ser más intuitivo para ajustar colores — por ejemplo, hacer algo más claro o más saturado. Usa nuestro Convertidor de Color para cambiar entre los tres formatos.