Generatore di tonalità di un colore

Generatore di tonalità di un colore: a cosa serve

Scegli un colore e lo strumento genera 11 tonalità, dal quasi bianco al quasi nero, calcolate nello spazio colore OKLCH: la tinta resta uguale e la luminosità cambia a ogni gradino. Il colore di base entra nel gradino con la luminosità più simile, senza modifiche.

Tocca una tonalità per copiare l’HEX, oppure copia tutte le variabili CSS o l’oggetto per tailwind.config con il nome che preferisci.

Come si usa

1. Scegli il colore di base dal selettore o digita l’HEX.
2. Dai un nome al colore.
3. Copia una tonalità, le variabili CSS o la scala per Tailwind.

Quando usarlo

• Creare la palette di un sito o di un design system.
• Avere tonalità chiare per gli sfondi e scure per il testo dello stesso colore.
• Impostare il colore del brand in Tailwind.

Domande frequenti

Come vengono calcolate le tonalità?

Nello spazio colore OKLCH, che segue la percezione dell’occhio: lo strumento mantiene la tinta del colore di base, cambia la luminosità di ogni gradino e riduce la saturazione agli estremi perché le tonalità chiare e scure non risultino troppo accese.

Dove si trova il mio colore nella scala?

Il colore di base viene messo nel gradino con la luminosità più simile alla sua, e quel gradino usa esattamente il tuo colore. Risulta evidenziato.

Come lo uso in Tailwind o in CSS?

Copia le variabili CSS (--colore-50 fino a --colore-950) o l’oggetto per tailwind.config. Cambia il nome del colore nel campo nome.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili