Mixare i colori per il Web con Sass

Il colore è uno dei componenti più potenti dell’arte e del design. Lo usiamo per influenzare gli stati d’animo, per creare un ambiente e per raccontare una storia. Più di 125 anni fa, un grande pittore impressionista cambiò il modo in cui pensiamo al colore osservando il ruolo della luce in esso. Finora, queste osservazioni si sono in gran parte perse nel design per il web, ma un preprocessore come Sass ci dà uno strumento per mettere una nuova luce nelle nostre palette di colori.

Una mattina del 1890, Claude Monet cominciò a dipingere le balle di fieno che vedeva dalla sua finestra, ma non dipinse solo un quadro e non ne dipinse nemmeno uno alla volta. Fece tirare fuori vagonate di tele al suo assistente e si mise a lavorare rapidamente e senza soffermarsi troppo su ciascuna tela, man mano che la luce cambiava durante la mattinata. A volte lavorava a un dipinto giusto per qualche minuto, prima che le condizioni della luce cambiassero abbastanza da poter procedere con la tela successiva. Una volta finito, Monet aveva dipinto venticinque tele delle stesse balle di fieno in differenti condizioni di luce solare, stagione e meteo. Le stesse balle di fieno, la stessa base di colori, ma presentati in una miriade di modi.

Claude Monet, Balle di fieno: Effetto della neve (1891). Scottish National Gallery; immagine di dominio pubblico.

Storicamente, la nostra capacità di tradurre questo tipo di flessibilità nel web è stata limitata. Abbiamo trascurato l’arte di mescolare i colori per l’impatto emotivo, traendo il massimo dai codici di colore CSS dichiarati staticamente. Nel frattempo, la manipolazione del colore in tempo reale è stata relegata all’arcano regno dei programmatori.

Grazie al cielo, nuovi tool ci danno più potere sul colore di quanto non ne abbiamo mai avuto, ma, nonostante il colore sul web continui a progredire, il solo CSS è piuttosto inflessibile. Qui è dove tornano utili i preprocessori. Esploriamo alcune delle loro capacità che possiamo prendere in prestito nei nostri fogli di stile:

• gli alias ci aiutano a riconoscere meglio che colori stiamo usando
• lightening, darkening e scaling ci offrono una flessibilità molto puntigliosa sulle palette
• il color mixing sblocca il Monet che ci portiamo dentro e un intero nuovo mondo di sfumature e arte.

La maledizione dei codici esadecimali#section1

Cominciate con la dichiarazione del colore: dovete conoscere i valori esatti dei vostri colori per poterli usare. Questo significa che, a meno che stiate usando dei colori prefabbricati noti, il vostro foglio di stile si riempirà di istanze multiple di codici esadecimali criptici o di numeri HSL ambigui. Le variabili CSS sono all’orizzonte e ci aiuteranno a chiarire quale colore è quale con il linguaggio naturale, ma se in realtà non abbiamo un nome per il nostro colore? Questo è il tipo di potere che ci viene dato dai preprocessori CSS. Ce ne sono molti tra cui scegliere ma i miei esempi sono basati su Sass. Altri preprocessori probabilmente avranno funzionalità simili, ma lascio a voi la ricerca su quello di vostra scelta.

Vediamo di capire meglio quello che voglio dire.

Creeremo un nuovo brand e sceglieremo due colori per rappresentarlo. La prima cosa che farò sarà dare un nome ai colori: $toolbox and $ol-blue.

Ora che ho stabilito i colori del mio brand, li uso per costruire un sito web per Gullfoss Travel Supply Co. Il concetto che sta dietro a questo ipotetico sito è di rivitalizzare le etichette per i bagagli per mostrare i posti che avete visitato in tutto il mondo. In tutto il sito ci saranno delle variazioni dei colori del mio brand come tinte (più chiare) e shade (più scure) diverse.

Sito ipotetico per Gullfoss Travel Supply Co.

Considerate, per esempio, questo pulsante:

Volevo dare al mio pulsante un senso di “cliccabilità”, che ho ottenuto facilmente con un semplice gradiente. Il pulsante è basato sul colore che ho chiamato $toolbox. La highlight è una versione più chiara dello swatch e la shadow è una versione più scura.

Tradizionalmente, avrei scritto tutto questo in CSS così:

