Väriavaruus on matemaattinen malli, joka kertoo, miten värit voidaan esittää lukusarjoina. Yleensä nämä lukusarjat koostuvat kolmen tai neljän perusvärin yhdistelmästä. Digitaalisten vempeleiden näyttöjen kanssa käytössä on pääsääntöisesti jokin punaisen, vihreän ja sinisen yhdistelmiä käyttävän RGB-värimallin väriavaruus, kun taas painoteollisuudessa yleisesti käytetään syaanista, magentasta, keltaisesta ja mustasta koostuvaa CMYK-värimallia.
Verkkosivustoilla käytetään lähes yksinomaan vuodelta 1996 peräisin olevaa näyttöjen, tulostinten ja verkkosivujen käyttöön kehitettyä sRGB-väriavaruutta. sRGB:n kehittäjinä toimivat yhteistyössä Microsoft ja HP, ja se sai myöhemmin IEC:n standardoinnin myötä iskevän kutsumanimen IEC 61966-2-1:1999. sRGB on edelleen oletusväriavaruus lähes kaikessa digitaalisessa värienkäsittelyssä, vaikka tekniikka on kehittynyt huimasti menneen neljännesvuosisadan aikana.
Lähemmäs lokusta
Väriavaruuksien tärkein ominaisuus on se, kuinka laaja-alaisesti ne pystyvät ilmaisemaan värejä. RGB-väriavaruuksilla tätä ominaisuutta visualisoidaan yleensä käyttäen CIE 1931xy väriavaruuden kromaattisuusdiagrammia. Kromaattisuusdiagrammin ulkokehä on nimeltään lokus ja mitä lähemmäs lokusta väriavaruus ulottuu, sitä paremmin se pystyy toistamaan lokuksella olevia sävyjä.
sRGB:n peitto kromaattisuusdiagrammista on melko vaatimaton etenkin vihreän väritoiston osalta. Tästä paremmaksi pistää toinen laajalti käytetty RGB-väriavaruus, Adobe RGB, joskin vihreän huippupiste siirtyy hieman enemmän sinisen sävyn suuntaan verrattuna sRGB:hen. Toivottavaa siis jää molemmilla ja ilmeisesti kumpikaan väriavaruus ei täyttänyt Hollywoodin elokuvateollisuuden vaatimuksia värientoistolle, joten vuonna 2005 Digital Cinema Initiatives (DCI) määritteli ensimmäisen version Digital Cinema System Specification -kokonaisuudesta, joka myöhemmin tuli tunnetuksi DCI-P3-nimisenä väriavaruutena.
Epäilemättä johtuen väriavaruuden juurista elokuvateollisuudessa, parantaa DCI-P3 etenkin vihreiden ja punaisten värien toistoa merkittävästi verrattuna sRGB:hen ja Adobe RGB:hen. Vihreä huippupiste on DCI-P3:ssa huomattavan lähellä lokusta ja punainen käytännössä lokuksella. Sinisissä sävyissä näiden kolmen RGB-väriavaruuden välillä ei ole juurikaan eroa.
Display P3
Display P3 -väriavaruus on Applen kehittämä versio DCI-P3:sta. Applen iMac-tietokoneessa vuodelta 2015 oli ensimmäinen kuluttajakäyttöön suunnattu, laaja-alaiseen väritoistoon kykenevä näyttö, joka tuki P3-väriavaruutta. Tämän jälkeen kaikki Applen esittelemät näytöt ovat tukeneet Display P3 -väriavaruutta.
Merkittävin ero Display P3:n ja perus-DCI-P3:n välillä on se, että DCI-P3 käyttää teatteriprojektorien ksenonlampuille optimoitua 6300 kelvinin valkopistettä, kun taas Display P3 käyttää sRGB:n ja Adobe RGB:n kanssa yhtenevää, itsevalaisevien näyttöjen yleiseksi standardiksi muodostunutta D65-valkopistettä (6500 kelviniä). Lisäksi Display P3:n gamma-arvo (kirkkauden ja kirkkauserojen esitystä kuvaava luku) on sama kuin sRGB:llä, 2.2, kun taas DCI-P3:lla se on 2.6.
Lopputuloksena Display P3:n CIE 1931xy -peitto on n. 25 % laajempi ja CIE 1931xyz -tilavuus (mukana valoisuuskomponentti) n. 50 % suurempi verrattuna sRGB-väriavaruuteen. Erot eivät näytä kromaattisuusdiagrammissa isoilta, mutta tosielämässä niillä on valtava vaikutus. Display P3 vaikuttaa siis erittäin hyvältä väriavaruudelta käytettäväksi esim. verkkosivustoilla, mutta mitenkäs sen käyttö oikein onnistuu?
Display P3 -väriavaruus verkkosivustolla
Noh, koska kyse on Applen kehittelemästä väriavaruudesta, vaatii Display P3:n käyttäminen käytännössä Applen teknologiapinoa:
- Applen näyttö (esim. kannettavan tai iMacin sisäinen näyttö)
- Applen käyttöjärjestelmä (macOS Mojave tai uudempi, iOS 11 tai uudempi)
- Applen selain (Safari)
Mikäli nämä ehdot täyttyvät, on Display P3 -väriavaruuden käyttäminen verkkosivustolla jopa melko simppeliä. CSS-tyyleissä väreihin voidaan viitata usealla erilaisella tavalla ja Display P3 on käytännössä vain yksi uusi tällainen tapa (tai oikeastaan niitä on kaksi). Yleiset tavat ilmaista värejä CSS:ssä ovat:
- Heksadesimaalina, kuten
#2468ac(#RRGGBB) tai#2468ac86(#RRGGBBAA) - Desimaalina, kuten
rgb(36,104,172)tairgba(36,104,172,0.53)
CSS:n värimoduulin taso 4 esittelee uuden color()-funktion, jolla voidaan määritellä haluttu väriavaruus, josta väri näytetään. Display P3 -väreihin viitataan color()-funktion avulla seuraavasti: color(display-p3 0.14117647058824 0.4078431372549 0.67450980392157 / 0.53). Väriavaruuden nimen jälkeen tulevat R-, G- ja B-arvot ovat desimaalilukuja väliltä 0-1 ja /-merkillä eroteltu luku on värin peitto, eli ns. alpha.
Koska Display P3 -väriavaruuden tuki on varsin rajallinen, ei värejä oikein voi CSS:ssä määritellä pelkästään ko. väriavaruutta käyttäen. Ongelman voi kuitenkin ratkaista käyttämällä CSS-muuttujia sekä @supports-sääntöä:
:root {
--main-color: #2468ac;
}
@supports(color: color(display-p3 1 1 1)) {
:root {
--main-color: color(display-p3 0.14117647058824 0.4078431372549 0.67450980392157);
}
}
body {
color: var(--main-color);
}
Kun värit määritellään näin, käytetään automaattisesti Display P3 -värejä yhteensopivien laitteiden ja ohjelmistojen kanssa, muuten pitäydytään tutussa ja turvallisessa sRGB:ssä. Loin taannoin Display P3 -värien käyttämistä helpottamaan työkalun nimeltä Coltrane. Coltrane on PHP-pohjainen komentorivisovellus, jolla on melko yksinkertaista konvertoida CSS-väriviittauksia sRGB:n ja Display P3:n välillä.
Erot käytännössä
Mikäli sinulla on pääsy Display P3 -yhteensopivaan laitteistoon ja ohjelmistoon, voit testata väriavaruuksien eroja käytännössä tätä varten tekemälläni verkkosivulla osoitteessa https://karhu-p3.surge.sh. Erot näkyvät erityisesti vihreän, syaanin, punaisen ja magentan kanssa.
