Vak apart

Kalibreren

Kleurdiepte

Kleurdiepte

Naast de helderheid van een foto is het belangrijk ook rekening te houden met de hoeveelheid kleuren, oftewel de kleurdiepte. De waarde hiervoor wordt uitgedrukt in bits. Er zijn twee belangrijkste momenten waarop de kleurdiepte in de gaten moet worden gehouden: bij het ontwerpen van een foto en bij het inschatten van de kleurdiepte die de eindgebruiker heeft ingesteld. De meeste grafici ontwerpen hun beeldmateriaal met een grafische kaart die 24 bit kleurdiepte (16,7 miljoen kleuren) kan weergeven. Het probleem is echter dat de meeste mensen (nu nog) over een grafische kaart beschikken die maar 8 bit kleurdiepte (256 kleuren) aankan. Wat gebeurt er met een foto die gemaakt is in 16,7 miljoen kleuren en die wordt getoond op een computer die maar 256 kleuren kan weergeven?

Het antwoord is simpel: de 16,7 miljoen kleuren worden teruggebracht tot 256. Daarvoor wordt een speciale techniek (dithering) toegepast. Dat zorgt ervoor dat alle kleuren die buiten de 256 kleuren vallen worden aangepast naar een kleur die wel kan worden getoond, door verschillende kleurpixels te mixen. Beeldmateriaal dat bestaat uit grote kleurvlakken zal hiervan weinig hinder ondervinden. Anders is dat bij afbeeldingen die zeer kleine, kleurrijke details bevatten. Hoe die eruit komen na het dithering-proces valt nooit precies te voorspellen. U doet er dan ook verstandig aan om de gemaakte of bewerkte foto's eerst in 256 kleuren te bekijken. U kunt dat eenvoudig doen door de hoeveelheid kleuren van het systeem terug te brengen tot 256.

Kleurmodellen

De twee bekendste kleurmodellen die op computers worden gebruikt om met afbeeldingen en illustraties te werken zijn CMYK en RGB. Die term CMYK is afgeleid van de vier kleuren cyaan, magenta, geel en zwart. CMYK-kleuren zijn 'subtractief', een term die om enige uitleg vraagt. Zonlicht bevat elke zichtbare kleur die wij kennen. Wanneer dit zonlicht op een object valt, absorbeert dat object een deel van het licht. De rest van het licht wordt weerkaatst, en die kleur wordt door onze ogen geïnterpreteerd. Zo nemen wij een rode kleur waar, omdat al het groen en blauw uit het witte licht wordt geabsorbeerd.

Met CMYK-kleuren op papier creëren we hetzelfde effect: kleuren worden gemengd om een nieuwe kleur te krijgen. De kleuren cyaan, magenta en geel zouden samen de kleur zwart moeten weergeven. Dit gebeurt echter niet omdat de kleuren daarvoor te licht zijn. Daarom worden zwarte pixels toegevoegd om het geheel donkerder te maken. Het CMYK-model is alleen belangrijk als u iets ontwerpt dat door een drukker moet worden verwerkt. Wilt u thuis iets printen of ontwerpt u voor gebruik op computerschermen, dan krijgt u te maken met het RGB model.

RGB

Het RGB model is speciaal ontworpen voor het werken op computers. Daarnaast werken alle objecten die licht 'uitzenden' met dit model. RGB bestaat uit de drie primaire kleuren rood, groen en blauw. De kleuren rood, groen en blauw zijn additief van aard, wat betekent dat een mix van deze drie kleuren wit oplevert. Iedere kleur kan een waarde hebben die ligt tussen de 0 en 100 procent, waarbij 100 de maximale helderheid van een kleur weergeeft. De kleuren worden genoteerd in een triplet (een bij elkaar behorende opsomming), waarbij de eerste waarde de hoeveelheid rood aangeeft, de tweede waarde de hoeveelheid groen en de derde waarde de hoeveelheid blauw. Zwart wordt dus weergegeven als (0, 0, 0) en wit als (100%, 100%, 100%). Een gelijke hoeveelheid van iedere kleur tussen de 0 en 100% levert altijd een grijswaarde op. De notatie van de kleurwaarde in procenten komen we maar zelden tegen. Meestal wordt er gerekend in getallen die liggen tussen 0 en 255, oftewel de waarden van een byte. De notatie (100%, 100%, 100%) is hetzelfde als (255, 255, 255) en levert dus wit op, terwijl (0, 0, 0) zwart oplevert. Ieder kleur die u maar kunt bedenken bestaat dus uit drie bytes, met een waarde tussen de 0 en 255. Het maximale aantal kleuren dat u kunt samenstellen komt daarmee op bijna 17 miljoen. Omdat de nul meetelt, wordt het 256 x 256 x 256 = 16,777,216.

