Come calibrare il colore per il Web
Quando l'arancione è più rosso? I web designer, anche quelli schizzinosi, a volte ignorano lo spostamento dei colori tra i monitor.
In che modo un web designer può gestire il colore quando gli schermi dei propri utenti possono essere di qualsiasi dimensione o colore o possono essere visualizzati in qualsiasi condizione di illuminazione?
Diversamente dalla correzione degli errori HTML, che influiscono sui browser quando la pagina viene caricata, ottenere colori accurati fa parte del processo di lavoro del designer.
Mantenere i colori tra i progetti è possibile una volta compresi i problemi. Continua a leggere le sfide e le soluzioni per ottenere colori coerenti sul web.
Riesci a individuare la differenza tra le foto qui sotto?
Una delle immagini è leggermente più blu dell'altra. Questo "cambiamento di colore", o la tinta generale di una particolare tonalità, potrebbe passare inosservato dall'osservatore casuale. Dopotutto, un leggero cambiamento di tonalità non lo rende meno di un fiore o sminuisce il dettaglio della goccia di rugiada. È un cambiamento cumulativo.
Nel tempo, le immagini JPEG di massima qualità e le icone PNG a 256 colori consumano una preziosa larghezza di banda. La complessità in HTML aumenta il carico di lavoro del browser con ogni caricamento della pagina. A differenza di questi problemi, che si sommano quando i visitatori navigano nel sito Web, la gestione del colore è un problema con il processo di progettazione . Le immagini create su un monitor non calibrato diventano incoerenti nel tempo.
Il cambiamento di colore potrebbe avere un altro nome: disattenzione.
Quando possiamo dire che il colore di un grafico corrisponde alla pagina abbastanza vicino? A che punto il colore di una foto è troppo impreciso? Quali dettagli non contano per il progetto nel suo insieme? Ognuno può avere risposte diverse, ma nessuno che prenda sul serio le immagini digitali può ignorare la calibrazione del colore.
L'industria della stampa ha lottato per ottenere colori accurati per decenni. Garantire che gli stessi identici colori appaiano in tutte le fasi della produzione, inclusi vari monitor, stampanti per ufficio e macchine da stampa di fascia alta, ha generato il proprio settore di dispositivi di calibrazione, soluzioni software e persino standard ISO.
Generalmente la comunità del web design non si preoccupa dei controlli stampa. Ma forse dovrebbe.
Il Web ha avuto problemi di colore da quando ha avuto colore
Negli anni '90, ottenere colori accurati sul web significava utilizzare una tavolozza di 216 colori "sicuri per il web". Queste tinte e sfumature erano (per la maggior parte) garantite non al dithering quando erano visualizzate su monitor che non potevano gestire più di 8 bit di colore.
Sopra è un gradiente con e senza retinatura. Oggi, la stragrande maggioranza dei computer può mostrare colori a 24 bit o migliori (secondo queste statistiche di visualizzazione del browser e il monitoraggio di siti Web di Google Analytics, incluso il Webdesigner Depot). Cioè, ogni pixel può mostrare uno di milioni di colori, rendendo la calibrazione sia complicata che più critica.
Il web ha a lungo fatto affidamento sui codici esadecimali, come # F35C23, per definire i colori. Queste stringhe di sei caratteri possono visualizzare un'ampia varietà di tonalità e valori con grande precisione. Un'immagine che ha # F35C23 e uno sfondo CSS in # F35C23 corrisponderà perfettamente.
Il problema è che il codice definisce una combinazione di rosso, verde e blu, ma non sempre risulta in un colore coerente. Gli schermi di visualizzazione rappresentano la differenza.
Il bianco è bianco, tranne quando non lo è
Molti fattori influenzano la precisione del colore durante la creazione e la modifica di immagini digitali. Come per la stampa, il colore sul Web dipende dall'ambiente in cui viene creata l'immagine. A differenza della stampa, le immagini basate sul Web possono cambiare ogni volta che vengono visualizzate perché i monitor degli utenti possono variare e nessun controllo stampa può rilevare i problemi che si verificano.
Sebbene molti browser Web moderni possano essere visualizzati
Ma non tutti i monitor sono costruiti allo stesso modo, quindi una particolare sfumatura di arancione potrebbe essere incoerente su schermi diversi. Ecco alcune delle cause del cambiamento di colore:
- Lievi cambiamenti tra produttori e modelli sono responsabili di leggere imprecisioni di tonalità e tonalità.
- Molti schermi (in particolare i monitor CRT ) cambiano colore nel corso degli anni e anche mentre si riscaldano nel corso della giornata.
- Fino a poco tempo fa, Mac OS X e Windows utilizzavano due "gammi" diversi, il che significava che le immagini su Mac apparivano più luminose di quelle su PC. Mac OS X 10.6 (Snow Leopard) utilizza la gamma più comune di 2.2 , che è lo stesso di Windows e molti televisori e videocamere.
- Le persone navigano sul Web da molti luoghi diversi e in diverse condizioni di illuminazione. L'effetto delle luci sul soffitto e la quantità e il colore della luce naturale influenzano l'aspetto del colore sullo schermo.
Sopra, calibrazioni diverse mostrano che il "bianco" è spesso un colore presunto:
- L'immagine originale, ripresa sotto luce fluorescente con una fotocamera point-and-shoot.
- Spostamento approssimativo del colore su un Mac prima di Snow Leopard.
- Spostamento approssimativo del colore su un monitor CRT obsoleto.
- Vicino al vero colore, come visto sul portatile su cui è stata elaborata la foto.
Un monitor leggermente rosso potrebbe mostrare un blu altrimenti perfetto come leggermente viola o mostrare un verde con una sfumatura gialla. I monitor impostati troppo luminosi elimineranno le ombre e le luci; i monitor impostati troppo scuri ombreggiano le ombre e aumentano le possibilità di spostamento del colore nelle alte luci. Per i progettisti che hanno a cuore questi dettagli, il controllo qualità è sicuramente una sfida.
PNG Color Shift
In poche parole, il valore gamma cambia la luminanza di un'immagine visualizzata. Progettato per il display digitale, il formato immagine PNG consente ai progettisti di aggiungere la correzione gamma a ciascuna immagine. Ma senza conoscere la luminosità del dispositivo di output (cioè senza conoscere il tipo di monitor in cui apparirà l'immagine), i progettisti hanno difficoltà a aggiungere una correzione della gamma accurata.
Questa caratteristica è diventata il problema più noto di PNG. Sul Web, a volte un'immagine corrisponde ai colori esadecimali specificati nel CSS e altre volte non lo è, anche se è stata creata con il colore corretto.
Programmi come PNGCrush (Windows) e PNGenie (Mac) può rimuovere le informazioni in eccesso dai file PNG, inclusa l'impostazione gamma, che rende il colore più affidabile.
Altri problemi
Prevenire il cambiamento di colore può richiedere cambiamenti nel modo in cui i designer lavorano. Una calibrazione del colore scadente si staglierà nel tempo. È uno di quei dettagli di design di cui non si parla e non si dovrebbe farsi notare.
Soluzioni industriali
Varie soluzioni hanno eliminato gran parte delle congetture sulla gestione del colore e sulla prevenzione dello spostamento del colore.
Il International Color Consortium (
I profili ICC sono file che contengono informazioni su come i vari dispositivi visualizzano il colore. Le stampanti e la maggior parte dei computer vengono forniti con i profili ICC integrati, poiché i loro produttori sanno esattamente come funzionano. Ma i profili ICC personalizzati possono adattare un determinato dispositivo a determinate condizioni, ad esempio quando un monitor viene utilizzato con luci fluorescenti, anziché accanto a una finestra di grandi dimensioni.
Oltre ad abbinare i colori su tutti gli schermi (e in stampa), Adobe Flash Player 10 supporta i profili ICC , abilitando la gestione del colore tra Flash e stampanti (presupponendo che la stampante utilizzi un profilo ICC).
Nel 1996, Hewlett-Packard e Microsoft hanno definito lo standard rosso, verde, blu (
Queste soluzioni tecniche sono risposte a livello di settore da parte di organizzazioni professionali. Ma i progettisti possono anche adottare misure per mantenere il loro lavoro coerente nel tempo.
Suggerimenti per preparare una stanza per il lavoro a colori
Che tipo di luce stai usando in questo momento? Se stai leggendo questo nel tuo spazio di lavoro principale, e se il colore accurato è importante per te, allora puoi prendere provvedimenti per migliorare il tuo spazio di lavoro in questo momento.
- Dieci secondi ogni mezz'ora
Fai una breve pausa e fissa una carta grigia del 18% . Guardare la stessa carta nelle stesse condizioni di illuminazione è un buon modo per "resettare" i tuoi occhi. (Nota: i puristi raccomandano il 12% di carte grigie, ma vanno bene, purché si usi sempre la stessa carta. Il punto è guardare qualcosa di coerente e neutrale.) - Dieci minuti
Sposta il monitor fuori dalla luce diretta. Non lasciare mai che una fonte luminosa colpisca direttamente lo schermo. - Quindici minuti
Rimuovi gli accessori da scrivania colorati (calendari, pennarelli, foto, cartelle, tutto ciò che non è grigio) dalla tua linea di vista. Se il tuo monitor è riflettente, non tenere gli oggetti colorati direttamente dietro di te. - Dieci minuti al giorno
Lascia che i tuoi occhi si adattino all'ambiente prima di iniziare il lavoro. Dai agli occhi il tempo di adattarsi allo spazio di lavoro, soprattutto se sei appena entrato dalla luce del sole o dall'illuminazione notturna esterna. Se necessario, utilizzare un timer. - Dieci minuti a settimana
Pulisci il tuo monitor. Usare un panno privo di lanugine per rimuovere delicatamente macchie di polvere e impronte digitali o consultare il manuale del proprietario per istruzioni sulla pulizia. Fai lo stesso con gli occhiali, se li indossi. - Un giorno o due
Coprire finestre vicine con schermi spessi o tende. I principali vantaggi della luce naturale sono l'accuratezza: è difficile ottenere più naturale della luce del sole e della disponibilità. Ma la luce naturale varia. Cambia durante il giorno, con il tempo e con le stagioni. - Un fine settimana
Circonda il tuo spazio di lavoro con un grigio neutro. Dipingi le pareti e sostituisci i mobili scuri con qualcosa di blando. Idealmente, il desktop dovrebbe riflettere solo il 60% circa della luce che lo colpisce. GTI Munsell Neutral Grey Paint è popolare tra i fotografi per creare sfondi neutri. - Un fine settimana o tempo di spedizione
Se non sei in grado di regolare l'illuminazione dell'ufficio, acquistare o assemblare un monitor per evitare l'abbagliamento e il cambiamento delle condizioni.
Suggerimenti per calibrare il monitor
Lo scopo della calibrazione è quello di eliminare i cambiamenti di colore e ottimizzare la gamma tonale del monitor. Le ombre dovrebbero essere ricche ma mostrare comunque i dettagli. Le alte luci non dovrebbero essere né troppo calde né troppo fredde. A lungo termine, questo rende il colore preciso e coerente.
Ecco i passaggi generali:
- Riscaldare il monitor per almeno 30 minuti.
- Seleziona gamma (5000-9500 ° K, gamma 1.8-2.2).
- Trova i migliori punti bianchi e neri.
- Equilibra il rosso, il verde e il blu per evitare il lancio di colori.
- Ripeti questa procedura mensilmente.
Molti programmi ti guideranno attraverso questo processo. Adobe Gamma è una soluzione rapida e popolare per la calibrazione dei display CRT. Oltre ad essere facile da usare, è gratuito con l'acquisto di Photoshop o Photoshop Elements. Altre soluzioni sono QuickGamma (Windows) e Datacolor's Spyder calibratore hardware.
Color Me Picky
Un colore accurato e coerente è uno di quei dettagli minori che la maggior parte delle persone, inclusi i web designer, ha scelto di ignorare di fronte agli errori di analisi, agli standard web, alla disinformazione del cliente e alla buona pressione delle scadenze.
Ma è anche uno di quegli elementi che rendono migliore l'esperienza complessiva. Una volta che i designer iniziano a notare deviazioni in tonalità e ombre fangose, non desiderare di fare un lavoro migliore diventerà insolito.
Scritto esclusivamente per il Webdesigner Depot di Ben Gremillion. Ben è un freelance web designer chi risolve i problemi di comunicazione con un design migliore.