Generatore Tinte e Ombre

Genera una scala completa di tinte e ombre da qualsiasi colore base. 9 tinte, 9 ombre — copia i codici HEX singoli o esporta tutto come variabili CSS.

9 tinte · 9 ombreEsporta variabili CSSCopia in 1 click

① Inserisci un codice HEX o scegli un colore ② Genera 9 tinte e 9 sfumature ③ Clicca su un campione per copiarlo

Colore base

Preset brand:

Come funziona

Inserisci qualsiasi colore HEX e lo strumento genera 9 tinte (più chiare) e 9 ombre (più scure) mescolando matematicamente il colore base con bianco e nero. Clicca su qualsiasi swatch per copiarne il codice HEX.

Tinte

Una tinta si crea mescolando il colore base con il bianco. La percentuale indica quanto bianco viene aggiunto — 90% è quasi bianco, 10% è appena più chiaro dell'originale.

Ombre

Un'ombra si crea mescolando il colore base con il nero. La percentuale indica quanta oscurità viene aggiunta — 90% è quasi nero, 10% è appena più scuro dell'originale.

Tinte e ombre — come funziona la scala colori

Tinte: canale = base + (255 − base) × p. Ombre: canale = base × (1 − p). Interpolazione RGB lineare che genera una rampa di 9 tinte / 9 ombre — 19 step totali — compatibile con la scala Tailwind CSS 100–900 e i token Material Design. Esporta tutti i 19 valori come CSS custom properties in un blocco :root {}: da --color-tint-10 a --color-shade-90 e --color-base. Ideale per token di design system. Verifica sempre il contrasto — WCAG AA richiede 4,5:1.

Domande frequenti

Una tinta è un colore mescolato con il bianco, che lo rende più chiaro. Un'ombra è un colore mescolato con il nero, che lo rende più scuro. Entrambi mantengono la tonalità originale: le tinte appaiono pastello, le ombre più profonde. Un "tono" (mescolato con il grigio) è un terzo concetto non trattato qui.

Lo strumento usa l'interpolazione RGB lineare. Per una tinta al p%: canale = base + (255 − base) × p. Per un'ombra al p%: canale = base × (1 − p). Questo dà una progressione matematicamente uniforme dal colore base verso il bianco (tinte) o il nero (ombre).

Perché una tinta al 90% significa mescolare il 90% di bianco con il 10% del colore base. Il colore risultante è dominato dal bianco. Per schiarire in modo sottile, usa tinte al 10–30%.

Design system come Tailwind CSS e Material Design usano una scala a 9 livelli dove 100 è la tinta più chiara e 900 l'ombra più scura, con 500 (o 600) che rappresenta tipicamente il colore base. Questo strumento genera 9 livelli in ogni direzione con spaziatura matematicamente equivalente.

Le tinte e le ombre da sole non garantiscono l'accessibilità. È necessario verificare il rapporto di contrasto (minimo 4,5:1 per testo normale sotto WCAG AA). Le ombre più scure su sfondi chiari o le tinte più chiare su sfondi scuri generalmente migliorano il contrasto. Usa il tool Contrasto per verificare.

Clicca "Esporta CSS" per copiare tutti i 19 colori come custom properties CSS (da --color-tint-90 a --color-shade-90 e --color-base). Incollale nel blocco :root e usale ovunque con var(--color-tint-30) ecc.

Sì — lo strumento funziona con qualsiasi codice HEX a 6 cifre valido (da #000000 a #FFFFFF), coprendo tutti gli oltre 16 milioni di colori nel modello RGB a 8 bit. Tutti i calcoli avvengono istantaneamente nel browser senza inviare dati a server esterni.

Tinte e ombre — come funziona la scala colori

Domande frequenti

Esplora il Nostro Network