Når er oransje mer som rød? Webdesignere, selv kresne, ignorerer noen ganger fargeskift på tvers av skjermer.

Hvordan er en webdesigner å administrere farge når skjermbildene til brukerne kan være hvilken som helst størrelse eller farge eller kan bli vist under noen lysforhold?

I motsetning til å fikse HTML-feil, som påvirker nettlesere ettersom siden er lastet, blir nøyaktig farge en del av designerens arbeidsprosess.

Vedlikehold av farger på tvers av prosjekter er mulig når problemene er forstått. Les videre for utfordringene - og løsninger - for å få konsistent farge på nettet.

Kan du se forskjellen mellom bildene nedenfor?

to litt forskjellige bilder

En av bildene er litt mer blå enn den andre. Denne "fargeskiftet" eller den generelle fargen på en bestemt fargetone, kan gå ubemerket av den uformelle observatøren. Tross alt gjør en liten endring i fargetone ikke dette noe mindre av en blomst eller forringer dewdrops detalj. Det er en kumulativ endring.

Over tid spiser høyeste kvalitet JPEG-bilder og 256-farger PNG-ikoner opp dyrbar båndbredde. Kompleksiteten i HTML øker nettleserens arbeidsbelastning med hver sidebelastning. I motsetning til disse problemene, som legger til som besøkende, blar gjennom nettstedet, er fargestyring et problem med designprosessen . Bilder som er opprettet på en ukalibrerte skjerm, blir inkonsekvente over tid.

Fargeskift kan gå etter et annet navn: uoppmerksomhet.

Når kan vi si at en grafikkfarge samsvarer med siden nær nok? På hvilket tidspunkt er et bilde farge for unøyaktig? Hvilke detaljer spiller ingen rolle for prosjektet som helhet? Alle kan ha forskjellige svar, men ingen som tar digitale bilder seriøst kan ignorere fargekalibrering.

Utskriftsindustrien har slitt med å få nøyaktig farge i flere tiår. For å sikre at de nøyaktig samme fargene dukker opp på alle produksjonsstadier, inkludert i ulike skjermer, kontorskrivere og high-end presser, har de skapt sin egen industri av kalibreringsenheter, programvareløsninger og til og med ISO-standarder.

Webdesign fellesskapet bekymrer seg vanligvis ikke om pressekontroller. Men kanskje det burde.

Internett har hatt fargeproblemer siden det har hatt farge

På 1990-tallet mente du å få nøyaktig farge på nettet med en palett på 216 "web-safe" farger. Disse nyansene og nyanser var (for det meste) garantert å ikke dither når de ble vist på skjermer som ikke kunne håndtere mer enn 8-biters farge.

Illustrasjon av et dithered bilde

Over er en gradient med og uten dithering. I dag kan de aller fleste datamaskiner vise 24-biters farge eller bedre (ifølge denne nettleservisningsstatistikken og Google Analytics-sporing av nettsteder, inkludert Webdesigner Depot). Det vil si, hver piksel kan vise en av millioner av farger, noe som gjør kalibrering både komplisert og mer kritisk.

Internett har lenge stått på heksidekimale koder, som # F35C23, for å definere farger. Disse seks tegnstrengene kan vise en rekke fargetoner og verdier med stor presisjon. Et bilde som har # F35C23 og en CSS bakgrunn i # F35C23 vil passe perfekt.

Problemet er at koden definerer en kombinasjon av rød, grønn og blå, men resulterer ikke alltid i konsistent farge. Skjermbildene står for forskjellen.

Hvit er hvit, bortsett fra når det ikke er det

Mange faktorer påvirker farge nøyaktighet når du oppretter og redigerer digitale bilder. Som med utskrift, er farge på nettet avhengig av miljøet der bildet er opprettet. I motsetning til utskrift kan webbaserte bilder endres hver gang de vises fordi brukerens skjermer varierer, og ingen trykksjekk kan få problemer som oppstår.

Selv om mange moderne nettlesere kan vise CMYK-bilder, de fleste bilder på nettet er basert på additiv RGB- fargemodell. Denne modellen gjelder en blanding av rød, grønn og blå til hver piksel.

