Softonic

Generatore di Tinte Colorate

Passaggio 1 / 2
Avanti

Una tinta è il risultato della miscelazione di un colore con il bianco, ogni passaggio diventa più chiaro. Il generatore prende il tuo colore di base e produce una scala di tinte progressivamente più chiare, utile per le gamme di palette dei sistemi di design (100 → 400), riempimenti di sfondo sottili, stati di hover su primari scuri e sfondi di badge/alert dove il colore di accento deve essere presente ma discreto.

Come vengono generate le tinte

  1. 1

    Scegli un colore di base

    Usa il selettore colore per scegliere un colore di base. Funziona meglio con basi di media luminosità; basi quasi bianche hanno poco margine per schiarire.

  2. 2

    Scegli il numero di passaggi

    Tra 3 e 20 passaggi, 10 di default. 10 danno una scala completa del sistema di design; meno passaggi bastano per un'interfaccia rapida.

  3. 3

    Mescola con il bianco a percentuali crescenti

    Con 10 passaggi, la prima tinta mescola circa il 9% di bianco e l'ultima circa il 91%. L'interpolazione avviene direttamente nello spazio RGB, quindi la saturazione sfuma man mano che la luminosità sale.

  4. 4

    Leggi i valori hex

    Ogni campione mostra il suo valore hex. Usali nelle tue variabili CSS, nella scala Tailwind o nella mappa Sass.

Esempio di scala di tinte da #3B82F6

La tabella seguente mostra ciò che lo strumento produce con i 10 passaggi predefiniti:

Passaggio Hex Miscela Ruolo tipico
0 #3B82F6 Base Marca primaria (blu-500)
1 #4C8DF6 9,1% bianco Hover chiaro su sfondo scuro
2 #5E98F7 18,2% bianco equivalente blu-400
3 #70A4F8 27,3% bianco
4 #82AFF9 36,4% bianco blu-300
5 #94BAFA 45,5% bianco
6 #A5C6FA 54,5% bianco
7 #B7D1FB 63,6% bianco
8 #C9DCFC 72,7% bianco Sfondo sottile (blu-100/200)
9 #DBE8FD 81,8% bianco
10 #EDF3FE 90,9% bianco blu-50

Tinta + ombra = scala del sistema di design

Combina tinte (più chiare) e ombre (più scure) attorno a un singolo colore di base per formare una scala completa:

  • 50, 100, 200, 300, 400: tinte (dalla più chiara a leggermente più chiara rispetto alla base)
  • 500: base
  • 600, 700, 800, 900: ombre (leggermente più scure rispetto alla base fino alla più scura)

Questo corrisponde a Tailwind, Material, Open Color, Radix UI e la maggior parte dei sistemi di design popolari. Le scale da 10 a 11 passaggi sono la norma.

Dove brillano le tinte nell’interfaccia utente

  • Sfondi di avviso e badge: testo errore-500 su sfondo errore-50 = riconoscimento immediato senza urlo visivo.
  • Stati di hover su sfondi scuri: i pulsanti su una superficie scura si schiariscono verso una tinta più chiara al passaggio del mouse.
  • Scale sequenziali di visualizzazione dati: mappatura valore-colore dove l’alta magnitudine è satura e la bassa magnitudine sfuma verso il bianco.
  • Segnaposto per avatar / categorie di grafico: tinta primaria quando non è presente immagine/dati.
  • Strati di superficie: sfondo della scheda leggermente colorato con il colore del marchio per una presenza di marca sottile.

Perché le tinte più chiare perdono saturazione

Il generatore mescola direttamente nello spazio RGB. Con l’aggiunta di bianco, la saturazione cala più in fretta di quanto salga la luminosità percepita, quindi i passaggi superiori appaiono pallidi o grigiastri. È il comportamento normale della miscelazione RGB:

  • Miscelazione RGB (questo strumento): semplice e prevedibile. La saturazione sfuma in modo costante; i passaggi molto chiari appaiono desaturati.
  • Interpolazione OKLCH o LAB: usata dai software di design per mantenere la cromia più stabile schiarendo. Questo generatore non offre quei modelli; se ti servono tinte dal tono stabile, producile in uno strumento di design compatibile con OKLCH.
  • Schiarire in HSL: alza la luminosità senza mescolare bianco; il risultato può apparire pastello anziché come pittura.

Limite di tinta per un’interfaccia utente utilizzabile

Tinte molto chiare (passaggio 8+) si avvicinano al bianco puro e diventano visivamente indistinguibili su uno sfondo bianco. Utili come:

  • Sottile evidenziazione delle selezioni dietro il testo.
  • Strisce di riga quasi invisibili in tabelle dense.

Ma non buone per pulsanti o etichette dove l’utente deve vedere un colore distinto. Abbina tinte chiare con un elemento più scuro (bordo, testo) per ancorarle.

Domande frequenti

Il generatore mescola direttamente in RGB, e l’interpolazione RGB riduce la saturazione man mano che la luminosità sale, quindi i passaggi superiori scivolano verso il bianco. Interpolare in OKLCH o LAB mantiene invece un accenno visibile del tono di base; usa uno strumento compatibile con OKLCH quando questo conta.

Simile ma non identico. Mescolare con il bianco riduce sia la saturazione che la luminosità in modo proporzionale; la regolazione della luminosità HSL aumenta L in modo indipendente. Le tinte sembrano più naturali (simili alla vernice); la luminosità HSL può spingere verso pastelli irrealistici.

Sì, la modalità scura di solito ha bisogno di una “scala di luminosità” diversa perché gli sfondi sono già scuri. Molti sistemi invertono la scala (il 50 della modalità scura è l’equivalente bianco-su-scuro del 900 della modalità chiara).

Genera una scala di tinte a 5 passaggi (50-500) e una scala di ombre a 5 passaggi (500-900) dallo stesso colore di base. Concatenale per una scala completa del sistema di design da 10 a 11 passaggi.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.