CSS color
La proprietà CSS color (CSS3): imposta il colore del testo
La proprietà color viene utilizzata per specificare il colore del testo all'interno di un elemento HTML. Supporta diversi formati: esadecimale, RGB(a), HSL(a), nomi di colore CSS e la parola chiave currentColor. È una delle proprietà fondamentali nella definizione dello stile visivo di una pagina web.
Sintassi
Significato dei valori principali:
-
esadecimale: Colore definito con un codice come
#ff6347(rosso). -
RGB: Specifica il colore usando valori rosso, verde e blu. Es.
rgb(255, 99, 71). -
RGBA: Come RGB, ma con trasparenza (alpha). Es.
rgba(255, 99, 71, 0.5). -
HSL: Tonalità, saturazione, luminosità. Es.
hsl(9, 100%, 64%). -
HSLA: Come HSL, ma con trasparenza. Es.
hsla(9, 100%, 64%, 0.5). -
nome colore: Parola chiave CSS come
red,blue,green, ecc. -
currentColor: Usa il colore corrente ereditato (utile per effetti coerenti tra bordi, testo e ombre).
Esempio proprietà: color
Codice Esempio: color
.color-example {
font-size: 20px;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
}.hex { color: #ff6347; background: #fce9e6; }
.rgb { color: rgb(60, 179, 113); background: #e8f9f0; }
.hsl { color: hsl(210, 100%, 50%); background: #e6f0fc; }
.named { color: purple; background: #f3e8fb; }
Contenuto Esempio: color
Esempio di utilizzo di color
In questo esempio, il colore del testo viene cambiato utilizzando diversi valori di colore CSS.
#ff6347rgb(60, 179, 113)hsl(210, 100%, 50%)purpleCSS e HTML per l'esempio con color:
<style>
.color-example {
font-size: 20px;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
}
.hex { color: #ff6347; background: #fce9e6; }
.rgb { color: rgb(60, 179, 113); background: #e8f9f0; }
.hsl { color: hsl(210, 100%, 50%); background: #e6f0fc; }
.named { color: purple; background: #f3e8fb; }
</style>
<div class="color-example hex">Testo con colore esadecimale: <code>#ff6347</code></div>
<div class="color-example rgb">Testo con colore RGB: <code>rgb(60, 179, 113)</code></div>
<div class="color-example hsl">Testo con colore HSL: <code>hsl(210, 100%, 50%)</code></div>
<div class="color-example named">Testo con nome colore: <code>purple</code></div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.192
