Esercitazione sui colori
I colori vengono visualizzati combinando la luce ROSSA, VERDE e BLU.
Nomi di colore
Con CSS, i colori possono essere impostati utilizzando i nomi dei colori:
Esempio
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Valori di colore CSS
Con CSS, i colori possono essere specificati in diversi modi:
- Con i nomi dei colori
- Come valori RGB
- Come valori esadecimali
- Come valori HSL (CSS3)
- Come valori HWB (CSS4)
- Con la
currentcolorparola chiave
Colori RGB
I valori di colore RGB sono supportati in tutti i browser.
Un valore di colore RGB viene specificato con: rgb( RED , GREEN , BLUE ).
Ogni parametro definisce l'intensità del colore come un numero intero compreso tra 0 e 255.
Ad esempio, rgb(0,0,255) viene visualizzato come blu, perché il parametro blue è impostato sul valore più alto (255) e gli altri sono impostati su 0.
Esempio
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Le sfumature di grigio sono spesso definite utilizzando valori uguali per tutte e 3 le sorgenti luminose:
Esempio
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Colori esadecimali
I valori di colore esadecimali sono supportati anche in tutti i browser.
Un colore esadecimale viene specificato con: # RR GG BB .
RR (rosso), GG (verde) e BB (blu) sono numeri esadecimali compresi tra 00 e FF che specificano l'intensità del colore.
Ad esempio, #0000FF viene visualizzato in blu, perché il componente blu è impostato sul valore più alto (FF) e gli altri sono impostati su 00.
Esempio
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Le sfumature di grigio sono spesso definite utilizzando valori uguali per tutte e 3 le sorgenti luminose:
Esempio
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Maiuscolo o minuscolo?
È possibile utilizzare lettere maiuscole o minuscole per specificare valori esadecimali.
Le minuscole sono più facili da scrivere. Le lettere maiuscole sono più facili da leggere.
Nomi di colore
CSS supporta 140 nomi di colori standard.
Nel prossimo capitolo troverai un elenco alfabetico completo dei nomi dei colori con valori esadecimali:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
La parola chiave color corrente
La currentcolorparola chiave si riferisce al valore della proprietà color di un elemento.
Esempio
Il colore del bordo del seguente elemento <div> sarà blu, perché il colore del testo dell'elemento <div> è blu:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}