# Le gamut expliqué : sRGB, Display P3 et couleurs hors gamut

Le gamut est l’ensemble des couleurs qu’un écran ou un espace colorimétrique peut afficher. Le web s’est construit sur sRGB, mais la plupart des téléphones et beaucoup d’ordinateurs portables affichent désormais Display P3, aux rouges, verts et oranges nettement plus vifs.

Source: https://pickshade.com/fr/gamut
Mis à jour: 2026-09-28

## Qu’est-ce qu’un gamut

Tout écran mélange de la lumière rouge, verte et bleue. Le rouge, le vert et le bleu les plus purs qu’il peut produire forment les sommets d’un triangle, et chaque couleur à l’intérieur de ce triangle appartient à son gamut. Les couleurs situées à l’extérieur ne peuvent tout simplement pas s’afficher sur cet écran.

## sRGB, Display P3 et Rec. 2020

sRGB est la norme par défaut du web et de la plupart des moniteurs vendus avant 2016. HEX, rgb() et hsl() décrivent tous des couleurs sRGB.

Display P3 couvre environ un quart de couleurs de plus que sRGB, surtout des verts, des rouges et des oranges vifs. Les iPhone, iPad et Mac, ainsi que de nombreux téléphones Android et ordinateurs portables haut de gamme, l’utilisent. En CSS, il s’écrit color(display-p3 r g b) ou sous forme de valeur OKLCH à chroma élevée.

Rec. 2020 est encore plus large et sert à la vidéo HDR. Très peu d’écrans le couvrent entièrement.

| Format | Valeur |
| --- | --- |
| HEX | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

## Que deviennent les couleurs hors gamut

Si une couleur CSS sort du gamut de l’écran, le navigateur doit afficher autre chose. Un simple écrêtage coupe chaque canal à sa limite et peut changer la teinte. CSS Color 4 recommande plutôt un mappage de gamut en OKLCH : garder la luminosité et la teinte, et baisser la chroma jusqu’à ce que la couleur rentre dans le gamut.

PickShade signale chaque couleur qui sort de sRGB et affiche la couleur de repli correspondante : vous savez exactement ce que verront les personnes équipées d’écrans plus anciens.

## Utiliser les couleurs P3 en CSS sans risque

Écrivez d’abord une valeur sRGB de secours, puis la valeur à large gamut, ou placez la valeur vive dans une media query color-gamut.

```css
.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}
```

## Questions et réponses

### Comment savoir si une couleur est dans sRGB ?

Collez-la dans PickShade. Toute couleur hors sRGB reçoit un avertissement de gamut, accompagné de la couleur la plus proche qui rentre dans le gamut.

### Les couleurs P3 fonctionnent-elles sous Windows ?

Oui, si le moniteur couvre P3 et que le navigateur connaît le profil de l’écran. Sur un écran sRGB, le navigateur ramène la couleur dans sRGB : rien ne casse.

### Le HEX est-il limité à sRGB ?

Oui. HEX, rgb(), hsl() et hwb() décrivent toujours des couleurs sRGB. Utilisez oklch() ou color(display-p3 ...) pour les couleurs à large gamut.

## Outils

- [Convertisseur HEX vers Display P3](https://pickshade.com/fr/convert/hex-to-p3)
- [Sélecteur de couleur OKLCH avec alerte de gamut](https://pickshade.com/fr)
- [OKLCH expliqué](https://pickshade.com/fr/oklch)

## Guides associés

- [OKLCH expliqué : le format de couleur enfin fidèle à votre œil](https://pickshade.com/fr/oklch)
- [CSS color-mix() et couleurs relatives : nuances, survol et transparence](https://pickshade.com/fr/css-color-mix)
- [Les formats de couleur expliqués : HEX, RGB, HSL, OKLCH et les autres](https://pickshade.com/fr/color-formats)