Generatore di Scala di Tinte e Sfumature
Trasforma un colore del brand in una scala di design system 50-900 — dieci tinte e sfumature con codici hex, clicca per copiare.
1.056 visualizzazioni
Clicca su un campione per copiarne il hex
Come Viene Costruita la Scala
La teoria del colore definisce tre modi per alterare sistematicamente una tonalità di base nel modello HSL: tinta (mescolare verso il bianco, aumentando la Luminosità — il colore appare più pallido), sfumatura (mescolare verso il nero, riducendo la Luminosità — il colore appare più scuro e intenso), e tono (mescolare verso il grigio, riducendo la Saturazione con la Luminosità pressoché invariata — il colore appare smorzato o "polveroso"). Questo generatore produce la metà tinta/sfumatura di quel trio: partendo dal tuo colore di base, sposta la Luminosità verso il bianco per i gradini più chiari e verso il nero per quelli più scuri, producendo la scala a dieci gradini 50-900 usata dai design system come Tailwind e Material, con il colore del brand originale ancorato intorno al gradino 500.
Un esempio concreto: partendo da un blu intorno a hsl(217, 91%, 60%), il gradino 50 si posiziona vicino a hsl(217, 91%, 97%) — quasi bianco, resta solo un soffio della tonalità — mentre il gradino 900 si posiziona vicino a hsl(217, 60%, 20%) — molto scuro, con la saturazione compressa man mano che il colore si avvicina al nero. Ogni gradino ottiene sia un codice hex sia una variabile CSS pronta all'uso; cliccare su un campione lo copia.
Il vantaggio pratico di generare una scala completa invece di stimare a occhio qualche sfumatura è la coerenza: ogni gradino deriva dalla stessa tonalità di base con la stessa regola di miscelazione, quindi un bordo di scheda al gradino 200 e uno stato hover al gradino 100 sembrano sempre appartenere alla stessa famiglia di colori, anche mesi dopo, quando un designer diverso o un componente diverso ha bisogno di una nuova sfumatura dello stesso colore del brand.
Cosa Sapere
- Tinta, sfumatura e tono non sono la stessa operazione: questo strumento esegue solo tinta e sfumatura — variazioni di Luminosità. Un vero tono riduce la Saturazione mantenendo la Luminosità pressoché fissa, producendo una versione smorzata del colore anziché una più chiara o più scura; questa manipolazione separata non è ciò che applica questo generatore.
- Dove si usa ogni gradino: 50-100 per sfondi di pagina e riempimenti hover, 200-300 per bordi e divisori, 500-600 per pulsanti e link (il colore del brand stesso), 700-900 per il testo del corpo su sfondi chiari.
- Il contrasto non è automatico: abbinare un gradino ≥700 con uno ≤100 di solito supera il contrasto WCAG AA, ma "di solito" non è "sempre" — verifica la coppia esatta che intendi pubblicare con un controllo del contrasto dedicato.
- Non identico alle palette di Tailwind: i colori integrati di Tailwind sono regolati a mano per ogni tonalità per progettazione, mentre questo generatore applica una formula di miscelazione coerente a qualsiasi input — prevedibile per colori del brand personalizzati, abbastanza vicino per interfacce reali.
- La modalità scura di solito capovolge la scala: uno sfondo che usa il gradino 50 in modalità chiara spesso corrisponde a qualcosa vicino al gradino 900 in modalità scura, e viceversa — generare la scala completa in anticipo significa che entrambi i temi sono già coperti.
Domande Frequenti
Perché il mio colore vivace sembra sbiadito nelle tinte chiare?
Mescolare verso il bianco puro riduce la saturazione — è proprio l'effetto desiderato per gli sfondi. Se vuoi tinte più vivaci, rendi il colore base più saturo prima di generare.
Dove dovrebbe posizionarsi il mio colore del brand sulla scala?
Punta a 500-600. Se il tuo colore è molto chiaro o molto scuro, posizionalo al gradino corrispondente alla sua luminosità e lascia che il generatore riempia entrambe le direzioni.
Sono gli stessi valori che darebbe Tailwind?
Non sono identici — le palette Tailwind sono regolate a mano per ogni tonalità. Questa scala usa una miscelazione coerente, prevedibile per colori del brand personalizzati e abbastanza vicina per progetti reali.
Qual è la differenza tra tinta, sfumatura e tono?
Una tinta aggiunge bianco (aumenta la Luminosità) per schiarire un colore; una sfumatura aggiunge nero (riduce la Luminosità) per scurirlo; un tono aggiunge grigio (riduce la Saturazione, Luminosità pressoché invariata) per smorzarlo senza renderlo più chiaro o più scuro. Questo generatore produce tinte e sfumature — i gradini di schiarimento e scurimento — non toni.
Perché i gradini vicini a 500 mantengono più saturazione mentre 50 e 900 appaiono più piatti?
Mescolare verso il bianco puro o il nero puro comprime intrinsecamente quanta saturazione della tonalità originale può ancora mostrarsi — vicino al bianco resta pochissimo spazio per il colore saturo, e vicino al nero la saturazione si legge come appena distinguibile dal grigio, quindi il punto medio della scala è dove la vivacità originale del colore si conserva meglio. Questo è anche il motivo per cui la modalità scura di solito riutilizza gli stessi dieci valori ma inverte quale estremo funge da sfondo e quale da testo.
Strumenti Simili
Segnala un Problema
Generatore di Scala di Tinte e Sfumature
Commenti
Ancora nessun commento — scrivi il primo!