Guide sul colore

Guide brevi e pratiche sul colore per lo schermo: formati, contrasto, palette, tema scuro e CSS. Ogni numero è calcolato, ogni esempio si può copiare.

OKLCH spiegato: il formato colore che finalmente rispecchia la vistaOKLCH descrive un colore in base a quanto appare chiaro, quanto è vivace e quale tonalità ha. A differenza di HSL, lo stesso valore di luminosità appare davvero ugualmente chiaro per ogni tonalità: così palette, stati hover e contrasto accessibile diventano prevedibili.28 settembre 2026Lettura: 3 min
APCA vs WCAG 2: di quale verifica del contrasto fidarsiI rapporti di contrasto WCAG 2 sono ciò che chiede la legge. APCA è un modello più recente che prevede la leggibilità molto meglio, soprattutto con i temi scuri e i colori saturi. Verificarli entrambi ti dà un testo conforme e davvero facile da leggere.28 settembre 2026Lettura: 3 min
Gamut dei colori spiegato: sRGB, Display P3 e colori fuori gamutIl gamut è l’insieme dei colori che uno schermo o uno spazio colore può mostrare. Il web è nato su sRGB, ma oggi quasi tutti gli smartphone e molti portatili mostrano Display P3, con rossi, verdi e arancioni decisamente più vivaci.28 settembre 2026Lettura: 2 min
Formati colore spiegati: HEX, RGB, HSL, OKLCH e tutti gli altriLo stesso colore si può scrivere in una decina di modi. Ecco cosa significa ogni formato, quando usarlo e come appare lo stesso colore in ciascuno.28 settembre 2026Lettura: 2 min
Codici colore HEX spiegati: come funziona #RRGGBBUn codice colore HEX come #1e90ff è formato da tre coppie di cifre esadecimali: la quantità di luce rossa, verde e blu, ciascuna da 00 (niente) a ff (massimo, 255). Aggiungi una quarta coppia per impostare l’opacità: 80 vale circa il 50%, ff significa completamente opaco.28 settembre 2026Lettura: 6 min
Come scegliere la palette di colori per un sito o un’appParti da un solo colore del brand, genera una scala da 50 a 950, aggiungi grigi leggermente tinti e quattro colori semantici, poi verifica contrasto e daltonismo per ogni coppia di testo. Scegli le gradazioni in base alla luminosità OKLCH, non a occhio: su sfondo bianco il testo supera WCAG AA quando la luminosità scende a circa 0,55, qualunque sia la tinta.28 settembre 2026Lettura: 7 min
Colori per la dark mode: come scegliere sfondi, testo e accentiUsa uno sfondo grigio scuro come #121212 invece del nero puro, un testo bianco sporco come #e5e5e5 invece del bianco puro e versioni più chiare e meno sature dei colori del brand. Verifica il testo con APCA oltre che con WCAG 2, perché WCAG 2 sopravvaluta il contrasto sugli sfondi scuri.28 settembre 2026Lettura: 7 min
Armonie di colori: complementari, analoghi, triadici e altroUn’armonia di colori sceglie tonalità ad angoli fissi sulla ruota dei colori: a 180° per i complementari, a 30° per gli analoghi, a 120° per i triadici. Se ruoti la tonalità in OKLCH invece che in HSL, i colori restano ugualmente luminosi e nessuno salta all’occhio per sbaglio.28 settembre 2026Lettura: 6 min
CSS color-mix() e colori relativi: varianti chiare, hover e trasparenzacolor-mix() mescola due colori in uno spazio colore a tua scelta, e la sintassi dei colori relativi ti permette di modificare un singolo canale di un colore esistente, come oklch(from var(--brand) calc(l - 0.1) c h). Entrambi funzionano nel browser, con le variabili CSS, e sostituiscono quasi tutte le funzioni colore di Sass. Mescola in oklab per varianti chiare e hover, in srgb per la trasparenza.28 settembre 2026Lettura: 7 min
Palette per daltonici: come verificare e correggere i tuoi coloriUna palette adatta ai daltonici mantiene distinguibile ogni coppia di colori con protanopia, deuteranopia, tritanopia e in scala di grigi. La soluzione più affidabile non è una tinta speciale ma uno scarto di luminosità: i colori distanti circa 0,2 nella luminosità OKLCH sono rimasti distinti in tutte le simulazioni che abbiamo eseguito. Abbinalo a icone o etichette, perché il solo colore esclude sempre qualcuno.28 settembre 2026Lettura: 7 min
Colori di Tailwind CSS: la palette OKLCH della v4, colori personalizzati e sfumatureTailwind CSS v4 include 26 scale di colore con 11 sfumature ciascuna, da 50 a 950, per un totale di 286 colori definiti in OKLCH come variabili CSS del tipo --color-blue-500. Aggiungi i tuoi con @theme { --color-brand-500: oklch(...) }. Lo stesso numero di sfumatura non significa la stessa luminosità: blue-600 è il blu più chiaro che supera 4,5:1 sul bianco, mentre per il giallo serve il 700.28 settembre 2026Lettura: 7 min