Wat zijn Color Spaces, Color Profiles en Gamma-Correctie?

Van Color Models naar Color Spaces en Profiles - Deel 2

Wat zijn color models? Hoe belangrijk is het om in de juiste color space te werken? En color profiles dan? Of gamma-correctie? Wat betekenen deze termen nu precies en hoe kun je ze in je voordeel gebruiken als professional om het beste resultaat met je werk af te leveren? In deel één heb ik je uitgelegd wat color models zijn. In dit tweede en laatste deel van dit blog tweeluik is het tijd om tot de kern te komen: color spaces, color profiles en gamma-correctie.

Dit deel gaat door waar we in het eerste deel zijn gebleven, maar is wel wat technischer. Dus heb je het eerste deel nog niet gelezen, raad ik je aan deze alsnog eerst te lezen. Deze vind je hier. Begrippen als color spaces, color profiles en gamma-correctie kunnen in het begin nogal verwarrend, complex en intimiderend zijn. Ik probeer het daarom zo goed mogelijk uit te leggen en heb weer wat interactives voor je gemaakt om je meer inzicht te verschaffen. Dit artikel bevat behoorlijk wat informatie, dus leg het gerust even weg en kom later terug als het teveel wordt of lees het gewoon nog een paar keer. Een goed begrip van color spaces en profiles is eigenlijk gewoon te belangrijk voor professionals om de theorie over te slaan!

Ook al zijn er verschillende color spaces en color profiles in andere kleurmodellen, zoals CMYK, schrijf ik in dit blog alleen nog maar over color spaces en color profiles die met het RGB color model werken, omdat dit het model is dat op internet en in games en video's wordt gebruikt.

Oké, laten we rustig aan het diepe in gaan!

Color models zijn relatief

In het vorige deel heb ik je uitgelegd wat color models zijn, met name het RGB Color Model welke wordt gedefinieerd met de drie kleuren rood, groen en blauw.

In computergraphics wordt het RGB Color Model gebruikt om kleuren op het scherm te omschrijven. Voor ieder kleurkanaal (rood, groen of blauw) wordt een waarde gegeven aan hoeveel van die primaire kleur moet worden toegevoegd om de drie RGB-kleurkanalen samen tot een bepaalde mengkleur te brengen. Deze waardes lopen bijvoorbeeld bij 8 bits kleuren van 0 t/m 255. Het rode deel van de mengkleur kan dus in 256 stappen worden uitgedrukt waarbij 0 staat voor geen menging en 255 voor de volledige kleur. De waarde 255 is bij rood dus het roodste rood, bij groen het groenste groen en bij blauw het blauwste blauw.

Maar een Color Model omschrijft niet hoe rood dat roodste rood, groenste groen en blauwste blauw precies is. Er is namelijk nog helemaal niet bekend hoe die primaire kleuren eruit zien in hun puurste vorm. Wij hebben de neiging te denken dat we weten hoe een pure kleur, zoals rood, eruit ziet, en dat we weten wat wit is, maar er zijn heel wat verschillende gradaties rood die wij als puur rood kunnen omschrijven en er zijn ook echt heel wat verschillende variaties wit.

Ook al lijkt een digitale kleurwaarde op internet, zoals #FF0000 voor het roodste rood, heel absoluut te zijn is dat het niet. Er is gewoonweg niet bekend hoe rood dat roodste rood eruit ziet.

We noemen daarom een Color Model relatief, omdat er geen absolute omschrijving van de kleuren is. Een afbeelding waarvan alleen een Color Model bekend is werd vroeger dan ook op verschillende monitoren anders weergegeven, omdat niet iedere monitor en weergaveapparaat dezelfde kleuren gebruikt voor puur rood, puur groen en puur blauw.

Color spaces to the rescue!

Vooral met de komst van internet kwam er dus steeds meer behoefte aan het maken van afspraken over hoe kleuren er exact uit moeten zien, onafhankelijk van op welk apparaat een afbeelding wordt weergegeven. Zodat afbeeldingen via internet uitwisselbaar zijn en er zoveel mogelijk hetzelfde uitzien op verschillende computers.

Zo'n kleurenafspraak heet een Color Space. Een RGB Color Space geeft voornamelijk aan:

• Dat het RGB color model als basis wordt gebruikt
• Wat we puur rood, wat puur groen, wat puur blauw en wat wit noemen
• Wat de gamma-transfer functie is

Het eerste punt hebben we doorgelopen in het eerste blog en op het laatste punt kom ik later in dit blog uitvoerig terug. Bij punt twee zie je dat alle kleurwaardes van het RGB Color Model in een Color Space nu een exacte omschrijving krijgen die precies beschrijft hoe een monitor een kleur moet weergegeven. Daarom noemen we color spaces absoluut.

