CSS Colori Thumbnail

Con questo tutorial andiamo a vedere come usare i colori, partiremo dai nomi, per poi passare ai colori esadecimali, poi ai RGB e infine infine agli HSL. Andremo a vedere come si applicano e come possiamo cambiare i colori nei diversi metodi che abbiamo a disposizione. Faremo una panoramica completa su tutti i codici che vengono usati per i colori. 

Nomi

Questo è il metodo più semplice e diretto per applicare i colori con il CSS. Basta aggiungere le seguenti linee di codice:

element {
  background-color: red;
}

Nell’esempio ho preso come target un elemento con la classe box e gli ho cambiato il colore in rosso. I nomi sono ovviamente in inglese e la lista è assai lunga, clicca questo link per la lista completa dei nomi. Questo metodo è poco usato in quanto si ha una scelta limitata, soprattutto non abbiamo a disposiazione le diverse gradazioni e la trasparenza cha invece abbiamo con i metodi che seguiranno.

Colori RGB

RGB sta per Red, Green e Blue. Facciamo un passo indietro e vediamo perchè sono rosso, verde e blu. Il nostro cervello riesce a distingure i colori grazie ai fotorecettori presenti negli occhi, la luce arriva all’occhio e tramite il nervo ottico va poi al cervello. Nella retina abbiamo tre fotorecettori principali, uno per il rosso, uno per il verde ed uno per il blu; ed il nostro cervello mescolando questi tre colori riesce a crearli tutti quanti.

Sullo stesso concetto si basano i monitor e le televisioni. Gli schermi sono composti da pixel, ogni pixel ha una parte rossa, una verde ed una blu , ce ne sono moltissimi, uno di fianco all’altro, ad esempio uno schermo full HD ne ha 1920 per 1080 che sono più di due milioni. Per mostrare i colori si illuminano le parti necessarie di ogni pixel, ad esempio per fare il giallo si illuminano il rosso ed il verde.

Un Pixel
Come sono disposti i pixel

La sintassi per gli RGB è la seguente:

element {
 background-color: rgb(red, green, blue);
}

All’interno delle parentesi inseriamo i tre valori necessari per creare il colore. Il primo valore per il rosso, il secondo per il verde ed il terzo per il blu. I valori vanno da un minimo  0 ad un massimo di 255. Se voglio ottenere il rosso porto il primo valore a 255 e lascio il secondo ed il terzo a 0. Es:

element {
 background-color: rgb(255,0, 0);
}

Oltre ai tre canali R, G e B ne abbiamo anche un quarto, che è A. A sta per Alfa e grazie a questo abbiamo la possibilità di aggiungere la trasparenza. Il valore è in decimali, va da 0 a 1. Mettendo il canale A con il valore di 0.5 ottengo metà della trasparenza.

element {
 background-color: rgba(255,0, 0, 0.5);
}

Colori Esadecimali

I colori esadecimali svolgono la stessa funzione degli RGB ma sono differenti in struttura e sintassi. Sono un po’ più difficili da comprendere degli RGB. Questa è la sintassi: #rrggbb una sigla composta da sei caratteri alfa numerici preceduti dal cancelletto. Le prime due cifre fanno riferimento al rosso (red), la terza e la quarta al colore verde (green) e le ultime due al blu (blue). Esadecimale perchè ogni carattere può andare da zero fino alla lettera f ( 0 – 1 – 2 – 3 – 4 – 5 – 6 – 7- 8 – 9 – a – b – c – d – e – f ). 0 è il minimo della lucentezza ed  F è il massimo. Se ad esempio voglio ottenere il rosso porto i primi due caratteri al massimo, quindi FF, e lascio i rimanenti a zero. Es:

element {
 background-color: #ff0000;
}

Anche con gli esadecimali ho la possibilità di aggiungere la trasparenza aggiungendo due caratteri alla fine. Funziona sempre sullo stesso principio, FF trasparenza al minimo, quindi non si noterà alcuna trasparenza e 00 al massimo, e allora non si vedrà più il quadrato. Con il valore di 88 ottengo metà trasparenza.

element {
 background-color: #ff000088;
}

Colori HSL

Gli HSL sono probabilmente quelli più intuitivi con cui lavorare, HSL sta per Hue, Saturation e Lightness che tradotto in italiano diventa Tinta, Saturazione e Lucentezza. La sintassi è simile agli RGB, ma il concetto è diverso. Hue, la tinta, ha un valore che va da 0 a 360, dove 0 e 360 ottengo il rosso, con 120 il verde e con 240 il blu.

element {
 background-color: hsl(hue, saturation, lightness);
}

Dopo aver scelto la tinta posso modificare la saturazione e la lucentezza, entrambi i valori vengono messi in percentuale. Se voglio ottenere il rosso principale, quello che abbiamo visto anche con i gli altri metodi, utilizzo il seguente codice:

element {
 background-color: hsl(0, 100%, 50%);
}

Per quel che riguarda la saturazione, più mi abbasso con la percentuale e più il colore sarà meno saturo, se metto 0 ottengo il grigio, praticamente un non colore.

Invece per la lucentezza se vado verso il 100% sarà sempre più chiaro, fino ad essere bianco se metto 100%. Viceversa se vado verso lo 0% sarà sempre più scuro fino ad essere nero se metto 0%.

Anche con gli HSL posso aggiungere il canale Alfa per la trasparenza e funziona in decimali come per gli RGB; se metto 0.5 ottengo metà trasparenza.

element {
 background-color: hsla(0, 100%, 50%, 0.5);
}

Guarda il video:

Articoli simili