# Hex en RGB : convertir un code couleur à la main ou en code

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

Un code hex n’est que trois nombres écrits en base 16. Une fois les paires repérées, la conversion à la main prend quelques secondes, et la version en code tient en quatre lignes.

## The short version

- Pour convertir un hex en RGB, coupez le code à six caractères en trois paires et convertissez chaque paire de la base 16 en un nombre entre 0 et 255.
- Chaque paire se calcule ainsi : le premier chiffre multiplié par 16, plus le second, les lettres a à f valant 10 à 15.
- Le code hex #7c3aed correspond à rgb(124 58 237) : 7c vaut 124, 3a vaut 58 et ed vaut 237.
- Un code hex à trois caractères est une abréviation où chaque caractère est doublé : #f60 est la même couleur que #ff6600.
- Hex et RGB décrivent exactement les mêmes couleurs sRGB : passer de l’un à l’autre ne change jamais l’apparence d’une couleur.

Pour convertir un **hex en RGB**, coupez le code en trois paires de caractères, une pour le rouge, une pour le vert et une pour le bleu, et transformez chaque paire de la base 16 en un nombre ordinaire entre 0 et 255. Pour `#7c3aed`, les paires sont `7c`, `3a` et `ed`, qui deviennent 124, 58 et 237 : la couleur est donc `rgb(124 58 237)`. Rien ne change dans la couleur. Hex et RGB sont deux façons d’écrire les trois mêmes nombres.

## Comment est construit un code couleur hex

Un code hex compte six caractères après le dièse. Les deux premiers forment le canal rouge, les deux du milieu le vert et les deux derniers le bleu. Chaque canal peut prendre 256 valeurs, de 0 (aucune lumière de cette couleur) à 255 (toute la lumière). La base 16 permet d’écrire chacune de ces 256 valeurs en exactement deux caractères, c’est pourquoi l’hex est devenu la façon compacte de saisir les couleurs sur le web. Pour une vue d’ensemble des liens entre ces codes, voir [les codes couleur hex expliqués](https://gradiently.design/fr/guide/color-codes-explained).

La base 16 compte de 0 à 9 puis continue avec des lettres. C’est la seule chose à retenir :

| Chiffre hex | Valeur | Chiffre hex | Valeur |
| --- | --- | --- | --- |
| 0 à 9 | 0 à 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (une paire) | 255 |

La casse des lettres n’a pas d’importance : #7C3AED et #7c3aed sont la même couleur.

## Convertir un hex en RGB à la main

Chaque paire est un nombre à deux chiffres en base 16. Le chiffre de gauche compte les seizaines et celui de droite les unités. Multipliez le chiffre de gauche par 16, ajoutez celui de droite, et vous obtenez la valeur du canal.

1. **Retirez le dièse et coupez en paires** `#7c3aed` devient `7c`, `3a` et `ed`. Ce sont le rouge, le vert et le bleu, dans cet ordre.
2. **Convertissez la paire rouge** `7c` : 7 × 16 = 112, et c vaut 12, donc le rouge vaut 112 + 12 = **124**.
3. **Convertissez la paire verte** `3a` : 3 × 16 = 48, et a vaut 10, donc le vert vaut 48 + 10 = **58**.
4. **Convertissez la paire bleue** `ed` : e vaut 14, 14 × 16 = 224, et d vaut 13, donc le bleu vaut 224 + 13 = **237**.
5. **Écrivez le résultat** Le CSS moderne accepte `rgb(124 58 237)`. L’ancienne forme avec virgules `rgb(124, 58, 237)` fonctionne toujours partout.

Deux vérifications rapides évitent les erreurs. `00` vaut toujours 0 et `ff` toujours 255 : toute paire qui commence par une lettre de a à f vaut donc 160 ou plus, et toute paire qui commence par 0 à 7 vaut moins de 128. Si votre résultat pour `ed` est petit, vous avez lu les chiffres à l’envers.

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

Cinq conversions détaillées. Essayez-en une à la main, puis vérifiez avec le nom de la pastille.

## Codes abrégés et transparence

Un **code à trois caractères** est un raccourci : doublez chaque caractère pour obtenir le code complet. `#f60` signifie `#ff6600`, soit `rgb(255 102 0)`. `#fff` est le blanc et `#000` le noir. Seules les couleurs dont les paires répètent un chiffre peuvent s’écrire ainsi : `#7c3aed` n’a donc pas de forme courte.

Un **code à huit caractères** ajoute une quatrième paire pour l’opacité. Elle se convertit de la même façon, puis on divise par 255 pour obtenir une fraction. `#7c3aed80` se termine par `80`, qui vaut 128, et 128 ÷ 255 donne environ 0,5 : il équivaut donc à `rgb(124 58 237 / 50%)`. Un code à quatre caractères comme `#f608` est la version abrégée de la même idée.

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

Chaque ligne d’un même groupe donne un rendu identique. Utilisez la forme que votre équipe lit le plus vite, et restez cohérent.

## Hex en RGB en JavaScript

En code, `parseInt` avec une base de 16 fait la conversion pour vous. La fonction ci-dessous accepte les codes à trois, quatre, six et huit caractères, avec ou sans dièse, et renvoie les canaux ainsi qu’un alpha entre 0 et 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 }
```

Aucune bibliothèque nécessaire. La ligne de validation empêche une faute de frappe de devenir du noir en silence.

## Convertir du RGB en hex

Le retour se fait par division. Divisez le canal par 16 : le quotient est le premier chiffre et le reste le second. Pour 153, 153 ÷ 16 donne 9 reste 9, donc la paire est `99`. Pour 51, c’est 3 reste 3, soit `33`, et 102 donne 6 reste 6, soit `66`. Ainsi `rgb(51 102 153)` correspond à `#336699`. En JavaScript, `toString(16)` s’en charge, avec un remplissage pour que les valeurs à un seul chiffre gardent leur zéro initial :

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