Kleuren definiëren

Maar hoe kunnen we nu kleuren omschrijven? Daarvoor hebben we een referentiekader nodig. En dat referentiekader is ons eigen zicht; het visuele spectrum.

In de 1920s hebben W. David Wright en John Guild onafhankelijk van elkaar een aantal experimenten uitgevoerd om erachter te komen welke kleuren mensen kunnen onderscheiden en hoe groot dit bereik is. Kort samengevat is uit deze testen uiteindelijk een resultaat gekomen die de gemiddelde kleurperceptie van mensen aangeeft. Ik schrijf perceptie, omdat we als mensen niet alle kleuren daadwerkelijk waarnemen, maar ons brein ook het e.e.a. aan kleuren zelf aanvult.

Wat uit de test is gekomen is een gemiddelde, dus er zijn mensen die meer kleuren kunnen waarnemen. Zoals de tetrachromaat die ik beschreef in deel één. En er zijn ook mensen die minder kleuren zien, zoals mensen die worden gehinderd door kleurenblindheid.

Deze gemiddelde menselijke kleurperceptie heeft de basis gelegd voor de CIE XYZ Color Space die we tot op de dag van vandaag nog steeds als referentie aangehouden voor het definiëren van kleuren van alle color spaces die wij gebruiken. Dit heet een Color Space, omdat het ook echt een 3D keurruimte betreft. X, Y en Z staan dan ook voor de drie assen waarmee iedere kleur kan worden gedefinieerd.

