Hvornår er appelsin mere som rød? Webdesignere, selv nøjagtige, ignorerer undertiden farveskift på tværs af skærme.

Hvordan kan en webdesigner håndtere farve, når brugerne af deres brugere kan have nogen størrelse eller farve eller kunne ses under lysforhold?

I modsætning til fastsættelse af HTML-fejl, der påvirker browsere, som siden er indlæst, bliver nøjagtig farve en del af designerens arbejdsproces.

Vedligeholdelse af farver på tværs af projekter er mulig, når problemerne er forstået. Læs videre for udfordringerne og løsningerne - for at få ensartet farve på internettet.

Kan du se forskellen mellem billederne nedenfor?

to lidt forskellige billeder

En af billederne er lidt mere blå end den anden. Denne "farveforskydning" eller overordnede farvetone af en bestemt nuance kan gå ubemærket af den afslappede observatør. En lille ændring i nuance gør det jo ikke noget mindre af en blomst eller forringer dugdropens detaljer. Det er en kumulativ ændring.

Over tid opdager højeste kvalitet JPEG-billeder og 256-farve PNG-ikoner en værdifuld båndbredde. Kompleksiteten i HTML øger browserens arbejdsbyrde med hver sidebelastning. I modsætning til disse problemer, som tilføjes som besøgende gennemse hjemmesiden, er farvehåndtering et problem med designprocessen . Billeder, der er oprettet på en ukalibreret skærm, bliver inkonsekvente over tid.

Farveskift kan gå efter et andet navn: uvidende.

Hvornår kan vi sige, at en grafiks farve matcher siden tæt nok? På hvilket tidspunkt er et fotos farve også unøjagtigt? Hvilke detaljer spiller ingen rolle for projektet som helhed? Alle kan have forskellige svar, men ingen der tager digitale billeder seriøst kan ignorere farvekalibrering.

Udskrivningsindustrien har kæmpet for at få præcis farve i årtier. Sikring af, at de nøjagtig samme farver vises på alle produktionsstadier - inklusiv i forskellige skærme, kontorprintere og high-end presser - har skabt sin egen industri af kalibreringsudstyr, software løsninger og endda ISO-standarder.

Webdesign-samfundet bekymrer sig generelt ikke om pressekontroller. Men måske skal det.

Internettet har haft farveproblemer, da det har haft farve

I 1990'erne fik man en præcis farve på nettet med en palette på 216 "web-sikre" farver. Disse nuancer og nuancer var (for det meste) garanteret ikke at dither når de blev vist på skærme, der ikke kunne håndtere mere end 8-bit farve.

illustration af et dithered billede

Ovenstående er en gradient med og uden dithering. I dag kan langt de fleste computere vise 24-bit farve eller bedre (ifølge disse browser viser statistik og Google Analytics-sporing af websteder, herunder Webdesigner Depot). Det vil sige, hver pixel kan vise en af ​​millioner af farver, hvilket gør kalibrering både kompliceret og mere kritisk.

Netværket har længe været afhængig af hexidekimale koder, som # F35C23, for at definere farver. Disse seks tegnstreng kan vise en bred vifte af nuancer og værdier med stor præcision. Et billede, der har # F35C23 og en CSS baggrund i # F35C23, passer perfekt sammen.

Problemet er, at koden definerer en kombination af rød, grøn og blå, men resulterer ikke altid i ensartet farve. Skærmbillederne står for forskellen.

Hvid er hvid, undtagen når det ikke er det

Mange faktorer påvirker farvenøjagtigheden, når du opretter og redigerer digitale billeder. Som med print afhænger farven på nettet af det miljø, hvor billedet er oprettet. I modsætning til udskrivning kan webbaserede billeder ændres hver gang de vises, fordi brugerens skærme vil variere, og ingen trykcheck kan fange problemer, der opstår.

Selvom mange moderne webbrowsere kan vise CMYK-billeder, de fleste billeder til internettet er baseret på additiv RGB- farvemodel. Denne model anvender en blanding af rød, grøn og blå til hver pixel.

