Guida CSS interattiva: Colori

Q: Quali formati di colore supporta il CSS?

Colori con nome (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() e color(), più le parole chiave transparent e currentColor. Hex, rgb e hsl coprono quasi tutto il lavoro quotidiano.

Q: Che differenza c'è tra rgb e rgba?

Ormai nessuna. rgba() è un vecchio alias: il CSS attuale permette a rgb() di accettare un valore alfa (rgb(37 99 235 / 50%)), e in tutti i browser attuali le due funzioni accettano gli stessi argomenti.

Q: Come rendo trasparente un colore in CSS?

Aggiungi un canale alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), oppure un hex a 8 cifre come #2563eb80. A differenza di opacity, così sbiadisce solo quel colore, non l'intero elemento.

Q: Cosa significa currentColor?

È il valore della proprietà color dell'elemento. Usarlo per un bordo o per il fill di un SVG li fa seguire automaticamente il colore del testo.

Modi per scrivere un colore in CSS

Ogni proprietà che accetta un colore (color, background-color, border-color, le ombre, il fill degli SVG) accetta gli stessi formati. I primi quattro campioni sono lo stesso blu scritto in quattro modi, e il quinto è un colore con nome che ci si avvicina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Formato	Esempio	Ideale per
Con nome	`tomato`, `rebeccapurple`	Test rapidi e prototipi
Hex	`#2563eb`, `#25e`	Copiare dagli strumenti di design
`rgb()`	`rgb(37 99 235)`	Aggiungere trasparenza, lavorare da valori RGB
`hsl()`	`hsl(221 83% 53%)`	Creare sfumature più chiare e più scure di un colore
`oklch()`	`oklch(55% 0.2 262)`	Palette con luminosità percepita uniforme
Parole chiave	`transparent`, `currentColor`	Vedi le sezioni qui sotto

Colori hex

Un colore hex è # seguito da rosso, verde e blu, ognuno con due cifre esadecimali, da 00 a ff. Tre forme sono scorciatoie o estensioni:

#rgb: ogni cifra viene raddoppiata, quindi #25e equivale a #2255ee.
#rrggbbaa: l'ultima coppia è l'alfa, quindi #2563eb80 è opaco circa al 50%.
#rgba: la forma breve con alfa.

Gli hex non distinguono maiuscole e minuscole: #2563EB e #2563eb sono lo stesso colore.

rgb() e rgba()

rgb() accetta rosso, verde e blu da 0 a 255 (o da 0% a 100%). Un quarto valore facoltativo dopo una barra è l'alfa, da 0 (invisibile) a 1 o da 0% a 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() e rgb() ora sono la stessa funzione: entrambe accettano entrambe le sintassi e un alfa facoltativo. Il codice più vecchio usa rgba() quando serve la trasparenza, e continua a funzionare.

hsl(): il formato più facile da regolare

hsl() descrive un colore come lo pensano le persone: una tonalità sulla ruota dei colori, una saturazione e una luminosità. Mantieni la tonalità e cambia la luminosità per ottenere un'intera scala:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

La prima riga mantiene tonalità 221 e saturazione 83% e cambia solo la luminosità. La seconda riga fa il giro della ruota dei colori con la stessa saturazione e luminosità.

Trasparenza: alfa o opacity

Un canale alfa rende trasparente un solo colore. opacity rende trasparente l'intero elemento, testo e figli compresi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent è una parola chiave per il nero completamente trasparente, rgb(0 0 0 / 0). È lo sfondo predefinito della maggior parte degli elementi.

currentColor

currentColor è uguale al color dell'elemento stesso. Un pulsante in cui bordo, icona e testo lo usano tutti cambia tutto con una sola dichiarazione:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

I bordi usano già currentColor come valore predefinito, ed è per questo che border: 2px solid senza colore prende il colore del testo.

Prova un colore qualsiasi

Scrivi un colore in qualsiasi formato. Il browser lo interpreta e mostra ciò che ha calcolato; un colore non valido lascia il campione invariato.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) e color-mix(in srgb, #2563eb, white 50%).

Funzioni di colore più recenti

oklch(L C H): luminosità, croma e tonalità in uno spazio progettato perché a parità di luminosità i colori sembrino ugualmente chiari. Le palette costruite così hanno meno passaggi intermedi spenti rispetto a quelle in HSL.
color-mix(in srgb, A, B 30%): mescola due colori. Con white o black crea sfumature più chiare e più scure a partire da un unico colore del brand, e funziona con le variabili CSS: color-mix(in srgb, var(--brand), white 80%).

Entrambe funzionano nelle versioni attuali di Chrome, Firefox e Safari. Tieni i colori del brand nelle variabili CSS così i formati che scegli stanno in un unico punto.

Errori comuni

Manca il # in un colore hex. color: 2563eb non è valido e viene ignorato.
Usare opacity per rendere trasparente uno sfondo. Sbiadisce anche il testo. Usa un colore con alfa.
Mescolare i separatori nella sintassi moderna. rgb(37 99, 235) non è valido: usa solo spazi o solo virgole.
Dare per scontato che un colore con nome corrisponda al tuo design. royalblue non è #2563eb. Copia il codice esatto.
Giudicare il contrasto a occhio. Controlla i colori del testo rispetto allo sfondo con uno strumento per il contrasto; 4.5:1 è il minimo per il testo normale.

Domande frequenti

Quali formati di colore supporta il CSS?

Colori con nome (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() e color(), più le parole chiave transparent e currentColor. Hex, rgb e hsl coprono quasi tutto il lavoro quotidiano.

Che differenza c'è tra rgb e rgba?

Ormai nessuna. rgba() è un vecchio alias: il CSS attuale permette a rgb() di accettare un valore alfa (rgb(37 99 235 / 50%)), e in tutti i browser attuali le due funzioni accettano gli stessi argomenti.

Come rendo trasparente un colore in CSS?

Aggiungi un canale alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), oppure un hex a 8 cifre come #2563eb80. A differenza di opacity, così sbiadisce solo quel colore, non l'intero elemento.

Cos'è HSL in CSS?

Tonalità, saturazione, luminosità (hue, saturation, lightness). La tonalità è un angolo sulla ruota dei colori (0 rosso, 120 verde, 240 blu), la saturazione indica quanto è vivace il colore, e la luminosità va da 0% nero a 100% bianco. Rende facili le sfumature più chiare e più scure: cambi solo l'ultimo numero.

Cosa significa currentColor?

È il valore della proprietà color dell'elemento. Usarlo per un bordo o per il fill di un SVG li fa seguire automaticamente il colore del testo.

Concetti correlati