Generatore di tinte, toni e ombre

Tinte, toni e ombre — qual è la differenza?

Tutti e tre sono derivazioni di una tinta base, ma la spingono in direzioni diverse. Una tinta è il colore base mescolato con bianco, producendo una versione più chiara e morbida — pensa al pastello. Un'ombra è la base mescolata con nero, producendo una versione più scura e drammatica. Un tono è la base mescolata con grigio, abbassando sia la saturazione sia l'intensità senza impegnarsi né al più chiaro né al più scuro — utile per palette tenui e sofisticate. Insieme formano un vocabolario completo per costruire scale monocromatiche.

Come usare questo generatore

Scegli un colore base o incolla un codice hex. La pagina genera dieci tinte spaziate uniformemente (file sempre più chiare), dieci toni (file sempre più tenui) e dieci ombre (file sempre più scure). La percentuale su ogni campione è la quantità di mescolanza con il colore target (bianco, grigio o nero). Clicca un campione per copiarne l'hex — pratico per compilare una tabella di design token o una configurazione Tailwind.

Costruire scale che funzionano in produzione

Non spedire tutti e 30 i campioni — i designer raramente hanno bisogno di quella granularità. Scegli 5-7 passi ben spaziati ed etichettali come una scala tipografica (50, 100, 200... 900) così gli ingegneri possono prevedere dove si collocherà ogni nuova posizione di colore. Abbina tinte e ombre per sfondi ed enfasi; ricorri ai toni quando hai bisogno di accenti UI tenui che non litighino con il colore del marchio. Verifica sempre il contrasto rispetto alla superficie su cui li userai — le tinte più chiare spesso falliscono il WCAG su superfici bianche, e le ombre più scure falliscono su quelle nere.

Come viene calcolata ogni variante

Ogni output è un'interpolazione lineare nello spazio sRGB: tint(c, t) = mix(c, white, t), shade(c, t) = mix(c, black, t), tone(c, t) = mix(c, gray, t), dove mix(a, b, t) = a·(1−t) + b·t applicato per canale. Scegliamo undici valori di t spaziati uniformemente da 1/11 a 10/11, lasciando fuori dalla striscia il colore base stesso — la sua posizione è implicita tra la tinta più forte e l'ombra più forte.

Quando usare quale

Le tinte sono la scelta giusta per sfondi al passaggio del mouse, callout morbidi e illustrazioni pastello — riscaldano un layout e segnalano calma. Le ombre appartengono agli stati attivi, alle intestazioni profonde e alle aree di enfasi — proiettano gravità e peso. I toni sono l'arma segreta per il design editoriale, i siti museali e qualsiasi palette che debba sembrare misurata anziché vivace; collegano marchio e neutro senza appiattire né l'uno né l'altro.

Domande frequenti

Perché le mie tinte sembrano gessose?

Mescolare nello spazio sRGB (cosa che fanno la maggior parte degli strumenti, incluso questo) è computazionalmente semplice ma otticamente imperfetto — la media in linea retta in uno spazio non lineare tende a smorzare le tinte sature. Per palette curate dove la gessosità è inaccettabile, mescola in uno spazio percettivamente uniforme come OKLCH; aspettati un piccolo aumento di saturazione sulle tinte intermedie.

Dovrei usare la luminosità HSL invece di mescolare con bianco/nero?

La luminosità HSL è una scorciatoia in una riga ma è percettivamente irregolare — alzare L da 50 a 60 cambia un giallo molto più di un blu. Mescolare con bianco/nero dà passi visivi più prevedibili per le scale monocromatiche, ed è per questo che lo usiamo come default. Se hai bisogno di passi uniformi di luminosità percepita su tutto lo spettro, passa a OKLCH.

Le percentuali corrispondono ai token Material/Tailwind come 50, 100, 900?

Non esattamente. La maggior parte dei design system di produzione regola manualmente i valori dei passi per coerenza percettiva, quindi una rampa 50→900 non è una scala matematica pura. Usa questo generatore come punto di partenza: scegli i passi che corrispondono al tuo marchio, poi correggi visivamente prima di fissare i token.

Posso copiare tutti e 30 i codici hex insieme?

Attualmente ogni campione è copiabile individualmente. Per l'esportazione in blocco, fai uno screenshot della striscia — i codici hex sono incorporati nelle etichette visibili — oppure apri DevTools → copia l'HTML renderizzato, che conserva tutti i metadati dei campioni.

Lo strumento riconosce colori con nome come "royalblue"?

Il selettore e l'input hex accettano solo codici hex. Per partire da un colore con nome, cercane l'hex nel nostro strumento Colori con nome, poi incollalo qui.

I colori vengono generati nel mio browser o su un server?

Interamente nel tuo browser. Apri DevTools → Rete e trascina il selettore — non vedrai partire alcuna richiesta. Audit del marchio e palette non rilasciate sono al sicuro qui.

Generatore di tinte, toni e ombre