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.
734 visualizzazioni
Clicca su un campione per copiarne il hex
Da un colore a un sistema
I design system (Tailwind, Material) non forniscono mai un unico colore del brand — forniscono una scala da 50 (quasi bianco) a 900 (quasi nero), con il colore del brand posizionato intorno a 500. I gradini chiari (tinte) mescolano la base verso il bianco; quelli scuri (sfumature) verso il nero. Questo generatore produce i dieci gradini standard con codici hex e variabili CSS; clicca su un campione per copiarlo.
Come si usa la scala: 50-100 per sfondi e stati hover, 200-300 per i bordi, 500-600 per pulsanti e link, 700-900 per il testo su sfondi chiari. Abbinare gradini della stessa scala mantiene l'interfaccia armoniosa, e i gradini ≥700 su ≤100 superano di solito il contrasto WCAG — verifica la coppia esatta con il nostro controllo del contrasto.
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, aumenta la saturazione del colore base 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.
Strumenti Simili
Segnala un Problema
Generatore di Scala di Tinte e Sfumature