# Codes couleur hex, RVB, TSL et OKLCH expliqués

[Canonical HTML page](https://gradiently.design/fr/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) et oklch(54.1% 0.247 293) sont le même violet. Voici ce que dit vraiment chaque notation, et quand chacune mérite sa place.

## The short version

- Les codes couleur hex comme `#7c3aed` sont une façon compacte d’écrire des valeurs de rouge, de vert et de bleu de 0 à 255, chacune en deux chiffres en base 16.
- RVB, hex et TSL décrivent les mêmes couleurs sRGB : toute couleur écrite dans l’un peut donc être convertie exactement dans les autres.
- Le TSL est facile à ajuster à la main, mais sa valeur de luminosité ne correspond pas à l’éclat réel des couleurs : le jaune et le bleu à 50 % paraissent très différents.
- OKLCH décrit la couleur par sa luminosité perçue, sa chroma et sa teinte, ce qui en fait la meilleure notation pour construire des palettes, des nuances et des dégradés fluides.
- Une règle pratique : partagez les couleurs de marque en hex, et construisez palettes et dégradés en OKLCH.

Les **codes couleur hex** comme `#7c3aed` sont la façon la plus courante d’écrire une couleur à l’écran : un `#` suivi de six caractères qui donnent la quantité de rouge, de vert et de bleu. Le RVB écrit les mêmes nombres en décimal, le TSL les réorganise en teinte, saturation et luminosité, et OKLCH décrit la couleur telle que l’œil la perçoit. Ce sont des notations différentes des mêmes couleurs, et chacune excelle dans un usage différent.

- Violet: #7c3aed
- Ciel: #0ea5e9
- Orange: #f97316
- Vert: #16a34a
- Encre: #111827

Cinq couleurs utilisées comme exemples dans tout ce guide. Le tableau ci-dessous écrit chacune dans les quatre notations.

## Comment fonctionnent les codes couleur hex

Un code hex est fait de trois paires de chiffres en base 16 : `#RRGGBB`. La base 16 compte de 0 à 9 puis de a à f, si bien que chaque paire va de `00` (aucun) à `ff` (255, plein). Dans `#7c3aed`, le rouge est `7c` (124), le vert `3a` (58) et le bleu `ed` (237) : beaucoup de bleu, pas mal de rouge, peu de vert, donc du violet. Trois canaux de 256 valeurs donnent 16 777 216 couleurs possibles.

- **Forme abrégée :** `#f0c` équivaut à `#ff00cc`. Chaque chiffre est doublé, ce qui ne marche que pour les couleurs dont les paires se répètent.
- **Transparence :** un code à huit chiffres ajoute l’alpha à la fin. `#7c3aed80` est le violet à environ 50 % d’opacité, car `80` vaut 128 sur 255.
- **La casse n’a pas d’importance :** `#7C3AED` et `#7c3aed` sont identiques.
- **Les gris ont trois paires égales :** `#767676`, `#1a1a1a` et `#f4f4f4` sont tous neutres.

## RVB : les mêmes nombres en décimal

Le RVB écrit les trois canaux comme des nombres ordinaires de 0 à 255. Le CSS moderne les sépare par des espaces et ajoute la transparence après une barre oblique ; l’ancienne syntaxe à virgules et `rgba()` fonctionnent toujours partout. Le RVB est pratique quand un outil ou une API réclame des nombres, ou quand vous voulez lire la composition d’une couleur d’un coup d’œil.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

La syntaxe moderne à espaces en haut, l’ancienne syntaxe à virgules en dessous. Les navigateurs acceptent les deux.

## TSL : teinte, saturation et luminosité

Le TSL décrit une couleur par sa **teinte**, un angle sur le cercle chromatique (0 est rouge, 120 vert, 240 bleu), sa **saturation**, du gris (0 %) à la couleur pleine (100 %), et sa **luminosité**, du noir (0 %) à la couleur pure (50 %) puis au blanc (100 %). Il est facile à retoucher à la main : pour un violet plus sombre, baissez le dernier nombre.

Le hic, c’est que la luminosité du TSL est une formule, pas une mesure de l’éclat d’une couleur. Un jaune à 50 % de luminosité paraît bien plus clair qu’un bleu à 50 %. Construisez une palette en gardant une luminosité TSL égale et les couleurs ne paraîtront pas également claires, c’est exactement pourquoi les arcs-en-ciel par défaut semblent rayés. Voyez les [dégradés arc-en-ciel](https://gradiently.design/fr/guide/rainbow-gradient) pour le résultat visible.

## OKLCH : la couleur telle que vous la voyez

OKLCH vient d’Oklab, un espace colorimétrique publié par Björn Ottosson en 2020 et désormais intégré au CSS. Il utilise trois valeurs : **L** est la luminosité perçue de 0 % à 100 %, **C** est la chroma, c’est-à-dire l’intensité de la couleur, de 0 pour un gris jusqu’à environ 0,37 pour les couleurs les plus vives, et **H** est l’angle de teinte. Des valeurs de L égales paraissent réellement également claires : vous pouvez donc changer une qualité sans perturber les autres.

| Couleur | Hex | RVB | TSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violet | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Ciel | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Orange | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Vert | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Encre | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Les mêmes cinq couleurs en quatre notations. Les valeurs TSL et OKLCH sont arrondies. Remarquez que le TSL juge le vert plus sombre que le violet, alors qu’OKLCH montre qu’il est en réalité plus clair.

OKLCH brille dans les dégradés. Un mélange en sRGB simple, celui par défaut pour les couleurs hex, trace une droite à travers le cube RVB, et des couleurs opposées sur le cercle se rejoignent dans un gris. Un mélange en OKLCH garde la chroma et fait le tour du cercle des teintes.

- Du bleu au jaune en sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Du bleu au jaune en OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Les mêmes deux couleurs. En sRGB, le milieu tombe dans un olive grisâtre ; en OKLCH, il passe par le turquoise et le vert. Plus de détails dans [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

OKLCH rend les nuances prévisibles : changez L par pas réguliers et baissez C près des extrémités pour que les couleurs restent affichables.

## Quel code couleur utiliser, et où

| Usage | Meilleure notation | Pourquoi |
| --- | --- | --- |
| Guide de marque, remise de design | Hex | Court, universel, collé dans tous les outils |
| Transparence en CSS | RVB ou hex à 8 chiffres | Alpha lisible après la barre oblique |
| Retouches rapides à la main | TSL | Facile de décaler la teinte ou l’assombrissement |
| Palettes, tons clairs et sombres | OKLCH | Des pas égaux paraissent égaux |
| Dégradés | OKLCH | Des mélanges sans milieu gris |
| Écrans à large gamme | OKLCH | Atteint des couleurs hors du sRGB |
| Impression | CMJN ou tons directs | Les codes d’écran ne s’impriment jamais exactement ; voyez [imprimer des dégradés](https://gradiently.design/fr/guide/print-gradients) |

Aucune n’est fausse. L’art est d’utiliser chacune là où elle aide.

> **Un écran n’est pas du papier** Hex, RVB, TSL et OKLCH décrivent tous de la lumière d’écran. Les imprimantes mélangent des encres, qui couvrent une autre gamme de couleurs : faites donc toujours une épreuve imprimée des couleurs de marque plutôt que de faire confiance à un code converti.

Pour tester ces valeurs, [oklch.com](https://oklch.com) montre une couleur dans toutes les notations et prévient quand elle sort de la gamme d’un écran, et la [référence MDN sur les couleurs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) couvre toutes les syntaxes. Si vous choisissez des couleurs plutôt que de les écrire, [comment choisir les couleurs de marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors) est l’étape suivante, et le [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) montre comment vérifier que le texte reste lisible.

## FAQ

### Que signifient les six caractères d’un code couleur hex ?

Ce sont trois paires de chiffres en base 16 pour le rouge, le vert et le bleu. Chaque paire va de `00` (0) à `ff` (255) : `#7c3aed` signifie donc rouge 124, vert 58, bleu 237.

### Le hex est-il la même chose que le RVB ?

Oui. Le hex, c’est du RVB écrit en base 16. `#7c3aed` et `rgb(124 58 237)` sont exactement la même couleur.

### Qu’est-ce qu’OKLCH ?

OKLCH est une notation de couleur fondée sur l’espace colorimétrique Oklab. Elle décrit la luminosité perçue, la chroma et la teinte : des luminosités égales paraissent également claires, ce qui rend palettes et dégradés bien plus prévisibles.

### Comment ajouter de la transparence à un code hex ?

Ajoutez deux chiffres d’alpha. `#7c3aed80` fait environ 50 % d’opacité et `#7c3aedcc` environ 80 %. En CSS, vous pouvez aussi écrire `rgb(124 58 237 / 0.5)`.

### Quel code couleur utiliser en CSS ?

Le hex convient pour des couleurs isolées. Utilisez OKLCH pour les palettes, les nuances, le mode sombre et les dégradés, où sa luminosité perceptuelle évite les pas inégaux et les milieux gris.