Colori

In CSS è possibile colorare un elemento tramite la proprietà color:

Un paragrafo in rosso

    <p style="color:red">Un paragrafo in rosso</p>

Il colore è una proprietà ereditata: se l'elemento padre è di un colore, anche l'elemento figlio lo sarà:

Un paragrafo in blu perché il div lo è

    <div style="color:mediumblue">
        <p>Un paragrafo in blu perch&eacute; il div lo &egrave;</p>
    </div>

I colori si possono esprimere in diversi modi, tra cui: nome, RGB, esadecimale e HSL.

Colori per nome

CSS supporta una palette di colori richiamabili attraverso un nome. Ad esempio, per inserire un verde, il codice è il seguente:

Un paragrafo in verde

    <div>
        <p style="color:green">Un paragrafo in verde</p>
    </div>

I colori inclusi sono 140 e vanno dai colori più comuni: black, white, red, green, blue, cyan, magenta, yellow, purple, violet, fuchsia, grey a quelli più elaborati come aqua, chocolate, coral, darkorchid, gold, indigo, skyblue, turquoise (per un elenco completo visitare la pagina del w3c)

Codifica RGB

La codifica RGB (Red, Green, Blue) specifica per ognuno dei 3 colori, rosso, verde e blu, un valore che va da 0 a 255. La codifica RGB è anche detta additiva, in quanto i colori sono sommati tra di loro: a partire dal valore più basso, (0, 0, 0), che rappresenta un nero, a quello più alto, ovvero (255,255,255) che è il bianco.

Ad esempio, il “green” di prima ha valore 0 per il rosso, 128 per il verde e 0 per il blu.

    <div>
        <p style="color:rgb(0, 128, 0)">Un paragrafo in verde</p>
    </div>

Codifica esadecimale

È comune all'interno di CSS usare una codifica esadecimale per esprimere un colore. Questa codifica assegna ad ogni colore 3 coppie di valori esadecimali: una coppia per il rosso, una per il verde e una per il blu. In altre parole, utilizza lo stesso principio di RGB, ma esprime i numeri nell'intervallo [0,255] con la loro traduzione in esadecimale. Ogni codice esadecimale inizia con il simbolo hash: “#”.

Ad esempio, il verde è rappresentato con: #008000, dove il rosso è 00, il verde 80, ovvero 128 in esadecimale, e il blu 00.

    <div>
        <p style="color:#008000">Un paragrafo in verde</p>
    </div>

Codifica HSL

La codifica HSL è anch'essa una codifica additiva, ma, a differenza di RGB, utilizza i valori di Hue, Saturation e Lightness, ovvero tonalità, saturazione e luminanza. Il primo valore indica la tinta, un valore sulla ruota dei colori, che va da 0 a 360. Il secondo, invece, si riferisce alla purezza, o intensità del colore, dove lo 0% rappresenta il grigio e avvicinandosi verso il 100% le tracce di grigio diminuiscono fino a far vedere il colore nella sua completezza e senza alcun'ombra di grigio. Infine, la luminosità con un valore dello 0% indica una totale assenza di luce e quindi il colore diventa nero indipendentemente dalla tinta, mentre con il 100% si ha il massimo, ovvero il bianco.

Il verde ha un valore di tinta pari a 120, saturazione 100% e luminosità 25% (ragion per cui esce così scuro)

    <div>
        <p style="color:hsl(120, 100%, 25%)">Un paragrafo in verde</p>
    </div>

Color picker

Seleziona il colore:

rgb(0,0,0)

#000000

hsl(0,0%,0%)

Text