Men ikke alle skjermer er bygget like, og derfor kan en bestemt nyanse av oransje være inkonsekvent på tvers av forskjellige skjermer. Her er noen av årsakene til fargeendring:

  • Små endringer mellom produsenter og modeller står for små unøyaktigheter i skygge og fargetone.
  • Mange skjermer (spesielt CRT- skjermer) skifter farge gjennom årene, og selv når de varmes opp i løpet av en dag.
  • Inntil nylig brukte Mac OS X og Windows to forskjellige "gammas", noe som medførte at bilder på Mac-maskiner dukket opp lysere enn de på PC. Mac OS X 10.6 (Snow Leopard) bruker det mer vanlige gammaet på 2.2 , som er det samme som Windows og mange fjernsyn og videokameraer.
  • Folk søker på nettet fra mange forskjellige steder og i mange forskjellige lysforhold. Effekten av overhead lys og mengden og fargen på naturlig lys påvirker alle utseendet på farge på skjermen.
simulert fargeskift på tvers av forskjellige skjermer

Over, viser forskjellig kalibrering at "hvit" ofte er en antatt farge:

  1. Det opprinnelige bildet, skutt under lysrør med et punkt-og-skyte-kamera.
  2. Omtrentlig fargeskift på en Mac før Snow Leopard.
  3. Omtrentlig fargeskift på en aldrende CRT-skjerm.
  4. Nær sann fargen, sett på den bærbare datamaskinen som bildet ble behandlet på.

En litt rød skjerm kan vise en ellers perfekt blå som litt lilla, eller vise en grønn med en gul tinge. Skjermer satt for lyse vil vaske ut skygger og høydepunkter; skjermer satt for mørke vil gjørme skygger og øke sjansen for fargeskift i høydepunkter. For designere som bryr seg om disse detaljene, er kvalitetskontrollen definitivt en utfordring.

PNG-fargeforskyvning

Enkelt sagt, endrer gammaverdien luminansen til et vist bilde. Designet for digital visning, gjør PNG-bildeformatet det mulig for designere å legge til gammakorrigering for hvert bilde. Men uten å vite lysstyrken til utgangsenheten (det vil si uten å vite hvilken type skjerm bildet vil vises på), har designere det vanskelig å legge til nøyaktig gamma-korreksjon.

Denne egenskapen er blitt PNGs mest beryktede problem. På nettet vil et bilde noen ganger matche de heksefargene som er angitt i CSS, og andre ganger vil det ikke, selv om det ble opprettet med riktig farge.

Programmer som PNGCrush (Windows) og PNGenie (Mac) kan fjerne overflødig informasjon fra PNG-filer, inkludert gammainnstillingen, noe som gjør fargen mer pålitelig.

Andre problemer

Forhindre fargeskift kan kreve endringer i måten designere jobber med. Dårlig fargekalibrering vil skille seg ut over tid. Det er en av de design detaljene som ikke blir snakket om, og bør ikke bli lagt merke til.

Industriløsninger

Ulike løsninger har tatt mye av gjetningen av å håndtere farge og hindre fargeskift.

De Internasjonalt fargekonsortium ( ICC) ble opprettet i 1993 for å etablere en plattformuavhengig standard for fargestyring. Målet var å sikre konsekvent farge på alle enheter, inkludert skjermer, skannere og skrivere.

ICC-profiler er filer som inneholder informasjon om hvordan ulike enheter viser farge. Skrivere og de fleste datamaskiner leveres med ICC-profiler bygget inn, fordi deres produsenter vet nøyaktig hvordan de fungerer. Men tilpassede ICC-profiler kan tilpasse en bestemt enhet til visse forhold, for eksempel når en skjerm brukes under lysrør, i motsetning til et stort vindu.

I tillegg til matchende farger på tvers av skjermbilder (og i utskrift) støtter Adobe Flash Player 10 ICC-profiler , slik at fargebehandling mellom Flash og skrivere kan antas (forutsatt at sluttbrukerens skriver bruker en ICC-profil).

I 1996 definerte Hewlett-Packard og Microsoft standard rød, grønn, blå ( sRGB) fargerom som en praktisk standard for enheter som bruker additiv fargemodeller. Selv om det er mer begrenset enn andre former for RGB (fargene ikke kan være ganske like mettede som Adobe RGB, for eksempel), vokste populariteten som skjermer, skannere, kameraer og videokameraer vedtatt spesifikasjonen.

