Genera varianti chiare e scure

I designer di prodotto lo usano per creare varianti chiare e scure di un colore prima di definire una palette coerente per un'interfaccia.

Genera varianti chiare e scure. L'operazione resta interamente nel browser e nessun valore inserito viene caricato, condiviso, conservato o salvato.

Come si usa

Inserisci un colore base in formato esadecimale nel campo di input.
Esegui il generatore per creare varianti più chiare e più scure.
Esamina i suggerimenti e scegli le tonalità adatte alla tua interfaccia.
Prova un altro colore base se la tavolozza proposta non corrisponde al tuo obiettivo.
Copia i valori selezionati nel tuo sistema di design o foglio di stile.

Esempio

Con il campione blu fornito, guarda come la tonalità si espande in toni più chiari e più scuri. Questo aiuta a creare stati al passaggio del cursore, attivo o disabilitato senza partire da una pagina vuota.

Input

#2563EB

Risultato

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Limiti e formati

Lo strumento suggerisce varianti da un colore, ma non verifica l'accessibilità.
I toni generati non sostituiscono una tavolozza di marca verificata.
Testa ogni valore nell'interfaccia reale, perché le condizioni di visualizzazione possono cambiare l'aspetto.
Una variante chiara o scura può non funzionare su alcuni sfondi anche se sembra corretta nell'elenco.

Dove avviene il trattamento

La generazione avviene nel tuo browser. Il colore base non viene inviato all'esterno e nessuna tavolozza viene salvata dalla pagina. Puoi provare diversi colori base durante la stessa sessione.

Domande frequenti

Posso partire da un colore specifico?

Sì, inserisci il colore base in forma esadecimale. Lo strumento lo usa per calcolare un insieme di varianti più chiare e più scure.

Le varianti sono accessibili?

Offrono idee di contrasto, ma lo strumento non misura la conformità. Controlla le coppie testo e sfondo con un verificatore di contrasto adatto.

Quanti colori posso generare?

Il processo parte da un colore e restituisce diversi toni. Per una tavolozza completa, ripetilo con ogni colore principale del tuo progetto.