Color Token Generator

Perché ogni sistema di design ha bisogno di una scala colori

Una scala colori è la spina dorsale di un linguaggio visivo coerente. Senza di essa, designer e sviluppatori prendono decisioni improvvisate — 'un blu leggermente più scuro per l'hover' o 'una versione molto chiara per lo sfondo della card' — che producono decine di valori esadecimali quasi identici senza alcuna relazione sistematica. Nel tempo si crea una codebase piena di valori colore una tantum impossibili da aggiornare in una sola volta.

Una scala a 11 livelli ben costruita risolve il problema: i livelli chiari (50–200) servono per superfici e sfondi sfumati, i livelli medi (300–600) portano elementi interattivi come pulsanti, link e anelli di focus, e i livelli scuri (700–950) gestiscono testo e bordi ad alto contrasto. Ogni decisione si ricollega alla scala, e cambiare il colore del brand significa aggiornare un valore base invece di cercare tra centinaia di codici hex in un foglio di stile.

La convenzione della scala colori di Tailwind

Tailwind CSS ha popolarizzato la convenzione di denominazione numerica a 11 livelli — 50, 100, 200 fino a 900, 950 — che è stata adottata come standard da Radix UI, shadcn/ui, Material Design 3 e dalla maggior parte degli ecosistemi di librerie di componenti moderni. Il vantaggio è la prevedibilità: uno sviluppatore che ha usato uno qualsiasi di questi sistemi sa immediatamente che un token di livello 500 è il colore base di metà gamma, un token di livello 100 è una tinta molto chiara e un token di livello 800 è un'ombra scura per l'uso su sfondi chiari.

Questo strumento genera scale visivamente compatibili con le palette integrate di Tailwind (blu, rosso, verde, ecc.), rendendo semplice aggiungere un colore brand personalizzato che si integri naturalmente accanto ai valori predefiniti di Tailwind. Il formato di esportazione Tailwind corrisponde esattamente a ciò che theme.extend.colors si aspetta in tailwind.config.js, e l'esportazione delle Variabili CSS è formattata per il blocco @theme di Tailwind v4.

Comprendere i rapporti di contrasto WCAG

Il rapporto di contrasto tra un colore del testo e il suo sfondo viene calcolato dalla loro luminanza relativa — una misura di quanto appare luminoso ogni colore all'occhio umano. La formula WCAG è (L1 + 0.05) / (L2 + 0.05), dove L1 è la luminanza del colore più chiaro e L2 quella del più scuro. Il risultato va da 1:1 (colori identici, nessun contrasto) a 21:1 (testo nero su sfondo bianco, contrasto massimo).

WCAG AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande (18pt+). WCAG AAA richiede 7:1 per il testo normale. In questo strumento, i rapporti di contrasto del testo bianco e nero per ogni campione vengono calcolati e mostrati come badge W✓ e B✓. I livelli di scala media (400–600) di solito non superano entrambe le soglie — sono progettati per riempimenti decorativi e accenti interattivi, non per sfondi di testo.

Spazi colore: HSL, OKLCH e perché è importante

I generatori di palette tradizionali lavorano in HSL — Tonalità, Saturazione, Luminosità. L'HSL è intuitivo e ben supportato, ma percettivamente non uniforme: lo stesso passo numerico di luminosità appare drammaticamente diverso a seconda della tonalità. Un passo dal 50% al 60% di luminosità sembra un grande salto per il blu ma un piccolo passo per il giallo, perché l'occhio umano percepisce i colori diversamente lungo lo spettro.

OKLCH è uno spazio colore percettivamente uniforme in cui pari passi numerici di luminosità sembrano uguali all'occhio umano indipendentemente dalla tonalità. Tailwind CSS v4 è passato a OKLCH internamente per questa ragione. Per un generatore di palette, OKLCH produce scale in cui ogni livello sembra genuinamente un passo uniforme verso il più chiaro o il più scuro — particolarmente prezioso per il design di palette accessibili.

Esportare in CSS, Tailwind, SCSS, JSON e DTCG

L'esportazione Variabili CSS usa il pattern di denominazione --color-N all'interno di :root { }. L'esportazione Tailwind va direttamente in theme.extend.colors in tailwind.config.js — rinomina 'color' nel nome del tuo token (es. 'primary' o 'brand'). L'esportazione SCSS usa la sintassi variabile $color-N compatibile con Sass e Less. L'esportazione JSON segue il formato token DTCG W3C ed è compatibile con Style Dictionary, Theo, Supernova e qualsiasi strumento nell'ecosistema moderno di pipeline dei token.

Tutti e quattro i formati producono gli stessi 11 valori hex, quindi passare da uno all'altro dopo la generazione non richiede modifiche. Clicca su qualsiasi campione individuale per copiare il suo valore hex direttamente negli appunti — utile quando hai bisogno di una sfumatura specifica per un file di design Figma, uno stile inline occasionale o un riferimento colore rapido senza eseguire un'esportazione completa.

Confronto con Coolors, Adobe Color e Material Design Color Tool

Coolors.co è uno strumento di scoperta di palette progettato per generare combinazioni casuali di 5 colori. È eccellente per l'ispirazione ma non produce scale di token, non genera configurazioni Tailwind e non mostra badge di contrasto WCAG per campione.

Adobe Color offre la generazione di armonie cromatiche da una ruota dei colori e alcune opzioni di esportazione, ma richiede un account Adobe per salvare ed esportare le palette. Non genera una scala colori compatibile con Tailwind o JSON DTCG, e manca della visualizzazione del rapporto di contrasto per livello.

Il Material Design Color Tool di Google produce una scala a 10 livelli (senza il livello 50) ed è progettato specificamente per la tematizzazione Material Design — l'output non si mappa in modo pulito su Tailwind o altri ecosistemi.

Questo strumento genera una scala completa a 11 livelli, mostra i badge WCAG W✓/B✓ su ogni campione, esporta in quattro formati e non richiede login. Tutto funziona nel tuo browser — nessun dato colore viene caricato su un server.