Hex a RGB: convierte códigos de color a mano o con código

Para convertir hex a RGB, divide el código en tres pares de caracteres, uno para el rojo, otro para el verde y otro para el azul, y pasa cada par de base 16 a un número normal entre 0 y 255. En #7c3aed, los pares son 7c, 3a y ed, que se convierten en 124, 58 y 237, así que el color es rgb(124 58 237). El color no cambia en nada. Hex y RGB son dos formas de escribir los mismos tres números.

Cómo se construye un código de color hex

Un código hex tiene seis caracteres después de la almohadilla. Los dos primeros son el canal rojo, los dos del medio el verde y los dos últimos el azul. Cada canal admite 256 valores, de 0 (nada de esa luz) a 255 (toda). La base 16 puede escribir cualquiera de esos 256 valores con exactamente dos caracteres, y por eso el hex se convirtió en la forma compacta de escribir colores en la web. Para ver cómo se relacionan estos códigos entre sí, consulta los códigos de color hex explicados.

La base 16 cuenta de 0 a 9 y después sigue con letras. Es lo único que necesitas memorizar:

Cómo convertir hex a RGB a mano

Cada par es un número de dos dígitos en base 16. El dígito de la izquierda cuenta dieciseises y el de la derecha cuenta unidades. Multiplica el dígito de la izquierda por 16, suma el de la derecha y tendrás el valor de ese canal.

1. 1

   Quita la almohadilla y separa en pares

   #7c3aed se convierte en 7c, 3a y ed. Son el rojo, el verde y el azul, en ese orden.

2. 2

   Convierte el par rojo

   7c: 7 × 16 = 112, y c es 12, así que el rojo es 112 + 12 = 124.

3. 3

   Convierte el par verde

   3a: 3 × 16 = 48, y a es 10, así que el verde es 48 + 10 = 58.

4. 4

   Convierte el par azul

   ed: e es 14, 14 × 16 = 224, y d es 13, así que el azul es 224 + 13 = 237.

5. 5

   Escribe el resultado

   El CSS moderno acepta rgb(124 58 237). La forma antigua con comas, rgb(124, 58, 237), sigue funcionando en todas partes.

Dos comprobaciones rápidas te evitan errores. 00 siempre es 0 y ff siempre es 255, así que cualquier par que empiece por una letra de la a a la f vale 160 o más, y cualquier par que empiece por 0 a 7 queda por debajo de 128. Si tu resultado para ed sale pequeño, has leído los dígitos al revés.

Códigos abreviados y transparencia

Un código de tres dígitos es un atajo: duplica cada dígito para obtener el código completo. #f60 significa #ff6600, que es rgb(255 102 0). #fff es blanco y #000 es negro. Solo se pueden escribir así los colores cuyos pares repiten un dígito, así que #7c3aed no tiene forma abreviada.

Un código de ocho dígitos añade un cuarto par para la opacidad. Se convierte igual y luego se divide entre 255 para obtener una fracción. #7c3aed80 termina en 80, que es 128, y 128 ÷ 255 es aproximadamente 0,5, así que equivale a rgb(124 58 237 / 50%). Un código de cuatro dígitos como #f608 es la versión abreviada de la misma idea.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex a RGB en JavaScript

En código, parseInt con base 16 hace la conversión por ti. La función de abajo acepta códigos de tres, cuatro, seis y ocho dígitos, con o sin almohadilla, y devuelve los canales más un alfa entre 0 y 1.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

Cómo convertir RGB a hex

El camino de vuelta es una división. Divide el canal entre 16: el cociente es el primer dígito y el resto es el segundo. Para 153, 153 ÷ 16 da 9 con resto 9, así que el par es 99. Para 51 da 3 con resto 3, es decir 33, y 102 da 6 con resto 6, o sea 66. Así que rgb(51 102 153) es #336699. En JavaScript lo hace toString(16), con un relleno para que los dígitos sueltos conserven su cero inicial:

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Cuándo usar hex, RGB u otra cosa

El hex es compacto y fácil de pegar entre herramientas, por eso lo usan las guías de marca y los archivos de diseño. El RGB es más fácil de razonar cuando necesitas cambiar un canal o añadir transparencia en código. Ninguno de los dos responde bien a las preguntas que de verdad se hacen los diseñadores, como «hazlo un poco más claro» o «busca una versión más suave de este azul». Para eso, el color HSL y OKLCH describen los colores por tono y luminosidad, así que los pequeños ajustes se comportan de forma predecible.

Hay otra diferencia que importa para la impresión. Hex y RGB describen luz en una pantalla, así que la impresora tiene que traducirlos a tinta, y los colores de pantalla muy brillantes pueden apagarse en papel. RGB frente a CMYK explica qué esperar. En pantalla, los colores convertidos son idénticos, y cuando necesitas que un color se desvanezca, las formas con alfa de arriba son lo que escribes; los degradados transparentes en CSS las muestran en acción.

Antes de usar cualquier color convertido para texto, compruébalo contra su fondo con un comprobador de contraste de color. En Gradiently casi nunca hace falta: la tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, así que las palabras se leen.