Sans padStart, 13 deviendrait d au lieu de 0d et le code aurait un caractère de moins.

## Quand utiliser l’hex, le RGB ou autre chose

L’hex est compact et facile à coller d’un outil à l’autre, c’est pourquoi les chartes de marque et les fichiers de design l’utilisent. Le RGB est plus simple à manier quand il faut changer un seul canal ou ajouter de la transparence en code. Aucun des deux ne répond bien aux questions que se posent vraiment les designers, comme « éclaircis un peu ceci » ou « trouve une version plus douce de ce bleu ». Pour cela, [la couleur HSL](https://gradiently.design/fr/guide/hsl-colors) et [OKLCH](https://gradiently.design/fr/guide/oklch-explained) décrivent les couleurs par teinte et luminosité, si bien que les petites retouches se comportent de façon prévisible.

### Hex ou RGB conviennent pour

- Les chartes de marque et la transmission aux développeurs
- Copier une couleur d’une appli à l’autre
- Ajouter de la transparence en CSS ou dans un canvas
- Reprendre une valeur exacte d’une spécification

### Préférez HSL ou OKLCH pour

- Éclaircir ou assombrir une couleur
- Construire les teintes et nuances d’une palette
- Des dégradés plus doux entre des teintes éloignées
- Les thèmes avec des variables CSS

Une autre distinction compte pour l’impression. Hex et RGB décrivent de la lumière sur un écran : une imprimante doit les traduire en encre, et les couleurs d’écran très vives peuvent ternir sur papier. [RVB ou CMJN](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique à quoi s’attendre. À l’écran, les couleurs converties sont identiques, et quand une couleur doit s’effacer, ce sont les formes avec alpha ci-dessus que vous écrivez ; [les dégradés transparents en CSS](https://gradiently.design/fr/guide/css-gradient-transparent) les montrent à l’œuvre.

Avant d’utiliser une couleur convertie pour du texte, vérifiez-la sur son fond avec un [vérificateur de contraste](https://gradiently.design/fr/guide/color-contrast-accessibility). Dans Gradiently, c’est rarement nécessaire : l’encre automatique choisit un texte clair ou sombre pour chaque ligne à partir de la palette du Mark, pour que les mots restent lisibles.

## FAQ

### Comment convertir un hex en RGB ?

Coupez le code à six caractères en trois paires et convertissez chacune depuis la base 16 : multipliez le premier chiffre par 16 et ajoutez le second, a à f valant 10 à 15. #7c3aed devient 124, 58, 237.

### Que vaut #ffffff en RGB ?

rgb(255 255 255), le blanc pur. Chaque paire vaut ff, soit 15 × 16 + 15 = 255.

### Comment convertir un hex en RGBA ?

Convertissez les trois premières paires comme d’habitude. Si le code a huit caractères, convertissez aussi la dernière paire et divisez-la par 255 pour obtenir l’alpha : 80 donne environ 0,5.

### Convertir un hex en RGB change-t-il la couleur ?

Non. Ce sont deux notations des mêmes valeurs sRGB : la couleur s’affiche de façon identique dans les deux cas.

### Comment reconvertir du RGB en hex ?

Divisez chaque canal par 16 : le quotient donne le premier chiffre hex et le reste le second. En JavaScript, utilisez `value.toString(16).padStart(2, '0')`.