Come utilizzare il colore nel CSS!

Benvenuto in questo nuovo articolo in cui vedremo come utilizzare il colore nel CSS.

Innanzitutto iniziamo col dire che il colore non solo dà vita o abbellisce il nostro sito, ma ci aiuta a evocare un umore o ad esprimere emozioni.

Per specificare i colori nel CSS ci sono quattro modi, RGB, HSL, codice esadecimale e nomi dei colori, dove i primi due permettono di gestire l’opacità, RGBA e HSLA dove la “A” indica il canale alpha.

I colori RGB sono composti da determinate da quantità di rosso, verde e blu, ad esempio rgb(75,63,190), dove ogni valore varia da 0 a 255, allo stesso modo dei colori RGB i colori esadecimali rappresentano il rosso, il verde e il blu, ma con il vantaggio di dover digitare meno caratteri, ad esempio #4b3fbe equivale al colore in rgb di poco fa.

Di nomi invece ne esistono all’incirca 140 che sono riconosciuti dai browser (qui l’elenco completo) e possono essere ad esempio Tomato o Coral.

I colori HSL invece si basano su valori tonalità, saturazione e luminosità i quali rispettivamente variano da 0 a 360 e dallo 0 al 100%.

Come anticipato poco fa è possibile intervenire sull’opacità semplicemente cambiando il valore alpha sui colori RGB E HSL,ad rgba(0,0,0,0.5) o hsla(0,100%,100%,0.5), questo valore varia da 1, che equivale ad un colore pieno, a zero, che a sua volta equivale ad una trasparenza piena.

Per poter interagire con essi ci sono due proprietà, color e background-color, le quali possono essere utilizzate per cambiare il colore al testo e cambiare l’intero colore di sfondo di una pagina.

h1{

color: #eaeaea}

body {

color: black}

Bene, questo era il tutto riguardo al colore nel css, spero di averti aiutato nell’ampliare le tue conoscenze nell’ambito informatico, nei CSS in particolare.