Proprietà CSS color
La proprietà CSS color definisce il colore del testo e delle decorazioni. Prova gli esempi della proprietà CSS color e osserva i risultati.
La proprietà CSS color imposta il colore in primo piano di un elemento, ovvero il colore del suo contenuto testuale e di qualsiasi decorazione del testo (sottolineature, sopralineature, testo barrato). Non influisce su sfondi, bordi o immagini; per quelli si utilizzano proprietà dedicate come background-color.
Questa pagina illustra la sintassi di color, tutti i formati di valore che è possibile passarle (colori nominali, esadecimale, RGB/RGBA, HSL/HSLA), come color viene ereditata e come mantenere il testo leggibile. Puoi esplorare i valori dei colori web nella sezione Colori HTML, consultare le parole chiave in Nomi dei colori CSS e scegliere una tonalità personalizzata con il nostro strumento Color Picker.
Poiché color viene ereditata, impostarla su un contenitore si propaga a tutto il testo discendente a meno che un elemento figlio non la sovrascriva — quindi spesso è sufficiente dichiararla una sola volta su body. Il valore predefinito è currentcolor, una parola chiave che si risolve al valore di color attualmente in uso, utile per mantenere bordi o riempimenti SVG sincronizzati con il colore del testo.
| Valore iniziale | currentcolor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | Sì. Il colore è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.color = "#1c87c9"; |
Sintassi
Sintassi della proprietà CSS color
color: color | initial | inherit;Esempio della proprietà color:
Esempio della proprietà CSS color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Risultato
Puoi impostare valori esadecimali, RGB, HSL o nomi di colore come valore della proprietà color. Nota: il valore iniziale è currentcolor, il che significa che eredita il colore del testo dal suo elemento padre.
Esempio della proprietà color con un valore di colore nominale:
Esempio della proprietà CSS color con valore di colore nominale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Esempio della proprietà color con un valore esadecimale:
Esempio della proprietà CSS color con valore esadecimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Esempio della proprietà color con un valore RGB:
Esempio della proprietà CSS color con valore RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Esempio della proprietà color con un valore HSL:
Esempio della proprietà CSS color con valore HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Scegliere un formato di colore
Tutti e quattro i formati sopra descritti possono rappresentare lo stesso colore — la scelta riguarda la leggibilità e ciò che si vuole controllare:
- Colori nominali (
blue,tomato,rebeccapurple) sono i più leggibili ma limitati a un elenco fisso di parole chiave. Ideali per prototipi rapidi. - Esadecimale (
#8ebf42) è il formato più comune in produzione. Le tre coppie rappresentano rosso, verde e blu in base 16. Un 4° o 8° carattere aggiunge il canale alpha:#8ebf4280è ~50% opaco. - RGB (
rgb(142, 191, 66)) utilizza gli stessi canali dell'esadecimale ma in decimale, più facile da leggere e da generare tramite codice. - HSL (
hsl(89, 43%, 51%)) descrive la tonalità (0–360°), la saturazione e la luminosità. È il formato più intuitivo quando si vuole modificare un colore a mano — basta aumentare la luminosità per uno stato hover senza toccare la tonalità.
Trasparenza con RGBA e HSLA
Aggiungi un canale alpha con rgba() o hsla() per rendere il testo semi-trasparente. Il canale alpha è un numero da 0 (completamente trasparente) a 1 (completamente opaco):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Per sfumare un intero elemento (testo, bordi, sfondo e figli tutti insieme) invece del solo colore del testo, usa la proprietà opacity.
La scelta del colore del testo è anche una decisione di accessibilità. Il testo e il suo sfondo devono avere un contrasto sufficiente per i lettori con problemi di vista: le WCAG richiedono un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. Il grigio chiaro su bianco può sembrare elegante, ma spesso non supera questo test.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| color | Descrive il colore del testo e delle decorazioni del testo. È possibile utilizzare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla(). | Provalo » |
| initial | Imposta il valore predefinito della proprietà. | Provalo » |
| inherit | Eredita la proprietà dall'elemento padre. |