button{
	background-color: $toolbox;  // fallback
	background-image: gradient(
		hsl(0, 33%, 52%),  // highlight
		$toolbox,
		hsl(0, 41%, 39%);  // shadow
	)
}

Sebbene il colore del pulsante sia basato su uno dei miei colori del brand, due di questi colori (i miei highlight e shadow) non sono nelle mie costanti Sass. Ho dovuto ricavarle da solo. Ho aperto un color picker e ho scelto manualmente delle variazioni sullo swatch. Non si tratta in realtà di un grosso problema, ma se volessi aggiungere un pulsante secondario, questa volta basato su $ol-blue, dovrei tornare di nuovo al color picker e trovare i nuovi valori.

E ciascuno di questi pulsanti ha anche bisogno di uno stato “hover”! Le highlights e shadows dell’hover saranno più chiare di quelle per il pulsante normale, quindi cosa faccio? Dichiaro altre quattro costanti o inserisco semplicemente questi valori e spero di non doverli usare di nuovo in futuro?

A quanto pare, Sass può farlo al mio posto: ha delle funzioni built-in che processano questi colori senza dover tenere traccia di tutte le variazioni.

Fare ordine nel color picker per Sass#section2

Un modo per schiarire un colore è usare la funzione lighten:

lighten($toolbox, 20%);

E per scurire un colore, possiamo usare la funzione darken:

darken($ol-blue, 30%);

Semplice! Ora abbiamo un paio di tool per mischiare al volo i colori. Divertitevi! Ok, non troppo però perché tutto ciò può rapidamente diventare leggermente complesso. Considerate questo: se schiariamo $toolbox del 50%, otteniamo una versione molto chiara di $toolbox. Ma se schiariamo $ol-blue del 50%, diventa completamente bianco. Ecco perché $ol-blue è un colore molto più chiaro di $toolbox.

Per sapere quanto possiamo schiarire un colore prima che diventi bianco, dobbiamo conoscere in anticipo il valore della lightness del colore. Questa informazione è convenientemente codificata nella sua notazione HSL. Se sottraiamo il valore della lightness del colore dal 100%, il risultato è la quantità di cui possiamo schiarire un colore per ottenere il bianco.

x = 100% - l

Dal momento che il valore della lightness di $ol-blue è 60%, possiamo schiarirlo fino al 40% prima che diventi perfettamente bianco. La lightness di $toolbox è il 40%, quindi possiamo schiarirlo del 60%.

Quando schiariamo i nostri colori, $ol-blue diventa bianco prima di $toolbox, perché ha un valore di lightness di base più alto.

Quando scuriamo i nostri colori, $toolbox diventa nero più rapidamente di $ol-blue, perché ha un valore di lightness di base più basso.

Pertanto, per gestire questa nuova palette di colori, abbiamo semplicemente bisogno di memorizzare i valori di lightness di ciascuno dei colori. È piuttosto noioso ma è sempre meglio che memorizzare codici esadecimali, giusto? Ovviamente. Ma vi svelerò un trucco migliore.

Palette proporzionali con scaling del colore#section3

Sass ha un’altra funzione per i colori chiamata scale-color() che può spostare i componenti del colore in maniera proporzionale. scale-color() lavora sui canali rosso, verde e blu di RGB e sui canali saturazione e lightness in HSL. (Per aggiustare la tinta/tonalità in maniera simile, si deve usare la funzione con l’azzeccatissimo nome di adjust-hue().)

Come ho sottolineato prima, se dovessimo schiarire $ol-blue del 50%, diventerebbe bianco puro, ma se ridimensionassimo il tono con scale-color() del 50%…

scale-color($ol-blue, lightness, 50%);

…sarebbe a metà strada tra il colore originale e il bianco.

Adesso so esattamente quanto devo ridimensionare ciascuno dei miei colori per ottenere il bianco: sarà sempre il 100%. Se ridimensiono la lightness di $ol-blue del 99%, sarà ancora $ol-blue per l’1%. In maniera simile per $toolbox o qualunque altro colore a cui possiate pensare (ad esclusione dei colori che sono già così chiari che potrebbero arrotondare al bianco prima), raggiungeranno sempre il massimo livello al 100% di lightness.

Potete facilmente vedere quello che intendo dire con la seguente tabella colore:

Quando si ridimensiona la lightness dei nostri colori, questi diventano proporzionalmente più chiari e pertanto più prevedibili.

Anche le variazioni più scure sono proporzionali.