Browser-veilig

Als al uw afbeeldingen zijn teruggebracht naar 256 kleuren, wil dat nog niet zeggen dat de afbeeldingen er op ieder systeem hetzelfde uitzien. Integendeel zelfs. Dat is dan ook de reden waarom web-pagina's soms zo vreselijk overkomen. De browser bepaalt het aantal kleuren dat mag worden getoond door naar het kleurpalet van het eigen systeem te kijken. Dit kleurpalet bevat altijd 256 kleuren. De browsers gebruiken allemaal hetzelfde palet om te kunnen bepalen welke kleuren kunnen worden weergegeven. Het probleem van cross platform compatibiliteit wordt veroorzaakt doordat de systeempaletten van de verschillende platformen (Windows 3.x, Windows 95 en Macintosh) niet gelijk zijn. Dit betekent dat beeldmateriaal er op ieder systeem anders uit komt te zien, zelfs bij gebruik van 256 kleuren. Maar hier is een oplossing voor gevonden. Als we de verschillende kleurpaletten met elkaar vergelijken, dan kunnen we constateren dat er 216 kleuren zijn die in ieder palet voorkomen. Dit betekent dat ieder platform 40 kleuren reserveert voor het systeem.

Bijna alle teken en fotobewerkingspakketten bieden de mogelijkheid om een keuze te maken uit verschillende kleurpaletten, waardoor u voor verschillende systemen kunt ontwerpen. Om toch 'browser-veilig' te kunnen werken is er voor verschillende programma's een speciaal web-palet beschikbaar met 216 kleuren. Op de site van grafisch ontwerper Lynda Weinman (www.lynda.com) kunt u voor een aantal van die pakketten het door haar ontwikkelde web-palet downloaden.

Van RGB naar hexadecimaal

Voor HTML pagina's wordt er de voorkeur aangegeven om kleuren te noteren als hexadecimale codes. Het is in dat geval handig om te weten hoe we een RGB-notatie (255, 131, 241) kunnen omzetten naar een hexadecimale code (FF83F1) en omgekeerd, als we een bepaalde kleur willen bewerken. U moet dan wel weten dat hexadecimale codes zijn opgebouwd uit de cijfers 0 tot en met 9 en de letters A tot en met F, waarbij de A staat voor 10, de B voor 11, de C voor 12, de D voor 13 de E voor 14 en de F voor 15.

Van RGB naar hex - We gaan uit van de RGB-notatie (231, 45, 162). Ieder getal in de RGB-notatie wordt apart berekend. We krijgen dan de volgende drie berekeningen. Eerst delen we 231 door 16 = 14,4375. Het getal links van de komma is het eerste gedeelte van de hexwaarde. In dit geval is dat 14, wat gelijk staat aan E. De cijfers die rechts van de komma staan vermenigvuldigen we met 16. In dit geval wordt dat 0,4375 x 16 = 7. De uitkomst van deze som vormt de tweede hexwaarde. De RGB notatie 231 staat dus gelijk aan de hexwaarde E7. Het tweede getal is 45. Delen door 16 geeft als uitkomst: 2,8125. De eerste hexwaarde is dus 2. Vervolgens vermenigvuldigen we 0,8125 met 16. De uitkomst hiervan is 13 (wat gelijk staat aan D), en dat getal vormt de tweede hexwaarde. De uitkomst van de berekening: RGB (45) = Hex (2D).

Het laatste getal is 162. Delen we dat door 16, dan is de uitkomst 10,125. De eerste hexwaarde is 10, dus A. Vervolgens vermenigvuldigen we 0,125 met 16. De uitkomst 2 vormt de tweede hexwaarde. De uitkomst: RGB (162) = hex (A2). De RGB notatie (231, 45, 162) geeft dus dezelfde kleur weer als de hexadecimale code (E72DA2).

