CSS Fogli Di Stile

Colori In Css

Stampa WhatsApp Email

I colori in CSS: nomi, esadecimale, RGB, HSL, trasparenza, currentColor e contrasto, con esempi e campioni visivi.

Prerequisiti: sintassi CSS, selettori di classe e proprietà di testo, sfondi e bordi.

I colori in CSS

Un colore è un valore che possiamo assegnare a diverse proprietà. Per esempio, color cambia il testo, background-color lo sfondo e border-color il bordo. Lo stesso colore può essere descritto con notazioni diverse.

p {
    color: #17365d;
    background-color: #eef5ff;
    border: 2px solid #17365d;
}

Questa pagina approfondisce i colori: non occorre imparare a memoria tutti i codici. È importante capire come interpretarli, scegliere una notazione e verificare il risultato nel browser.

Come leggere i campioni

Ogni riga contiene HTML, CSS completo e un risultato visivo isolato dagli stili del sito. Il fondo giallo dell’area rende visibile la trasparenza. Quando serve, impostiamo anche il colore del testo per mantenerlo leggibile.

1. Nomi dei colori

CSS riconosce una serie di nomi in inglese. Sono comodi per iniziare e per esempi semplici, ma non rappresentano tutte le sfumature possibili.

1. Nomi dei colori: esempi e risultati
Notazione o valoreDescrizioneEsempio HTML e CSSRisultato
Nome del coloreUn nome riconosciuto dal linguaggio identifica un colore preciso. Non puoi inventare nomi come azzurro o blu.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: lightblue;
}

Lo sfondo usa lightblue, equivalente a #add8e6.

Colori di baseEsempi di nomi sono red, blue, green, black e white. Attenzione: green corrisponde a un verde più scuro di lime.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: green;
}

Il testo bianco è su uno sfondo green, equivalente a #008000.

Altre sfumatureNomi come navy, coral e rebeccapurple identificano sfumature definite, non famiglie di colori generiche.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: rebeccapurple;
}

Lo sfondo è viola: rebeccapurple equivale a #663399.

2. Notazione esadecimale

La notazione esadecimale comincia con #. Nella forma a sei cifre, le prime due indicano il rosso, le successive il verde e le ultime il blu.

2. Notazione esadecimale: esempi e risultati
Notazione o valoreDescrizioneEsempio HTML e CSSRisultato
#RRGGBBOgni componente va da 00 a FF, cioè da 0 a 255. Le cifre disponibili sono 0–9 e A–F; maiuscole e minuscole sono equivalenti.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: #17365d;
}

Un blu scuro composto da rosso 23, verde 54 e blu 93.

#RGBLa forma breve espande ciascuna cifra ripetendola. #369 equivale a #336699, non a #030609.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: #369;
}

Il campione usa lo stesso colore di #336699.

#RRGGBBAALe ultime due cifre indicano l’alpha: 00 è completamente trasparente, FF è completamente opaco.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: #17365d80;
}

Il blu scuro ha un’alpha di circa 0,502. Il fondo giallo dell’area si vede attraverso il campione.

#RGBALa forma breve a quattro cifre espande tutte le componenti, inclusa quella di trasparenza.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: #3698;
}

Il valore equivale a #33669988, con un’alpha di circa 0,533.

3. RGB e RGBA

RGB indica le componenti rosso, verde e blu. Nella notazione numerica abituale ciascun canale va da 0 a 255; si possono usare anche percentuali.

3. RGB e RGBA: esempi e risultati
Notazione o valoreDescrizioneEsempio HTML e CSSRisultato
rgb() con virgoleLa sintassi tradizionale separa le tre componenti con virgole. Il colore è opaco se non assegni una componente alpha.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: rgb(23, 54, 93);
}

È lo stesso colore di #17365d.

rgb() con spaziLa sintassi moderna separa le componenti con spazi. Una barra / introduce l’alpha opzionale.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: rgb(23 54 93 / 50%);
}

Lo stesso blu scuro è semitrasparente, con alpha pari al 50%.

rgba()La notazione tradizionale aggiunge una quarta componente per l’alpha. Rgba è un alias di rgb; le due funzioni non rappresentano modelli di colore diversi.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: rgba(23, 54, 93, 0.5);
}

Il risultato equivale a rgb(23 54 93 / 50%). Solo lo sfondo è semitrasparente.

