{"id":641,"date":"2016-08-03T21:06:38","date_gmt":"2016-08-03T19:06:38","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/mixare-i-colori-per-il-web-con-sass\/"},"modified":"2016-08-03T21:06:38","modified_gmt":"2016-08-03T19:06:38","slug":"mixare-i-colori-per-il-web-con-sass","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/mixare-i-colori-per-il-web-con-sass\/","title":{"rendered":"Mixare i colori per il Web con Sass"},"content":{"rendered":"<div class=\"paragrafo\">\n<p>Il colore \u00e8 uno dei componenti pi\u00f9 potenti dell&#8217;arte e del design. Lo usiamo per influenzare gli stati d&#8217;animo, per creare un ambiente e per raccontare una storia. Pi\u00f9 di 125 anni fa, un grande pittore impressionista cambi\u00f2 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\u00e0 uno strumento per mettere una nuova luce nelle nostre palette di colori.<\/p>\n<p>Una mattina del 1890, Claude Monet cominci\u00f2 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.<\/p>\n<div id=\"figure1\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/monet_haystacks_wikimedia.jpg\" border=\"0\" alt=\"Claude Monet, Balle di fieno: Effetto della neve (1891). Scottish National Gallery; immagine di pubblico dominio.\" width=\"100%\" \/><\/p>\n<p>Claude Monet, <cite>Balle di fieno: Effetto della neve<\/cite> (1891). Scottish National Gallery; immagine di dominio pubblico.<\/p>\n<\/div>\n<p>Storicamente, la nostra capacit\u00e0 di tradurre questo tipo di flessibilit\u00e0 nel web \u00e8 stata limitata. Abbiamo trascurato l&#8217;arte di mescolare i colori per l&#8217;impatto emotivo, traendo il massimo dai codici di colore CSS dichiarati staticamente. Nel frattempo, la manipolazione del colore in tempo reale \u00e8 stata relegata all&#8217;arcano regno dei programmatori.<\/p>\n<p>Grazie al cielo, nuovi tool ci danno pi\u00f9 potere sul colore di quanto non ne abbiamo mai avuto, ma, nonostante il colore sul web continui a progredire, il solo CSS \u00e8 piuttosto inflessibile. Qui \u00e8 dove tornano utili i preprocessori. Esploriamo alcune delle loro capacit\u00e0 che possiamo prendere in prestito nei nostri fogli di stile:<\/p>\n<ul>\n<li>gli alias ci aiutano a riconoscere meglio che colori stiamo usando<\/li>\n<li>lightening, darkening e scaling ci offrono una flessibilit\u00e0 molto puntigliosa sulle palette<\/li>\n<li>il color mixing sblocca il Monet che ci portiamo dentro e un intero nuovo mondo di sfumature e arte.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>La maledizione dei codici esadecimali<\/h2>\n<p>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\u00e0 di istanze multiple di codici esadecimali criptici o di numeri HSL ambigui. Le variabili CSS sono all&#8217;orizzonte e ci aiuteranno a chiarire quale colore \u00e8 quale con il linguaggio naturale, ma se in realt\u00e0 non abbiamo un nome per il nostro colore? Questo \u00e8 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\u00e0 simili, ma lascio a voi la ricerca su quello di vostra scelta.<\/p>\n<p>Vediamo di capire meglio quello che voglio dire.<\/p>\n<p>Creeremo un nuovo brand e sceglieremo due colori per rappresentarlo. La prima cosa che far\u00f2 sar\u00e0 dare un nome ai colori: <code>$toolbox<\/code> and <code>$ol-blue<\/code>.<\/p>\n<div id=\"figure2\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_01.png\" border=\"0\" alt=\"I colori del brand, $toolbox e $ol-blue, per un ipotetico sito chiamato Gullfoss Travel Supply Co.\" width=\"100%\" \/><\/div>\n<p>Ora che ho stabilito i colori del mio brand, li uso per costruire un sito web per <a href=\"http:\/\/demo.lighting\/\">Gullfoss Travel Supply Co<\/a>. Il concetto che sta dietro a questo ipotetico sito \u00e8 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\u00f9 chiare) e shade (pi\u00f9 scure) diverse.<\/p>\n<div id=\"figure3\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_02.png\" border=\"0\" alt=\"Sito ipotetico per Gullfoss Travel Supply Co.\" width=\"100%\" \/><\/p>\n<p>Sito ipotetico per Gullfoss Travel Supply Co.<\/p>\n<\/div>\n<p>Considerate, per esempio, questo pulsante:<\/p>\n<div id=\"figure4\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_03.png\" border=\"0\" alt=\"Un pulsante \u201cAdd To Cart\u201d che utilizza un semplice gradiente.\" width=\"100%\" \/><\/div>\n<p>Volevo dare al mio pulsante un senso di \u201ccliccabilit\u00e0\u201d, che ho ottenuto facilmente con un semplice gradiente. Il pulsante \u00e8 basato sul colore che ho chiamato <code>$toolbox<\/code>. La highlight \u00e8 una versione pi\u00f9 chiara dello swatch e la shadow \u00e8 una versione pi\u00f9 scura.<\/p>\n<p>Tradizionalmente, avrei scritto tutto questo in CSS cos\u00ec:<\/p>\n<pre id=\"snippet1\" class=\" language-css\"><code class=\" language-css\">\n<span class=\"token selector\">button<\/span><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> $toolbox<span class=\"token punctuation\">;<\/span>  \/\/ fallback\n\t<span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> gradient(\n\t\thsl(0, 33%, 52%),  \/\/ highlight\n\t\t$toolbox,\n\t\thsl(0, 41%, 39%)<span class=\"token punctuation\">;<\/span>  \/\/ shadow\n\t)\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>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\u00e0 di un grosso problema, ma se volessi aggiungere un pulsante secondario, questa volta basato su <code>$ol-blue<\/code>, dovrei tornare di nuovo al color picker e trovare i nuovi valori.<\/p>\n<p>E ciascuno di questi pulsanti ha anche bisogno di uno stato \u201chover\u201d! Le highlights e shadows dell&#8217;hover saranno pi\u00f9 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?<\/p>\n<p>A quanto pare, Sass pu\u00f2 farlo al mio posto: ha delle funzioni built-in che processano questi colori senza dover tenere traccia di tutte le variazioni.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Fare ordine nel color picker per Sass<\/h2>\n<p>Un modo per schiarire un colore \u00e8 usare la funzione lighten:<\/p>\n<pre id=\"snippet2\" class=\" language-css\"><code class=\" language-css\">lighten($toolbox, 20%)<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>E per scurire un colore, possiamo usare la funzione darken:<\/p>\n<pre id=\"snippet3\" class=\" language-css\"><code class=\" language-css\">darken($ol-blue, 30%)<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>Semplice! Ora abbiamo un paio di tool per mischiare al volo i colori. Divertitevi! Ok, non <em>troppo<\/em> per\u00f2 perch\u00e9 tutto ci\u00f2 pu\u00f2 rapidamente diventare leggermente complesso. Considerate questo: se schiariamo <code>$toolbox<\/code> del 50%, otteniamo una versione molto chiara di <code>$toolbox<\/code>. Ma se schiariamo <code>$ol-blue<\/code> del 50%, diventa completamente bianco. Ecco perch\u00e9 <code>$ol-blue<\/code> \u00e8 un colore molto pi\u00f9 chiaro di <code>$toolbox<\/code>.<\/p>\n<p>Per sapere quanto possiamo schiarire un colore prima che diventi bianco, dobbiamo conoscere in anticipo il valore della lightness del colore. Questa informazione \u00e8 convenientemente codificata nella sua notazione HSL. Se sottraiamo il valore della lightness del colore dal 100%, il risultato \u00e8 la quantit\u00e0 di cui possiamo schiarire un colore per ottenere il bianco.<\/p>\n<pre id=\"snippet4\" class=\" language-css\"><code class=\" language-css\">x = 100% - l\n<\/code><\/pre>\n<p>Dal momento che il valore della lightness di <code>$ol-blue<\/code> \u00e8 60%, possiamo schiarirlo fino al 40% prima che diventi perfettamente bianco. La lightness di <code>$toolbox<\/code> \u00e8 il 40%, quindi possiamo schiarirlo del 60%.<\/p>\n<div id=\"figure5\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_04a.png\" border=\"0\" alt=\"Tabella che mostra che quando schiariamo i colori, $ol-blue diventa bianco prima di $toolbox, perch\u00e9 ha un valore di lightness di base pi\u00f9 alto.\" width=\"100%\" \/><\/p>\n<p>Quando schiariamo i nostri colori, $ol-blue diventa bianco prima di $toolbox, perch\u00e9 ha un valore di lightness di base pi\u00f9 alto.<\/p>\n<\/div>\n<div id=\"figure6\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_04b.png\" border=\"0\" alt=\"Tabella che mostra che quando scuriamo i nostri colori, $toolbox diventa nero prima di $ol-blue, perch\u00e9 ha un valore di lightness di base pi\u00f9 basso.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Quando scuriamo i nostri colori, $toolbox diventa nero pi\u00f9 rapidamente di $ol-blue, perch\u00e9 ha un valore di lightness di base pi\u00f9 basso.<\/p>\n<\/div>\n<p>Pertanto, per gestire questa nuova palette di colori, abbiamo semplicemente bisogno di memorizzare i valori di lightness di ciascuno dei colori. \u00c8 piuttosto noioso ma \u00e8 sempre meglio che memorizzare codici esadecimali, giusto? Ovviamente. Ma vi sveler\u00f2 un trucco migliore.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Palette proporzionali con scaling del colore<\/h2>\n<p>Sass ha un&#8217;altra funzione per i colori chiamata <code>scale-color()<\/code> che pu\u00f2 spostare i componenti del colore in maniera proporzionale. <code>scale-color()<\/code> lavora sui canali rosso, verde e blu di RGB e sui canali saturazione e lightness in HSL. (Per aggiustare la tinta\/tonalit\u00e0 in maniera simile, si deve usare la funzione con l&#8217;azzeccatissimo nome di <code>adjust-hue()<\/code>.)<\/p>\n<p>Come ho sottolineato prima, se dovessimo schiarire <code>$ol-blue<\/code> del 50%, diventerebbe bianco puro, ma se ridimensionassimo il tono con <code>scale-color()<\/code> del 50%\u2026<\/p>\n<pre id=\"snippet5\" class=\" language-css\"><code class=\" language-css\">scale-color($ol-blue, lightness, 50%)<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>\u2026sarebbe a met\u00e0 strada tra il colore originale e il bianco.<\/p>\n<p>Adesso so esattamente quanto devo ridimensionare ciascuno dei miei colori per ottenere il bianco: sar\u00e0 sempre il 100%. Se ridimensiono la lightness di <code>$ol-blue<\/code> del 99%, sar\u00e0 ancora <code>$ol-blue<\/code> per l&#8217;1%. In maniera simile per <code>$toolbox<\/code> o qualunque altro colore a cui possiate pensare (ad esclusione dei colori che sono gi\u00e0 cos\u00ec chiari che potrebbero arrotondare al bianco prima), raggiungeranno sempre il massimo livello al 100% di lightness.<\/p>\n<p>Potete facilmente vedere quello che intendo dire con la seguente tabella colore:<\/p>\n<div id=\"figure7\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_05a.png\" border=\"0\" alt=\"Tabella che mostra che quando si ridimensiona la lightness dei nostri colori, questi diventano proporzionatamente pi\u00f9 chiari e pertanto pi\u00f9 prevedibili.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Quando si ridimensiona la lightness dei nostri colori, questi diventano proporzionalmente pi\u00f9 chiari e pertanto pi\u00f9 prevedibili.<\/p>\n<\/div>\n<div id=\"figure8\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_05b_corrected.png\" border=\"0\" alt=\"Tabella che mostra che quando si ridimensiona la darkness dei nostri colori, questi diventano proporzionalmente pi\u00f9 scuri e pertanto pi\u00f9 prevedibili.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Anche le variazioni pi\u00f9 scure sono proporzionali.<\/p>\n<\/div>\n<p>Con <code>scale-color()<\/code>, potete limitare la vostra palette di colori alle vostre costanti base, ma avere ancora una flessibilit\u00e0 incredibile ed intuitiva con tinte e shades. Ora la nostra dichiarazione per il gradiente pu\u00f2 diventare cos\u00ec:<\/p>\n<pre id=\"snippet6\" class=\" language-css\"><code class=\" language-css\">\n<span class=\"token selector\">button<\/span><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> $toolbox<span class=\"token punctuation\">;<\/span>  \/\/ fallback\n\t<span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> gradient(\n\t\tscale-color($toolbox, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 50%),\n\t\t$toolbox,\n\t\tscale-color($toolbox, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> -30%)<span class=\"token punctuation\">;<\/span>\n\t)\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">button: hover,\nbutton: focus<\/span><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> scale-color($toolbox, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 50%)<span class=\"token punctuation\">;<\/span>  \/\/ fallback\n\t<span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> gradient(\n\t\tscale-color($toolbox, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 60%),\n\t\t$toolbox\n\t\tscale-color($toolbox, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> -20%)<span class=\"token punctuation\">;<\/span>\n\t)\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">button.secondary<\/span><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> $ol-blue<span class=\"token punctuation\">;<\/span>  \/\/ fallback\n\t<span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> gradient(\n\t\tscale-color($ol-blue, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 50%),\n\t\t$ol-blue,\n\t\tscale-color($ol-blue, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> -30%)<span class=\"token punctuation\">;<\/span>\n\t)\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">button.secondary:hover,\nbutton.secondary:focus<\/span><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> scale-color($ol-blue, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 50%),  \/\/ fallback\n\t<span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> gradient(\n\t\tscale-color($ol-blue, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> 60%),\n\t\t$ol-blue,\n\t\tscale-color($ol-blue, <span class=\"token property\">lightness<\/span><span class=\"token punctuation\">:<\/span> -20%)<span class=\"token punctuation\">;<\/span>\n\t)\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<p>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&#8217;\u00e8 ancora moltissima flessibilit\u00e0.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Padroneggiare il colore con il mixing<\/h2>\n<p>C&#8217;\u00e8 un altro modo in cui potete ottenere questo tipo di palette proporzionali, con una funzione Sass ancora pi\u00f9 intuitiva e potente chiamata <code>mix()<\/code>.<\/p>\n<p>Se vogliamo tingere <code>$ol-blue<\/code> del 60%, scriveremo:<\/p>\n<pre id=\"snippet7\" class=\" language-css\"><code class=\" language-css\">\nmix(white, $ol-blue, 60%)\n<\/code><\/pre>\n<p>Pensatelo come mischiare un tubo di pittura bianca in un tubo di 01&#8242; Blu. In maniera simile, se vogliamo applicare gradazioni di colore a <code>$toolbox<\/code>, scriveremo:<\/p>\n<pre id=\"snippet8\" class=\" language-css\"><code class=\" language-css\">\nmix(black, $toolbox, 30%)\n<\/code><\/pre>\n<p>Cos\u00ec, scopriamo che mischiare il bianco e il nero fa percettivamente la stessa cosa del ridimensionare la lightness di un colore, ma, opportunamente, \u00e8 pi\u00f9 breve da scrivere. Oltre a questo, <code>mix<\/code> pu\u00f2 aiutarvi a creare facilmente un \u201clook and feel\u201d 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\u00f9 simili ai dipinti? Io credo che si possa fare, ma dobbiamo pensare meno come programmatori e pi\u00f9 come artisti.<\/p>\n<p>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&#8217;utile lezione. Nelle parole di un altro impressionista francese, Pierre Bonnard, \u201cil colore non aggiunge una qualit\u00e0 piacevole al design: lo rinforza\u201d. Ricordate il modo in cui il colore della luce influenza l&#8217;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?<\/p>\n<p>La funzione <code>mix()<\/code> di Sass ci permette di farlo. Prendiamo di nuovo la nostra palette di colori e aggiungiamo giusto un paio di colori in pi\u00f9: una highlight e una shadow. Ora, mescoliamo un&#8217;altra volta i nostri colori del brand, ma invece di mischiare semplicemente con il bianco e il nero, usiamo i nostri nuovi colori:<\/p>\n<div id=\"figure9\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_06.png\" border=\"0\" alt=\"Un paio di nuovi colori per la nostra palette: $highlight e $shadow.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<p>Improvvisamente l&#8217;intera palette diventa calda ed invitante e i colori pi\u00f9 scuri sono caldi e vibranti.<\/p>\n<div id=\"figure10\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_07a.png\" border=\"0\" alt=\"Tabella del colore che mostra che tingere con un giallo highlight d\u00e0 alla palette un'apparenza pi\u00f9 solare.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Colorare con una highlight gialla d\u00e0 alla palette un aspetto pi\u00f9 solare.<\/p>\n<\/div>\n<div id=\"figure11\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_07b.png\" border=\"0\" alt=\"Tabella del colore che mostra che ombreggiare con una shadow complementare fa in modo che la palette sembri pi\u00f9 naturale.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Ombreggiare con una shadow complementare fa s\u00ec che la palette sembri pi\u00f9 naturale.<\/p>\n<\/div>\n<p>Se decido che questo schema non mi piace, posso semplicemente scegliere dei nuovi valori per quelle due costanti e, la prossima volta che compiler\u00f2 Sass in CSS, il design rifletter\u00e0 automaticamente il mio cambiamento.<\/p>\n<p>Con il prossimo schema, comincio di nuovo con la stessa palette del brand, ma ora l&#8217;highlight \u00e8 rosa acceso mentre la shadow \u00e8 un verde scuro e desaturato.<\/p>\n<div id=\"figure12\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_08.png\" border=\"0\" alt=\"Nuovi colori $highlight e $shadow.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<p>Cambia totalmente il look della palette ma rimane basato sul nostro brand originale.<\/p>\n<div id=\"figure13\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_09a.png\" border=\"0\" alt=\"Tabella che mostra che un cambiamento nei colori highlight e shadow si riflette automaticamente nella vostra palette di colori quando Sass viene compilato in CSS.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Un cambiamento ai colori highlight e shadow si riflette automaticamente nella vostra palette di colori quando Sass viene compilato in CSS.<\/p>\n<\/div>\n<div id=\"figure14\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_09b.png\" border=\"0\" alt=\"Tabella che mostra che highlights e shadows possono essere ritoccate per ottenere l'esatto mood o la storia giusta per il vostro sito, senza fare tediosi cambiamenti in tutto il foglio di stile.\" width=\"100%\" style=\"border: 0px;\" \/><\/p>\n<p>Highlights e shadows possono essere ritoccate per ottenere l&#8217;esatto mood o la storia giusta per il vostro sito, senza fare tediosi cambiamenti in tutti i vostri fogli di stile.<\/p>\n<\/div>\n<p>Tornando a Gullfoss Travel Supply Co., ho dimostrato alcune possibilit\u00e0 con questo tipo di mixing di colori su ciascuna delle pagine delle etichette. Guardando la pagina di Olympia, il mood \u00e8 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 \u00e8 del colore del guscio delle uova e il pulsante \u201cAdd to Cart\u201d \u00e8 naturale ma vibrante.<\/p>\n<div id=\"figure15\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_10.png\" border=\"0\" alt=\"La pagina The Olympia del sito Gullfoss Travel Supply Co.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<p>L&#8217;adesivo di Lincoln \u00e8 colorato in maniera forte con tinte e shades di rosso, cos\u00ec volevo che la pagina riflettesse questo. Ho scelto delle highlight e shadows rossicce per rendere il design coerente con l&#8217;illustrazione.<\/p>\n<div id=\"figure16\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_11.png\" border=\"0\" alt=\"La pagina The Lincoln del sito Gullfoss Travel Supply Co.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<p>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 \u00e8 sottile ma distinta e questo \u00e8 il punto: i vostri colori dovrebbero lavorare assieme per creare un&#8217;estetica che migliori il vostro design.<\/p>\n<div id=\"figure17\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_12.png\" border=\"0\" alt=\"La pagina The Barton Springs Pool del sito Gullfoss Travel Supply Co.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<p>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 <cite>Tron<\/cite>. Un cambiamento piuttosto azzardato ottenuto scambiando poche costanti!<\/p>\n<div id=\"figure18\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/08\/mcdowell_13.png\" border=\"0\" alt=\"La pagina The Grid del sito Gullfoss Travel Supply Co.\" width=\"100%\" style=\"border: 0px;\" \/><\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Ulteriori considerazioni per lo sviluppo della vostra palette<\/h2>\n<p>Pi\u00f9 o meno ogni colore su queste pagine \u00e8 mischiato con una highlight o shadow in un modo o nell&#8217;altro, ma a volte gli elementi nel vostro design possono apparire un po&#8217; 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\u00f2 dare pi\u00f9 profondit\u00e0 ai livelli delle vostre pagine e farli risaltare davvero.<\/p>\n<p>Guardiamo di nuovo la pagina per Lincoln. Ricordatevi, volevo darle una tinta pi\u00f9 rossa. \u00c8 difficile leggere il testo su uno sfondo rosso acceso, quindi ho abbassato un po&#8217; le highlight: sono a malapena rosse. Poi ho impostato lo sfondo a verde. Dal momento che il verde \u00e8 il complementare del rosso, inganna il vostro cervello, facendo diventare pi\u00f9 rossi i colori molto leggeri, mentre manteniamo un piacevole contrasto. (Nota: poich\u00e9 questo sito \u00e8 responsive, il livello dello sfondo non \u00e8 visibile sugli schermi pi\u00f9 piccoli). Questi livelli separati usano highlight e shadow molto diverse che interagiscono fra loro.<\/p>\n<p>Per ottenere leggibilit\u00e0 e accessibilit\u00e0 un po&#8217; pi\u00f9 avanzate per un momento, \u00e8 inoltre essenziale tenere a mente l&#8217;accessibilit\u00e0 dei nostri schemi di colore. Date un&#8217;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 <a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G18.html\">linee guida WCAG<\/a>, dovrebbe essere 4.5:1, ma risulta molto pi\u00f9 basso, 2.6:1! Un buon rapporto di contrasto tra il colore del testo e quello dello sfondo rendono pi\u00f9 piacevole l&#8217;utilizzo di un sito. Ci sono moltissimi <a href=\"http:\/\/alistapart.com\/blog\/post\/easy-color-contrast-testing\">tools e recommendations<\/a> per esplorare pi\u00f9 a fondo questo argomento.<\/p>\n<p>Prima di concludere, voglio fare una rapida carrellata del supporto dei browser, giusto per essere chiari. Poich\u00e9 tutto questo processing del colore viene compilato in dichiarazioni di colore base di CSS, tutto viene tradotto in una dichiarazione statica che, ovviamente, \u00e8 comprensibile oggi da ogni browser. Questo significa che potete cominciare a giocare con queste tecniche da oggi!<\/p>\n<p>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\u00f9 sfumature alle nostre palette, tirando fuori il Monet che c&#8217;\u00e8 in noi.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Usiamo il colore per influenzare gli stati d&#8217;animo, per creare un&#8217;ambientazione e per raccontare una storia. 125 anni fa, il pittore impressionista Claude Monet cambi\u00f2 il modo in cui pensiamo al colore descrivendo il ruolo della luce in esso. Le sue osservazioni sono andate in gran parte perse nel design per il web, ma un preprocessore come Sass offre un potere inedito per mischiare tinte e tonalit\u00e0 che pervaderanno le nostre palette con pi\u00f9 sfumature.<\/p>\n","protected":false},"author":229,"featured_media":7000804,"comment_status":"open","ping_status":"open","template":"","categories":[244,150,278],"tags":[],"coauthors":[483],"class_list":["post-641","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-numero-133-3-agosto-2016","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/229"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000804"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=641"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}