Men ikke alle skærme er bygget ens, og derfor kan en bestemt orangefarve være inkonsekvent på tværs af forskellige skærme. Her er nogle af årsagerne til farveændring:

  • Små ændringer mellem fabrikanter og modeller står for små unøjagtigheder i skygge og nuance.
  • Mange skærme (især CRT- skærme) ændrer farve gennem årene, og selv når de opvarmes i løbet af en dag.
  • Indtil for nylig har Mac OS X og Windows brugt to forskellige "gammas", hvilket betød, at billeder på Mac'er dukkede op lysere end dem på pc. Mac OS X 10.6 (Snow Leopard) bruger det mere almindelige gamma på 2.2 , hvilket er det samme som Windows og mange fjernsyn og videokameraer.
  • Folk gennemser internettet fra mange forskellige steder og i mange forskellige lysforhold. Effekten af ​​ovenlys og mængden og farven på naturligt lys påvirker udseendet af farve på skærmen.
simuleret farveskift på tværs af forskellige skærme

Ovenfor viser forskellige kalibreringer, at "hvid" ofte er en antaget farve:

  1. Det originale billede, skudt under fluorescerende lys med et point-and-shoot-kamera.
  2. Ca. farveskift på en Mac før Snow Leopard.
  3. Ca. farveskift på en aldrende CRT-skærm.
  4. Tæt på ægte farve, som det ses på den bærbare computer, som billedet blev behandlet på.

En let rød skærm kan vise en ellers perfekt blå som en smule lilla eller vise en grøn med en gul tinge. Skærme indstillet for lyst vil skumme ud og højdepunkter; skærme sat for mørke vil mudrede skygger og øge chancen for farveskift i højdepunkter. For designere, der bekymrer sig om disse detaljer, er kvalitetskontrol absolut en udfordring.

PNG-farveforskydning

Simpelthen ændrer gamma-værdien luminansen af ​​et vist billede. Designet til digital visning, gør PNG-billedformatet det muligt for designere at tilføje gamma-korrektion til hvert billede. Men uden at kende lysstyrken af ​​outputenheden (det vil sige uden at vide typen af ​​skærmbilledet vises billedet), har designere svært ved at tilføje præcis gamma korrektion.

Denne egenskab er blevet PNGs mest berygtede problem. På internettet matcher et billede nogle gange de hex-farver, der er angivet i CSS, og andre gange er det ikke-selvom det blev oprettet med den korrekte farve.

Programmer som PNGCrush (Windows) og PNGenie (Mac) kan fjerne overskydende information fra PNG-filer, herunder gammaindstillingen, hvilket gør farven mere pålidelig.

Andre problemer

Forebyggelse af farveskift kan kræve ændringer i den måde designerne arbejder på. Dårlig farvekalibrering vil skille sig ud over tiden. Det er en af ​​de design detaljer, der ikke bliver talt om og ikke bør bemærkes.

Industriløsninger

Forskellige løsninger har taget meget af gættet ud af at styre farve og forhindre farveskift.

Det International Color Consortium ( ICC) blev oprettet i 1993 for at etablere en platformsafhængig standard for farvehåndtering. Målet var at sikre ensartet farve på tværs af alle enheder, herunder skærme, scannere og printere.

ICC-profiler er filer, der indeholder oplysninger om, hvordan forskellige enheder viser farve. Printere og de fleste computere leveres med ICC-profiler indbygget, fordi deres producenter ved netop, hvordan de arbejder. Men brugerdefinerede ICC-profiler kan tilpasse en bestemt enhed til visse forhold, f.eks. Når en skærm bruges under lysstofrør, i modsætning til et stort vindue.

Udover matchende farver på tværs af skærme (og i print) understøtter Adobe Flash Player 10 ICC-profiler , der muliggør farvestyring mellem Flash og printere (forudsat at slutbrugerens printer bruger en ICC-profil).

I 1996 definerede Hewlett-Packard og Microsoft standard rød, grøn, blå ( sRGB) farverum som en bekvem standard for enheder, der bruger additiv farvemodeller. Selv om det er mere begrænset end andre former for RGB (dets farver ikke kan være helt lige så mættede som Adobe RGB), voksede dets popularitet som skærme, scannere, kameraer og videokameraer ved at anvende spec.

