Generatore di sfumature di colore

Tonalità e sfumature

Le tonalità si ottengono mescolando un colore con il bianco, rendendolo progressivamente più chiaro. Le sfumature si ottengono mescolando con il nero, rendendolo più scuro. Insieme formano una scala tonale completa, utile per il design di interfaccia, i gradient, gli stati hover e i sistemi di colori accessibili.

Domande frequenti

Come uso queste sfumature?

Usa le tonalità chiare per sfondi, stati hover e bordi. Usa le sfumature scure per testo, stati attivi e enfasi. Clicca su «Copia tutto come variabili CSS» per ottenere uno snippet CSS pronto all'uso.

Posso copiare i colori singolarmente?

Sì! Clicca su un campione per copiare il suo valore HEX negli appunti.

Tint, Shade e Tone, le Definizioni Formali

Tre termini usati in modo approssimativo; la teoria classica del colore li distingue con precisione:

• Tint = colore base + bianco. Più chiaro e tenue. Il rosa è una tint del rosso; il celeste è una tint del blu.
• Shade = colore base + nero. Più scuro e intenso. Il bordeaux è una shade del rosso; il navy è una shade del blu.
• Tone = colore base + grigio. Meno saturo, più attenuato. Aggiunge sfumatura senza modificare molto la luminosità.

