# Kleurgamut uitgelegd: sRGB, Display P3 en kleuren buiten de gamut

Een gamut is de verzameling kleuren die een scherm of kleurruimte kan weergeven. Het web is gebouwd op sRGB, maar de meeste telefoons en veel laptops tonen tegenwoordig Display P3, met merkbaar feller rood, groen en oranje.

Bron: https://pickshade.com/nl/gamut
Bijgewerkt: 2026-09-28

## Wat een gamut is

Elk scherm mengt rood, groen en blauw licht. Het zuiverste rood, groen en blauw dat het kan maken vormen de hoeken van een driehoek, en elke kleur binnen die driehoek valt in de gamut. Kleuren daarbuiten kan dat scherm simpelweg niet tonen.

## sRGB, Display P3 en Rec. 2020

sRGB is de standaard van het web en van de meeste monitoren die vóór 2016 zijn verkocht. HEX, rgb() en hsl() beschrijven allemaal sRGB-kleuren.

Display P3 bestrijkt ongeveer een kwart meer kleuren dan sRGB, vooral fel groen, rood en oranje. iPhones, iPads, Macs en veel Android-telefoons en premium laptops gebruiken het. In CSS schrijf je het als color(display-p3 r g b) of als OKLCH-waarde met hoge chroma.

Rec. 2020 is nog groter en wordt gebruikt voor HDR-video. Heel weinig schermen dekken het volledig.

| Formaat | Waarde |
| --- | --- |
| 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) |

## Wat er gebeurt met kleuren buiten de gamut

Valt een CSS-kleur buiten de gamut van het scherm, dan moet de browser iets anders tonen. Simpel afkappen (clipping) zet elk kanaal op de grens en kan de kleurtoon veranderen. CSS Color 4 raadt in plaats daarvan gamut mapping in OKLCH aan: behoud lichtheid en kleurtoon en verlaag de chroma tot de kleur past.

PickShade markeert elke kleur die buiten sRGB valt en toont de omgerekende fallback, zodat je precies weet wat mensen met oudere schermen te zien krijgen.

## P3-kleuren veilig gebruiken in CSS

Schrijf eerst een sRGB-fallback en daarna de waarde met brede gamut, of zet de felle waarde in een color-gamut media query.

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

## Vragen en antwoorden

### Hoe weet ik of een kleur binnen sRGB valt?

Plak de kleur in PickShade. Elke kleur buiten sRGB krijgt een gamutwaarschuwing, samen met de dichtstbijzijnde kleur die wel past.

### Werken P3-kleuren op Windows?

Ja, als de monitor P3 dekt en de browser het schermprofiel kent. Op een sRGB-scherm zet de browser de kleur om naar sRGB, dus er gaat niets stuk.

### Is HEX beperkt tot sRGB?

Ja. HEX, rgb(), hsl() en hwb() beschrijven altijd sRGB-kleuren. Gebruik oklch() of color(display-p3 ...) voor kleuren met een brede gamut.

## Tools

- [Converter van HEX naar Display P3](https://pickshade.com/nl/convert/hex-to-p3)
- [OKLCH-kleurkiezer met gamutwaarschuwing](https://pickshade.com/nl)
- [OKLCH uitgelegd](https://pickshade.com/nl/oklch)

## Gerelateerde gidsen

- [OKLCH uitgelegd: het kleurformaat dat eindelijk klopt met je ogen](https://pickshade.com/nl/oklch)
- [CSS color-mix() en relatieve kleuren: tinten, hovers en transparantie](https://pickshade.com/nl/css-color-mix)
- [Kleurformaten uitgelegd: HEX, RGB, HSL, OKLCH en de rest](https://pickshade.com/nl/color-formats)