RGB in percentualeZero percento indica assenza della componente; cento percento indica la componente massima.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: rgb(0% 0% 100%);
}

Il campione è blu puro, equivalente a rgb(0, 0, 255) e #0000ff.

4. HSL e HSLA

HSL descrive il colore tramite tonalità, saturazione e luminosità del modello. È utile per creare varianti di una stessa tonalità senza modificare separatamente i tre canali RGB.

4. HSL e HSLA: esempi e risultati
Notazione o valoreDescrizioneEsempio HTML e CSSRisultato
hsl()H è la tonalità, S la saturazione e L la luminosità. La tonalità si misura come angolo; saturazione e luminosità sono percentuali.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: hsl(210, 60%, 80%);
}

Un azzurro chiaro con tonalità 210°, saturazione 60% e luminosità 80%.

Variare la luminositàMantenendo tonalità e saturazione, si possono produrre versioni più chiare o più scure.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: hsl(210 60% 30%);
}

La tonalità rimane 210°, ma la luminosità scende al 30% e il colore è più scuro.

Variare la saturazioneLa saturazione zero produce un grigio. Aumentandola il colore diventa più intenso, a parità di tonalità e luminosità.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: white;
    background-color: hsl(210 0% 50%);
}

Con saturazione zero si ottiene un grigio medio, indipendentemente dalla tonalità.

Alpha con HSLLa sintassi moderna usa / per l’alpha. La forma tradizionale hsla() può usare quattro componenti separate da virgole.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: hsl(210 60% 50% / 40%);
}

Il campione è semitrasparente. Un equivalente tradizionale è hsla(210, 60%, 50%, 0.4).

5. Valori speciali

Transparent e currentColor sono valori che si possono utilizzare nelle proprietà che accettano colori.

5. Valori speciali: esempi e risultati
Notazione o valoreDescrizioneEsempio HTML e CSSRisultato
transparentIndica un colore completamente trasparente. Non rende invisibili testo e bordo: modifica soltanto la proprietà alla quale è assegnato.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    background-color: transparent;
}

Il fondo giallo dell’area è interamente visibile dietro al testo. Il bordo blu resta visibile.

currentColorRappresenta il valore di color dell’elemento. Permette a bordi, ombre o altre parti di seguire il colore del testo.HTML
<div class="area"><div class="campione">Un campione di colore.</div></div>
CSS
.area {
    padding: 15px;
    background-color: #fff0d1;
}

.campione {
    padding: 15px;
    border: 2px solid #17365d;
    color: #17365d;
    background-color: white;
}

.campione {
    color: #8b2252;
    border-color: currentColor;
}

Testo e bordo usano lo stesso colore. Se cambi color, il bordo segue il nuovo valore.

Leggere un codice esadecimale

#17 36 5d
  R  G  B

17 → 1 × 16 + 7  = 23
36 → 3 × 16 + 6  = 54
5d → 5 × 16 + 13 = 93

Quindi #17365d e rgb(23, 54, 93) indicano lo stesso colore. Le lettere rappresentano valori da 10 a 15: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15.

Colori equivalenti in notazioni diverse
NomeEsadecimaleRGB
black#000000rgb(0, 0, 0)
white#ffffffrgb(255, 255, 255)
red#ff0000rgb(255, 0, 0)
lime#00ff00rgb(0, 255, 0)
blue#0000ffrgb(0, 0, 255)

La ruota delle tonalità HSL

AngoloTonalità di riferimentoEsempio
0° o 360°Rossohsl(0 100% 50%)
60°Giallohsl(60 100% 50%)
120°Verdehsl(120 100% 50%)
180°Cianohsl(180 100% 50%)
240°Bluhsl(240 100% 50%)
300°Magentahsl(300 100% 50%)

Con luminosità 0% il risultato è nero e con 100% è bianco. La luminosità HSL non coincide con la luminanza usata per calcolare il contrasto né garantisce uguale luminosità percepita tra tonalità diverse.

6. Trasparenza del colore e opacity

La componente alpha modifica il colore al quale appartiene. Opacity, invece, riguarda l’intero elemento e i suoi contenuti come gruppo.

HTML

<div class="area">
    <div class="sfondo-alpha">Solo lo sfondo è semitrasparente.</div>
    <div class="intero-elemento">Anche testo e bordo sono semitrasparenti.</div>
</div>

CSS