Van hex naar RGB - Waarschijnlijk zult u de conversie van hexadecimaal naar RGB minder vaak gebruiken dan van RGB naar hexadecimaal. Toch kan deze conversie handig zijn wanneer u bepaalde kleuren wilt bewerken in uw softwarepakketten. Die kunnen namelijk alleen overweg met RGB-kleuren. De berekening is niet moeilijk. Van een groep bestaande uit twee hexadecimale waarden vermenigvuldigt u het eerste getal met 16 en telt daar vervolgens het tweede getal bij op.

Om te kijken of de berekening juist is gaan we de hexadecimale code (E72DA2) omzetten naar een RGB notatie. Het eerste gedeelte van de hexadecimale code is E7, het tweede gedeelte is 2D en het derde gedeelte A2. We krijgen dan de volgende drie berekeningen.
E7 = 14 x 16 + 7 = 231 (de E stond voor 14).
2D = 2 x 16 + 13 = 45.
A2 = 10 x 16 + 2 =162

Natuurlijk hoeft u niet alles op deze manier te berekenen. Er zijn heel wat gratis converters beschikbaar die het vervelende werk voor u doen. Maar u kunt ook gebruik maken van de rekenmachine die in Windows zit. Normaal gesproken zal dat de 'gewone' rekenmachine zijn, maar u kunt ook voor de wetenschappelijke rekenmachine kiezen.

Het web-palet

De afbeeldingen die u hebt gemaakt zijn 'kleurvast' als u gebruik maakt van het webpalet. Dit uit 216 kleuren bestaande palet bevat zes rode, zes groene en zes blauwe waarden. Om die reden wordt het webpalet ook wel het 6 x 6 x 6-palet genoemd. Er zijn vier manieren om aan te geven om welke kleur het gaat. We kunnen kleuren benoemen door er een naam aan te geven. Voor de meest bekende kleuren zal dit geen probleem opleveren. Maar hoe geven we een kleur geel aan die 10 procent donkerder is dan het lichtste geel dat we kennen?

Daarnaast is er het probleem dat geen enkel programma met zoveel verschillende kleurnamen overweg kan. De meeste programma's maken daarom gebruik van de in dit artikel genoemde RGB notatie. Deze kan zowel in procenten als in een decimale weergave van een 8 bit binaire waarde (tussen 0 en 255) worden weergegeven. De voorkeur gaat hier uit naar de tweede mogelijkheid, omdat deze het meest wordt gebruikt. Wat ons dan opvalt is dat alle kleuren binnen het webpalet gevormd worden door notaties die bestaan uit 00, 51, 102, 153, 204 en 255.

Om de 216 kleuren te kunnen herkennen in een HTML-pagina moeten deze worden genoteerd als hexadecimale waarde. Alleen op die manier kunnen kleuren er in iedere browser hetzelfde uitzien. Het neemt niet weg dat er zestien kleuren zijn die u ook bij naam kunt noemen, zonder dat dit problemen oplevert. Net als bij de RGB notatie kunnen we ook bij de hexadecimale waarde de kleuren uit het webpalet eenvoudig herkennen. Deze worden namelijk allemaal gevormd door de volgende zes combinaties: 00, 33, 66, 99, CC, FF. Gebruikt u een kleur die niet uit deze waarde bestaat, dan is deze niet 'browser-veilig'.

We vertelden al dat het verstandig is om 24 bit beeldmateriaal terug te brengen naar 256 kleuren, waardoor gebruikers van 8 bit kleurdiepte op hetzelfde platform geen verschillen te zien krijgen. Wilt u dat uw werk op ieder platform goed uit de bus komt, dan doet u er verstandig aan alleen de kleuren te gebruiken die in het webpalet voorkomen. Er zijn twee manieren waarop u het aantal kleuren eenvoudig terug kunt brengen. De eerste is door de afbeelding te bewerken in bijvoorbeeld Photoshop of PaintShop Pro, en daarbij het webpalet te gebruiken. Een eenvoudiger methode is: de browser al het werk laten doen. Laad simpelweg de afbeelding in uw browser, sla die op en maak vervolgens de nodige aanpassingen in uw fotobewerkingspakket.

Geraadpleegde literatuur

Lynda Weinman, Preparing web graphics, 1997; ISBN 1 56205 686 7, New Riders Publishing, USA.
Deke McClelland, Photoshop 4 ontwerpgids, 1998; ISBN 90 6789 912 7, Addison Wesley Longman, Nederland.