Con scale-color(), potete limitare la vostra palette di colori alle vostre costanti base, ma avere ancora una flessibilità incredibile ed intuitiva con tinte e shades. Ora la nostra dichiarazione per il gradiente può diventare così:

button{
	background-color: $toolbox;  // fallback
	background-image: gradient(
		scale-color($toolbox, lightness: 50%),
		$toolbox,
		scale-color($toolbox, lightness: -30%);
	)
}

button: hover,
button: focus{
	background-color: scale-color($toolbox, lightness: 50%);  // fallback
	background-image: gradient(
		scale-color($toolbox, lightness: 60%),
		$toolbox
		scale-color($toolbox, lightness: -20%);
	)
}

button.secondary{
	background-color: $ol-blue;  // fallback
	background-image: gradient(
		scale-color($ol-blue, lightness: 50%),
		$ol-blue,
		scale-color($ol-blue, lightness: -30%);
	)
}

button.secondary:hover,
button.secondary:focus{
	background-color: scale-color($ol-blue, lightness: 50%),  // fallback
	background-image: gradient(
		scale-color($ol-blue, lightness: 60%),
		$ol-blue,
		scale-color($ol-blue, lightness: -20%);
	)
}

In questo esempio, notate che sto usando solo due delle mie costanti e le sto ridimensionando a piacimento. In effetti, potremmo applicare questa cosa in tutta la pagina. Il contenuto della homepage di Gullfoss Travel Supply Co. usa solo due colori del brand, ridimensionati a valori di lightness diversi. Nonostante la semplice palette, c’è ancora moltissima flessibilità.

Padroneggiare il colore con il mixing#section4

C’è un altro modo in cui potete ottenere questo tipo di palette proporzionali, con una funzione Sass ancora più intuitiva e potente chiamata mix().

Se vogliamo tingere $ol-blue del 60%, scriveremo:

mix(white, $ol-blue, 60%)

Pensatelo come mischiare un tubo di pittura bianca in un tubo di 01′ Blu. In maniera simile, se vogliamo applicare gradazioni di colore a $toolbox, scriveremo:

mix(black, $toolbox, 30%)

Così, scopriamo che mischiare il bianco e il nero fa percettivamente la stessa cosa del ridimensionare la lightness di un colore, ma, opportunamente, è più breve da scrivere. Oltre a questo, mix può aiutarvi a creare facilmente un “look and feel” per il vostro sito web che prima non era possibile. Se adesso possiamo mischiare i colori come le tempere, possiamo rendere i nostri siti web più simili ai dipinti? Io credo che si possa fare, ma dobbiamo pensare meno come programmatori e più come artisti.

Prendiamo di nuovo in considerazione i dipinti delle balle di fieno di Monet. Costituiscono un notevole studio della luce e sono magnifici dal punto di vista prettamente estetico, ma, dal punto di vista del design, possiamo trovarvi un’utile lezione. Nelle parole di un altro impressionista francese, Pierre Bonnard, “il colore non aggiunge una qualità piacevole al design: lo rinforza”. Ricordate il modo in cui il colore della luce influenza l’aspetto delle balle di fieno di Monet. Cosa succederebbe se potessimo prendere i nostri colori base e influenzare facilmente il colore nei nostri design nello stesso modo in cui egli lo fece nel 1890?

La funzione mix() di Sass ci permette di farlo. Prendiamo di nuovo la nostra palette di colori e aggiungiamo giusto un paio di colori in più: una highlight e una shadow. Ora, mescoliamo un’altra volta i nostri colori del brand, ma invece di mischiare semplicemente con il bianco e il nero, usiamo i nostri nuovi colori:

Improvvisamente l’intera palette diventa calda ed invitante e i colori più scuri sono caldi e vibranti.

Colorare con una highlight gialla dà alla palette un aspetto più solare.

Ombreggiare con una shadow complementare fa sì che la palette sembri più naturale.

Se decido che questo schema non mi piace, posso semplicemente scegliere dei nuovi valori per quelle due costanti e, la prossima volta che compilerò Sass in CSS, il design rifletterà automaticamente il mio cambiamento.

Con il prossimo schema, comincio di nuovo con la stessa palette del brand, ma ora l’highlight è rosa acceso mentre la shadow è un verde scuro e desaturato.

Cambia totalmente il look della palette ma rimane basato sul nostro brand originale.

