Trasforma un singolo colore del brand in un sistema di design completo con scale di tonalità da 50 a 950, token semantici per modalità chiara e scura e abbinamenti di contrasto conformi all'accessibilità. Esporta come proprietà personalizzate CSS, configurazione Tailwind o token di design per un uso immediato in produzione.
Genera scale da 50 a 950 per ogni colore nella tua palette del brand. Ogni tonalità è percettivamente uniforme e testata per passaggi di luminosità coerenti.
Genera automaticamente token di colore semantici che funzionano sia in modalità chiara che scura. I colori di superficie, testo e accento sono mappati per entrambi i temi.
Ogni abbinamento di colore viene verificato rispetto ai rapporti di contrasto WCAG AA. Vedrai quali combinazioni funzionano per testo, UI ed elementi decorativi.
Esporta l'intero sistema di colori come proprietà personalizzate CSS, configurazione Tailwind CSS, mappa SCSS, token JSON o una Guida di Stile condivisibile.
I token semantici associano i colori al loro scopo — come 'background', 'text-primary', 'border', 'error' — anziché a valori specifici. Questo rende facile cambiare tema (chiaro/scuro) o rebrandizzare senza toccare il codice dei componenti.
Utilizziamo lo spazio colore OKLCH per gradazioni di luminosità percettivamente uniformi. Partendo dal tuo colore brand, calcoliamo 10 tonalità che appaiono uniformemente distanziate all'occhio umano, a differenza dei semplici aggiustamenti di luminosità HSL.
Inizia con il tuo colore primario. Il generatore crea un sistema completo attorno ad esso. Puoi regolare i colori secondari e d'accento all'interno del sistema generato.
Sì. La configurazione Tailwind esportata utilizza il formato delle proprietà personalizzate CSS compatibile sia con Tailwind v3 (tailwind.config.js) che con v4 (@theme inline).