Tinte e ombre di un colore
Scegli un colore di partenza: ottieni subito 10 variazioni più chiare verso il bianco (tints) e 10 più scure verso il nero (shades). Clicca un campione per copiare l'hex.
☀️ Tinte — verso il bianco
🌑 Ombre — verso il nero
A cosa servono tinte e ombre in un design system
Un colore da solo non basta per costruire un'interfaccia: servono le sue variazioni. Le tinte (colore mescolato al bianco) si usano per sfondi, badge, stati hover e superfici delicate; le ombre (colore mescolato al nero) per testi, bordi, icone e stati attivi con contrasto sufficiente. È lo stesso principio delle scale numerate da 50 a 900 di Tailwind CSS o di Material Design: con una scala coerente eviti di inventare grigi e sfumature a caso in ogni schermata.
Come vengono calcolate le variazioni
Ogni gradino mescola il colore di partenza con bianco o nero in percentuali crescenti: il primo campione contiene circa il 9% di bianco (o di nero), l'ultimo circa il 91%. La miscela avviene sui canali RGB, il metodo più diffuso nei tool per designer: il risultato è una scala regolare, con hex già pronti da incollare nel CSS, in Figma o nelle variabili del tuo design system.