Generatore di tinte e sfumature
21 colori
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Dettagli tecnici
Come funziona il Generatore di tinte e sfumature
Cosa fa lo strumento
Il Generatore di tinte e sfumature crea tinte più chiare (mescolate con il bianco) e sfumature più scure (mescolate con il nero) a partire da qualsiasi colore di base. Inserisci un colore e scegli il numero di passaggi per generare un gradiente uniforme di variazioni. Ogni passaggio mostra i valori HEX, RGB e la percentuale di miscelazione, rendendo semplice costruire scale cromatiche coerenti per UI design, branding e visualizzazione dei dati.
Casi d’uso comuni per sviluppatori
Gli sviluppatori usano generatori di tinte e sfumature quando costruiscono scale di design token (ad es., blue-100 fino a blue-900), creano stati hover e active per elementi interattivi, progettano gerarchie di colore accessibili e producono colori di sfondo e superficie coerenti per temi chiari e scuri. Lo strumento è essenziale per creare palette di colori personalizzate per Tailwind CSS o sistemi di colore in stile Material Design.
Come funzionano tinte e sfumature
Una tinta si crea mescolando un colore con il bianco, aumentandone la luminosità. Una sfumatura si crea mescolando con il nero, diminuendo la luminosità. La formula per le tinte è: new = base + (255 - base) × factor. Per le sfumature: new = base × (1 - factor). I passaggi sono distribuiti uniformemente tra il colore di base e il bianco puro (tinte) o il nero puro (sfumature), producendo un gradiente lineare di valori di colore.
Errori comuni e casi limite
La miscelazione lineare con bianco o nero può produrre tinte sbiadite o sfumature torbide per alcune tonalità. I gialli possono apparire verdastri quando vengono scuriti e i blu possono perdere vivacità quando vengono schiariti. Per scale percettivamente uniformi, valuta l’uso degli spazi colore OKLCH o CIELAB. Verifica sempre che le tinte più chiare e le sfumature più scure mantengano un contrasto sufficiente rispetto agli sfondi previsti.
Quando usare questo strumento rispetto al codice
Usa questo strumento nel browser per un’esplorazione rapida e per generare scale cromatiche durante il lavoro di design. Per i design system in produzione, genera tinte e sfumature in modo programmatico usando librerie di colore come chroma.js o culori che supportano spazi colore percettivamente uniformi e possono produrre design token in qualsiasi formato.