Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS
Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Html e css
Autore:
10 ago 2018

Durante la creazione di un sito web l’uso del colore è un passaggio obbligato per ogni web master. Molto spesso è il colore del logo aziendale a suggerirci la direzione, tuttavia abbinarlo efficacemente ai vari elementi di un sito, come pulsanti, footer, testi, link e via dicendo può risultare un vero e proprio rompicapo. Soprattutto quando ci troviamo a fare i conti con strutture complesse e progetti in continua evoluzione.

LESS fornisce una manciata di funzioni in grado di semplificarci davvero la vita in tal senso. Per chi non lo sapesse LESS è un linguaggio che ci permette di scrivere i CSS in maniera “potenziata” ed è in grado di aiutarci come pochi altri strumenti a manipolare, abbinare e organizzare i colori di un sito web. Sarà questo il tema di questo tutorial; prima però, potrebbe essere utile fare un passo a sinistra e rispolverare alcune nozioni sulla teoria del colore.
Se invece vi sentite forti su questo argomento potete saltare tutto il 1° capitolo per andare direttamente al capitolo sul LESS


1) Brevi nozioni di teoria del colore, per creare le giuste armonie in un sito web.


La teoria più comprensibile per spiegare i colori è quella di Johannes Itten. Si tratta di un disco cromatico diviso in 12 colori equidistanti fra loro, chiamati colori terziari, a ciascuno dei quali corrisponde il suo opposto che ne è complementare. I 12 colori si susseguono secondo lo spettro della luce (che poi è quello dell’arcobaleno) e sono generati dalla combinazione dei 3 colori primari con i 3 colori secondari. I 3 colori secondari sono l’arancio il verde e il viola e vengono generati dalla combinazione dei tre colori primari. I 3 colori primari sono il giallo il rosso e il blu ed hanno la caratteristica di essere perfettamente distinguibili l’uno dall’altro.

Cerchio dei colori di Itten

Da questo cerchio otteniamo tutte le armonie cromatiche possibili, come fosse matematica.
Conoscere le regole per comporre i giusti accordi cromatici significa accostare i colori in modo corretto e dare alla nostra creatività un aspetto altamente professionale. Esistono molti schemi o accordi per accostare i colori. Vediamo subito come accostare 2 o più colori con i più semplici rapporti armonici.

1-a) Accordi di colori complementari


Accordi cromatici complementari, triadici, quadrati, esagonali
Accordi colori complementari, esempio

Un ottimo modo per creare delle armonie è basato sull’accostamento di colori tra loro complementari ed è possibile individuarli facendo ruotare sul cerchio dei colori una linea, se si vuole trovare il colore complementare della nostra base, o un triangolo, così facendo otterremo un’armonia di colori triadica, o un quadrato, o un rettangolo, o un esagono ...

1-b) Accordi di colori analoghi


Accordi cromatici analoghi e accordi cromatici analoghi estesi

I colori vicini tra di loro nel cerchio cromatico vengono chiamati analoghi. Questo tipo di accordo può produrre un effetto simile a quello monocromatico (che vedremo più avanti), tuttavia aumentando la scala cromatica aumenteranno anche le differenze fra i due effetti, creando combinazioni sempre più interessanti.

1-c) Accordi di colori tonali


Accordi colori tonali

Un altro modo per creare interessanti combinazioni è mescolare due colori tra loro. Combinando di volta in volta un colore con altri si otterranno svariate tonalità dello stesso colore: è consigliabile evitare di mescolare due colori dello stesso spettro, le combinazioni più soddisfacenti si ottengono mixando colori opposti tra loro.
Nell’esempio le tonalità sono state ottenute mixando il nostro colore base #3BAFDA con i seguenti colori: #C71585 (mediumvioletred) # 20B2AA (lightseagreen) #F5FFFA (mintcream).

1-d) Accordi monocromatici (Dissolvenza – Ombra – Saturazione)


Accordi colori monocromatici - dissolvenza, ombra, saturazione

Come si può intuire questo schema combina varie tonalità dello stesso colore ed è un modo di accostare i colori moderno e pulito. Gli accordi monocromatici si possono ottenere intervenendo sulle dissolvenze, ossia sulla scala della trasparenza; sull’ombra, ossia sull’intensità della luce o dell’oscurità; e sulla saturazione, ossia sulla profondità: maggiore è la saturazione e maggiore risulterà la sua vivacità, mentre il livello più basso della saturazione lo renderà grigio.

1-e) Programmi e soluzioni online per comporre delle armonie cromatiche


