Conversión de Color RGB a Hex: Una Guía de Referencia Completa

La conversión de RGB a Hex es el proceso de traducir un color definido por sus componentes rojo, verde y azul a una representación hexadecimal de seis dígitos utilizada extensamente en el desarrollo web. Entender cómo se relacionan estos formatos te ayuda a trabajar más efectivamente con CSS, herramientas de diseño y manipulación de color en código.

Modelos de Color Explicados

RGB (Rojo, Verde, Azul)

RGB es un modelo de color aditivo donde cada componente de color es un entero de 0 a 255. La combinación de tres valores produce más de 16 millones de colores posibles.

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(128, 128, 128) → gris medio

Hexadecimal (Hex)

Los códigos de color Hex usan seis dígitos hexadecimales agrupados como RRGGBB. Cada par representa la intensidad de rojo, verde o azul en notación base-16, donde 00 es el mínimo y FF es el máximo.

#FF0000 → rojo
#00FF00 → verde
#0000FF → azul
#FFFFFF → blanco
#000000 → negro
#808080 → gris

HSL (Tono, Saturación, Luminosidad)

HSL representa colores como un ángulo en una rueda de colores (0-360 grados), más porcentajes de saturación y luminosidad. Es más intuitivo para los humanos porque puedes ajustar la luminosidad o saturación independientemente.

hsl(0, 100%, 50%)    → rojo
hsl(120, 100%, 50%)  → verde
hsl(240, 100%, 50%)  → azul
hsl(0, 0%, 50%)      → gris medio

CMYK (Cian, Magenta, Amarillo, Negro)

CMYK es un modelo de color sustractivo utilizado para impresión. Los valores van de 0% a 100% para cada componente. Es el inverso de RGB — añadir más tinta reduce la luz reflejada.

cmyk(0%, 100%, 100%, 0%)   → rojo
cmyk(100%, 0%, 100%, 0%)   → verde
cmyk(0%, 0%, 0%, 100%)     → negro
cmyk(0%, 0%, 0%, 0%)       → blanco

Fórmulas de Conversión

RGB a Hex

Convierte cada componente RGB a un valor hexadecimal de dos dígitos y concatenalos:

R = 255 → FF
G = 128 → 80
B = 64  → 40
Resultado: #FF8040

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

console.log(rgbToHex(255, 128, 64)); // #FF8040

function rgbToHex(int $r, int $g, int $b): string {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

echo rgbToHex(255, 128, 64); // #FF8040

Hex a RGB

Analiza la cadena hex de seis dígitos en tres pares y convierte cada uno de base-16 a base-10:

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

console.log(hexToRgb('#FF8040')); // { r: 255, g: 128, b: 64 }

def hex_to_rgb(hex_color: str) -> tuple:
    clean = hex_color.lstrip('#')
    return tuple(int(clean[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb('#FF8040'))  # (255, 128, 64)

RGB a HSL

La conversión HSL implica encontrar los componentes de color dominante y secundario para determinar el ángulo de tono:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;

  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };

  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;

  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 128, 64)); // { h: 20, s: 100, l: 63 }

Tabla de Referencia Rápida

Funciones de Color CSS

El CSS moderno soporta funciones de color que van más allá de los códigos hex básicos:

/* Hex tradicional */
.element { color: #FF8040; }

/* RGB con alfa */
.element { color: rgba(255, 128, 64, 0.5); }

/* HSL con alfa */
.element { color: hsla(20, 100%, 63%, 0.5); }

/* Sintaxis moderna de color relativo */
.element { color: hsl(from #FF8040 h s calc(l + 10%)); }

/* OKLCH — espacio de color perceptual uniforme */
.element { color: oklch(0.7 0.15 45); }

Casos de Uso Comunes

• Desarrollo web — Traducción de maquetas de diseño (RGB/HSL) a CSS (Hex)
• Visualización de datos — Generación de escalas de color mediante programación
• Procesamiento de imágenes — Lectura de datos de píxeles en RGB y almacenamiento como hex
• Guías de marca — Mantenimiento de color consistente entre formatos
• Accesibilidad de color — Cálculo de relaciones de contraste entre colores

Herramienta en Línea

La herramienta Convertidor de RGB a HEX en Help2Code convierte colores entre RGB, HEX, RGBA, HSL y CMYK con vista previa en vivo. Elige un color, pega un código hex o genera un color aleatorio para ver los cuatro formatos al instante. La vista previa del color se actualiza en tiempo real, y puedes copiar cualquier formato con un solo clic. La herramienta Extractor de Paletas de Color también es útil para extraer esquemas de color de imágenes.

Conclusión

Entender la conversión de RGB a Hex — y la relación entre los modelos de color — es esencial para desarrolladores web y diseñadores. La conversión es directa: cada canal RGB se convierte en un par hex de dos dígitos. Una vez que conoces el patrón, moverte entre RGB, Hex, HSL y CMYK se vuelve algo natural. Usa la herramienta Convertidor de RGB a HEX para conversiones instantáneas y los ejemplos de código anteriores para integrar la lógica de color en tus proyectos.