Colori: hex, rgb(), hsl(), color-mix() e opacity

Il colore è uno degli elementi visivi più importanti del web design. CSS supporta diversi formati per definire i colori, dai più storici ai più recenti. In questa lezione vedremo come definire i colori per proprietà come color (per il testo), background-color (per lo sfondo) o border-color.

1. Colori nominati (Named Colors)

Il CSS include 140 colori predefiniti a cui puoi fare riferimento usando parole inglesi.

p {
  color: red;
  background-color: lightgoldenrodyellow;
}

Sono comodi per fare test veloci o per il debugging (“vediamo se questo div esiste mettendolo background: red;”), ma nei progetti reali conviene usare una palette più controllata.

2. Esadecimale (HEX)

È il formato storico più comune del web. Consiste in un cancelletto # seguito da 3 o 6 caratteri alfanumerici che rappresentano le quantità di Rosso, Verde e Blu (RGB) in base 16.

.brand-primary {
  color: #ff9800; /* Arancione */
}

.text-dark {
  color: #333; /* Grigio scuro (scorciatoia per #333333) */
}

Pro: Brevissimo da scrivere, standard ovunque, facile da copiare dai tool di design (Figma, Photoshop).
Contro: Impossibile da “leggere” o manipolare a mente. Se hai #ff9800, non hai idea di come renderlo del 10% più scuro solo guardandolo.

3. Funzione rgb() e rgba()

Rappresenta il colore attraverso i tre canali Red, Green, Blue con valori da 0 a 255. Storicamente esisteva rgba() per aggiungere il canale Alpha (trasparenza) da 0.0 a 1.0, ma oggi rgb() supporta la trasparenza direttamente separata da una barra /.

/* Sintassi storica */
.box { background-color: rgba(255, 0, 0, 0.5); } /* Rosso al 50% di opacità */

/* Sintassi moderna (raccomandata) */
.box { background-color: rgb(255 0 0 / 50%); }

4. hsl()

HSL sta per Hue, Saturation, Lightness (tonalità, saturazione, luminosità). È un formato leggibile perché separa la tinta dalla saturazione e dalla luminosità.

1. Hue (Tonalità): Gradi sulla ruota dei colori (0-360). 0=Rosso, 120=Verde, 240=Blu.
2. Saturation: Percentuale di “purezza”. 100% è il colore vivido, 0% è scala di grigi.
3. Lightness: Luminosità. 0% è nero, 100% è bianco, 50% è il colore puro.

/* Un bel blu vivido e la sua versione più chiara e scura */
.btn-blue { background-color: hsl(210 100% 50%); }
.btn-blue-light { background-color: hsl(210 100% 70%); } /* Più luminoso */
.btn-blue-dark { background-color: hsl(210 100% 30%); } /* Più scuro */

/* Con trasparenza al 50% */
.overlay { background-color: hsl(210 100% 50% / 0.5); }

Con HSL, per scurire un bottone al passaggio del mouse (:hover), puoi abbassare l’ultimo valore percentuale.

5. La novità: color-mix()

CSS moderno ha introdotto la funzione color-mix(), che permette di mescolare due colori in proporzioni definite.

/* Mescola il colore del brand con il 20% di bianco (per creare tinte più chiare in automatico) */
.highlight {
  background-color: color-mix(in srgb, var(--brand-color), white 20%);
}

Proprietà opacity

C’è una grande differenza tra un colore con trasparenza (es. rgb(0 0 0 / 50%)) e la proprietà opacity: 0.5.

• background-color: rgb(0 0 0 / 50%); renderà semitrasparente solo lo sfondo. Il testo dentro rimarrà perfettamente leggibile al 100% di opacità.
• opacity: 0.5; renderà semitrasparente l’intero elemento, inclusi i suoi figli e il testo.

Ricorda questa differenza quando crei layout sovrapposti.