Come vengono codificati i colori?
Il significato dei colori è sempre presente nella nostra quotidianità:
semaforo rosso = bisogna fermarsi, semaforo verde = vai, cielo azzurro = sereno, cielo grigio = pioggia.
Mai come oggi il colore assegnato alla regione in cui viviamo determina ciò che possiamo fare e determina il ritmo delle nostre vite. Nel mondo del design il colore ha una funzione primaria, è una dei fattori principali della comunicazione. Chi lavora in questo settore studia con attenzione la tonalità da scegliere, l’abbinamento ed il bilanciamento cromatico.
Vi è capitato di sentir parlare un grafico di colori pantone, o un web designer di colori esadecimali.
Cosa saranno mai? Scopriamolo insieme.
RGB
La sigla RGB è l’acronimo di Red (rosso) Green (verde) e Blue (blu), i colori primari prodotti dalla luce. I colori generati sono il risultato di una codifica additiva, cioè la somma di queste fonti.
Ciascun canale può assumere un valore tra 0 e 255, perciò:
RGB 255 0 0 = rosso
RGB 0 255 0 = verde
RGB 0 0 255 = blu
Tutti gli altri colori sono la risultante delle combinazioni possibili, il giallo per esempio è rgb 255 255 0.
Questa codifica è tipica dei supporti che generano luce, come i monitor, è adatta a immagini che devono essere visualizzate solo su schermi. Si può scegliere questo sistema per immagini che saranno inserite in siti web e applicativi multimediali.
CMYK
Questa sigla significa CIANO MAGENTA YELLOW (giallo) BLACK (nero). Questa codifica è nota anche come quadricromia. Ciano, magenta e giallo sono i colori primari dei pigmenti; se uniti insieme danno come risultante una tonalità di nero non puro, quindi nel sistema è stato aggiunto anche il quarto colore.
Questa codifica è di tipo sottrattivo perché ogni pigmento assorbe la luce bianca e ne riflette solo una parte, quindi la tonalità percepita è frutto dei colori sottratti dalla luce bianca.
La quadricromia è il sistema utilizzato nella stampa, ottenendo così il colore dalla mescolanza dei quattro pigmenti principali.
PANTONE
È il sistema di standardizzazione del colore che aiuta nella corrispondenza e identificazione del colore stesso. Prevede un codice che identifica in modo univoco la tonalità. È usato nella coloritura che prevede pigmenti.
HEX
È la traduzione di esadecimale, cioè l’espressione del colore RGB con solo 6 caratteri, cioè tutte le cifre da 0 a 9 e le lettere dalla A alla F. Ciascuna coppia di caratteri esprime il valore di un canale, quindi i primi due dichiarano il valore del rosso, il terzo ed il quarto il valore del verde e gli ultimi due il valore del blu. Il codice esadecimale va scritto con il simbolo di # (cancelletto). Per riprendere l’esempio RGB:
rosso = #ff0000
verde=#00ff00
blu=#0000ff
giallo =#ffff00
Questa codifica si usa esclusivamente nel mondo web, viene inserito nel codice html e nei css.
Risorse
Un piccolo elenco di risorse da consultare:
toolset.it qui trovi un elenco dei colori web con la relativa codifica in RGB
w3schools uno strumento completo per scegliere un colore e confrontare tutte le tonalità disponibili codificate in rgb, hex
da CMKY a Pantone colorbeautify.org propone vari strumenti per codificare lo stesso colore in modalità differenti
PANTONESMOOTHIES un profilo instagram davvero divertente!
Facciamo pratica
Se vuoi scoprire quali colori vengono usati in una pagina web fai così:
- visualizza la pagina con il tuo browser
- premi F12 sulla tastiera
- nella schermata comparirà un riquadro, nella sua barra in alto clicca sullo strumento a forma di freccia
- appoggiando il cursore del mouse sugli elementi della pagina, compare un’etichetta che riporta il codice HTML dell’elemento. Se stai selezionando un testo o un elemento grafico vedrai il codice HEX del suo colore, altrimenti se è un’immagine leggi qui sotto.
Se vuoi sapere il codice colore di un’area di un’immagine, fai così:
- salva l’immagine (tasto destro>> Salva immagine…)
- Apri il file con il programma di fotoritocco che hai a disposizione ( paint.net, paint3D, Adobe photoshop…)
- Cerca lo strumento a forma di pipetta. Prendilo e fai click sul punto dell’immagine che ti interessa
- Nella barra strumenti dovresti vedere un quadratino che indica il colore selezionato. Fai doppio click su quello e comparirà una finestra di dialogo con le specifiche del colore.
