Kleur voor internet kalibreren
Wanneer is oranje meer rood? Webontwerpers, zelfs kieskeurige, negeren soms de kleurverschuiving tussen beeldschermen.
Hoe kan een webontwerper kleur beheren wanneer de schermen van hun gebruikers elke grootte of kleur kunnen hebben of onder alle lichtomstandigheden kunnen worden bekeken?
In tegenstelling tot het oplossen van HTML-fouten, die van invloed zijn op browsers terwijl de pagina wordt geladen, is het verkrijgen van nauwkeurige kleuren onderdeel van het werkproces van de ontwerper.
Kleuren behouden in projecten is mogelijk zodra de problemen zijn begrepen. Lees verder voor de uitdagingen en oplossingen om consistente kleuren op internet te krijgen.
Zie je het verschil tussen de onderstaande foto's?
Een van de afbeeldingen is iets meer blauw dan de andere. Deze "kleurverschuiving" of algehele tint van een bepaalde tint kan onopgemerkt blijven door de toevallige toeschouwer. Een kleine verandering in tint maakt dit immers niet minder een bloem of doet afbreuk aan het detail van de dauwdruppel. Het is een cumulatieve verandering.
Na verloop van tijd verbruiken JPEG-afbeeldingen van maximale kwaliteit en PNG-pictogrammen met 256 kleuren kostbare bandbreedte. Complexiteit in HTML verhoogt de werklast van de browser bij het laden van elke pagina. In tegenstelling tot deze problemen, die samenhangen als bezoekers door de website bladeren, is kleurbeheer een probleem met het ontwerpproces . Afbeeldingen die zijn gemaakt op een niet-gekalibreerde monitor, worden in de loop van de tijd inconsistent.
Kleurverschuiving zou kunnen gaan door een andere naam: onoplettendheid.
Wanneer kunnen we zeggen dat de kleur van een afbeelding overeenkomt met de pagina, dichtbij genoeg? Op welk punt is de kleur van een foto te onnauwkeurig? Welke details doen er niet toe voor het project als geheel? Iedereen heeft verschillende antwoorden, maar niemand die digitale afbeeldingen serieus neemt, kan de kleurkalibratie negeren.
De grafische industrie heeft tientallen jaren moeite gehad met het verkrijgen van accurate kleuren. Door ervoor te zorgen dat exact dezelfde kleuren in alle stadia van de productie verschijnen, inclusief in verschillende monitoren, kantoorprinters en hoogwaardige persen, heeft het zijn eigen branche van kalibratieapparaten, softwareoplossingen en zelfs ISO-normen voortgebracht.
De webontwerpcommunity maakt zich over het algemeen niet druk om perscontroles. Maar misschien zou het wel moeten.
Het web heeft kleurproblemen gehad omdat het kleur had
In de jaren 90 betekende het krijgen van nauwkeurige kleuren op het web een palet van 216 "webveilige" kleuren. Deze tinten en tinten werden (meestal) gegarandeerd niet te trillen wanneer ze werden weergegeven op monitoren die niet meer dan 8-bit kleuren aankonden.
Hierboven ziet u een verloop met en zonder dithering. Tegenwoordig kan de overgrote meerderheid van computers 24-bits kleuren of beter weergeven (volgens deze browser display statistieken en Google Analytics tracking van websites, waaronder Webdesigner Depot). Dat wil zeggen dat elke pixel een van de miljoenen kleuren kan weergeven, waardoor kalibratie zowel gecompliceerd als kritischer wordt.
Het web heeft lang gediend op hexidecimale codes, zoals # F35C23, om kleuren te definiëren. Deze strings van zes tekens kunnen met grote precisie een grote verscheidenheid aan tinten en waarden weergeven. Een afbeelding met # F35C23 en een CSS-achtergrond in # F35C23 komt perfect overeen.
Het probleem is dat de code een combinatie van rood, groen en blauw definieert, maar niet altijd resulteert in consistente kleuren. Schermvensters zorgen voor het verschil.
Wit is wit, behalve wanneer het dat niet is
Veel factoren beïnvloeden de kleurnauwkeurigheid bij het maken en bewerken van digitale afbeeldingen. Net als bij afdrukken, hangt de kleur op het web af van de omgeving waarin de afbeelding wordt gemaakt. In tegenstelling tot gedrukte afbeeldingen kunnen webgebaseerde afbeeldingen elke keer dat ze worden weergegeven veranderen, omdat de monitoren van gebruikers zullen variëren en geen enkele druk op de knop de problemen kan opsnorren die zich voordoen.
Hoewel veel moderne webbrowsers kunnen worden weergegeven
Maar niet alle monitoren worden op dezelfde manier gebouwd en dus kan een bepaalde oranje tint inconsistent zijn op verschillende schermen. Hier zijn enkele oorzaken van kleurverandering:
- Kleine veranderingen tussen fabrikanten en modellen zorgen voor kleine onnauwkeurigheden in tint en schakering.
- Veel schermen (met name CRT- monitoren) veranderen in de loop van de jaren van kleur en zelfs als ze in de loop van een dag opwarmen.
- Tot voor kort gebruikten Mac OS X en Windows twee verschillende "gammas", wat betekende dat afbeeldingen op Mac's helderder bleken dan die op de pc. Mac OS X 10.6 (Snow Leopard) gebruikt het meer algemene gamma van 2.2 , wat hetzelfde is als Windows en veel televisies en camcorders.
- Mensen surfen op internet op veel verschillende locaties en in veel verschillende lichtomstandigheden. Het effect van bovenlichten en de hoeveelheid en kleur van natuurlijk licht beïnvloeden allemaal het uiterlijk van kleur op het scherm.
Hierboven toont verschillende kalibratie dat "wit" vaak een aangenomen kleur is:
- Het originele beeld, geschoten onder tl-licht met een "point-and-shoot" -camera.
- Geschatte kleurverschuiving op een Mac vóór Snow Leopard.
- Geschatte kleurverschuiving op een ouder wordende CRT-monitor.
- Dicht bij ware kleuren, zoals te zien op de laptop waarop de foto is verwerkt.
Een lichtrood beeldscherm kan een anders perfect blauw als iets paars tonen of een groen met een gele tint tonen. Monitoren die te helder zijn ingesteld, zullen schaduwen en hooglichten wegspoelen; monitoren die te donker zijn ingesteld, geven modderige schaduwen en vergroten de kans op kleurverschuivingen in hoge lichten. Voor ontwerpers die om deze details geven, is kwaliteitscontrole absoluut een uitdaging.
PNG-kleurverschuiving
Simpel gezegd, de gammawaarde wijzigt de luminantie van een weergegeven afbeelding. Ontworpen voor digitale weergave, stelt het PNG-beeldformaat ontwerpers in staat gammacorrectie toe te voegen aan elke afbeelding. Maar zonder de helderheid van het uitvoerapparaat te kennen (dat wil zeggen, zonder het type monitor te kennen waarop het beeld verschijnt), hebben ontwerpers moeite met het toevoegen van nauwkeurige gammacorrectie.
Deze eigenschap is het meest beruchte probleem van PNG geworden. Op het web komt een afbeelding soms overeen met de hex-kleuren die zijn opgegeven in de CSS en andere keren niet, zelfs als deze is gemaakt met de juiste kleur.
Programma's zoals PNGCrush (Windows) en PNGenie (Mac) kan overtollige informatie uit PNG-bestanden verwijderen, inclusief de gamma-instelling, waardoor kleur betrouwbaarder wordt.
Andere problemen
Voor het voorkomen van kleurverschuivingen kunnen veranderingen in de manier waarop ontwerpers werken, noodzakelijk zijn. Slechte kleurkalibratie zal na verloop van tijd opvallen. Het is een van die ontwerpdetails die niet wordt besproken en die niet opgemerkt mag worden.
Oplossingen voor de industrie
Verschillende oplossingen hebben een groot deel van het giswerk weggenomen bij het beheren van kleuren en het voorkomen van kleurverschuiving.
De Internationaal kleurenconsortium (
ICC-profielen zijn bestanden die informatie bevatten over hoe verschillende apparaten kleuren weergeven. Printers en de meeste computers worden geleverd met ICC-profielen ingebouwd, omdat hun fabrikanten precies weten hoe ze werken. Maar aangepaste ICC-profielen kunnen een bepaald apparaat aanpassen aan bepaalde omstandigheden, bijvoorbeeld wanneer een monitor wordt gebruikt onder tl-verlichting, in plaats van naast een groot venster.
Naast bijpassende kleuren op verschillende schermen (en in gedrukte vorm) ondersteunt Adobe Flash Player 10 ICC-profielen , kleurbeheer tussen Flash en printers mogelijk maken (ervan uitgaande dat de printer van de eindgebruiker een ICC-profiel gebruikt).
In 1996 definieerden Hewlett-Packard en Microsoft de standaard rood, groen, blauw (
Deze technische oplossingen zijn sectorbrede reacties van professionele organisaties. Maar ontwerpers kunnen ook stappen ondernemen om hun werk in de loop van de tijd consistent te houden.
Tips om een ruimte voor kleurwerk klaar te maken
Welk soort licht gebruik je nu? Als u dit in uw primaire werkruimte leest en als accurate kleuren belangrijk voor u zijn, kunt u nu stappen ondernemen om uw werkruimte te verbeteren.
- Tien seconden per half uur
Neem een korte pauze en staar naar een grijze kaart van 18% . Kijken naar dezelfde kaart onder dezelfde lichtomstandigheden is een goede manier om je ogen te "resetten". (Opmerking: puristen raden 12% grijze kaarten aan, ze zijn ook goed, zolang je elke keer dezelfde kaart gebruikt. Het gaat erom iets consistents en neutraal te bekijken.) - Tien minuten
Verplaats uw monitor uit direct licht. Laat een lichtbron nooit rechtstreeks op het scherm vallen. - Vijftien minuten
Verwijder gekleurde bureauaccessoires (kalenders, markeringen, foto's, mappen - alles wat niet grijs is) uit uw gezichtslijn. Als uw monitor reflecterend is, bewaar geen kleurrijke items direct achter u. - Tien minuten per dag
Laat uw ogen zich aan de omgeving aanpassen voordat u aan het werk gaat. Geef je ogen de tijd om je aan te passen aan de werkruimte, vooral als je net binnengekomen bent van zonlicht of buiten nachtverlichting. Gebruik indien nodig een timer. - Tien minuten per week
Maak je monitor schoon. Gebruik een niet-pluizende doek om voorzichtig stof en vingerafdrukken te verwijderen, of raadpleeg de handleiding van uw eigenaar voor schoonmaakinstructies. Doe hetzelfde met je bril, als je ze draagt. - Een dag of zo
Bedek ramen in de buurt met dikke schermen of gordijnen. De belangrijkste voordelen van natuurlijk licht zijn nauwkeurigheid - het is moeilijk om meer natuurlijk te worden dan zonlicht - en beschikbaarheid. Maar natuurlijk licht varieert. Het verandert gedurende de dag, met het weer en met de seizoenen. - Een weekend
Omring uw werkruimte met neutraal grijs. Verf de muren en vervang donkere meubels met iets flauws. In het ideale geval zou uw bureaublad slechts ongeveer 60% van het licht moeten weergeven dat erop valt. GTI Munsell neutrale grijze verf is populair onder fotografen voor het creëren van neutrale achtergronden. - Een weekend of levertijd
Als u uw kantoorverlichting niet kunt aanpassen, koop of monteer een monitorscherm om verblinding en veranderende omstandigheden te voorkomen.
Tips om uw monitor te kalibreren
Het doel van kalibratie is om kleurverschuivingen te elimineren en het toonbereik van uw monitor te optimaliseren. Schaduwen moeten rijk zijn, maar toch details weergeven. De helderste highlights moeten niet te warm of te koud zijn. Op de lange termijn zorgt dit voor nauwkeurige, consistente kleuren.
Dit zijn de algemene stappen:
- Verwarm uw monitor gedurende ten minste 30 minuten op.
- Selecteer gamma (5000-9500 ° K, gamma 1.8-2.2).
- Vind de beste witte en zwarte punten.
- Breng rood, groen en blauw in balans om kleurenzwemen te voorkomen.
- Herhaal dit proces maandelijks.
Veel programma's zullen u door dit proces leiden. Adobe Gamma is een populaire snelle oplossing voor het kalibreren van CRT-beeldschermen. Afgezien van eenvoudig te gebruiken, het is gratis bij de aankoop van Photoshop of Photoshop Elements. Andere oplossingen zijn QuickGamma (Windows) en Datacolor's Spyder hardwarekalibrator.
Kleur me kieskeurig
Nauwkeurige, consistente kleuren zijn een van die kleine details die de meeste mensen - waaronder webontwerpers - kiezen te negeren in het geval van parseerfouten, webstandaarden, desinformatie van klanten en druk van de deadline.
Maar het is ook een van die elementen die zorgen voor een betere algehele ervaring. Zodra ontwerpers afwijkingen in tint en modderige schaduwen opmerken, zal het niet ongewoon zijn om geen beter werk te doen.
Exclusief geschreven voor Webdesigner Depot door Ben Gremillion. Ben is een freelancer webdesigner die communicatieproblemen met beter ontwerp oplost.