Generatore di Sfumature di Colore

Riferimento

Cosa sono tinte e sfumature?

Nella teoria del colore, una tinta è qualsiasi colore mescolato con il bianco (rendendolo più chiaro), e una sfumatura è qualsiasi colore mescolato con il nero (rendendolo più scuro). Insieme, formano una palette monocromatica — variazioni di una singola tonalità a diversi livelli di luminosità. Questo strumento genera una scala completa dal bianco attraverso il colore base fino al nero, fornendo una rampa di colori pronta all'uso per design e sviluppo.

Casi d'uso per le sfumature di colore

Sistemi di design — genera una scala di 9 o 11 sfumature per un colore brand, seguendo il modello usato da Tailwind CSS (50–950), Material Design e la maggior parte dei sistemi di design moderni. Stati dei componenti UI — usa le tinte più chiare per gli sfondi e gli stati hover, il colore base per le azioni primarie e le sfumature più scure per testo, bordi e stati attivi. Visualizzazione dati — crea scale di colore sequenziali da chiaro a scuro per mappe coropletiche, heatmap e grafici dove l'intensità rappresenta la grandezza. Accessibilità — trova coppie di sfumature che soddisfano i requisiti di rapporto di contrasto WCAG (4,5:1 per testo normale, 3:1 per testo grande).

Come vengono generate le sfumature

Le sfumature vengono generate interpolando linearmente nello spazio RGB dal bianco (#FFFFFF) attraverso il colore base fino al nero (#000000). Per N sfumature, il colore base appare al punto medio della scala. Ogni passo fonde uniformemente, producendo una progressione di luminosità coerente. L'output è disponibile nei formati HEX, RGB e HSL — copia singoli valori o l'intera palette in una volta.

Privacy

Tutta la generazione di colori viene eseguita 100% nel tuo browser. Nessun dato viene inviato a nessun server.