Programmazione Web » Css » La rappresentazione dei colori con i Css
La rappresentazione dei colori con i Css
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1208 volte
Oggi impareremo tutti i modi in cui è possibile definire il colore di un elemento tramite i Css, usando la proprietà color.
Sostanzialmente si distinguono tre metodi:
- chiamare il colore per nome
- rappresentare il colore con una terna esadecimale di RGB (Red Green Blue)
- rappresentare il colore con una terna di percentuali RGB
- rappresentare il colore con una terna di valori decimali assoluti di RGB.
Osserviamo tutti i casi.
Se volessimo chiamare il colore per nome, dovremmo adattarci a quelli che sono rappresentati nelle palette VGA standard di Windows; eccoli elencati: black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white.
La loro rappresentazione sarà così effettuata:
div { color: white; /* bianco */ }
Nel caso in cui volessimo esprimere i colori con una terna di numeri in esadecimale ci toccherà indicare le quantità di rosso, di verde e di blu usando una coppia di valori che va da 00 a FF. Il formato da utilizzare è #RRGGBB dove RR rappresenta il rosso (Red), GG il verde (Green) e BB il blu (Blue).
La sintassi da utilizzare è sempre la stessa... cambierà solamente la rappresentazione del valore:
div { color: #FFFFFF; /* bianco */}
La rappresentazione di un colore con una terna di valori percentuali RGB non differisce di molto da quella appena vista; ci basterà solamente indicare i valori di rosso, verde e blu con un numero percentuale (ovviamente compreso tra 0 e 100) nel seguente formato:
div { color: rgb(100%, 100%, 100%); /* bianco */ }
Infine, in ultima spiaggia, si può usare la rappresentazione con una terna di valori decimali assoluti. A differenza della modalità appena vista, basterà indicare i valori di rosso, verde e blu con valori assoluti che variano tra 0 e 255. La sintassi è la seguente:
div { color: rgb(0, 0, 0,); /* nero */ }
Un altro valore che può assumere la proprietà color è inherit, che indica al browser di ereditare le proprietà dell'elemento parente.
Aggiungi questo tutorial ai preferiti