Questo generatore produce tinte (più chiare della base) e ombre (più scure). I toni (che aggiungono grigio invece di bianco o nero) sono utili per palette attenuate e sofisticate (si pensi ai sistemi di colore degli interni degli anni '70) ma raramente necessari per il comune lavoro UI.

Perché i Sistemi di Design Moderni Usano Scale Numeriche

Tailwind CSS ha reso popolare la scala numerica 50-100-200-…-900-950 per colore, con il valore «500» trattato convenzionalmente come base. Material Design usa un parallelo sistema 50-100-…-900; Bootstrap 5 usa 100-…-900; IBM Carbon usa 10 stop per campione. L'idea condivisa: un singolo colore brand è raramente sufficiente, le UI necessitano di varianti coerenti per stati hover, sfondi, bordi, anelli di focus, stati disabilitati, badge ed equivalenti dark-mode. Una scala numerica prevedibile fornisce queste varianti in modo portabile tra i componenti, rifattorizzabile quando il brand si evolve e scopribile da chiunque legga il codebase.

Come Diversi Algoritmi Calcolano la Scala

Ci sono tre modi comuni per calcolare una scala di tinte/ombre, con risultati visivi diversi:

• Miscelazione RGB con bianco / nero. La definizione della teoria artistica. Produce tinte e ombre fedeli ma non tiene conto dell'uniformità percettiva: i gialli si desaturano rapidamente, i blu rimangono ricchi.
• Regolazione della luminosità HSL. Veloce e semplice: si sposta il canale L verso l'alto per le tinte, verso il basso per le ombre. L'approccio più comune negli strumenti più vecchi. Il problema è che la luminosità HSL non è percettivamente uniforme: il giallo al 50% L appare molto più luminoso del blu al 50% L, quindi una palette costruita per passi HSL appare irregolare tra le tonalità.
• Scalatura della luminosità OKLCH o CIELAB. L'approccio moderno, percettivamente uniforme. La L in OKLCH è calibrata in modo che «200 → 300 → 400» sembri lo stesso passo indipendentemente dalla tonalità. Tailwind v4 (rilasciato a gennaio 2025) ha ricostruito tutte le sue palette predefinite attorno a OKLCH esattamente per questo motivo.

Se la tua scala appare mai «piatta» (passi del giallo che svaniscono, passi del blu che si leggono tutti come lo stesso blu scuro) è quasi sempre perché la matematica sottostante è basata su HSL anziché su OKLCH. Il CSS moderno (CSS Color Module Level 4) espone oklch(), lab() e color-mix(in oklch, …) direttamente, rendendo le scale percettivamente uniformi una riga di codice senza alcuno strumento esterno.

Casi d'uso

• Avviare un design system da un singolo colore brand. Scegliere il brand HEX, generare la scala, copiare le variabili CSS, pubblicare.
• Personalizzare una mappa colors di Tailwind. Sostituire il colore brand predefinito con la propria scala di 11 stop.
• Stati hover e focus UI. Un pattern comune: lo sfondo del pulsante usa il 500, l'hover usa il 600, l'attivo usa il 700, l'anello di focus usa il 400 a bassa opacità.
• Sfondi ed elevazione. Gli sfondi delle card usano il 50; i bordi sottili usano il 200; il testo disabilitato usa il 400.
• Equivalenti dark-mode. Molti sistemi generano una scala dark-mode parallela anziché invertire matematicamente quella chiara; i colori che appaiono equilibrati su bianco non sembrano sempre equilibrati su quasi-nero.
• Variazioni di mockup. Confrontare rapidamente tre candidati brand generando la scala per ognuno e inserendoli nello stesso mockup UI.
• Campionari colore per la stampa. Pre-visualizzare una palette di stampa per vedere quanto sottili appaiano effettivamente i passi quando sono adiacenti.

Accessibilità e Contrasto

Una scala generata è utile solo quanto le coppie testo-su-sfondo che produce. I minimi WCAG 2.1 da tenere a mente:

• Testo normale del corpo: 4,5:1 rispetto allo sfondo (Level AA).
• Testo grande o in grassetto (18 pt / 14 pt grassetto e superiori): 3:1 (Level AA).
• Componenti UI e oggetti grafici: 3:1 (Level AA, SC 1.4.11).

Regole affidabili per la maggior parte delle scale ben costruite: la coppia 50 + 900 supera sempre il test per il testo del corpo, la coppia 100 + 800 quasi sempre. La coppia 400 + 500 quasi mai. Testare le coppie specifiche che si intende usare; lo strumento Verificatore contrasto colori calcola i rapporti WCAG per qualsiasi coppia di valori HEX.

Integrare l'Output nel Codebase

Tre modi comuni per utilizzare una scala generata:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Errori Comuni

1. Generare troppe fermate. Le 11 di Tailwind sono un punto di equilibrio. 20 stop sono eccessivi, la maggior parte sono visivamente indistinguibili e non li userai mai.
2. Usare scale basate su HSL per colori gialli / arancioni / fluorescenti. Si sbiadiscono alle fermate chiare e non si scuriscono in modo pulito. Ricorrere alla generazione basata su OKLCH se il colore brand cade nel range di tonalità «difficile».
3. Trattare la scala come definitiva senza verificare il contrasto del testo. Belle relazioni di colore a volte abbinano testo bianco al 400 e non superano il WCAG 4,5:1. Testare ogni accoppiamento che si utilizzerà effettivamente.
4. Invertire la palette chiara per creare una palette dark-mode. Matematicamente allettante, visivamente sbagliato: i colori che sembrano equilibrati sul bianco risultano sgargianti sul quasi-nero. Generare o affinare manualmente una scala dark-mode parallela.
5. Usare il colore base come «500» quando corrisponde percettivamente meglio a un'altra fermata. Se il colore brand è genuinamente scuro, potrebbe essere il 700 della sua scala; lasciare che la relazione percettiva determini quale slot occupa, non la convenzione.
6. Dimenticare la fermata 50. La tinta più chiara è la più utile per sfondi e highlight sottili. Non troncare la scala a 100.

Altre Domande Frequenti

Perché la mia scala appare piatta, tutte le fermate sembrano simili?

Due cause comuni: (1) troppi passi in un range troppo ristretto, provare meno passi, specialmente se il colore è già a luminanza media; (2) scalatura basata su HSL su una tonalità dove HSL è mal calibrato (gialli, arancioni, colori neon). Ricorrere a un generatore di palette basato su OKLCH di solito risolve entrambi.

Come si genera una palette dark-mode da una scala light-mode?

Non invertire semplicemente. L'inversione naïve (capovolgere le fermate chiare e scure) produce palette dark-mode che appaiono sgargianti o si sbiadiscono. La convenzione in Material 3, Radix Colors e le varianti dark di Tailwind è di generare una scala parallela ottimizzata per lo sfondo scuro, di solito con saturazione leggermente ridotta e tonalità spostata per compensare come i colori vengono percepiti sulle superfici scure. La maggior parte dei grandi design system pubblica entrambe le palette affiancate.

È possibile usare i colori generati commercialmente?

Sì. I valori dei colori non sono protetti da copyright; i codici HEX sono fatti sui pixel. Usare la palette generata ovunque: progetti open-source, siti commerciali, sistemi brand, stampa, packaging.

Qual è un buon numero di fermate?

Per il design UI, da 9 a 11 stop per colore è la convenzione consolidata (Tailwind, Bootstrap e Carbon rientrano tutti in quel range). Material Design ne usa 13. Con meno di 7 stop la scala appare sotto-definita; oltre 13 le fermate diventano difficili da distinguere l'una dall'altra.

Viene inviato qualcosa a un server?

No. La matematica del colore viene eseguita nel browser; il codice HEX inserito, le fermate generate e il CSS copiato non toccano mai un server. Utile quando il colore brand non è ancora stato pubblicato o è sotto embargo.

In cosa si differenzia da un generatore di palette di colori?

Un generatore di palette sceglie diversi colori distinti che funzionano insieme (complementari, analoghi, triadici, ecc.), tonalità completamente diverse. Un generatore di sfumature (questo) mantiene una singola tonalità e produce varianti più chiare e più scure di essa. Lavori diversi: i generatori di palette forniscono il brand-primary più gli accenti; i generatori di sfumature forniscono le variazioni di uno di quei colori.

Strumenti correlati