Generatore palette colori

Scegli un colore base e ottieni una palette completa, complementare, analoga, triadica, tetradica o monocromatica. Copia qualsiasi campione come HEX, RGB o HSL. Niente lascia il tuo browser.

Come funziona Generatore palette colori

Generatore di schemi di colori costruisce palette di colori complete da un singolo colore base scelto dall'utente: complementare (opposto sulla ruota dei colori), analogo (tonalità adiacenti), triadico (tre equamente distanziate), tetradico (quattro tonalità in due coppie complementari) e monocromatico (diversa luminosità e saturazione della stessa tonalità). Tutta la logica delle palette viene eseguita nel browser; nulla di ciò che inserisci lascia il dispositivo.

Ogni palette generata mostra campioni con i loro valori HEX e RGB pronti da copiare. Questo offre ai designer un punto di partenza fondato nella teoria dei colori piuttosto che sull'intuizione. Poiché il generatore è offline dopo il caricamento iniziale della pagina, puoi sperimentare liberamente con i colori del brand durante una riunione con un cliente senza necessità di connessione di rete. Inserisci il tuo colore base nella notazione che hai a disposizione, HEX, RGB o HSL, e ogni campione generato viene restituito in tutte e tre, così puoi copiare quella che il tuo strumento di design si aspetta.

Scritto da Bastien Sulyan

Come usare Generatore palette colori, passo dopo passo

Scegli un colore base usando il selettore di colori o digitando un valore HEX.
Scegli un tipo di armonia dalle schede: complementare, analogo, triadico, tetradico o monocromatico.
I campioni della palette appaiono immediatamente con i loro valori HEX e RGB.
Fai clic su qualsiasi campione per copiare il suo valore HEX negli appunti.
Regola il colore base per esplorare variazioni e guarda l'intera palette aggiornarsi.

Casi d'uso comuni

Un designer che avvia una nuova identità del brand sceglie il colore primario e genera una palette triadica per proporre combinazioni a tre colori a un cliente.
Uno sviluppatore che costruisce un tema dark-mode usa la palette monocromatica per generare una gamma di tinte e sfumature da un singolo colore del brand.
Un content creator sceglie una palette analoga per selezionare colori di accento per una presentazione che risultino coesi senza un contrasto eccessivo.
Un designer UI usa la palette complementare per identificare un colore di accento ad alto contrasto che si distingua rispetto al colore primario del brand.

Domande frequenti

Come funziona la palette complementare?

Un colore complementare è la tonalità direttamente opposta al colore base sulla ruota dei colori HSL, a 180 gradi di distanza. Posizionare colori complementari l'uno accanto all'altro crea il massimo contrasto. Lo strumento mostra il colore base e il suo complementare, più varianti più chiare e più scure di ciascuno.

Qual è la differenza tra palette triadica e tetradica?

Una palette triadica usa tre tonalità equamente distanziate a 120 gradi l'una dall'altra sulla ruota dei colori. Una palette tetradica usa quattro tonalità a 90 gradi l'una dall'altra, formando due coppie complementari (chiamata anche doppia complementare o palette quadrata). Le palette tetradiche sono più complesse e richiedono un bilanciamento attento delle proporzioni per evitare il rumore visivo.

I colori che scelgo vengono memorizzati o inviati da qualche parte?

No. La generazione delle palette è aritmetica sulla rappresentazione HSL del colore base: rotazione dell'angolo di tonalità di quantità fisse, variazione di luminosità e saturazione. Ogni calcolo viene eseguito localmente nel browser; nulla viene inviato ad alcun server.

Posso esportare la palette come file CSS o file di token di design?

Lo strumento attualmente mostra campioni con valori HEX e RGB copiabili. Per un export completo di proprietà CSS personalizzate o un JSON di token di design, copia i valori manualmente nel file token del progetto o nel CSS. Un pulsante di esportazione dedicato potrebbe essere aggiunto in un aggiornamento futuro.

Questo generatore segue qualche standard formale di teoria dei colori?

I calcoli della palette usano formule standard di rotazione della tonalità nello spazio colore HSL, che è la convenzione nella maggior parte degli strumenti di web design. L'uniformità percettiva esatta di HSL ha limitazioni rispetto a LAB o OKLCH, ma le rotazioni HSL producono palette che corrispondono alle convenzioni della ruota dei colori che i designer tipicamente si aspettano.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti per sviluppatori