HEX a RGB: cómo funcionan los códigos de color (con ejemplos)

Cada color en una pantalla es una mezcla de luz roja, verde y azul. Diseñadores y desarrolladores escriben esa mezcla en dos notaciones comunes: HEX (#3b82f6) y RGB (rgb(59, 130, 246)). Describen los mismos tres canales: solo cambia el sistema numérico. Esta guía explica qué es un código de color HEX, qué significa RGB, cómo convertir HEX a RGB a mano (incluido por qué FF equivale a 255), ejemplos prácticos, alfa/RGBA y una tabla rápida de colores comunes.

¿Qué es un código de color HEX?

Los códigos de color HEX (hexadecimal) usan dígitos en base 16: 0-9 y A-F, donde A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15. En la web suelen empezar con # y vienen en varias longitudes:

• #RGB - abreviado: cada dígito se duplica (#F0A → #FF00AA)
• #RRGGBB - la forma estándar de seis dígitos (dos dígitos por canal)
• #RRGGBBAA - ocho dígitos: RGB más alfa (opacidad)

Cada par de dígitos es un canal. Los dos primeros son rojo, los dos siguientes verde y los dos últimos azul. Como dos dígitos hex pueden representar 16 × 16 = 256 valores, cada canal va de 00 (0) a FF (255) - el mismo rango que CSS usa en rgb().

HEX es popular en herramientas de diseño, guías de marca y CSS porque es compacto y fácil de copiar. Mayúsculas o minúsculas no importan: #3b82f6 y #3B82F6 son el mismo color.

¿Qué es RGB?

RGB significa red, green y blue (rojo, verde y azul). En CSS lo escribes como rgb(r, g, b) o la forma moderna separada por espacios rgb(r g b), donde cada canal es un entero de 0 a 255 (o un porcentaje). Mezclar canales a máxima intensidad produce blanco; todos a cero producen negro; mezclas desiguales producen cualquier otro color en una pantalla sRGB.

• rgb(255, 0, 0) - rojo puro
• rgb(0, 255, 0) - verde puro
• rgb(0, 0, 255) - azul puro
• rgb(255, 255, 255) - blanco
• rgb(0, 0, 0) - negro

RGB suele ser más fácil de razonar cuando ajustas brillo u opacidad en código. HEX suele ser más fácil de pegar desde una guía de estilo. Convertir entre ellos es solo cambiar cómo escribes los mismos tres números.

Cómo convertir HEX a RGB a mano

Divide los seis dígitos hex en tres pares y luego convierte cada par de base 16 a decimal. La fórmula para un valor hex de dos dígitos XY es:

1. Quita el # inicial si está presente.
2. Si tienes 3 dígitos (#RGB), expande cada dígito duplicándolo (#F0A → #FF00AA).
3. Divide en RR, GG y BB.
4. Convierte cada par con (alto × 16) + bajo.
5. Escribe rgb(R, G, B).

Ejemplo práctico: #FFFFFF

El blanco es la comprobación más fácil. RR = FF, GG = FF, BB = FF. Cada FF se convierte en 255, así que #FFFFFF → rgb(255, 255, 255). El negro es lo contrario: #000000 → rgb(0, 0, 0).

Ejemplo práctico: #1A2B3C

• Rojo 1A: (1 × 16) + 10 = 16 + 10 = 26
• Verde 2B: (2 × 16) + 11 = 32 + 11 = 43
• Azul 3C: (3 × 16) + 12 = 48 + 12 = 60
• Resultado: #1A2B3C → rgb(26, 43, 60)

En el otro sentido (RGB a HEX) se limita cada canal a 0-255, se divide entre 16 para el nibble alto, se toma el resto para el nibble bajo y se mapean 10-15 de vuelta a A-F. Rellena dígitos sueltos con un cero a la izquierda para que cada canal tenga dos caracteres (#0A1B2C, no #A1B2C).

Alfa, RGBA y HEX de ocho dígitos

La opacidad es un cuarto canal llamado alfa. En CSS, rgba(r, g, b, a) usa a de 0 (totalmente transparente) a 1 (totalmente opaco), o puedes usar la sintaxis moderna rgb(r g b / a). El HEX de ocho dígitos codifica la misma idea como #RRGGBBAA, donde AA va de 00 (transparente) a FF (opaco).

• #FF000080 → rojo a unos 50% de opacidad (128/255 ≈ 0,5) → rgba(255, 0, 0, 0.5)
• #00000000 → negro totalmente transparente (a menudo usado como "sin relleno")
• #3B82F6FF → igual que #3B82F6 con opacidad total explícita

No todos los navegadores antiguos o exportaciones de diseño trataban el HEX de ocho dígitos igual, pero el CSS moderno lo soporta. Cuando necesitas overlays translúcidos, sombras o efectos de cristal, RGBA (o HEX con alfa) es la herramienta correcta: el HEX sólido de seis dígitos no puede expresar transparencia.

Tabla de colores HEX y RGB comunes

Estos colores cotidianos son útiles de memorizar para depurar CSS y emparejar tokens de marca:

• #FFFFFF → rgb(255, 255, 255) - blanco
• #000000 → rgb(0, 0, 0) - negro
• #FF0000 → rgb(255, 0, 0) - rojo
• #00FF00 → rgb(0, 255, 0) - verde lima
• #0000FF → rgb(0, 0, 255) - azul
• #FFFF00 → rgb(255, 255, 0) - amarillo
• #FFA500 → rgb(255, 165, 0) - naranja
• #808080 → rgb(128, 128, 128) - gris
• #1A2B3C → rgb(26, 43, 60) - azul-gris oscuro (del ejemplo de arriba)
• #3B82F6 → rgb(59, 130, 246) - un azul "cielo" común en muchos kits de UI

Preguntas frecuentes

¿Es HEX lo mismo que RGB?

Codifican las mismas intensidades de rojo, verde y azul para colores web típicos. HEX escribe esos valores en hexadecimal; RGB los escribe en decimal. Convertir HEX a RGB (o al revés) no cambia el color - solo la notación.

¿Por qué FF equivale a 255?

F es 15 en hexadecimal. Dos dígitos significan (15 × 16) + 15 = 255, que es el valor máximo de canal de 8 bits. Por eso #FF0000 es rojo al máximo y #FFFFFF es blanco.

¿Qué significa un color HEX de 3 dígitos?

El abreviado #RGB se expande repitiendo cada dígito: #0F8 se convierte en #00FF88. Es una forma compacta de escribir colores donde los dos dígitos de cada canal son idénticos (#00, #FF, #88, etc.).

¿Cuál es la diferencia entre RGB y RGBA?

RGBA añade un canal alfa (opacidad). rgb(255, 0, 0) es rojo sólido; rgba(255, 0, 0, 0.5) es el mismo rojo al 50% de opacidad. El HEX de ocho dígitos (#RRGGBBAA) es el equivalente HEX de RGBA.

¿Debo usar HEX o RGB en CSS?

Ambos son válidos. Usa HEX cuando copias de un design system o quieres un token corto. Usa RGB/RGBA cuando necesitas opacidad, o cuando construyes colores a partir de variables y matemática. Muchos equipos guardan un color de marca en HEX y derivan canales rgb() para trucos modernos de opacidad en CSS (por ejemplo, rgb(var(--brand-rgb) / 0.2)).

¿Cómo convierto HEX a RGB rápido?

Para aprender de forma puntual, usa el método (dígito × 16) + dígito de arriba. Para el día a día, pega el código en un convertidor HEX a RGB para poder copiar rgb()/rgba(), previsualizar una muestra y evitar errores aritméticos.