Generatore sfumature colore
Genera una scala 50-950 da un colore base per superfici UI, bordi, hover e dark mode.
Continua con questo colore
Cosa offre questa pagina
- Genera tinte chiare e shade scure da una tinta.
- Parti dal colore originale segnato e verifica testo e sfondo effettivi prima di assegnare colori a pulsanti o testi.
- Esporta la scala come variabili CSS, Tailwind CSS v3/v4 o JSON.
Ideale per
- Scale Tailwind
- Design token
- Hover state
Come usarlo
Esempio pratico
Verifica insieme il testo e lo sfondo effettivi. Il nome del colore o il numero della tonalità non garantiscono un testo leggibile.
:root {
--brand: #E24B4A; /* original at 400, not necessarily 500 */
--button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }Posso usarlo con il generatore principale?
Sì. Parti da questa pagina, poi apri lo strumento Chromoforge con lo stesso colore base ed esporta la palette.
A cosa serve ogni step di una scala 50-950?
I numeri delle tonalità sono identificatori. I toni chiari spesso funzionano come sfondi e quelli scuri come testi, ma i ruoli dipendono dal colore di partenza e dal contrasto della coppia. Non dare per scontato che 500 sia il colore originale o che ogni 600 funzioni su un pulsante.
Meglio interpolare le tonalita in HSL o in OKLCH?
OKLCH separa luminosità percepita e cromia meglio di HSL. Questo strumento usa obiettivi fissi di luminosità con cromia variabile, conserva il colore originale nel punto più vicino e limita a sRGB i colori fuori gamut. I passi non sono garantiti come visivamente equidistanti.