Generatore Tinte e Sfumature — Crea Variazioni di Colore Gratis
Un design system solido ha bisogno di una scala cromatica completa — non solo il colore primario, ma le sue variazioni chiare e scure per hover, focus, disabled state e background. Il nostro generatore crea automaticamente l'intera scala da un singolo colore base.
Tinte vs. Sfumature
Una tinta si crea aggiungendo bianco al colore base (aumentando la luminosità), ottenendo versioni più chiare e pastello. Una sfumatura si crea aggiungendo nero (riducendo la luminosità), ottenendo versioni più scure e profonde. In pratica, i design system usano 9-11 gradazioni dalla più chiara (100) alla più scura (900).
Come Usare il Generatore
- Inserisci il tuo colore brand principale in qualsiasi formato.
- Seleziona il numero di gradazioni (9 o 11 sono i più comuni nei design system).
- Scegli il metodo: mixing con bianco/nero (classico) o interpolazione HSL/OKLCH (più sofisticato).
- Esporta come CSS custom properties Tailwind-compatibili o come array di valori.
Verifica il Contrasto
Dopo aver generato la scala, verifica sempre che le combinazioni che userai per testo/sfondo superino i requisiti WCAG AA. I toni 100-300 in genere funzionano come sfondo con testo scuro (700-900), mentre i toni 600-900 funzionano come sfondo con testo bianco o chiarissimo.