Se siete interessati a delle soluzioni che vi consentano di creare delle combinazioni di colori in maniera semplice e veloce posso suggerirvi alcune applicazioni:

Tuttavia il nostro obbiettivo finale è ben altra cosa: creare uno script capace di generare da un colore di base i giusti i colori in ogni parte del nostro sito!!!


2) Brevi nozioni di LESS, per capire cos’è e come trasformarlo in un file CSS


Per chi non lo sapesse LESS è un linguaggio più esteso, più facile da scrivere e più facile da mantenere del linguaggio CSS. Le sue istruzioni vengono scritte in un file.less e può contenere sia le caratteristiche sintattiche del CSS che le peculiari istruzioni LESS. Un linguaggio CSS potenziato avevo scritto in precedenza, che tuttavia non può essere letto dai dai browser web. Ma non preoccupatevi! perché una volta scritto può essere convertito in un file CSS. Questa operazione si chiama compilazione e può avvenire in due modi:


  • includendo nella pagina HTML il file.less seguito da un piccolo script Javascript (di nome less.js, scaricabile dal sito ufficiale), in grado di compilare il codice CSS all’interno dei tagdel documento html;

  • Oppure includendo nella pagina il file.css compilato, convertito da un software terzo. Questo a mio avviso è il metodo migliore. Esistono diversi software per compilare file.less, di seguito te ne segnalo alcuni:
    CodeKit, Koala, WinLess, SimpleLess, Prepos.


3) Script LESS per generare da un colore di base le giuste armonie cromatiche in ogni parte del nostro sito


Arrivati a questo punto avete tutte le nozioni di base per generare le giuste armonie cromatiche in ogni parte del vostro sito semplicemente inserendo il vostro colore di base.

Come raggiungere un colore attorno alla ruota dei colori


La prima funzione da conoscere è spin(), ci consente muoverci in termini di gradi intorno alla ruota cromatica.

Come creare un colore complementare di un colore di base (vedi 1-a)


@color-base: #3bafdA;

@color-complement: spin(@color-base, 180);

Come creare un accordo complementare triadico (a tre colori)


@color-base        : #3bafdA;

@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary : spin(@color-base, (360 / 3));

Come creare accordi di colori tonali (vedi 1-c)


La seconda funzione da conoscere è mix(), ci consente di mescolare i colori, generando una serie di colori della stessa tonalità.

@color-base      : #3bafdA;

@color-primary : mix(@color-base, mediumvioletred);
@color-secondary : mix(@color-base, lightseagreen);
@color-tertiary : mix(@color-base, mintcream);

Come creare accordi monocromatici (vedi 1-d)


Intervengo sulle dissolvenze per creare una scala della trasparenze.

@color-base  : #3bafdA;

@soft-background : fade(@color-primary, 10%);
@medium-background : fade(@color-primary, 50%);

Intervengo sulle ombre per rendere un colore più scuro o più leggero.

@color-base  : #3bafdA;

@color-hover : lighten(@color-primary, 10%); //#9c84c1
@color-focus : darken(@color-primary, 10%); //#684b94

Intervengo sulla saturazione per vivacizzare o meno i colori.

@color-base    : #3bafdA;

@color-hover : saturate(@color-primary, 10%);
@color-focus : desaturate(@color-primary, 10%);
@color-disable : lightness(desaturate(@color-primary, 100%), 30%);

Come creare contrasti evidenti, per esempio fra background e testo


Intervengo sulle dissolvenze per creare una scala della trasparenze.

@body-bg: #000; 

body {
background-color: @body-bg; //#000
color: contrast(@body-bg); //#fff
}
//Nel nostro caso potrei generare un contrasto tra il colore di sfondo soft-background per ricavare il colore del testo:
@body-bg: @soft-background;
body {
background-color: @body-bg;
color: contrast(@body-bg);
}

A questo punto, sempre sul file.less, vi basterà assegnare alle classi che contraddistinguono i vari elementi del sito i vostri stili di colore:

.classe1, .button, a {

background-color: @color-base;
}
.classe2 {
background-color: @color- primary;
}
.classe3 {
background-color: @color-secondary;
}
.classe4 {
background-color: @color-tertiary;
}
.button:hover, a {
background-color: @color-hover;
}
.button:focus, a {
background-color: @color-focus;
}
.button:disable, a:disable {
background-color: @color-disable;
}
body {
background-color: @body-bg;
color: contrast(@body-bg);
}

Divertitevi a sostituire il valore del colore di base tutte le volte che volete per generare un’infinità di soluzioni cromatiche sempre armoniose.

I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Organizzare la comunicazione sul web

Breve guida per le piccole imprese

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?