Se vi ricordate già da gennaio, uno dei miei obiettivi per il 2013 era quello di imparare di più sul colore e condividere alcuni di ciò che imparo con voi. Ho parlato in precedenza di come sento che le mie capacità di lavorare con il colore sono carenti e ho detto che ad un certo punto di quest’anno avrei preso alcuni libri sul colore con la speranza di cambiare questo.
Un compleanno, un fratello un po’ generoso, e un servizio di qualità da Amazon più tardi, e un assortimento di libri (compresi alcuni specificamente sul colore) sono qui in attesa di essere letti. Grazie David.
Ho finito di leggere uno dei libri sul colore, Design Elements: Color Fundamentals, e ho pensato di iniziare a condividere. Voglio iniziare da come descriviamo i colori, in parte perché è l’inizio e in parte perché mi ha portato ad una certa chiarezza nel modo in cui capisco il colore.
Come descriviamo il colore
Ci sono 3 modi principali per descrivere un colore e dato che il libro lo ha aggiunto, aggiungerò anche un quarto modo per descrivere il colore.
- Tinta – un’altra parola per il colore
- Saturazione (croma) – l’intensità o la purezza di una tinta
- Leggerezza (valore) – il grado relativo di bianco o nero mescolato con una data tinta
- Temperatura – il calore o la freddezza percepita di un colore
Scaviamo un po’ più a fondo in ognuno.
Le tinte sono colori e la tinta che vediamo dipende dalla lunghezza d’onda della luce riflessa o prodotta. Dubito di dovervi dire cos’è un colore e poiché colore e tinta sono sinonimi, dovreste sapere anche cos’è una tinta. Una cosa che vi ricorderò è che tutti noi percepiamo il colore in modo diverso. La tonalità che vedete voi potrebbe non essere la stessa tonalità che vedo io.
La saturazione si riferisce a quanto pura o intensa è una data tonalità. Saturazione al 100% significa che non c’è aggiunta di grigio alla tinta. Il colore è completamente puro. All’altro estremo una tinta con 0% di saturazione appare come un grigio medio. Più un colore è saturo (più vicino al 100%), più vivido o luminoso appare. I colori desaturati, d’altra parte, appaiono più opachi.
Quanto saturata appare una tinta dipende anche in una certa misura da quali colori è accanto. Una tinta satura al 50% posta accanto a una tinta satura al 25% apparirà più vivida che se la stessa tinta fosse posta accanto a una tinta satura al 75%.
La luminosità misura il grado relativo di nero o bianco che è stato mescolato con una data tinta. L’aggiunta del bianco rende il colore più chiaro (crea delle tinte) e l’aggiunta del nero lo rende più scuro (crea delle sfumature). L’effetto della luminosità o del valore è relativo ad altri valori nella composizione. Si può far sembrare un colore più leggero mettendolo accanto a un colore più scuro.
Maggiore è la differenza di valore tra gli elementi, maggiore è il contrasto tra loro. Per questo motivo, la luminosità è un buon modo per mostrare il contrasto e indicare la gerarchia tra gli elementi. Circa 7 passi di luminosità è la variazione massima che l’occhio umano può discernere. Oltre questo diventa difficile distinguere le differenze.
La temperatura è il calore o la freddezza percepita di un colore. I colori caldi sono il rosso, l’arancione e il giallo, mentre i colori freddi sono il verde, il blu e il viola. Da qualche parte nello spettro del verde e del violetto la temperatura cambia tra caldo e freddo.
Come l’occhio riconosce la temperatura del colore può cambiare in base alla fonte di luce. Per esempio, la temperatura effettiva del monitor di un computer può influenzare la temperatura del colore percepita.
I colori più caldi tendono ad avanzare in primo piano in una composizione mentre i colori più freddi si ritirano sullo sfondo. Inoltre, come la saturazione e la luminosità, la temperatura può essere relativa. Metti un colore caldo contro uno più caldo e il colore iniziale apparirà più freddo che se fosse messo contro un colore freddo.
Armonia del colore
Nel lavorare con il colore il nostro obiettivo è quello di scegliere una tavolozza di combinazioni di colori piacevoli (tranne per quelle volte in cui una combinazione sgradevole completa meglio il messaggio). Stiamo cercando di raggiungere una sorta di armonia dei colori.
L’armonia dei colori può essere soggettiva. Ciò che funziona per il tuo occhio può non funzionare per il mio. I principi della teoria del colore mirano a ridurre la soggettività offrendo linee guida che ci aiutano a trovare accoppiamenti e raggruppamenti di colori che hanno maggiori probabilità di funzionare bene.
Per esempio uno dei principi principali sostiene che l’occhio cerca sempre equilibrio e bilanciamento nel colore che lo porta ad arrivare a combinazioni neutre come quando una tonalità è combinata con il suo opposto o complemento. È uno dei motivi per cui spesso vediamo immagini successive di un colore diverso (ma con la stessa saturazione e luminosità) quando fissiamo un colore per troppo tempo.
La teoria del colore non porta sempre a risultati prevedibili. A volte la teoria e la pratica non si sposano bene, il che significa che dobbiamo sviluppare i nostri occhi per il colore e sperimentare diverse combinazioni di tonalità, saturazione e luminosità.
La disconnessione nella teoria del colore e nella pratica del colore
Come ho detto sopra, qualcosa è scattato per me nella lettura di Color Fundamentals. Noi descriviamo il colore in termini di tonalità, saturazione e luminosità (HSL), ma tipicamente impostiamo i valori di colore sul web usando i valori esadecimali e in misura minore i valori RGB. Non avrebbe più senso lavorare con il sistema che descrive meglio il colore?
Nota: HSL non è la stessa cosa di HSB (tinta, saturazione, luminosità) o HSV (tinta, saturazione, valore) che si trova nella maggior parte degli strumenti di colore.
Hex e RGB sono davvero due versioni della stessa cosa. Ognuno fornisce 256 valori possibili per quanto rosso, verde o blu è in un dato colore. HSL funziona diversamente. Non c’è un modo semplice per guardare qualcosa come rgb(63, 69, 146) o il suo equivalente esadecimale #3f4592 e sapere facilmente che è saturato al 40% o hsl(236, 40, 41).
Se vuoi vedere la matematica coinvolta nel fare la conversione dai un’occhiata a uno o tutti i link qui sotto
- Algoritmi del colore
- Conversione da colore RGB a HSL
- Conversione da coloreHSL a RGB
Perché? Perché c’è una disconnessione nel modo in cui cerchiamo di capire il colore e come cerchiamo di usarlo? Se non altro HSL è il sistema più intuitivo in quanto descrive effettivamente i colori che vediamo e si adatta alla teoria del colore.
Ho capito che le abilità cromatiche derivano dallo sviluppo di un occhio critico per i colori e dal porre domande sul perché qualcosa funziona o non funziona. E si tratta di rispondere a queste domande mentre osservate i colori intorno a voi.
Sembra solo che sarebbe più facile se sia la teoria che la pratica parlassero la stessa lingua. Ora che sono giunto a questa realizzazione, ho deciso di impegnarmi ad usare i valori HSL il più possibile nel mio codice. L’ostacolo è IE8 e inferiori, che non accettano hsl() o rgb(). Hanno bisogno di valori esadecimali. Questo però va bene, dato che SASS può fare la conversione. Potete usare hsl() in SASS e avere l’output html come valore esadecimale.
Per andare avanti con il mio impegno ho iniziato a costruire un semplice strumento di colore per aiutarmi ad imparare e studiare. Non è qualcosa che vorreste usare nel suo stato attuale per scegliere una tavolozza di colori, ma vi permette di giocare con i valori di tonalità, saturazione e luminosità per vedere come ognuno di essi influenza un particolare colore e i colori intorno ad esso. Condividerò lo strumento più avanti nella settimana.
Per un po’ ho sospettato che le relazioni matematiche tra i colori potessero offrire una guida per lavorare con loro e ho spesso cercato queste relazioni nei valori esadecimali dei colori. La mia speranza di usare di più hsl() e di giocare con il mio semplice strumento per i colori è che mi aiutino a collegare la teoria ai colori che uso nel design un po’ meglio di come sono collegati per me ora.
Tenete a mente questa disconnessione nel modo in cui impariamo e descriviamo il colore e come lo usiamo. La realizzazione mi ha dato una maggiore comprensione di come studiare meglio il colore ed è il motivo per cui ho voluto iniziare questa conversazione con le basi di come descriviamo il colore. Avrò presto altri post sul colore, a partire dalla fine della settimana quando parlerò del semplice strumento che ho creato per aiutarmi.
Scarica un campione gratuito dal mio libro, Design Fundamentals.