Palette di colori

Generatore di scala di colori

Scegli un colore e ottieni subito tutta la sua scala, dalla tonalità più chiara alla più scura. Tocca una tonalità per copiarne l'HEX.

Scala da 50 a 950

Undici tonalità della stessa famiglia di colore, ordinate come in Tailwind. Il tuo colore è segnato sulla tonalità che gli corrisponde.

Tinte chiare (con bianco)

Tocca una tonalità per copiarne l'HEX.

Ombre (con nero)

Toni smorzati (con grigio)

Esporta la scala

Cos'è una scala di colori

È la serie di tonalità che nascono da uno stesso colore: da una versione quasi bianca a una quasi nera. Hanno tutte la stessa tinta di base, per questo stanno bene insieme senza sforzo.

Tinte chiare, ombre e toni smorzati

Una tinta chiara è il colore mescolato con il bianco: più leggero e delicato. Un'ombra è il colore mescolato con il nero: più scuro e profondo. Un tono smorzato è il colore mescolato con il grigio: più sobrio ed elegante.

Come usare una scala nel tuo design

Usa le tonalità chiare (da 50 a 200) per gli sfondi, quelle medie (da 400 a 600) per pulsanti e link e quelle scure (da 700 a 950) per testi e bordi. Con una sola scala hai un'interfaccia ordinata e coerente.

Domande frequenti

Come viene calcolata la scala?

Usiamo lo spazio colore OKLCH, che imita il modo in cui l'occhio percepisce la luminosità. Così i passaggi tra le tonalità sono uniformi, senza salti bruschi.

Cosa significano i numeri da 50 a 950?

È la scala usata da Tailwind CSS e da molti design system: 50 è la tonalità più chiara e 950 la più scura. Il tuo colore si colloca sul numero che gli corrisponde meglio.

Posso usare la scala in Tailwind o in CSS?

Sì. Scrivi un nome, scegli il formato e copia il codice: variabili CSS pronte da incollare o il blocco di colori per la configurazione di Tailwind.

Che differenza c'è tra scala e palette di colori?

Una scala sono tonalità di uno stesso colore. Una palette unisce colori diversi che si abbinano. Molte palette usano una scala per sfondi e testi, più uno o due colori d'accento.

Altre guide e strumenti