# Värialue selitettynä: sRGB, Display P3 ja alueen ulkopuoliset värit

Värialue (gamut) on joukko värejä, jotka näyttö tai väriavaruus pystyy esittämään. Verkko rakennettiin sRGB:n varaan, mutta useimmat puhelimet ja monet kannettavat näyttävät nykyään Display P3:a, jossa punaiset, vihreät ja oranssit ovat selvästi voimakkaampia.

Lähde: https://pickshade.com/fi/gamut
Päivitetty: 2026-09-28

## Mikä värialue on

Jokainen näyttö sekoittaa punaista, vihreää ja sinistä valoa. Puhtain punainen, vihreä ja sininen, jonka näyttö pystyy tuottamaan, muodostavat kolmion kärjet, ja jokainen kolmion sisällä oleva väri kuuluu sen värialueeseen. Kolmion ulkopuolisia värejä kyseinen näyttö ei yksinkertaisesti pysty näyttämään.

## sRGB, Display P3 ja Rec. 2020

sRGB on verkon oletus ja useimpien ennen vuotta 2016 myytyjen näyttöjen värialue. HEX, rgb() ja hsl() kuvaavat kaikki sRGB-värejä.

Display P3 kattaa noin neljänneksen enemmän värejä kuin sRGB, enimmäkseen voimakkaita vihreitä, punaisia ja oransseja. Sitä käyttävät iPhonet, iPadit, Macit sekä monet Android-puhelimet ja laadukkaat kannettavat. CSS:ssä se kirjoitetaan color(display-p3 r g b) tai OKLCH-arvona, jossa on suuri kroma.

Rec. 2020 on vielä laajempi, ja sitä käytetään HDR-videossa. Hyvin harva näyttö kattaa sen kokonaan.

| Muoto | Arvo |
| --- | --- |
| 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) |

## Mitä värialueen ulkopuolisille väreille tapahtuu

Jos CSS-väri on näytön värialueen ulkopuolella, selaimen on näytettävä jotain muuta. Yksinkertainen leikkaus katkaisee jokaisen kanavan rajalle ja voi muuttaa sävyä. CSS Color 4 suosittelee sen sijaan värialueeseen sovittamista OKLCH:ssa: vaaleus ja sävy säilytetään ja kromaa pienennetään, kunnes väri mahtuu alueelle.

PickShade merkitsee jokaisen sRGB:n ulkopuolelle jäävän värin ja näyttää sovitetun varavärin, joten tiedät tarkalleen, mitä vanhempien näyttöjen käyttäjät näkevät.

## P3-värien turvallinen käyttö CSS:ssä

Kirjoita ensin sRGB-varavaihtoehto ja sen jälkeen laajan värialueen arvo, tai kääri voimakas arvo color-gamut-mediakyselyyn.

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

## Kysymyksiä ja vastauksia

### Mistä tiedän, onko väri sRGB:n sisällä?

Liitä se PickShadeen. Jokainen sRGB:n ulkopuolinen väri saa värialuevaroituksen, ja lisäksi näet lähimmän värin, joka mahtuu alueelle.

### Toimivatko P3-värit Windowsissa?

Toimivat, jos näyttö kattaa P3:n ja selain tuntee näytön profiilin. sRGB-näytöllä selain sovittaa värin sRGB:hen, joten mikään ei hajoa.

### Rajoittuuko HEX sRGB:hen?

Kyllä. HEX, rgb(), hsl() ja hwb() kuvaavat aina sRGB-värejä. Käytä laajan värialueen väreihin oklch()- tai color(display-p3 ...) -muotoa.

## Työkalut

- [HEX–Display P3 -muunnin](https://pickshade.com/fi/convert/hex-to-p3)
- [OKLCH-värivalitsin ja värialuevaroitus](https://pickshade.com/fi)
- [OKLCH selitettynä](https://pickshade.com/fi/oklch)

## Aiheeseen liittyvät oppaat

- [OKLCH selitettynä: värimuoto, joka vihdoin vastaa silmääsi](https://pickshade.com/fi/oklch)
- [CSS color-mix() ja suhteelliset värit: vaaleat vivahteet, hover ja läpinäkyvyys](https://pickshade.com/fi/css-color-mix)
- [Värimuodot selitettynä: HEX, RGB, HSL, OKLCH ja muut](https://pickshade.com/fi/color-formats)