Genera una gamma completa di tinte e ombre da un singolo colore — scegli il passo di scurimento/schiarimento e il numero di tonalità, poi copia qualsiasi valore all'istante.

Colore base
Passo
%
Quanto più chiara/scura diventa ogni tonalità, per passo (1–25%).
Numero sfumature
Quante tinte e ombre generare su ciascun lato del colore base.
Gradiente
Sfumature generate

Scegli un colore base, una percentuale di passo e un conteggio — ogni tinta e ombra viene calcolata immediatamente nel tuo browser.


Informazioni su Generatore di sfumature colore

Il Generatore di Sfumature di Colore espande un singolo colore in una gamma completa di tinte e sfumature. Fornisci un colore base e produce tinte progressivamente più chiare da un lato e sfumature progressivamente più scure dall'altro: la classica rampa in stile 50-900 usata nei moderni design system.

Due controlli plasmano il risultato: la percentuale di passo stabilisce quanto ogni sfumatura si schiarisce o scurisce (1–25% per passo), e il conteggio stabilisce quante tinte e sfumature compaiono su ciascun lato della base, fino a dieci. Una striscia di gradiente offre un'anteprima dell'intera rampa a colpo d'occhio.

La generazione avviene istantaneamente nel tuo browser mentre digiti: nulla viene inviato a un server. Copia un singolo valore, l'elenco completo, oppure l'intera rampa come variabili CSS, pronta da inserire in un file di token di design o in una scala colori in stile Tailwind.

Come usare Generatore di sfumature colore

  1. Scegli un colore base con il selettore o digita un valore; clicca su "Colore casuale" per ispirarti.
  2. Imposta la percentuale di passo per controllare quanto ogni sfumatura si schiarisce o scurisce.
  3. Scegli il conteggio delle sfumature per decidere quante tinte e sfumature compaiono su ciascun lato.
  4. Clicca su un campione per copiarlo, oppure usa "Copia tutto" e "Copia variabili CSS" per l'intera rampa.

Domande frequenti

Sì, completamente. Tutte le tinte e sfumature sono calcolate dal vivo nel tuo browser, quindi non c'è alcun costo, alcun account e nessun limite a quante rampe generi.

Una tinta è il tuo colore base mescolato verso il bianco (più chiaro), mentre una sfumatura è la base mescolata verso il nero (più scuro). Il generatore produce entrambe le direzioni contemporaneamente, etichettate "Tinte (più chiare)" e "Sfumature (più scure)" attorno al colore base.

Imposta il conteggio a 4 o 5 per lato in modo da ottenere da nove a undici campioni totali, con la tua base al centro. Un passo di circa 8–10% dà solitamente una spaziatura simile alle scale 50–900 usate dai framework più diffusi.

Passi piccoli (3–6%) danno sottili variazioni per hover e bordi; passi medi (8–12%) sono adatti a rampe complete di design system; passi grandi (15–25%) creano insiemi ad alto contrasto in stile poster. Osserva l'anteprima del gradiente: una buona rampa dovrebbe scurirsi in modo uniforme senza bande.

Sì. "Copia variabili CSS" restituisce l'intera rampa come proprietà personalizzate CSS nominate, e "Copia tutto" ti dà un elenco semplice di valori che puoi incollare ovunque, dalle mappe SCSS agli oggetti tema in JavaScript.


Ricerche popolari
generatore sfumature colore tinte e ombre schiarisci e scurisci colore sfumature di un colore generatore tinte colore genera sfumature colore
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.