Un cambiamento ai colori highlight e shadow si riflette automaticamente nella vostra palette di colori quando Sass viene compilato in CSS.

Highlights e shadows possono essere ritoccate per ottenere l’esatto mood o la storia giusta per il vostro sito, senza fare tediosi cambiamenti in tutti i vostri fogli di stile.

Tornando a Gullfoss Travel Supply Co., ho dimostrato alcune possibilità con questo tipo di mixing di colori su ciascuna delle pagine delle etichette. Guardando la pagina di Olympia, il mood è completamente diverso dalla homepage, ma tutto il markup, la tipografia e il layout di base rimangono identici. Tuttavia, dal momento che quasi tutti i colori sono stati mischiati in una certa misura con le highilights gialle o con le shadow viola, si crea una nuova luce (letteralmente) sulla pagina. Ora lo sfondo del contenuto è del colore del guscio delle uova e il pulsante “Add to Cart” è naturale ma vibrante.

L’adesivo di Lincoln è colorato in maniera forte con tinte e shades di rosso, così volevo che la pagina riflettesse questo. Ho scelto delle highlight e shadows rossicce per rendere il design coerente con l’illustrazione.

Quando visitate la pagina di Barton Springs Pool, si riflettono dappertutto le acque fresche e le foglie verdi. La differenza tra i colori originali e quelli nuovi è sottile ma distinta e questo è il punto: i vostri colori dovrebbero lavorare assieme per creare un’estetica che migliori il vostro design.

Ma se state cercando un effetto drammatico, guardate The Grid: questa pagina inverte highlights e shadows e prende in prestito un look ispirato al film Tron. Un cambiamento piuttosto azzardato ottenuto scambiando poche costanti!

Ulteriori considerazioni per lo sviluppo della vostra palette#section5

Più o meno ogni colore su queste pagine è mischiato con una highlight o shadow in un modo o nell’altro, ma a volte gli elementi nel vostro design possono apparire un po’ troppo omogenei e cominciare a fondersi. In questi casi, sentitevi liberi di integrare i vostri design con un altro insieme di color mixer. Questo può dare più profondità ai livelli delle vostre pagine e farli risaltare davvero.

Guardiamo di nuovo la pagina per Lincoln. Ricordatevi, volevo darle una tinta più rossa. È difficile leggere il testo su uno sfondo rosso acceso, quindi ho abbassato un po’ le highlight: sono a malapena rosse. Poi ho impostato lo sfondo a verde. Dal momento che il verde è il complementare del rosso, inganna il vostro cervello, facendo diventare più rossi i colori molto leggeri, mentre manteniamo un piacevole contrasto. (Nota: poiché questo sito è responsive, il livello dello sfondo non è visibile sugli schermi più piccoli). Questi livelli separati usano highlight e shadow molto diverse che interagiscono fra loro.

Per ottenere leggibilità e accessibilità un po’ più avanzate per un momento, è inoltre essenziale tenere a mente l’accessibilità dei nostri schemi di colore. Date un’altra occhiata alla pagina di The Grid. Se vi sembra scomoda da leggere, non siete i soli! Il menu in cima alla pagina ha un rapporto di contratto troppo basso. Stando alle linee guida WCAG, dovrebbe essere 4.5:1, ma risulta molto più basso, 2.6:1! Un buon rapporto di contrasto tra il colore del testo e quello dello sfondo rendono più piacevole l’utilizzo di un sito. Ci sono moltissimi tools e recommendations per esplorare più a fondo questo argomento.

Prima di concludere, voglio fare una rapida carrellata del supporto dei browser, giusto per essere chiari. Poiché tutto questo processing del colore viene compilato in dichiarazioni di colore base di CSS, tutto viene tradotto in una dichiarazione statica che, ovviamente, è comprensibile oggi da ogni browser. Questo significa che potete cominciare a giocare con queste tecniche da oggi!

Il colore sul web ha fatto molti passi avanti e continua a migliorare costantemente man mano che i browser e i device aggiungono supporto per le nuove tecnologie. Nel frattempo, il mixing attraverso il preprocessore ha fatto fare un balzo evolutivo al colore: ci offre un potere senza precedenti per creare tinte e shadows che ci aiutano a raccontare le nostre storie, danno più sfumature alle nostre palette, tirando fuori il Monet che c’è in noi.

Illustrazioni: {carlok}