Conversor HEX a RGB

Cómo convertir HEX a RGB

Convertir HEX a RGB (el "hex to rgb" de las búsquedas) consiste en separar el código en pares y pasar cada par de hexadecimal a decimal. El primer par es el rojo, el segundo es el verde y el tercero es el azul. Cada par va de 00 a FF, es decir, de 0 a 255.

#5271FF  →  52  71  FF
52 = 5 × 16 + 2   = 82
71 = 7 × 16 + 1   = 113
FF = 15 × 16 + 15 = 255
rgb(82 113 255)

La cuenta de cada par es dígito de la izquierda × 16 + dígito de la derecha. Los dígitos A a F valen de 10 a 15 (A es 10, B es 11, C es 12, D es 13, E es 14 y F es 15), y la tabla ASCII muestra cada carácter con su código en decimal y en hexadecimal. Un segundo ejemplo, con un par en cero:

#FF8000  →  FF  80  00
FF = 255
80 = 8 × 16 + 0 = 128
00 = 0
rgb(255 128 0)

Como FF es el par más grande posible, el canal más alto es 255. Y 00 siempre da 0. Incluso puedes estimarlo de cabeza: el primer dígito de cada par ya da la mayor parte del valor. En 5271FF el rojo es bajo (5), el verde es medio (7) y el azul está al máximo (F), así que el color es un azul fuerte.

HEX de 3 y 4 dígitos

El HEX corto repite cada dígito: #f00 es lo mismo que #ff0000 y #abc pasa a #aabbcc. Solo se puede abreviar cuando los dos dígitos de cada par son iguales, así que #5271FF no tiene versión corta.

#f00   →  #ff0000  →  rgb(255 0 0)
#abc   →  #aabbcc
#f008  →  #ff000088

Con 4 dígitos vale la misma regla, y el último dígito es la transparencia: #f008 es #ff000088. El formato es válido en CSS, pero el código más antiguo puede no reconocerlo. Compruébalo antes de usarlo fuera de una hoja de estilos.

HEX de 8 dígitos y transparencia

En el HEX de 8 dígitos, el último par es el canal alfa, que controla la opacidad: 00 es totalmente transparente y FF es totalmente opaco. Para usarlo en rgba(), convierte el par a decimal y divide entre 255.

#5271FF80  →  52  71  FF  80
80 = 8 × 16 + 0 = 128
128 ÷ 255 = 0.50196…  →  0.5
rgba(82, 113, 255, 0.5)
rgb(82 113 255 / 50%)

Por eso 80 equivale a 0,5 solo de forma aproximada: 128 ÷ 255 da 0,50196. La herramienta redondea a 2 decimales y muestra 0.5, que es lo que escribirías en CSS.

rgb() y rgba() en el CSS actual

La sintaxis actual de rgb() separa los canales con espacios y pone la transparencia después de una barra: rgb(82 113 255 / 50%). La antigua usa comas y el nombre rgba(): rgba(82, 113, 255, 0.5). Hoy las dos funcionan con o sin alfa. La herramienta muestra ambas para que copies la que usa tu proyecto.

color: rgb(82 113 255);
color: rgb(82 113 255 / 50%);
color: rgba(82, 113, 255, 0.5);

Los datos de compatibilidad vienen de MDN (browser-compat-data, comprobados el 5 de noviembre de 2026): la sintaxis con espacios funciona desde Chrome 65, Firefox 52 y Safari 12.1, y el HEX de 4 y 8 dígitos desde Chrome 62, Firefox 49 y Safari 10. Las reglas de sintaxis están en la especificación CSS Color 4 del W3C, y la documentación de uso en rgb() en MDN y hex-color en MDN.

En la práctica, el HEX es más corto para colores sólidos y es lo que exportan las herramientas de diseño. El RGB con alfa deja la transparencia legible (50% en lugar de 80) y es más fácil de calcular en JavaScript. El color en pantalla es el mismo en los dos casos.

Convertir HEX a RGB en código

En JavaScript, parseInt(par, 16) convierte cada par. La función de abajo acepta 3, 4, 6 y 8 dígitos, con o sin #:

function hexToRgb(hex) {
  let digits = hex.trim().replace(/^#/, "");

  if (digits.length <= 4) {
    digits = [...digits].map((digit) => digit + digit).join("");
  }

  if (![6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) {
    return null;
  }

  const [r, g, b, a = 255] = digits
    .match(/../g)
    .map((pair) => parseInt(pair, 16));

  return { r, g, b, a: Math.round((a / 255) * 100) / 100 };
}

hexToRgb("#5271FF");   // { r: 82, g: 113, b: 255, a: 1 }
hexToRgb("#f008");     // { r: 255, g: 0, b: 0, a: 0.53 }

En Python, int(par, 16) convierte un par, y bytes.fromhex convierte el código entero de una vez:

def hex_to_rgb(value: str) -> tuple[int, ...]:
    digits = value.lstrip("#")

    if len(digits) in (3, 4):
        digits = "".join(digit * 2 for digit in digits)

    return tuple(bytes.fromhex(digits))

hex_to_rgb("#5271FF")   # (82, 113, 255)
hex_to_rgb("#5271FF80") # (82, 113, 255, 128)
int("52", 16)           # 82

Valida antes de convertir. Sin comprobación, parseInt('zz', 16) devuelve NaN y el error solo aparece más adelante, cuando el color se convierte en rgb(NaN NaN NaN) en el CSS.

Errores comunes al pegar HEX

Cuando la conversión falla, casi siempre es por uno de estos motivos:

• Dígitos de más o de menos. El HEX de 5 o 7 dígitos no existe, solo valen 3, 4, 6 y 8. Suele ser un dígito que sobró o se perdió al copiar y pegar.
• Una letra fuera de A-F. #G00 no es HEX, y la letra O en lugar del cero (#FF0O00) es un caso clásico.
• Un color que cambia de tono tras convertirlo. El número es correcto, pero la herramienta de diseño trabaja con otro perfil de color (como Display P3) y el navegador muestra sRGB. La conversión en sí no pierde nada.

Colores básicos en HEX y RGB

Los 16 colores básicos de CSS, con el HEX y el RGB de cada uno. Haz clic en una fila para cargar el color en la herramienta.