Convertidor Hex a RGB: Guía de códigos de color para desarrolladores

Los colores son los bloques de construccion de toda interfaz de usuario, y los desarrolladores cambian constantemente entre codigos de color hexadecimales y valores RGB. Ya sea que estes diseando un sitio web con CSS, construyendo una app movil o escribiendo un script de visualizacion en Python, entender la conversion entre hex y RGB es esencial. Esta guia completa explica el algoritmo, proporciona ejemplos de codigo y cubre la transparencia alfa.

Prueba nuestro convertidor gratuito de Hex a RGB en linea.

Que son los codigos de color Hex y los valores RGB?

Los codigos de color hexadecimales representan colores con una cadena de 6 caracteres precedida por #. Cada par codifica un canal: rojo, verde, azul. Formato: #RRGGBB, cada par de 00 a FF. CSS tambien soporta la forma abreviada de 3 caracteres como #F00 = #FF0000.

Los valores RGB definen colores con tres numeros decimales (0-255) para rojo, verde y azul. En CSS: rgb(255, 87, 51). Hex y RGB describen el mismo espacio de color (sRGB), la conversion es sin perdida.

Como funciona la conversion Hex a RGB

La conversion de hex a RGB es directa ya que cada par hex mapea a un canal RGB:

Ejemplo: #1A2B3C da R=26, G=43, B=60 = rgb(26, 43, 60).

La conversion inversa (RGB a hex) convierte cada valor decimal a una cadena hex de dos digitos y las concatena.

Codigos de color Hex comunes y sus valores RGB

Tabla de referencia de colores comunes con sus equivalentes hex y RGB:

Cuando usar Hex, RGB o HSL

Los tres formatos describen el mismo espacio sRGB:

Hex (#RRGGBB) es el formato mas compacto y la opcion predeterminada en CSS. Las herramientas de diseno copian colores en hex por defecto.

RGB / RGBA es ideal para manipular canales individualmente y para transparencia alfa.

HSL / HSLA es el formato mas legible, excelente para paletas de colores y temas.

En la practica: hex para colores estaticos, rgba() para transparencia, hsl() para sistemas de color dinamicos.

Conversion Hex a RGB en JavaScript, CSS y Python

JavaScript / TypeScript

Funcion robusta hex-a-RGB que maneja 3, 6 y 8 caracteres:

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand (#F0A -> FF00AA)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS: Hex vs RGB en la practica

En CSS, hex y RGB son intercambiables:

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Python simplifica la conversion con int():

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB a Hex (JavaScript)

La conversion inversa de RGB a hex:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

Canal Alfa: Hex con transparencia (#RRGGBBAA) y RGBA

Hex y RGB soportan canal alfa. 1.0 (o FF) = opaco, 0.0 (o 00) = transparente.

Hex de 8 digitos (#RRGGBBAA) agrega dos caracteres alfa. Ejemplo: #FF000080 = rojo al 50% de opacidad.

rgba() es la sintaxis mas reconocida: rgba(255, 0, 0, 0.5). Sintaxis moderna: rgb(255 0 0 / 0.5).

Conversion alfa: hex a decimal: dividir entre 255. Decimal a hex: multiplicar por 255 y convertir.

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

Preguntas frecuentes

Como convertir hex a RGB?

Elimina el #, divide en 3 pares de 2 caracteres, convierte cada par de hexadecimal a decimal. #3B82F6 da rgb(59, 130, 246).

Cual es la diferencia entre hex y RGB?

Hex y RGB representan los mismos colores sRGB con diferentes sistemas numericos. Hex usa notacion hexadecimal compacta, RGB usa tres numeros decimales 0-255. #FF0000 y rgb(255, 0, 0) son identicos.

Entender los formatos hex y RGB es una habilidad fundamental. Usa nuestra herramienta para conversiones instantaneas.

Convierte colores al instante con nuestro convertidor gratuito Hex a RGB.