Vai al contenuto
100% locale

Generatore di tavolozza colori

Trasforma un colore di base in una tavolozza completa utilizzando regole di armonia cromatica.

Ingresso
0
0
Uscita

Generatore di tavolozza colori

Incolla un colore di base come codice hex, valore rgb() o hsl() e questo strumento costruisce una tavolozza completa intorno ad esso utilizzando regole di armonia cromatica, non una semplice rampa di luminosità della stessa tonalità. Scegli complementare per un singolo colore opposto, complementare diviso o triadico per contrasto equilibrato, tetradico per un rettangolo di quattro colori, analogo per tonalità vicine che si combinano naturalmente, o monocromatico per toni e sfumature di una singola tonalità.

L'opzione armonia decide quanti colori escono: complementare restituisce sempre due, triadico e complementare diviso ne restituiscono tre, tetradico ne restituisce quattro, mentre il numero di colori e l'angolo di passo di tonalità si applicano solo a analogo e monocromatico, dove scegli quanti colori e quanto distanti. Calcola in HSL per la matematica classica della ruota cromatica, oppure passa a OKLCH, che mantiene la stessa luminosità percepita su tutte le tonalità in modo che la tavolozza non esca con un campione che appare stranamente scuro o sbiadito rispetto al resto. I cursori di regolazione della saturazione e della luminosità perfezionano l'intera tavolozza dopo che l'armonia è stata costruita, e l'opzione formato colore stampa ogni risultato come hex, rgb(), hsl() u oklch().

Ogni campione viene controllato rispetto a WCAG AA (4.5:1) come testo su sfondo bianco e nero, contrassegnato con un segno di spunta o una croce accanto a ciascun rapporto: utile per scegliere quali colori in una tavolozza generata sono sicuri per il testo del corpo rispetto alla sola decorazione. Esporta il risultato come un elenco semplice, un blocco di proprietà personalizzate CSS pronto da incollare in un foglio di stile, o un oggetto colore di configurazione Tailwind.

Tutto viene eseguito localmente nel tuo browser: il colore che inserisci non viene mai caricato da nessuna parte. Copia il risultato, scaricalo come file .txt, o invialo all'input di un altro strumento per continuare a lavorarci.

FAQ

Quali formati di input accetta per il colore di base?
Codici hex (#3b82f6, #38f, con o senza #), rgb()/rgba() e hsl()/hsla(). Incolla uno di questi e la tavolozza si aggiorna istantaneamente.
Qual è la differenza tra HSL e OKLCH per il calcolo?
HSL è la matematica classica della ruota cromatica ed è veloce e prevedibile. OKLCH è uno spazio percettivamente uniforme, quindi una tavolozza costruita in esso mantiene una luminosità percepita più uniforme su tutte le tonalità invece di avere alcuni colori che accidentalmente appaiono più scuri o più leggeri rispetto ad altri.
Perché cambiare "colori nella tavolozza" influisce solo su alcune armonie?
Complementare, complementare diviso, triadico e tetradico sono definiti per definizione: due, tre, tre e quattro colori rispettivamente. Il conteggio controlla solo analogo e monocromatico, che possono ragionevolmente avere qualsiasi numero di colori.
Cosa significa il segno di spunta o la croce AA accanto a ogni colore?
È il rapporto di contrasto WCAG di quel colore usato come testo su sfondo bianco e su sfondo nero, con un segno di spunta quando supera la soglia AA di 4.5:1 e una croce quando non lo fa.
Il mio colore viene caricato da qualche parte?
No. La tavolozza viene generata interamente nel tuo browser: nulla di quello che digiti viene inviato a un server.