Generi tinte di colore

Questo strumento miscela il colore esadecimale indicato con il bianco a incrementi percentuali uguali e restituisce valori HEX e RGB precisi per ogni tinta. Il calcolo è deterministico: lo stesso colore e lo stesso numero di passaggi producono sempre la medesima palette. Lo utilizzi per preparare stati dell’interfaccia, sfondi, grafici, illustrazioni o token di design che richiedono una progressione chiara dal colore originale al bianco.

Scelga un colore di base e un numero utile di passaggi

Inizi con un colore di base esadecimale di tre o sei cifre, per esempio #36c o #3366cc. La forma breve viene espansa prima del calcolo, quindi entrambi gli esempi rappresentano esattamente lo stesso colore e producono risultati identici. Scelga poi da uno a venti passaggi. Il numero indica quante tinte vengono generate, escludendo il colore di base originale e includendo il bianco puro come risultato finale. Quattro passaggi miscelano quindi la base con il bianco al 25%, 50%, 75% e 100%. Un numero ridotto è adatto a una gerarchia compatta dell’interfaccia, mentre un numero maggiore offre opzioni più precise per visualizzazioni di dati, illustrazioni o esplorazione dei token. Il risultato mostra separatamente la base normalizzata e ogni tinta generata, rendendo evidente quale valore è stato fornito e quali sono stati calcolati. Poiché la progressione termina sempre nel bianco, i campioni adiacenti presentano variazioni uguali nella percentuale di miscela, anche se le differenze visive cambiano in base al colore iniziale e allo schermo.

Comprenda la formula di miscelazione deterministica

Ogni canale rosso, verde e blu viene miscelato separatamente verso 255, il valore del canale per il bianco. Per la tinta numero k in una palette di n passaggi, lo strumento calcola base + (255 − base) × k/n e arrotonda il canale all’intero più vicino. Applicare lo stesso rapporto a tutti e tre i canali mantiene il legame con il colore originale, riducendone progressivamente la distanza dal bianco. La risposta include un indice a partire da uno, la percentuale esatta di miscela con il bianco, il valore HEX normalizzato in minuscolo, i singoli numeri dei canali e una stringa RGB. Si tratta di interpolazione sRGB diretta: non modifica la luminosità HSL, non esegue una miscelazione ottica con correzione gamma e non tenta un’equalizzazione percettiva. La distinzione è importante quando si confronta l’output con programmi grafici che offrono più spazi di miscelazione. La formula è volutamente semplice, documentata e stabile, quindi adatta a script di build, snapshot, generazione automatica di token e sistemi nei quali la ripetibilità conta più della regolazione visiva soggettiva.

Applichi la palette in sicurezza in un sistema di design

Consideri i valori generati come una scala iniziale coerente, quindi li provi nel contesto reale. Le tinte più chiare sono utili per righe selezionate, sfondi delle notifiche, bordi discreti, riempimenti dei grafici, superfici al passaggio del puntatore e aree decorative, ma una palette matematicamente regolare non garantisce automaticamente un contrasto accessibile. Verifichi testi e icone in primo piano su ogni tinta scelta rispetto ai requisiti di contrasto applicabili al Suo prodotto. Conservi il colore di base come token separato e denomini i valori generati secondo il ruolo o la percentuale di miscela, come brand-tint-25 o info-background, invece di affidarsi soltanto alla posizione nell’elenco. I nomi percentuali restano comprensibili se una palette successiva usa un diverso numero di passaggi. Nei flussi automatizzati, salvi direttamente i valori HEX restituiti e conservi insieme il colore di input e il numero di passaggi per rendere riproducibile la palette. Colori non validi, formati esadecimali con alfa, quantità frazionarie e valori fuori intervallo vengono rifiutati, impedendo che modifiche accidentali ai token passino inosservate.