Generatore di sfumature di colore

Trasforma un colore HEX di base in una scala di sfumature 50-950 in stile Tailwind, miscelando verso il bianco e il nero, ogni livello con campione e HEX copiabile.

Caricamento strumento…

Generatore di sfumature di colore — Inserisci un singolo colore di base in HEX e ottieni all'istante una scala di sfumature a 11 livelli (50, 100, 200 … 900, 950), creata miscelando il tuo colore verso il bianco per i livelli chiari e verso il nero per quelli scuri, con la stessa numerazione usata da Tailwind CSS. Ogni livello mostra il suo campione e il valore HEX con un pulsante di copia con un clic. Tutto viene eseguito interamente nel tuo browser; nessun colore viene mai inviato a un server.

Cos'è Generatore di sfumature di colore?

Il Generatore di sfumature di colore è uno strumento online gratuito che trasforma un colore HEX di base in una scala completa di tinte e sfumature, numerata da 50, 100, 200 fino a 900 e 950, proprio come i token di colore di Tailwind CSS. Costruisce la rampa miscelando linearmente il tuo colore di base verso il bianco per i livelli più chiari (50-400) e verso il nero per i livelli più scuri (600-950), mantenendo il 500 come il colore di base stesso. Designer e sviluppatori front-end lo usano per generare una scala di colore coerente per un design system, impostare proprietà personalizzate CSS o colori del tema Tailwind, e scegliere varianti chiare/scure accessibili di un colore di brand. Ogni livello è mostrato come campione accanto al suo valore HEX con un pulsante di copia con un clic.

Come usare Generatore di sfumature di colore

  1. Digita un colore di base nel campo Colore di base (HEX) in formato #rrggbb o #rgb, oppure fai clic sul grande campione del selettore colore per sceglierlo visivamente.
  2. La scala 50-950 si aggiorna all'istante: le tinte chiare (50-400) sono miscelate verso il bianco, il 500 è il tuo colore di base, e le sfumature scure (600-950) sono miscelate verso il nero.
  3. Leggi ogni riga per vedere, affiancati, il numero del livello (50 … 950), il suo campione di colore e il suo valore HEX.
  4. Fai clic sul pulsante di copia alla fine di una qualsiasi riga per copiare il valore HEX di quel livello negli appunti.
  5. Copia l'HEX del colore di base con il pulsante di copia accanto al campo di inserimento quando ti serve solo il livello 500.

Esempi

Livello più chiaro (50) da una base blu

Input

#4f86f7

Output

#f6f9ff

Livello più scuro (950) dalla stessa base

Input

#4f86f7

Output

#0b1323

Creare colori del tema Tailwind

Inserisci il colore del tuo brand, poi copia i livelli da 50 a 950 uno per uno in un colore del tema Tailwind (ad es. colors.brand) o in proprietà personalizzate CSS, ottenendo una scala dal chiaro allo scuro pronta all'uso che corrisponde alla numerazione delle sfumature predefinita di Tailwind.

Domande frequenti

Quali formati di colore posso inserire?
Il colore di base si inserisce come valore HEX in formato #rrggbb (sei cifre) o nella forma abbreviata #rgb (tre cifre). Se il valore non è un colore HEX valido, compare il messaggio 'Invalid HEX color' e non viene generata alcuna scala. Ogni livello dell'output è mostrato come valore HEX #rrggbb.
Come vengono calcolate le sfumature?
Ogni livello è una miscela lineare tra il tuo colore di base e il bianco puro o il nero puro. I livelli 50-400 sono miscelati verso il bianco in proporzioni decrescenti, il livello 500 è il colore di base invariato, e i livelli 600-950 sono miscelati verso il nero in proporzioni crescenti. La numerazione corrisponde alle scale di colore di Tailwind CSS.
Perché il livello 500 a volte non è esattamente il numero del mio colore di base?
Il livello 500 è sempre esattamente il tuo colore di base. Lo strumento non ricentra il tuo colore su una curva di luminosità percettiva, quindi se il tuo input è molto chiaro o molto scuro, la metà chiara o scura della scala avrà un'ampiezza minore — scegli una base di tono medio per la rampa più uniforme.
Posso scegliere un colore visivamente invece di digitare l'HEX?
Sì. Fai clic sul grande campione con il selettore colore integrato per scegliere un colore; il campo HEX si aggiorna automaticamente e l'intera scala 50-950 viene ricalcolata all'istante mentre lo modifichi.
I miei dati di colore vengono caricati da qualche parte?
No. Tutto viene eseguito interamente nel tuo browser usando calcoli di colore locali — nessun valore di colore viene mai inviato a un server, quindi funziona offline e mantiene privata la tua palette.

Strumenti correlati

Codice in immagine

Trasforma uno snippet di codice in un'elegante immagine PNG con evidenziazione della sintassi nel tuo browser, con tema, sfondo a gradiente o trasparente e spaziatura interna — senza alcun caricamento.

Verificatore di contrasto dei colori

Controlla il rapporto di contrasto WCAG tra un colore HEX di primo piano e uno di sfondo e verifica se supera AA e AAA per testo normale e grande.

Miscelatore di colori

Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.

Simulatore di daltonismo

Carica un'immagine e visualizza l'anteprima di come appare con protanopia, deuteranopia, tritanopia o daltonismo totale, poi scarica il risultato simulato.