Valori di colore legali CSS
Colori CSS
I colori nei CSS possono essere specificati con i seguenti metodi:
- Colori esadecimali
- Colori esadecimali con trasparenza
- Colori RGB
- Colori RGBA
- Colori HSL
- Colori HSLA
- Nomi dei colori predefiniti/cross-browser
- Con la
currentcolor
parola chiave
Colori esadecimali
Un colore esadecimale viene specificato con: #RRGGBB, dove gli interi esadecimali RR (rosso), GG (verde) e BB (blu) specificano i componenti del colore. Tutti i valori devono essere compresi tra 00 e FF.
Ad esempio, il valore #0000ff viene visualizzato come blu, perché il componente blu è impostato sul valore più alto (ff) e gli altri sono impostati su 00.
Esempio
Definisci diversi colori HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Colori esadecimali con trasparenza
Un colore esadecimale viene specificato con: #RRGGBB. Per aggiungere trasparenza, aggiungi due cifre aggiuntive comprese tra 00 e FF.
Esempio
Definisci diversi colori HEX con trasparenza:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Colori RGB
Un valore di colore RGB viene specificato con la funzione rgb() , che ha la seguente sintassi:
rgb(red, green, blue)
Ciascun parametro (rosso, verde e blu) definisce l'intensità del colore e può essere un numero intero compreso tra 0 e 255 o un valore percentuale (da 0% a 100%).
Ad esempio, il valore 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.
Inoltre, i seguenti valori definiscono lo stesso colore: rgb(0,0,255) e rgb(0%,0%,100%).
Esempio
Definisci diversi colori RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Colori RGBA
I valori di colore RGBA sono un'estensione dei valori di colore RGB con un canale alfa, che specifica l'opacità dell'oggetto.
Un colore RGBA viene specificato con la funzione rgba() , che ha la seguente sintassi:
rgba(red, green, blue, alpha)
Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
Esempio
Definisci diversi colori RGB con opacità:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Colori HSL
HSL sta per tonalità, saturazione e luminosità e rappresenta una rappresentazione a coordinate cilindriche dei colori.
Un valore di colore HSL viene specificato con la funzione hsl() , che ha la seguente sintassi:
hsl(hue, saturation, lightness)
La tonalità è un grado sulla ruota dei colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu. La saturazione è un valore percentuale; 0% significa una sfumatura di grigio e 100% è il colore pieno. Anche la leggerezza è una percentuale; 0% è nero, 100% è bianco.
Esempio
Definisci diversi colori HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Colori HSLA
I valori di colore HSLA sono un'estensione dei valori di colore HSL con un canale alfa, che specifica l'opacità dell'oggetto.
Un valore di colore HSLA viene specificato con la funzione hsla() , che ha la seguente sintassi:
hsla(hue, saturation, lightness, alpha)
Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
Esempio
Definisci diversi colori HSL con opacità:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Nomi colore predefiniti/cross-browser
140 nomi di colori sono predefiniti nelle specifiche del colore HTML e CSS.
Ad esempio: blue
, red
, coral
, brown
, ecc:
Esempio
Definisci nomi di colori diversi:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
È possibile trovare un elenco di tutti i nomi predefiniti nella nostra Guida ai nomi dei colori .
La parola chiave color corrente
La currentcolor
parola 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 */
}