Så här kalibrerar du färg för webben
När är orange mer som röd? Webbdesigners, även picky, ignorerar ibland färgskift över bildskärmar.
Hur är en webbdesigner att hantera färg när användarens skärmar kan vara vilken storlek eller färg som helst eller kan ses under några ljusförhållanden?
Till skillnad från att fixa HTML-fel, som påverkar webbläsare som sidan laddas, blir en exakt färg en del av designerns arbetsprocess.
Att upprätthålla färger över projekt är möjlig när problemen förstås. Läs vidare för utmaningarna och lösningarna - för att få konsekvent färg på webben.
Kan du upptäcka skillnaden mellan bilderna nedan?
En av bilderna är något mer blå än den andra. Denna "färgskift" eller övergripande nyans av en viss nyans kan bli obemärkt av den informella observatören. När allt kommer omkring, gör en liten ändring i nyans inte detta något mindre av en blomma eller förringar dewdrops detaljer. Det är en kumulativ förändring.
Med tiden äter högsta kvalitet JPEG-bilder och 256-färgs PNG-ikoner upp dyrbar bandbredd. Komplexiteten i HTML ökar webbläsarens arbetsbelastning med varje sidlastning. Till skillnad från dessa problem, som lägger till som besökare bläddra på webbplatsen, är färghantering ett problem med designprocessen . Bilder som skapas på en okalibrerad bildskärm blir inkonsekventa med tiden.
Färgskift kan gå med ett annat namn: oattentivitet.
När kan vi säga att en grafiks färg matchar sidan nära nog? Vid vilken tidpunkt är en bilds färg för felaktig? Vilka detaljer spelar ingen roll för projektet som helhet? Alla kan ha olika svar, men ingen som tar digitala bilder på allvar kan ignorera färgkalibrering.
Utskriftsindustrin har kämpat med att få exakt färg i årtionden. Att säkerställa att exakt samma färger förekommer i alla produktionsstadier, inklusive i olika bildskärmar, kontorsskrivare och avancerade pressar, har skapat sin egen industri för kalibreringsanordningar, mjukvarulösningar och till och med ISO-standarder.
Webbdesignsgemenskapen brukar inte oroa sig för presskontroller. Men kanske det borde.
Webben har haft färgproblem eftersom det hade färg
På 1990-talet fick man en riktig färg på webben med en palett på 216 "webbsäkra" färger. Dessa nyanser och nyanser var (mestadels) garanterade att inte dither när de visades på bildskärmar som inte kunde hantera mer än 8-bitars färg.
Ovan är en gradient med och utan dithering. Idag kan de allra flesta datorer visa 24-bitars färg eller bättre (enligt denna webbläsars displaystatistik och Google Analytics-spårning av webbplatser, inklusive Webdesigner Depot). Det vill säga, varje pixel kan visa en av miljontals färger, vilket gör kalibreringen både komplicerat och mer kritiskt.
Webben har länge litat på hexidekala koder, som # F35C23, för att definiera färger. Dessa sex teckensträngar kan visa en mängd olika nyanser och värden med stor precision. En bild som har # F35C23 och en CSS-bakgrund i # F35C23 kommer att matcha perfekt.
Problemet är att koden definierar en kombination av rött, grönt och blått men resulterar inte alltid i konsekvent färg. Skärmarna står för skillnaden.
Vit är vit, utom när det inte är
Många faktorer påverkar färgnoggrannheten när du skapar och redigerar digitala bilder. Precis som för utskrift beror färg på webben på miljön där bilden skapas. Till skillnad från utskrift kan webbaserade bilder ändras varje gång de visas, eftersom användarens bildskärmar varierar, och ingen tryckkryp kan få problem som uppstår.
Även om många moderna webbläsare kan visa
Men inte alla bildskärmar är desamma, så en viss orange färg kan vara inkonsekvent över olika skärmar. Här är några av orsakerna till färgförändring:
- Små förändringar mellan tillverkare och modeller står för små felaktigheter i skuggan och nyansen.
- Många skärmar (speciellt CRT- bildskärmar) byter färg under åren och även när de värms upp under en dag.
- Fram till nyligen använde Mac OS X och Windows två olika "gammas", vilket innebar att bilder på Mac-skivor uppträdde ljusare än de på datorn. Mac OS X 10.6 (Snow Leopard) använder det vanligare gammaet av 2.2 , vilket är detsamma som Windows och många TV-apparater och videokameror.
- Människor surfar på nätet från många olika platser och i många olika ljusförhållanden. Effekten av strålkastare och mängden och färgen på det naturliga ljuset påverkar allt färgen på skärmen.
Ovan visar olika kalibreringar att "vit" ofta är en antagen färg:
- Den ursprungliga bilden, sköt under lysrör med en punkt-och-shoot-kamera.
- Ungefärlig färgskift på en Mac före Snow Leopard.
- Ungefärlig färgskift på en åldrande CRT-monitor.
- Nära till sann färg, som ses på den bärbara dator som bilden behandlades på.
En något röd bildskärm kan visa en annars perfekt blå som något lila eller visa en grön med en gult kant. Skärmarna som är inställda för ljusa kommer att skölja ut skuggor och höjdpunkter. bildskärmar som ställs för mörka kommer att göra leriga skuggor och öka risken för färgskift i höjdpunkter. För designers som bryr sig om dessa detaljer är kvalitetskontroll definitivt en utmaning.
PNG färgskiftning
Enkelt uttryckt ändrar gamma-värdet luminansen hos en visad bild. Designad för digital visning gör det möjligt för PNG-bildformat att lägga till gammakorrigering till varje bild. Men utan att känna till ljusstyrkan hos utmatningsenheten (det vill säga utan att veta vilken typ av bildskärm bilden kommer att visas på) har designers svårt att lägga till korrekt gammakorrigering.
Denna egenskap har blivit PNGs mest notoriska problem. På webben matchar en bild ibland de hexfärger som anges i CSS, och andra gånger vann det inte - även om det skapades med rätt färg.
Program som PNGCrush (Windows) och PNGenie (Mac) kan ta bort överflödig information från PNG-filer, inklusive gamma-inställningen, vilket gör färgen mer tillförlitlig.
Andra problem
Att förhindra färgskift kan kräva förändringar i hur designarna arbetar. Dålig färgkalibrering kommer att sticka ut över tiden. Det är en av de designdetaljer som inte pratar om och borde inte märkas.
Industrilösningar
Olika lösningar har tagit mycket av gissningen från att hantera färg och förhindra färgskift.
De International Color Consortium (
ICC-profiler är filer som innehåller information om hur olika enheter visar färg. Skrivare och de flesta datorer levereras med ICC-profiler inbyggda, eftersom deras tillverkare vet exakt hur de fungerar. Men anpassade ICC-profiler kan anpassa en viss enhet till vissa villkor, till exempel när en bildskärm används under lysrör, i motsats till bredvid ett stort fönster.
Förutom matchande färger över skärmar (och i tryck), stödjer Adobe Flash Player 10 ICC-profiler , vilket möjliggör färghantering mellan Flash och skrivare (förutsatt att slutanvändarens skrivare använder en ICC-profil).
1996 definierade Hewlett-Packard och Microsoft standard rött, grönt, blått (
Dessa tekniska lösningar är branschövergripande svar från yrkesorganisationer. Men konstruktörer kan också vidta åtgärder för att hålla sitt arbete stabilt över tiden.
Tips för att förbereda ett rum för färgarbete
Vilken typ av ljus använder du just nu? Om du läser detta i din primära arbetsyta, och om korrekt färg är viktig för dig, kan du vidta åtgärder för att förbättra din arbetsutrymme just nu.
- Tio sekunder per halvtimme
Ta en snabb paus och stirra på ett 18% grå kort . Att titta på samma kort under samma ljusförhållanden är ett bra sätt att "återställa" dina ögon. (Obs: purister rekommenderar 12% grå kort. De är också bra så länge du använder samma kort varje gång. Poängen är att titta på något konsekvent och neutralt.) - Tio minuter
Flytta din bildskärm ur direktljus. Låt aldrig en ljuskälla komma direkt på skärmen. - Femton minuter
Ta bort färgade skrivbordstillbehör (kalendrar, markörer, foton, mappar, allting inte grått) från din synfält. Om din bildskärm är reflekterande, behåll inte färgglada föremål direkt bakom dig. - Tio minuter per dag
Låt dina ögon anpassa sig till miljön innan arbetet påbörjas. Ge dina ögon tid att anpassa sig till arbetsytan, speciellt om du bara har kommit in från solljus eller nattbelysning. Om det behövs, använd en timer. - Tio minuter per vecka
Rengör din bildskärm. Använda en luddfri trasa för att försiktigt ta bort damm och fingeravtrycksmetall eller se bruksanvisningen för rengöringsanvisningar. Gör detsamma för dina glasögon om du bär dem. - En dag eller så
Täck närliggande fönster med tjocka skärmar eller gardiner. De främsta fördelarna med naturligt ljus är noggrannhet - det är svårt att få mer naturligt än solljus och tillgänglighet. Men naturligt ljus varierar. Det förändras hela dagen, med vädret och med årstiderna. - En helg
Omgiv din arbetsyta med neutralt grått. Måla väggarna och byt ut mörka möbler med något intetsägande. Helst bör ditt skrivbord spegla endast ca 60% av det ljus som slår det. GTI Munsell Neutral Gray Paint är populär bland fotografer för att skapa neutrala bakgrunder. - En helg eller frakttid
Om du inte kan justera kontorsbelysningen, köp eller montera en bildskärmshuvud för att förhindra bländning och förändrade förhållanden.
Tips för att kalibrera din monitor
Syftet med kalibreringen är att eliminera färgskift och optimera tonens intervall på din bildskärm. Skuggor ska vara rika men visa fortfarande detaljer. De ljusaste höjdpunkterna ska varken vara för varmt eller för coolt. På sikt ger detta en noggrann och konsekvent färg.
Här är de allmänna stegen:
- Värm upp bildskärmen i minst 30 minuter.
- Välj gamma (5000-9500 ° K, gamma 1.8-2.2).
- Hitta de bästa vita och svarta punkterna.
- Balans rött, grönt och blått för att förhindra färgstöd.
- Upprepa denna process varje månad.
Många program kommer att leda dig genom denna process. Adobe Gamma är en populär snabb lösning för kalibrering av CRT-skärmar. Förutom att det är lätt att använda är det gratis med inköp av Photoshop eller Photoshop Elements. Andra lösningar är QuickGamma (Windows) och Datacolors Spyder hårdvarukalibrator.
Färg mig Picky
Noggrann och konsekvent färg är en av de mindre detaljerna som de flesta människor, inklusive webbdesigners, väljer att ignorera i samband med analysfel, webbstandarder, felaktiga klientinformation och bra ol sändtidspress.
Men det är också ett av de element som ger en bättre övergripande upplevelse. När designers börjar märka avvikelser i nyanser och leriga skuggor, vill man inte göra ett bättre jobb blir det ovanligt.
Skriven uteslutande för Webdesigner Depot av Ben Gremillion. Ben är en frilans webbdesigner vem löser kommunikationsproblem med bättre design.