Disse tekniske løsningene er bransjens brede svar fra profesjonelle organisasjoner. Men designere kan også ta skritt for å holde arbeidet konsekvent over tid.

Tips for å forberede et rom for fargearbeid

Hva slags lys bruker du akkurat nå? Hvis du leser dette i ditt primære arbeidsområde, og hvis nøyaktig farge er viktig for deg, kan du ta skritt for å forbedre arbeidsområdet ditt akkurat nå.

  • Ti sekunder per halvtime
    Ta en rask pause og stirre på et 18% grå kort . Å se på samme kort under de samme lysforholdene er en god måte å "reset" øynene dine på. (Merk: purister anbefaler 12% grå kort. De er også fine, så lenge du bruker det samme kortet hver gang. Poenget er å se på noe konsekvent og nøytral.)
  • Ti minutter
    Flytt skjermen ut av direkte lys. Ikke la en lyskilde komme direkte på skjermen.
  • Femten minutter
    Fjern farget skrivebordstilbehør (kalendere, markører, bilder, mapper - alt ikke grått) fra synsfeltet. Hvis skjermen din er reflekterende, ikke hold fargerike gjenstander rett bak deg.
  • Ti minutter per dag
    La øynene tilpasse seg miljøet før du starter arbeidet. Gi øynene tid til å tilpasse seg arbeidsområdet, spesielt hvis du nettopp har kommet inn fra sollys eller utvendig nattbelysning. Om nødvendig, bruk en timer.
  • Ti minutter per uke
    Rengjør skjermen. Bruk en fnugfri klut For å fjerne støv- og fingeravtrykksflettene forsiktig, eller se bruksanvisningen for rengjøringsanvisninger. Gjør det samme til brillene dine, hvis du bruker dem.
  • En dag eller så
    Dekk i nærheten vinduer med tykke skjermer eller gardiner. De viktigste fordelene med naturlig lys er nøyaktighet - det er vanskelig å bli mer naturlig enn sollys og tilgjengelighet. Men naturlig lys varierer. Det endrer seg gjennom hele dagen, med været og med årstidene.
  • En helg
    Omgir arbeidsområdet med nøytralt grått. Mal veggene, og erstatt mørke møbler med noe blid. Ideelt sett bør skrivebordet bare reflektere omtrent 60% av lyset som slår det. GTI Munsell Neutral Gray Paint er populært blant fotografer for å skape nøytral bakgrunn.
  • En helg eller frakttid
    Hvis du ikke klarer å justere kontorbelysningen, kjøp eller monter en skjermhette for å hindre blending og skiftende forhold.
Illustrasjon av et arbeidsområde klar for nøyaktig fargearbeid

Tips for å kalibrere skjermen

Formålet med kalibrering er å eliminere fargeskift og optimalisere tonalområdet på skjermen. Skygger skal være rike, men fortsatt vise detaljer. De lyseste høydepunktene bør ikke verken være for varme eller for kule. I det lange løp gir dette for nøyaktig, konsistent farge.

Her er de generelle trinnene:

  1. Varm opp skjermen din i minst 30 minutter.
  2. Velg gamma (5000-9500 ° K, gamma 1.8-2.2).
  3. Finn de beste hvite og svarte punktene.
  4. Balanse rød, grønn og blå for å forhindre fargegods.
  5. Gjenta denne prosessen månedlig.

Mange programmer vil gå deg gjennom denne prosessen. Adobe Gamma er en populær rask løsning for kalibrering av CRT-skjermer. Bortsett fra at det er enkelt å bruke, er det gratis ved kjøp av Photoshop eller Photoshop Elements. Andre løsninger er QuickGamma (Windows) og Datacolor er Spyder maskinvare kalibrator.

Farge meg kresen

Nøyaktig, konsekvent farge er en av de mindre detaljene som de fleste mennesker, inkludert webdesignere, velger å ignorere i forhold til analyseringsfeil, webstandarder, feilinformasjon fra klienten og god ol 'deadline press.

Men det er også en av de elementene som gir en bedre samlet opplevelse. Når designere begynner å legge merke til avvik i fargetone og gjørmete skygger, vil ikke å gjøre en bedre jobb bli uvanlig.

Skrevet utelukkende for Webdesigner Depot av Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikasjonsproblemer med bedre design.