Generatore di Tonalità di Colore

Crea una palette completa con sfumature, tonalità e punteggi di contrasto WCAG

Generatore di Tonalità di Colore

Colore di Base

HEX

RGB

HSL

Palette Generata Clicca per copiare

Anteprima

Esporta

100% lato client. I tuoi colori non lasciano mai il tuo browser.

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

Lo strumento converte il tuo colore di base in HSL e regola il valore di Lightness per creare 10 stop distribuiti uniformemente. Lo stop 50 è il più chiaro (vicino al bianco), lo stop 900 è il più scuro (vicino al nero). La scala corrisponde all'approccio della palette colori Tailwind CSS, dove lo stop 500 approssima il tuo colore di base originale.

Ogni tonalità mostra il suo rapporto di contrasto rispetto al bianco e rispetto al nero. Per la conformità WCAG AA, il testo normale richiede 4,5:1, il testo grande richiede 3:1. Per AAA: 7:1 normale, 4,5:1 grande. Le tonalità chiare (50-300) di solito superano l'AA con testo nero; le tonalità scure (700-900) di solito superano l'AA con testo bianco.

Clicca su Esporta Config Tailwind e copia l'oggetto JavaScript. Incollalo nella sezione "colors" del tuo tailwind.config.js. Tailwind genera automaticamente classi di utilità come bg-brand-500, text-brand-700, border-brand-200.

Clicca su Esporta Variabili CSS per le dichiarazioni di proprietà personalizzate CSS (es. --color-500: #0ea5e9). Incolla nel tuo blocco :root e usa con var(--color-500). Funziona con qualsiasi configurazione CSS.

Una tinta è una versione più chiara (mescolata con il bianco, Lightness più alta). Una sfumatura è una versione più scura (mescolata con il nero, Lightness più bassa). Gli stop 50-400 sono tinte, gli stop 600-900 sono sfumature, lo stop 500 approssima il colore originale.

I requisiti di contrasto WCAG lo spiegano: sfondo chiaro + testo scuro garantisce alto contrasto. Sfondi agli stop 50-100 abbinati a testo agli stop 700-900 soddisfano tipicamente WCAG AA. Anche sfondi scuri (800-900) con testo bianco o agli stop 50-100 funzionano bene.

Sì. Inserisci qualsiasi colore HEX, RGB o HSL valido. Il generatore crea una palette personalizzata completa dal tuo colore di base esatto — utile per i colori del brand non presenti nella palette Tailwind predefinita.

No. Tutti i calcoli dei colori vengono eseguiti localmente nel tuo browser tramite JavaScript.

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.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura

Questo strumento ti è stato utile?

Generatore di Tonalità di Colore