Come si specificano i colori in CSS?

Question

Accepted Answer

CSS offre diversi formati di colore. Producono gli stessi colori — la scelta riguarda la leggibilità e se hai bisogno della trasparenza.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Perché è importante

HSL descrive il colore come **H**ue (0–360° sulla ruota dei colori), **S**aturation e **L**ightness — che corrisponde a come gli umani pensano al colore, rendendo le variazioni intuitive:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

Generare un'ombra più chiara/più scura è banale — cambia un numero. Farlo con hex o rgb richiede di ricalcolare tutti i canali.

## Alpha / trasparenza

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

La sintassi `/ alpha` (0 = trasparente, 1 = opaco) è come si creano colori semi-trasparenti, utile per overlay e ombre. (Nota: `opacity` su un elemento attenua l'*intero* elemento, inclusi i figli — i colori alpha attenuano solo quel colore.)

## Formati moderni

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Perché è importante

Conoscere i formati ti permette di scegliere lo strumento giusto: hex/rgb per colori occasionali, **HSL/OKLCH per design system** (facile, variazioni di ombra intuitive), e la sintassi `/ alpha` per la trasparenza.

HSL in particolare rende la costruzione di palette di colori coerenti e tema abili molto più facile.