Generatore di Tonalità di Colore
Crea una palette completa con sfumature, tonalità e punteggi di contrasto WCAG
Generatore di Tonalità di Colore
Esempi di Utilizzo
Le sfumature più chiare (50-200) funzionano meglio per sfondi e luci sottili.
Le tonalità medie (400-600) sono ideali per pulsanti, link ed elementi primari.
Le tonalità più scure (700-900) sono perfette per titoli e testo ad alto contrasto.
Controlla sempre il contrasto WCAG — AA richiede 4,5:1 per il testo normale.
Contrasto
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA Grande: 3:1 (Large text)
- AAA: 7:1 (Normal text)
Caratteristiche
Palette Completa 50-900
Genera una palette Tailwind completa da qualsiasi colore di base
Contrasto WCAG
Ogni tonalità mostra i punteggi di contrasto su sfondi bianchi e neri
Formati di Esportazione Multipli
Copia come variabili CSS, SCSS, config Tailwind o JSON
Privato e Offline
Funziona interamente nel tuo browser, nessun dato inviato al server
Come Usare
Scegli un Colore di Base
Seleziona un colore con il selettore o inserisci un valore HEX, RGB o HSL.
Rivedi la Palette
Osserva le tonalità generate con gli indicatori di contrasto WCAG per l'accessibilità.
Esporta o Copia
Copia singoli colori o esporta l'intera palette come CSS, SCSS, Tailwind o JSON.
Domande Frequenti
Cos'è un Generatore di Tonalità di Colore?
Un Generatore di Tonalità di Colore crea una gamma completa di sfumature e tonalità da un singolo colore di base. Invece di indovinare quale variazione più chiara o più scura usare, ottieni una palette coerente che funziona su pulsanti, sfondi, bordi e testo. Questo strumento produce una scala a 10 step da 50 (più chiaro) a 900 (più scuro), corrispondente al popolare sistema di colori Tailwind CSS.
Come Funziona
Il generatore converte il tuo colore di base in HSL e regola il valore di luminosità per creare 10 step distribuiti uniformemente. Ogni tonalità viene poi valutata su sfondi bianchi e neri usando la formula di contrasto WCAG 2.1, così sai immediatamente quali colori sono accessibili per il testo. Tutto gira nel tuo browser senza comunicazioni con il server.
Casi d'Uso Comuni
I designer usano i generatori di tonalità per costruire palette di marca, creare token di design e mantenere la coerenza visiva in un prodotto. Gli sviluppatori li adorano per generare voci di configurazione Tailwind o proprietà CSS personalizzate. Sono anche essenziali per gli audit di accessibilità, aiutandoti a scegliere coppie testo/sfondo che soddisfano i requisiti WCAG AA o AAA.
Privacy e Sicurezza
Questo Generatore di Tonalità è 100% lato client. Tutti i calcoli dei colori avvengono nel tuo browser usando JavaScript. Nessun colore, palette o esportazione viene inviato a un server. Nessun cookie traccia le tue scelte e nulla viene memorizzato oltre la tua sessione attuale. Sicuro per lavori di marca riservati e sistemi di design interni.
Teoria del Colore per il Web Design - Tonalità e WCAG
Padroneggia la teoria del colore, le tonalità, gli standard WCAG e la creazione di un sistema di design.