.area {
    padding: 15px;
    background-color: #fff0d1;
}

.sfondo-alpha, .intero-elemento {
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid #17365d;
    color: #17365d;
}

.sfondo-alpha {
    background-color: rgb(23 54 93 / 20%);
}

.intero-elemento {
    background-color: rgb(23 54 93);
    opacity: 0.2;
}

Risultato

Nel primo riquadro testo e bordo mantengono il loro colore pieno. Nel secondo tutto il gruppo è attenuato. Assegnare opacity: 1 a un figlio non annulla l’opacità applicata al gruppo del genitore.

Il colore risultante dipende da ciò che sta sotto: un blu semitrasparente su giallo appare diverso dallo stesso blu su bianco. Per valutarne la leggibilità osserva il risultato composito.

7. Usare il colore nelle diverse proprietà

HTML

<div class="scheda"><h2>Una combinazione di colori</h2><p>Testo, sfondo, bordo e ombra usano valori coordinati.</p></div>

CSS

.scheda {
    margin: 20px;
    padding: 20px;
    color: #17365d;
    background-color: #eef5ff;
    border: 2px solid currentColor;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(23 54 93 / 20%);
}

Risultato

Color viene normalmente ereditato dai discendenti che non hanno un proprio valore applicabile. Background-color non è normalmente ereditato: lo sfondo di un figlio può sembrare uguale a quello del genitore semplicemente perché è trasparente.

Raccogliere la palette con proprietà personalizzate

Per riutilizzare gli stessi colori possiamo assegnare nomi con proprietà personalizzate CSS, dette anche variabili CSS:

:root {
    --colore-testo: #17365d;
    --colore-sfondo: #eef5ff;
    --colore-accento: #b76b00;
}

.scheda {
    color: var(--colore-testo);
    background-color: var(--colore-sfondo);
    border: 2px solid var(--colore-accento);
}

Le proprietà personalizzate cominciano con due trattini. Var() richiama il valore; non è il nome di una proprietà. Possiamo così cambiare un colore condiviso modificando un solo punto della palette.

8. Contrasto e leggibilità

La leggibilità dipende dalla combinazione tra testo e sfondo, non soltanto dal colore del testo. Due colori distinguibili in un campione possono essere troppo simili quando usati per una scritta piccola.

HTML

<div class="leggibile">Testo scuro su sfondo chiaro.</div><div class="poco-leggibile">Questo contrasto è volutamente debole.</div>

CSS

.leggibile, .poco-leggibile {
    margin: 15px;
    padding: 15px;
    background-color: white;
}

.leggibile {
    color: #17365d;
}

.poco-leggibile {
    color: #cccccc;
}

Risultato

Il secondo campione mostra intenzionalmente una combinazione da evitare per il normale testo. Per misurare il contrasto utilizza un verificatore dedicato o gli strumenti del browser: l’occhio da solo non dà un rapporto numerico affidabile.

  • Controlla testo normale, collegamenti e stati di hover e focus.
  • Se lo sfondo è un’immagine o un gradiente, verifica anche le zone meno favorevoli dietro al testo.
  • Non affidare informazioni soltanto al colore: accompagna un errore, una selezione o un esito con testo o altri indicatori.
  • Se cambi lo sfondo, rivaluta anche il colore del testo.

Errori frequenti

  • Il colore non cambia: controlla il selettore, la proprietà e le regole che possono prevalere.
  • Il codice esadecimale è incompleto: le forme comuni supportate hanno 3, 4, 6 oppure 8 cifre dopo #.
  • Il colore breve non corrisponde a quello lungo: #abc equivale a #aabbcc; puoi abbreviare solo quando ogni coppia ripete la stessa cifra.
  • La trasparenza è inattesa: in un codice a otto cifre alpha si trova alla fine, dopo rosso, verde e blu.
  • La sintassi è mescolata: scrivi rgb(23, 54, 93) oppure rgb(23 54 93 / 50%); evita di combinare virgole e barra nello stesso esempio.
  • Una sfumatura HSL non appare ugualmente chiara a un’altra: lo stesso valore L non garantisce lo stesso contrasto o la stessa luminosità percepita.

CSS offre anche modelli come Lab, LCH, OKLab e OKLCH, utili per lavori più avanzati sul colore. Per questa introduzione concentriamoci su nomi, esadecimale, RGB e HSL.