Enciclopedia CSS: color

Template:Programmazione La proprietà color in CSS definisce il colore del testo di un elemento. Viene usata per la formattazione del contenuto testuale e supporta sia nomi di colori semplici sia formati più precisi come HEX, RGB, RGBA, HSL, HSLA e variabili CSS.

Formati per definire il colore

La proprietà color può utilizzare diversi tipi di valori:

Nomi dei colori: nomi predefiniti come red, blue o green.
Codice HEX: notazione esadecimale, ad esempio #ff0000 per il rosso.
RGB: formato rgb(255, 0, 0).
RGBA: simile a RGB, ma con un canale di trasparenza, ad esempio rgba(255, 0, 0, 0.5).
HSL: colore definito tramite tonalità, saturazione e luminosità.
HSLA: formato HSL con trasparenza.
Variabili CSS: valori riutilizzabili, ad esempio var(--colore-principale).

Esempio di utilizzo

L'esempio seguente mostra come la proprietà color imposta il colore del testo con un nome di colore, un valore HEX, rgb() e rgba() con trasparenza.

CSS: proprietà color

HTML

<div class="color-demo">
    <p class="example1">Questo testo è rosso.</p>
    <p class="example2">Questo testo è blu.</p>
    <p class="example3">Questo testo è verde.</p>
    <p class="example4">Questo testo è arancione con trasparenza.</p>
</div>

CSS

.color-demo {
    padding: 18px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: #f7f9fc;
    border: 1px solid #d6e0ea;
}

.color-demo p {
    margin: 0 0 10px;
    font-weight: 600;
}

.example1 {
    color: red;
}

.example2 {
    color: #0000ff;
}

.example3 {
    color: rgb(0, 128, 0);
}

.example4 {
    color: rgba(255, 140, 0, 0.8);
}

Risultato

Compatibilità con i browser

La proprietà color è una proprietà di base di CSS ed è supportata da tutti i browser moderni, incluse le versioni mobili.

Note

Il colore del testo può essere ereditato dall'elemento padre se non viene specificato esplicitamente.
Per effetti più complessi, come i gradienti, si usano normalmente background o background-image.
È importante controllare il contrasto tra testo e sfondo per garantire una buona leggibilità.

Esempio con variabili

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

h1 {
    color: var(--primary-color);
}

p {
    color: var(--secondary-color);
}

Le variabili CSS aiutano a organizzare la palette cromatica di un sito. Se il colore principale deve cambiare, è sufficiente modificare il valore della variabile in un solo punto.

Conclusione

La proprietà color è uno degli strumenti principali per controllare la presentazione del testo in CSS. La compatibilità con diversi formati la rende utile sia per esempi semplici sia per sistemi di design più complessi.

Altri articoli su CSS

Template:Enciclopedia CSS/Navigazione Template:Navigazione/CSS