CodeKitHubChe cos'è questo strumento?
Una rampa di sfumature è una serie di variazioni di un colore a diversi livelli di luminosità, usata nel design delle interfacce per cose come stati di hover, stati disabilitati, bordi e sfondi che devono relazionarsi con un colore del brand senza esserne identici.
Questo strumento converte il tuo colore base in HSL, mantiene fissi tonalità e saturazione, e fa variare la luminosità da circa il 95% (tinta quasi bianca) fino a circa il 10% (sfumatura quasi nera), con il tuo colore originale posizionato nella sua posizione naturale al centro della rampa.
Perché usarlo?
- Genera una rampa in stile design system (come la scala 50/100/200.../900 di Tailwind) a partire da un singolo colore, non solo da una palette predefinita fissa.
- Scegli 7, 9 o 11 passaggi a seconda di quanto dettagliata deve essere la rampa.
- Ogni passaggio mostra il proprio codice HEX esatto e la percentuale di luminosità — clicca per copiare.
- Mantiene tonalità e saturazione costanti lungo tutta la rampa, così ogni sfumatura appare chiaramente collegata al colore base invece di derivare verso il grigio.
- Gratuito, istantaneo e completamente locale.
Come si usa
- Scegli il tuo colore base usando il selettore di colore o digitando un codice HEX.
- Scegli quanti passaggi vuoi nella rampa (7, 9 o 11).
- Leggi il codice HEX e la percentuale di luminosità di ogni sfumatura direttamente sul suo campione.
- Clicca su qualsiasi campione per copiare il suo codice HEX.
Esempio
Input
#3B82F6 (un blu medio), 9 passaggiRisultato
9 sfumature da una tinta quasi bianca (~95% di luminosità) a una sfumatura quasi nera (~10% di luminosità), con #3B82F6 stesso posizionato come passaggio centraleTonalità e saturazione restano fisse in tutti e 9 i passaggi — cambia solo la luminosità — così ogni sfumatura appare chiaramente parte della stessa famiglia di colore.
Domande frequenti
È lo stesso sistema che Tailwind CSS usa per le sue scale di colore?
È la stessa idea di fondo (tonalità/saturazione fisse, luminosità variabile) ma non una replica esatta della palette specifica di Tailwind — le scale 50-900 di Tailwind sono state calibrate a mano da designer, non generate da un'unica formula. Questo strumento ti dà una struttura comparabile generata da qualsiasi colore tu scelga, utile quando il tuo colore base non è uno di quelli predefiniti di Tailwind.
Perché il mio colore appare quasi identico in due passaggi adiacenti?
Questo può succedere vicino agli estremi molto chiari o molto scuri della rampa, dove la luminosità percepita cambia più lentamente di quanto suggerisca la percentuale numerica (una proprietà nota della percezione umana del colore, non specifica di questo strumento). Scegliere meno passaggi (7 invece di 11) distanzia maggiormente i valori di luminosità e riduce i campioni quasi duplicati.
Posso usare queste sfumature direttamente come proprietà personalizzate CSS?
Sì — copia ogni codice HEX e incollalo nelle tue variabili CSS (per esempio --color-brand-100 fino a --color-brand-900), facendo corrispondere la posizione nella rampa alla scala di denominazione usata dal tuo progetto.
Dovrei usare questo strumento o il Miscelatore di Colori?
Se stai creando versioni più chiare e più scure di un singolo colore — stati di hover, sfondi tenui, bordi legati a un colore del brand — usa questo generatore di sfumature. Se invece ti serve il colore tra due colori diversi (diciamo un passaggio tra il tuo blu primario e un arancione secondario), usa il Miscelatore di Colori, che interpola i canali RGB di due colori in qualsiasi proporzione invece di variare la luminosità di un singolo colore.
Cosa succede se il mio colore base è già molto chiaro o molto scuro?
Il colore base si trova sempre nella riga centrale, con le tinte che salgono fino a circa il 95% di luminosità sopra e le sfumature che scendono fino a circa il 10% sotto. Se la tua base è già quasi bianca, la metà tinte della rampa si comprime in un intervallo di luminosità stretto (righe quasi duplicate) mentre la metà sfumature si estende ampiamente — e viceversa per una base molto scura. Per la rampa più uniformemente distribuita, parti da una versione a luminosità media del tuo colore (circa 40-60% di luminosità).
Può generare anche toni (il colore mescolato con il grigio)?
No — questo strumento varia solo la luminosità mantenendo fissa la saturazione, il che produce tinte e sfumature ma non toni. Se vuoi una rampa più smorzata, desatura prima il tuo colore base (scegli una versione più grigiastra nel selettore di colore) e genera la rampa da quello; ogni passaggio erediterà la saturazione più bassa.