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

[Canonical HTML page](https://gradiently.design/es/guide/hex-to-rgb)

Un código hex son solo tres números escritos en base 16. En cuanto ves los pares, convertirlo a mano lleva segundos, y la versión en código ocupa cuatro líneas.

## The short version

- Para convertir hex a RGB, divide el código de seis dígitos en tres pares y pasa cada par de base 16 a un número entre 0 y 255.
- Cada par se calcula como el primer dígito por 16 más el segundo dígito, donde las letras de la a a la f valen de 10 a 15.
- El código hex #7c3aed es rgb(124 58 237): 7c es 124, 3a es 58 y ed es 237.
- Un código hex de tres dígitos es una abreviatura en la que cada dígito se duplica, así que #f60 es el mismo color que #ff6600.
- Hex y RGB describen exactamente los mismos colores sRGB, así que convertir entre ellos nunca cambia el aspecto de un color.

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](https://gradiently.design/es/guide/color-codes-explained).

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

| Dígito hex | Valor | Dígito hex | Valor |
| --- | --- | --- | --- |
| 0 a 9 | 0 a 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (un par) | 255 |

Las letras no distinguen mayúsculas: #7C3AED y #7c3aed son el mismo color.

## 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. **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. **Convierte el par rojo** `7c`: 7 × 16 = 112, y c es 12, así que el rojo es 112 + 12 = **124**.
3. **Convierte el par verde** `3a`: 3 × 16 = 48, y a es 10, así que el verde es 48 + 10 = **58**.
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. **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.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Cinco conversiones resueltas. Prueba una a mano y compárala con el nombre de la muestra.

## 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.

```css
.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%);
}
```

Todas las líneas de cada grupo se ven idénticas. Usa la que tu equipo lea más rápido y sé coherente.

## 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.

```js
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 }
```

No hace falta ninguna librería. La línea de validación evita que una errata se convierta en negro sin avisar.

## 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:

```js
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'
```

Sin padStart, 13 se convertiría en d en lugar de 0d y al código le faltaría un carácter.

## 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](https://gradiently.design/es/guide/hsl-colors) y [OKLCH](https://gradiently.design/es/guide/oklch-explained) describen los colores por tono y luminosidad, así que los pequeños ajustes se comportan de forma predecible.

### Hex o RGB sirven para

- Guías de marca y entrega a desarrolladores
- Copiar un color entre aplicaciones
- Añadir transparencia en CSS o canvas
- Igualar un valor exacto de una especificación

### Recurre a HSL u OKLCH para

- Aclarar u oscurecer un color
- Crear tintes y sombras para una paleta
- Degradados más suaves entre tonos lejanos
- Temas con variables CSS

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](https://gradiently.design/es/guide/rgb-vs-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](https://gradiently.design/es/guide/css-gradient-transparent) 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](https://gradiently.design/es/guide/color-contrast-accessibility). 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.

## FAQ

### ¿Cómo se convierte hex a RGB?

Divide el código de seis dígitos en tres pares y convierte cada uno desde base 16: multiplica el primer dígito por 16 y suma el segundo, donde de la a a la f valen de 10 a 15. #7c3aed se convierte en 124, 58, 237.

### ¿Qué es #ffffff en RGB?

Es rgb(255 255 255), blanco puro. Cada par es ff, que vale 15 × 16 + 15 = 255.

### ¿Cómo convierto hex a RGBA?

Convierte los tres primeros pares como siempre. Si el código tiene ocho dígitos, convierte también el último par y divídelo entre 255 para el alfa, así que 80 da aproximadamente 0,5.

### ¿Convertir hex a RGB cambia el color?

No. Ambos son notaciones de los mismos valores sRGB, así que el color se ve idéntico de las dos formas.

### ¿Cómo convierto RGB de vuelta a hex?

Divide cada canal entre 16: el cociente es el primer dígito hex y el resto el segundo. En JavaScript usa value.toString(16).padStart(2, '0').