Colori CSS

Colori esadecimali CSS

I colori CSS possono essere rappresentati in notazione esadecimale (o esagonale). Le cifre esadecimali possono rappresentare sedici valori diversi utilizzando 0-9 e a-f.

I colori esadecimali sono composti da 6 caratteri, ogni gruppo di due rappresenta un valore compreso tra 0 e 255 per il rosso, il verde o il blu. Ad esempio #ff000000 è tutto rosso, nessun verde e nessun blu.

Quando entrambi i caratteri di tutti e tre i colori vengono ripetuti, i colori esadecimali possono essere abbreviati a soli tre valori, quindi #0000ff può anche essere rappresentato come #00f.

.rosso {
color: #ff0000;
}

.blu {
color: #00f;
}

Colori CSS HSL

I colori CSS possono essere dichiarati con il sistema di colori HSL usando la sintassi hsl(). Questa sintassi contiene tre valori: tinta (il valore del colore stesso), saturazione (intensità) e luminosità.

I valori di tinta vanno da 0 a 360 mentre i valori di saturazione e luminosità sono rappresentati come percentuali.

.azzurro {
background-color: hsl(200, 70%, 50%);
}

Colori CSS rgb()

I colori CSS possono essere dichiarati con colori RGB usando la sintassi rgb().

rgb() può essere rappresentato con tre valori che rappresentano il rosso, il verde e il blu. Questi valori possono variare da 0 a 255.

.rosso {
color: rgb(255, 0, 0);
}

.verde {
color: rgb(0, 255, 0);
}

CSS e valori alfa per i colori

I valori alfa determinano la trasparenza dei colori nei CSS.

I valori alfa possono essere impostati sia per i colori RGB che HSL usando rgba() e hsla() e fornendo un quarto valore che rappresenta l'alfa.

I valori alfa possono variare tra 0.0 (totalmente trasparente) e 1.0 (totalmente opaco)

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

.primo-piano {
background-color: hsla(34, 100%, 50%, 0.1);
}

.transparente {
color: transparent;
}

Le parole chiave del nome del colore possono essere usate per impostare i valori delle proprietà del colore per gli elementi nei CSS.