Disse tekniske løsninger er brancheførende svar fra faglige organisationer. Men designere kan også tage skridt til at holde deres arbejde konsekvent over tid.

Tips til at forberede et værelse til farvearbejde

Hvilken slags lys bruger du lige nu? Hvis du læser dette i dit primære arbejdsområde, og hvis nøjagtig farve er vigtig for dig, kan du tage skridt til at forbedre dit arbejdsområde lige nu.

  • Ti sekunder om halv time
    Tag en hurtig pause og stirre på et 18% grå kort . At se på det samme kort under de samme lysforhold er en god måde at "nulstille" dine øjne på. (Bemærk: Purister anbefaler 12% grå kort. De er også fine, så længe du bruger det samme kort hver gang. Pointen er at se på noget konsekvent og neutralt.)
  • Ti minutter
    Flyt din skærm ud af direkte lys. Lad aldrig en lyskilde komme direkte på skærmen.
  • Femten minutter
    Fjern farvet skrivebordstilbehør (kalendere, markører, fotos, mapper - alt ikke gråt) fra din synsfelt. Hvis din skærm er reflekterende, må du ikke holde farverige genstande lige bag dig.
  • Ti minutter om dagen
    Lad dine øjne tilpasse sig miljøet, inden arbejdet påbegyndes. Giv dine øjne tid til at tilpasse sig arbejdsområdet, især hvis du lige er kommet ind fra sollys eller udvendig natbelysning. Brug om nødvendigt en timer.
  • Ti minutter om ugen
    Rengør din skærm. Brug en lintfri klud til forsigtigt fjernelse af støv og fingeraftryksmærker, eller se brugervejledningen til rengøringsanvisninger. Gør det samme for dine briller, hvis du bærer dem.
  • En dag eller deromkring
    Dæk i nærliggende vinduer med tykke skærme eller gardiner. De primære fordele ved naturligt lys er nøjagtighed - det er svært at få mere naturligt end sollys og tilgængelighed. Men naturligt lys varierer. Det ændrer sig hele dagen, med vejret og med årstiderne.
  • En weekend
    Omgiv dit arbejdsområde med neutralt grå. Maler væggene og udskift mørke møbler med noget intetsigende. Ideelt set bør dit skrivebord afspejle kun ca. 60% af det lys, der rammer det. GTI Munsell Neutral Gray Paint er populær blandt fotografer for at skabe neutrale baggrunde.
  • En weekend eller leveringstid
    Hvis du ikke er i stand til at justere dit kontorbelysning, køb eller monter en monitorhætte for at forhindre blænding og skiftende forhold.
illustration af et arbejdsområde klar til præcis farvearbejde

Tips til kalibrering af din skærm

Formålet med kalibrering er at eliminere farveskift og optimere tonalområdet på din skærm. Skygger skal være rige, men stadig vise detaljer. De klareste højdepunkter bør hverken være for varme eller for cool. I det lange løb giver dette en præcis og ensartet farve.

Her er de generelle trin:

  1. Varm din skærm op i mindst 30 minutter.
  2. Vælg gamma (5000-9500 ° K, gamma 1.8-2.2).
  3. Find de bedste hvide og sorte punkter.
  4. Balance rødt, grønt og blåt for at forhindre farvestøbning.
  5. Gentag denne proces hver måned.

Mange programmer vil lede dig igennem denne proces. Adobe Gamma er en populær hurtig løsning til kalibrering af CRT-skærme. Bortset fra at det er let at bruge, er det gratis med køb af Photoshop eller Photoshop Elements. Andre løsninger er QuickGamma (Windows) og Datacolor's Spyder hardware kalibrator.

Farve mig Picky

Nøjagtig, ensartet farve er en af ​​de mindre detaljer, som de fleste mennesker - herunder webdesignere - vælger at ignorere i lyset af parseringsfejl, webstandarder, klientfejlinformation og godt ol 'deadline-tryk.

Men det er også et af de elementer, der giver en bedre samlet oplevelse. Når designere begynder at lægge mærke til afvigelser i farvetone og mudrede skygger, vil det ikke blive usædvanligt at ikke lave et bedre arbejde.

Skrevet udelukkende til Webdesigner Depot af Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikationsproblemer med bedre design.