Deze definitie is uiteindelijk in 1931 vastgelegd door CIE (Commission Internationale de l'Éclairage, of in het Engels IEC voor International Electrotechnical Commision) en heeft daarom de naam CIE1931.

Er bestaan inmiddels ook andere en verbeterde definities, zoals CIELUV en CIELAB, maar dit laat ik in dit blog voor de eenvoud buiten beschouwing en CIE1931 wordt nog steeds misschien wel het meeste gebruikt.

CIE1931

CIE1931 is dus de referentie die we gebruiken om de kleuren in al onze RGB color spaces te kunnen definiëren. Dus om te omschrijven hoe puur rood, puur groen en puur blauw eruit dient te zien en hoe wit eruit ziet voor de betreffende color space. Deze kleuren leggen we namelijk vast met hun X-, Y- en Z-coördinaten. En die corresponderen uiteindelijk weer met een golflengte.

In de volgende interactive worden enkele bekende color spaces weergegeven in CIEXYZ. Onthoud goed dat X, Y en Z niet staan voor R, G en B. X, Y en Z zijn wiskundig voortgekomen waardes die voorkomen dat er negatieve waardes zijn. Op de color spaces zelf kom ik later terug. Met de pijltjes kun je naar de volgende en vorige color space navigeren en door te klikken en slepen kun je de color spaces van alle kanten bekijken.

Het CIExy Chromaticity Diagram

Absolute kleurwaardes kunnen dus worden omschreven als 3D-coördinaten binnen de CIEXYZ ruimte. Maar voor mensen is het aflezen van een Color Space in 3D niet erg gemakkelijk. Om die reden heeft CIE een manier bedacht om de pure kleuren in een 2D diagram te kunnen weergeven. Dat diagram noemen we het CIExy Chromaticity Diagram. Hierin worden slechts de pure kleurwaardes weergegeven, dus de helderheid wordt achterwege gelaten. Voor het omschrijven van kleuren in een color space is die helderheid gelukkig ook niet relevant. Hieronder zie je hoe dit Chromaticity Diagram eruit ziet:

In het diagram zie je dat er weer sprake is van een x- en y-as, maar let op, want deze zijn nu met een kleine x en y geschreven en zijn niet dezelfde als de X, Y en Z assen (in hoofdletters) die we eerder in CIEXYZ.

Echte en imaginaire kleuren

Je ziet in het diagram een figuur in de vorm van een paardenhoef met daarin verschillende kleuren. Deze vorm bepaalt het bereik van menselijke kleurperceptie die als referentie dient voor alle voor ons mogelijke kleuren. Alles wat binnen deze paardenhoef ligt kunnen wij als mensen dus (gemiddeld) waarnemen. Dit noemen we 'echte' kleuren. Wat buiten dit gebied ligt kunnen we niet meer waarnemen en noemen we dus 'imaginaire' of 'onmogelijke' kleuren.

De waardes die om de paardenhoef staan vermeld zijn de golflengtes van het licht. Die laat ik in dit blog voor de eenvoud verder buiten beschouwing.

We hebben nu dus onze referentie om kleuren exact te definiëren en kunnen dat nu ook comfortabel in 2D doen waarbij negatieve waardes niet kunnen voorkomen!

Kleuren mengen in het CIExy Diagram

Binnen deze paardenhoef vinden we dus alle mogelijke kleuren die wij als mensen kunnen waarnemen. Nu is het mooie dat we binnen dit gebied lijnen kunnen trekken waarbij het middelpunt van een lijn steeds de mengkleur is van de kleuren aan de uitersten van de lijn!

In de volgende interactive kun je dit goed zien. Je kunt binnen de paardenhoef lijnen trekken waarbij je in het midden van een lijn steeds ziet welke kleur je krijgt als je de kleuren aan de eindes van de lijn met elkaar mengt.

Maar let wel op dat je binnen de driehoek blijft die ik in de hoef heb getekend. Kom je buiten die driehoek bij het trekken van een lijn kom je in een gebied terecht van kleuren die je browser niet kan weergeven en veel monitoren ook niet. Die driehoek geeft namelijk het bereik aan van de sRGB color space. Je ziet hierbuiten wel kleuren weergegeven, maar dit zijn niet de werkelijke kleuren, want die kan je browser gewoonweg niet weergeven. Meer daarover later, nu is het tijd kleuren te gaan mengen!

Je kunt lijnen trekken door binnen de hoef te klikken en terwijl je pointer op het scherm rust de lijn uit te trekken naar het eindpunt. Je kunt ook de punten verplaatsen naar een nieuwe locatie of het middelpunt verschuiven om de mengkleur meer naar kleur A of kleur B te laten neigen. Maar kom niet buiten de paardenhoef!

Color Gamut

Nu we een referentie hebben voor de maximale kleuren die wij als mensen kunnen onderscheiden kunnen we binnen dit gebied ook de primaire kleuren van een Color Space plaatsen. Er bestaan nog geen monitoren die alle kleuren die wij kunnen waarnemen ook kunnen weergeven. En zo'n monitor zou ook onbetaalbaar zijn.

Als we de punten rood, groen en blauw vervolgens met elkaar verbinden krijgen we een driehoek in het diagram die het bereik van kleuren voor die Color Space aangeeft. Hoe groter dus de driehoek, des te groter de Color Gamut. Color gamut is het bereik van kleuren in een Color Space. Een grotere color gamut is dus een groter bereik aan kleuren in een Color Space.

Wit-referentie

Om een absolute Color Space te zijn is er naast exacte locaties van de primaire kleuren ook een definitie nodig van wat we wit noemen.

Er zijn een aantal gestandaardiseerde witpunten (standard illuminants) die worden gebruikt in bekende color spaces. Deze beginnen met een letter, vaak gevolgd door nog een getal. Hierbij geeft de letter de categorie aan waar dit wit in valt. De 'D' bijvoorbeeld staat voor 'Daylight', oftewel hoe wit er in natuurlijk daglicht zit. Wit bij daglicht is bepaald op een aantal plaatsen in de wereld en bij verschillende tijden op een dag. En zo zijn er dus een aantal verschillende 'D'-nummers voor wit die allemaal wit zijn, maar net even anders. Het wit D65 staat bijvoorbeeld voor middag daglicht.

Binnen de D-categorie zijn D65, D50 en D60 belangrijke spelers die we bij veel RGB color spaces gebruiken. In de diagram zie je waar de witpunten D50 en D65 zich bevinden in het visuele spectrum.

Onze perceptie van licht

In tegenstelling tot wat je misschien zou verwachten nemen mensen met hun ogen lichtsterktes (luminantie) niet één op één waar zoals het daadwerkelijk wordt uitgestraald.

De daadwerkelijke luminantie van licht nemen wij niet lineair waar, maar met een curve. Dat kun je goed zien in deze grafiek. Bij een lichtsterkte van 12%, dus nog redelijk donker, nemen wij niet 12%, maar zo'n 38% licht waar! Dat is dus zo'n driemaal zo helder als de daadwerkelijke luminantie!

Hoe groter de lichtsterkte, des te minder groot dit verschil tussen perceptie en daadwerkelijke luminantie is. Dit betekent dus dat we in het donker meer contrast waarnemen en in lichte regio's minder. Dat zal vast te maken hebben met het kunnen overleven in het donker.

Camera's en monitoren

Maar hoe is dat met de verhouding tussen daadwerkelijke luminantie en de spanning die de camera-sensoren afgeven bij licht. En hoe is de verhouding tussen ingangsspanning van een monitor en de lichtopbrengst bij verschillende spanningen?

Een camera zet over het algemeen luminantie lineair om naar spanning, dus als er meer licht er op de sensor valt, wordt dit ook lineair in een hogere spanning omgezet.

Ook bij een moderne flat screen monitoren verloopt het omzetten tussen ingangsspanning en uitgangs-luminantie lineair. Als je meer spanning aanbiedt, wordt er dus ook lineair meer licht uitgestraald.

Maar dat was niet het geval bij oude CRT-schermen. CRT-schermen hadden een electronenkanon en zo'n kanon is technisch niet in staat om spanningen lineair om te zetten in lichtopbrengst van het scherm. De verhouding tussen inkomende spanning en lichtopbrengst verliep non-lineair, in de vorm van een boog. De vorm van die curve kan met een enkel getal worden genoteerd: gamma. Bij oude CRT-monitoren was de gamma-waarde van de beeldbuis vaak 2.5.

Het bijzondere is dat de vorm van deze curve nagenoeg het omgekeerde is van de curve van hoe mensen luminantie waarnemen. Kijk nog maar eens naar de grafiek die we eerder zagen. Dat is echt puur toeval. We willen liever een lineair verloop tussen ingangsspanning en lichtopbrengst bij een monitor. Dus we zullen om de één of andere manier deze curve weer moeten herstellen tot een rechte lijn; dat noemen we gamma-correctie.

Onder anderen om compatible te blijven met oude CRT-schermen bootsen moderne monitoren, zoals flat screens, met behulp van elektronica de gamma-curve van oude CRT-monitoren na. Zodat ook bij flat screens normaliter gamma-correctie nodig is.

Gamma-correctie

Nu we de gamma-waarde van een scherm weten (in oude beeldbuizen vaak dus 2.5) kunnen we de curve opheffen door er, simpel gezegd, een omgekeerde curve bij op te tellen. Dit noemen we de gamma transfer functie.

Het is voor designers niet noodzakelijk te weten hoe dit onderwater gebeurt, maar wel om je te realiseren wanneer dit wel en wanneer niet nodig is en hoeveel gamma dan gecorrigeerd dient te worden. Anders zien je grafische elementen en foto's er anders uit dan ze zijn bedoeld.

In de volgende illustratie geeft de middelste grafiek de display-gamma weer, dus het verloop tussen ingangsspanning en uitgangs luminantie van een beeldscherm. We willen deze display-gamma curve graag compenseren zodat deze, zoals je in de rechter grafiek kunt zien, weer uitkomt op lineair, dus een rechte lijn. Dat doen we door (simpel gezegd) afbeeldingen niet direct lineair aan te bieden aan de monitor, maar door alle pixels eerst door een gamma transfer functie te laten lopen die de gecorrigeerde waarde meestal eerst opslaat in een grafisch bestand, zoals jpg. Deze gamma-correctie curve zie je in de eerste grafiek. De transfer-functie is versimpeld gezegd het omgekeerde van de display-gamma, dus 1 gedeeld door de gamma-waarde.

Subjectieve correctie

Maar daarmee zijn we er nog niet. Want als afbeeldingen en animaties op deze manier op monitoren worden vertoond vinden wij ze als mensen nog niet zo prettig om naar te kijken. Dat heeft te maken met o.a. flair (gloed) van monitoren die de helderheid van het beeld ook beïnvloed. Als we toch bezig zijn willen we dat dus ook graag corrigeren. Dit noemen we subjectieve correctie.

Nu zou je misschien verwachten dat de elektronica van een monitor dit zou regelen, maar omdat we op bestands-niveau toch al een gamma-correctie zelf dienen toe te passen, is ooit besloten dat deze correctie daar gemakkelijk ook direct in meegenomen kan worden. Ja, licht en kleur zijn uiteindelijk nog behoorlijk complex.

Toch hebben ze dit gelukkig gemakkelijk en overzichtelijk voor ons gemaakt, zodat we hier niet mee hoeven te rekenen. Deze correctie is namelijk al verrekend in de gamma-waarde die monitorfabrikanten ons geven. In geval van het oude CRT-scherm werd daarom niet de fysieke gamma-waarde (2.5) doorgegeven, maar de gecorrigeerde waarde 2.2. Als wij nu een gamma-correctie toepassen van (simpel gezegd) 1 gedeeld door 2.2, dus 0,45, is daarin ook gelijk de subjectieve correctie meegenomen. Hoera, dat is ook weer opgelost!

Wat als het mis gaat met gamma?

Het is belangrijk te begrijpen wat je doet als het om color spaces en gamma-correctie gaat. Als je hierin namelijk een fout in de keten zien je afbeeldingen er of te licht of te donder uit en sluipen er fouten in het resultaat. Daarom nu een interactive om gamma-correctie beter te gaan begrijpen. En te gaan inzien wat een verkeerde instelling met je graphics doet.

In de volgende interactive zie je rechts een foto die is opgedeeld in twee helften. In de bovenste/linker helft zie je het origineel van een foto. Rechts/onder hoe deze wordt weergegeven met de door jou gemaakte gamma-instellingen. Met de pijltjes boven en onder de eerste twee grote grafieken kun je invloed uitoefenen op het systeem. In de middelste grote grafiek kun je de monitor schakelen van lineair (gamma = 1) naar non-lineair (gamma is groter dan 1, in dit voorbeeld 2.2). Met de pijltjes boven en onder de eerste grote grafiek kun je bepalen of je wel of geen gamma-correctie toepast.

Probeer eens wat verschillende instellingen en zie wat die doen met de laatste grafiek en dus met je foto. Het is de bedoeling dat de laatste grafiek altijd lineair is en dus de foto weergeeft zoals het hoort. Als alle grafieken groen kleuren is het systeem in balans en wordt de foto juist weergegeven. Kleuren de grafieken rood is er iets mis. Bij welke instelling wordt je foto te donker weergegeven? En bij welke te licht? En welke twee varianten heb je dat de foto juist wordt weergegeven? Succes!

Gamma Encoding

Hopelijk begrijp je nu waarom het zo belangrijk is te begrijpen wanneer je wel en wanneer je geen gamma correctie toe moet passen. En wat het met je graphics doet als er iets mis gaat in het systeem.

Maar er is nog een ander groot voordeel aan het toepassen van gamma-correctie in je grafische bestanden. Zoals je misschien zelf al hebt opgemerkt lijkt de display-gamma curve bij een gamma van 2.2 namelijk erg lijkt op de omgekeerde grafiek die weergeeft hoe wij als mensen luminantie waarnemen, zoals we eerder zagen. Het blijkt namelijk, geheel toevallig, nagenoeg precies de omgekeerde curve te zijn! We kunnen dus stellen dat er in je grafische bestanden waarin je gamma-correctie toegepast, die dan dus nagenoeg dezelfde curve heeft als hoe wij waarnemen, dus ook meer verschillende gradaties kunnen worden onderscheiden in donkere gebieden dan in lichte gebieden. Precies zoals wij mensen ook contrast waarnemen. Door een afbeelding dus al gamma gecorrigeerd op te slaan is deze dus al optimaal aangepast aan ons zicht, zodat details die wij goed kunnen onderscheiden ook beter kunnen worden opgeslagen en we met een lager aantal bits een kwalitatievere afbeelding hebben. Hiermee zouden we zelfs een bestand kunnen opslaan met 8 bits per kleurkanaal, in plaats van 10 bits, voor dezelfde kwaliteit. Alleen al door gamma-correctie toe te passen! We gebruiken daarom ook soms de begrippen encoding voor het toepassen van gamma-correctie.

Hiernaast werkt ook de digitale compressie, die na de gamma-correctie wordt toegepast bij veel bestandsformaten, ook nog eens beter en is ook die volledig geoptimaliseerd op ons zicht. Gamma-correctie is dus helemaal zo gek nog niet en al lang niet meer alleen vanwege de compensatie van oude CRT-techniek!

Gamma per color space

Niet iedere color space gebruikt dezelfde gamma-waardes. En er zijn ook lineaire color spaces, die dus een gamma van 1 hebben. In het laatste geval is gamma-correctie dus ook niet aan de orde. Om dit blog nog enigszins beknopt te houden zal ik in dit artikel geen color spaces met elkaar gaan vergelijken of uitleggen welke te gebruiken. Hieronder laat ik wel enkele color spaces met hun gamma-waardes zien, zodat je ziet dat er niet alleen in de kleurwaardes verschillen zijn tussen color spaces, maar dat dit ook het geval kan zijn op het gebied van gamma-correctie.

Lineaire workflow

Vooral in 3D-modelling-software zweren steeds meer ontwerpers voor een lineaire workflow. Hiermee wordt bedoeld dat afbeeldingen voor textures die al een gamma correctie hebben, zoals vaak jpg's, eerst naar lineair terug moeten worden geconverteerd en dat de hele 3D-omgeving intern lineair signalen doorgeeft. Dus al het virtuele licht, shaders, gegenereerde kleuren en nabewerking wordt dan in de software lineair behandeld. En pas bij het renderen van het resultaat wordt indien gewenst de gamma-correctie toepast. Voordeel hiervan is dat je het virtuele licht veel meer natuurgetrouw werkt.

RGB color spaces

Als je hier bent aanbeland: proficiat! Dit is redelijk technische stof en redelijk veelomvattend en daardoor is een korte uitleg niet altijd mogelijk. We zijn er nog niet, maar wel bijna! We hebben nu de onderdelen behandeld die samen een Color Space definitie maken; primaire kleuren, wit-referentie en gamma transfer functie.

Er bestaan honderden color spaces. Alleen voor het RGB color model al. Je zou zelf ook je eigen color space kunnen bedenken. Gelukkig zijn er een aantal standaarden vastgelegd die wereldwijd veel gebruikt worden. Color spaces met ieder hun eigen eigenschappen, voor- en nadelen en toepassingen. Het gaat te ver om deze in detail te beschrijven in dit blog. In de volgende interactive kun je wel alvast een aantal veelvoorkomende color spaces met elkaar vergelijken in het CIExy Chromaticity Diagram. Zo kun je goed het verschil zien tussen verschillende color gamuts van de color spaces. En je ziet ook al dat sommige color spaces zelfs kleuren in zich hebben die buiten het voor mensen visuele spectrum vallen en dus imaginair zijn.

Color profiles

Gelukkig, we weten nu wat color spaces zijn en ook wat gamma-correctie is. Maar hoe werken we daar in de praktijk nu mee?

De begrippen color spaces en color profiles worden nogal eens door elkaar gebruikt. Vaak is dat geen probleem en kan dat ook als je maar begrijpt waar je over spreekt. Toch betekenen ze niet hetzelfde.

Een Color Profile is een numeriek model van een Color Space. Eigenlijk zou je kunnen zeggen dat een Color Profile onder anderen dus het daadwerkelijke digitaal toepassen van een Color Space is. En een manier biedt om de gekozen Color Space aan een bestand te kunnen koppelen. Een Color Profile vertelt dus precies hoe de relatieve digitale kleurwaardes van het RGB Color Model naar absolute kleur kunnen worden omgezet via de gekozen Color Space. Maar een Color Profile weet ook hoe het zijn color space kan vertalen naar andere color spaces.

Het is voor iedere professional dus van belang dat bestanden altijd de juiste embedded color profile bevatten! Anders 'zweven' je kleuren relatief rond zonder definitie en weet geen software of hardware meer hoe de kleuren in je bestand ooit waren bedoeld. Bij gebrek aan een color profile worden kleuren en/of helderheid van een afbeelding bij een verkeerde color space keuze, dus foutief weergegeven op het scherm.

Assign Color Profile

Als je foto's maakt met een camera krijgt een afbeelding (bijv. jpg) vaak al gelijk een Embedded Color Profile mee. Dus een Color Profile dat als meta-data wordt opgeslagen in het bestand. Zo weet een grafisch programma zoals Photoshop of Affinity Photo aan de hand van het color profile precies hoe de kleurwaardes in het bestand vertaald kunnen worden naar gedefinieerde kleuren. En welke gamma-correctie al dan niet van toepassing is. En kun je in dat color profile met die color space en het bijbehorende color model dus eventueel ook verder gaan bewerken of ontwerpen.

Maar niet altijd is een color profile in een bestand aanwezig. Als er geen color profile aanwezig is kun je er alsnog een embedden. Dat heet meestal iets als 'Assign color profile'. Assign profile doet niets anders dan vertellen in welke Color Space de afbeelding is gemaakt en slaat dat op in het bestand bij opslaan. Bij 'assign profile' is het dus erg belangrijk dat je wel de juiste color space kiest, dus de color space waarin de afbeelding ook daadwerkelijk is gemaakt. Anders 'begrijpen' softwarepakketten je afbeelding alsnog niet goed en krijg je waarschijnlijk niet de kleuren te zien die de afbeelding hoort te hebben.

Assign profile wijzigt dus niet de kleurwaardes in je bestand, maar geeft alleen een betekenis aan deze kleur-waardes door ze met een color profile te koppelen aan een color space.

Converteren van color profiles

Als je in een programma als Photoshop of Affinity Photo een afbeelding met een bepaalde color space wilt omzetten naar een andere color space, maakt de software gebruik van de color profile die al in het bestand aanwezig is. Als die natuurlijk aanwezig is. In de Color Profile staat namelijk precies aangegeven hoe de huidige Color Space kan worden omgezet naar een andere Color Space.

Om color spaces naar elkaar om te zetten maakt een color profile gebruik van een derde color space: de Profile Connection Space (PCS). Dit is een Color Space die wel zo groot is dat alle andere color spaces erin passen en alle color spaces zo dus naar elkaar kunnen worden geconverteerd met zo min mogelijk tot geen verlies. De Profile Connection Space is vaak CIEXYZ, zoals we eerder al in 3D zagen, of CIELAB. CIELAB laat ik in dit blog buiten beschouwing. Voor nu is vooral belangrijk dat beiden alle kleuren kunnen bevatten die wij als mensen kunnen waarnemen. Omdat een Color Profile zo dus altijd weet hoe zijn Color Space omgezet kan worden van of naar die Profile Connection Space kunnen alle mogelijke color spaces naar elkaar worden omgezet.

Vaak gebeurt deze conversie met een formule. Zo blijft het color profile in je bestand klein zodat je bestand niet onnodig groot wordt. Wat erg belangrijk is op internet om downloadsnelheden laag te houden. Maar er zijn ook color profiles die deze conversie doen met een lookup-tabel. Dit laatste gebeurt vooral bij Device color spaces / Device color profiles, omdat op deze manier veel preciezer kan worden bepaald hoe waardes naar elkaar worden omgezet. Maar het levert ook een aanzienlijk groter bestand op helaas.

In tegenstelling tot 'assign profile' wijzigt 'convert profile' in een grafisch programma dus wel degelijk de kleurwaardes in je bestand.

Overigens kan een color profile een color space in het RGB-model via dezelfde Profile Connection Space ook omzetten naar een CMYK color profile. Daar maakt een printer, die werkt in CMYK, dus handig gebruik van!

Embedded color profiles

Maar hoe ziet zo'n embedded color profile er nu eigenlijk uit? Gelukkig bestaat er een handige commandline tool die meta-data uit een bestand uit kan lezen en dat weergeeft op het scherm. Deze tool heet exiftool en kun je hier gratis downloaden.

Om je een indruk te geven van de color profile meta-data in een jpg, dit is het resultaat dat ik kreeg:

Zoals je hierin kunt zien staat bij 'ColorSpaceData' netjes dat de Color Space in het RGB model is, staan de absolute waardes van Rood, Groen en Blauw in deze color space uitgebreid gedefinieerd als 'channels', zie je de illuminant, dus de wit-referentie en kun je ook terugvinden dat bij het converteren van of naar een andere color space als Profile Connection Space de CIEXYZ color space wordt gebruikt.

Drie soorten color color spaces / profiles

Er bestaan drie soorten color profiles waar de details voor de strekking van dit blog niet erg belangrijk zijn, maar die toch handig zijn om te kennen om de toepassingen van color spaces beter te begrijpen.

• Working color space / profile
  Dit is de color space waarin je je designs maakt en bewerkt. Een working color space is in principe niet afhankelijk van welke apparaten je gebruikt (device independent). Je wilt deze color space vaak liefst zo groot mogelijk hebben, zodat je een groot bereik aan kleuren ter beschikking hebt en conversie naar de uiteindelijke output color space met zo goed mogelijk gebeurt.
• Device color space / profile
  Dit is een color space die speciaal voor een specifiek apparaat is ontworpen, zoals een computerscherm, printer of beamer om de kleur-eigenschappen van het apparaat te compenseren. Dit type color space is dus 'device-dependent' en wordt gebruikt door het systeem. Het is normaliter dan ook niet de bedoeling dat je dit type color space / profile gebruikt in je ontwerpen en opslaat als embedded profile in een bestand.
• Output color space / profile
  De output color space die het uiteindelijke resultaat van je ontwerp meekrijgt. Als je doel werk delen via internet is zal dit (vooralsnog) normaliter de color space sRGB zijn die overal op internet wordt ondersteund en zelfs speciaal voor internet is bedacht. Maar op dit moment wordt er gewerkt aan ondersteuning voor meer color spaces op internet.

Kopiëren en plakken van afbeeldingen

En nu zit je met de situatie dat je twee afbeeldingen hebt, waarbij het ene bestand in color space A is ontworpen en het andere bestand in color space B... En je wilt de ene afbeelding binnen de andere plakken binnen bijvoorbeeld Photoshop.... Gaat dat wel goed?

Een professioneel pakket als Photoshop bekijkt voordat het een afbeelding in een ander bestand plakt eerst in welke color space de afbeelding is gemaakt. Als de afbeelding een embedded color profile heeft kan dan de afbeelding gemakkelijk worden omgezet naar de color space van het doelbestand en vervolgens worden geplakt. Dit gebeurt allemaal zonder dat jij het doorhebt.

Als het bestand geen color space heeft gokken veel softwareprogramma's, zoals browsers, meestal dat een afbeelding in de sRGB color space hoort te staan. Maar beter is natuurlijk om er zelf voor te zorgen dat je bestanden de juiste embedded color profiles bevatten.

Uiteindelijk krijgt de geplakte afbeelding in ieder geval dezelfde color space toegewezen als het doelbestand, zodat alles weer met elkaar in balans is.

Color depth (= bit depth) en Banding

Als laatste nog een klein uitstapje naar color depth, omdat dat niet alleen direct van invloed is op de kwaliteit van je designs, maar ik hiermee ook een belangrijk misverstand wil wegnemen die bestaat over color spaces met een grote color gamut.

We hebben gezien dat een RGB color space definieert wat de exacte waardes zijn van puur rood, puur groen en puur blauw. Maar de color space bepaalt niet in hoeveel stappen deze waardes van 0 tot puur zijn in te stellen. Dit aantal stappen wordt bepaald door de color depth, ook wel bit depth genoemd. En wordt vaak weergegeven in bpp (bits per pixel).

Het gaat vaak om een veelvoud van 8 bits:

• 8 bits: pseudo color
• 16 bits: hi color
• 24 bits: true color

Hoe meer bits per pixel, des te meer kleur-gradaties er kunnen worden weergegeven en des te vloeiender een kleurverloop kan worden weergegeven. Dat is vooral goed te zien bij kleurverlopen (gradients). Als een kleurverloop namelijk wordt opgeslagen met een laag aantal bpp ga je namelijk de overgangen tussen de diverse tinten waarnemen als blokken die springen van de ene naar de andere gradatie. Dat bijverschijnsel noemen we banding.

In de volgende interactive kun je het verschil goed zien tussen een originele afbeelding met een radiaal kleurverloop als zon (links van de slider) en rechts van de slider hoe dezelfde afbeelding eruit zou zien als deze veel last zou hebben van banding. Beweeg de slider maar eens heen en weer en zie dat je rechts van de slider duidelijk de overgangen tussen de verschillende kleurwaardes waar kunt nemen. Dat komt doordat er gewoonweg te weinig kleurgradaties met het aantal bits mogelijk is om het kleurverloop soepel te laten overgaan. Banding wil je als designer natuurlijk tot een minimum beperken.

Nu heerst er onder sommigen een misverstand dat een color space met een wijdere color gamut, dus 'een grotere color space' direct gekoppeld is aan een hogere kwaliteit. Dat hoeft echter helemaal niet zo te zijn. Als een grotere color space namelijk dezelfde color depth houdt als een kleinere color space, betekent dat namelijk dat een groter bereik aan kleuren wordt verdeeld over hetzelfde aantal gradaties, waardoor je dus ook sneller zichtbare banding te zien zult krijgen, omdat kleurwaardes verder van elkaar liggen. Alhoewel niet noodzakelijk is het bij gebruik van een grotere color space dus, zeker bij het gebruik van kleurverlopen, soms aan te raden ook een grotere color depth te kiezen.

Conclusie

Pfew. Dit is uiteindelijk een nogal uitgebreid blog geworden en dat is niet zonder reden. Color spaces en color profiles zijn redelijk complex en technisch en de besproken begrippen hebben allemaal invloed op elkaar waardoor ik ze voor het begrip allemaal belangrijk vind om ze te bespreken en om het goed uit te kunnen leggen. Er is nog ongelofelijk veel meer over te vertellen, maar dit zijn in de basis wel de belangrijkste zaken om color spaces en color profiles te kunnen begrijpen en ermee te kunnen werken.

Het blijft natuurlijk een technisch verhaal, maar ik hoop dat ik je, tevens door middel van interactives en illustraties, meer inzicht heb kunnen geven in wat color models, color spaces en color profiles precies zijn en waarom een begrip ervan belangrijk is om als professional het beste resultaat te kunnen leveren.

Voor werk op internet is het voorlopig aan te raden alles uiteindelijk aan te leveren in sRGB. Maar op dit moment zijn een aantal belangrijke veranderingen gaande die ervoor gaan zorgen dat internetbrowsers meer color spaces gaan ondersteunen. Dit is een belangrijke stap die designers meer ruimte gaat geven om werk ook in grotere color spaces te kunnen uploaden, wat de kwaliteit van graphics online erg ten goede komt. Op dit moment is dat echter nog niet aan te raden, omdat de meeste consumenten-monitoren vrijwel alleen de sRGB color space ondersteunen. En als je een afbeelding bekijkt op een sRGB monitor, terwijl die eigenlijk in een grotere color space is gemaakt, worden de kleuren vaak grauw weergegeven, omdat browsers de color space niet intern converteren.