Softonic

Generatore di tonalità

Passaggio 1 / 2
Risultati

Una tonalità è il risultato della miscelazione di un colore con il nero, ogni passaggio diventa più scuro. Il generatore prende un colore di base HEX e produce da 3 a 20 passaggi (10 per impostazione predefinita) di tonalità sempre più scure, oltre alle tinte più chiare della stessa base. Utile per scale di palette di sistemi di design (500 → 900), stati di pulsante premuto/attivo, colori del testo che rimangono leggibili e sovrapposizioni di ombra. Ogni passaggio è mostrato come campione con il suo valore hex pronto per essere copiato.

Come funziona la generazione delle tonalità

  1. 1

    Scegli un colore di base

    Usa il selettore colore oppure, nella modalità a passaggi, passa un valore hex nell'URL della pagina. La base si trova tra la gamma delle tinte e quella delle tonalità.

  2. 2

    Scegli il numero di passaggi

    Da 3 a 20 passaggi, 10 per impostazione predefinita. Più passaggi danno una scala più dolce; meno passaggi, salti più netti.

  3. 3

    Mescola con il nero in passaggi uniformi

    Ogni passaggio ridimensiona i canali rosso, verde e blu con lo stesso fattore, il che equivale a mescolare con il nero (o con il bianco per le tinte) in passaggi uniformi. Con 10 passaggi, ciascuno è circa il 9 % più scuro o più chiaro. La tonalità resta identica alla base.

  4. 4

    Leggi la scala

    Ogni campione mostra il suo valore hex. Seleziona il testo per copiarlo in CSS, in un tema Tailwind o in un file di design token.

Ombra, tinta e tono

  • Ombra (shade): colore + nero → più scuro.
  • Tinta (tint): colore + bianco → più chiaro.
  • Tono (tone): colore + grigio → meno saturo.

Questo generatore produce sia tonalità sia tinte dalla stessa base. La coppia tinta + tonalità di solito forma una palette di sistema di design (ad es. da brand-100 a brand-900 dove 500 è la base).

Esempio di scala: #3B82F6 (Tailwind blue-500)

Passo HEX Miscela Ruolo nel sistema di design
0 #3B82F6 Base Marchio primario (ad es. blue-500)
1 #316CCD 17 % nero Stato hover
2 #2756A4 33 % nero Stato premuto/attivo (blue-600)
3 #1D417B 50 % nero blue-700
4 #132B52 67 % nero blue-800
5 #091528 83 % nero blue-900

La tabella mostra una scala a 5 passaggi: ogni passaggio è un sesto del percorso verso il nero.

Come vengono calcolati i passaggi

Lo strumento ridimensiona i canali rosso, verde e blu della base con lo stesso fattore a ogni passaggio. Equivale a mescolare con il nero per la gamma delle tonalità e con il bianco per quella delle tinte, in passaggi uniformi. Con 10 passaggi, ciascuno è circa il 9 % più scuro o più chiaro del precedente.

Poiché tutti i canali vengono ridimensionati allo stesso modo, la tonalità della base resta esatta: una base blu resta blu, una base verde resta verde. Mescolare con il nero riduce anche la saturazione insieme alla luminosità, così i passaggi scuri appaiono naturali invece di brillare. Ridurre solo la luminosità, senza toccare la saturazione, lascia i colori scuri sovrasaturi.

Utilizzare le tonalità nell’interfaccia utente

  • Pulsante: base per lo stato normale, 1-2 passaggi più scuri per hover, 2-3 passaggi più scuri per attivo/premuto.
  • Testo del corpo: 2-3 passaggi più scuri rispetto alla base garantiscono leggibilità su sfondo bianco; più chiaro per il testo secondario.
  • Bordo / divisore: 1-2 passaggi più scuri rispetto allo sfondo, sufficienti per delineare senza sopraffare.
  • Ombre: passo più scuro (o più scuro) con alpha ridotto piuttosto che un nuovo grigio.
  • Visualizzazione dei dati: utilizza le ombre di una singola tinta per una scala sequenziale (magnitudo dei valori), oppure abbina le ombre di due tinte per scale divergenti (positivo e negativo).

Errori comuni

  • Troppi passaggi si schiacciano in bande indistinguibili. Le scale a 10 passaggi funzionano bene perché ogni passaggio è circa il 9 % più scuro; a 20 passaggi le differenze diventano sottili. Per contrasti marcati, preferisci 3-5 passaggi.
  • Qui la deriva di tonalità non è possibile: ogni passaggio ridimensiona tutti i canali allo stesso modo, un rosso resta rosso e un verde resta verde. La deriva di tonalità compare interpolando tra due colori diversi, cosa che questo strumento non fa.
  • Ignorare l’accessibilità: le tonalità che sembrano armoniose possono fallire il contrasto WCAG rispetto allo sfondo. Verifica sempre il contrasto a ogni passaggio.
  • Le scale solo di tonalità sembrano opprimenti su sfondi scuri. Abbinale a una scala di tinte per una modalità scura utilizzabile.

Domande frequenti

Per un sistema di design, 5 passaggi di tonalità + 5 passaggi di tinta (10 totali attorno alla base) è la convenzione comune. Per colori rapidi dello stato dell’interfaccia (hover, attivo), 3 passaggi sono sufficienti.

La miscelazione uniforme usata qui mantiene ogni passaggio su una linea retta tra la base e il nero, quindi i passaggi intermedi restano puliti. Un centro fangoso di solito viene da uno strumento che interpola tra due colori diversi, oppure che riduce la luminosità senza ridurre la saturazione.

I colori scuri hanno già poco spazio per diventare più scuri prima di diventare neri, una base viola scuro produce solo 2-3 passaggi distintivi prima che la scala collassi. Scegli una base di media luminosità per scale più ricche.

Simile nell’intento, ma mescolare con il nero riduce la saturazione insieme alla luminosità, il che di solito appare più naturale. La pura riduzione della luminosità mantiene alta la saturazione e può risultare in colori scuri sovrasaturi.

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.