# A színtartomány (gamut) érthetően: sRGB, Display P3 és a tartományon kívüli színek

A színtartomány (gamut) azoknak a színeknek a halmaza, amelyeket egy képernyő vagy színtér meg tud jeleníteni. A web az sRGB-re épült, de ma már a legtöbb telefon és sok laptop Display P3-at jelenít meg, amelyben érezhetően élénkebbek a pirosak, a zöldek és a narancsok.

Forrás: https://pickshade.com/hu/gamut
Frissítve: 2026-09-28

## Mi a színtartomány

Minden képernyő piros, zöld és kék fényt kever. A legtisztább piros, zöld és kék, amit elő tud állítani, egy háromszög csúcsait jelöli ki, és minden szín, amely ezen a háromszögön belül van, a képernyő színtartományába tartozik. Az ezen kívül eső színeket az adott képernyő egyszerűen nem tudja megjeleníteni.

## sRGB, Display P3 és Rec. 2020

Az sRGB a web és a 2016 előtt forgalomba került monitorok többségének alapértelmezése. A HEX, az rgb() és a hsl() mind sRGB színeket írnak le.

A Display P3 nagyjából negyedével több színt fed le, mint az sRGB, főleg élénk zöldeket, pirosakat és narancsokat. Az iPhone-ok, iPadek, Macek, valamint sok Android telefon és prémium laptop ezt használja. CSS-ben color(display-p3 r g b) alakban vagy magas krómájú OKLCH értékként írható le.

A Rec. 2020 még ennél is nagyobb, a HDR videóknál használják. Nagyon kevés képernyő fedi le teljesen.

| Formátum | Érték |
| --- | --- |
| 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) |

## Mi történik a tartományon kívüli színekkel

Ha egy CSS szín kívül esik a képernyő színtartományán, a böngészőnek valami mást kell megjelenítenie. Az egyszerű levágás (clipping) minden csatornát a határértékre vág, ami megváltoztathatja a színezetet. A CSS Color 4 ehelyett az OKLCH-ban végzett színtartomány-leképezést (gamut mapping) ajánlja: a világosság és a színezet marad, a króma pedig addig csökken, amíg a szín bele nem fér.

A PickShade minden sRGB-n kívül eső színt megjelöl, és megmutatja a leképezett tartalék színt, így pontosan tudod, mit látnak azok, akik régebbi képernyőt használnak.

## P3 színek biztonságos használata CSS-ben

Először írj egy sRGB tartalékértéket, utána a széles színtartományú értéket, vagy tedd az élénk értéket egy color-gamut media querybe.

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

## Kérdések és válaszok

### Honnan tudom, hogy egy szín az sRGB-n belül van-e?

Illeszd be a PickShade-be. Minden sRGB-n kívüli szín színtartomány-figyelmeztetést kap, a legközelebbi beleférő színnel együtt.

### Működnek a P3 színek Windowson?

Igen, ha a monitor lefedi a P3-at, és a böngésző ismeri a kijelzőprofilt. sRGB képernyőn a böngésző az sRGB-be képezi le a színt, így semmi sem romlik el.

### A HEX csak az sRGB-re korlátozódik?

Igen. A HEX, az rgb(), a hsl() és a hwb() mindig sRGB színeket ír le. Széles színtartományú színekhez az oklch() vagy a color(display-p3 ...) függvényt használd.

## Eszközök

- [HEX–Display P3 átváltó](https://pickshade.com/hu/convert/hex-to-p3)
- [OKLCH színválasztó színtartomány-figyelmeztetéssel](https://pickshade.com/hu)
- [Az OKLCH érthetően](https://pickshade.com/hu/oklch)

## Kapcsolódó útmutatók

- [Az OKLCH érthetően: a színformátum, amely végre a szemedhez igazodik](https://pickshade.com/hu/oklch)
- [CSS color-mix() és relatív színek: világosítás, hover és átlátszóság](https://pickshade.com/hu/css-color-mix)
- [Színformátumok érthetően: HEX, RGB, HSL, OKLCH és a többi](https://pickshade.com/hu/color-formats)