Generatore di palette di colori

Genera palette armoniose usando la teoria del colore — complementare, triadico, analogo e altro

Condividi:
Click any color swatch to copy its hex code
Copied!

Perché usare un generatore di palette di colori?

Scegliere colori che funzionano bene insieme richiede la conoscenza della teoria del colore — relazioni complementari, analoghe, triadiche e complementari divise. Farlo manualmente con una ruota dei colori è lento. Il nostro generatore usa la matematica HSL per calcolare automaticamente palette armoniose da qualsiasi colore base, permettendo a designer e sviluppatori di produrre schemi professionali in pochi secondi.

🎨

6 modalità di armonia

Complementare, triadico, analogo, complementare diviso, tetraedico e sfumature monocromatiche

👁️

Anteprima live dei campioni

Fai clic su qualsiasi campione per copiare istantaneamente il suo codice esadecimale negli appunti

📋

Esportazione di variabili CSS

Esporta l'intera palette come proprietà CSS personalizzate pronte per essere incollate nel tuo foglio di stile

Come generare una palette in 3 passi

1

Scegli un colore base

Usa il selettore di colori o inserisci un codice esadecimale per impostare il tuo colore di partenza/brand

2

Scegli il tipo di armonia

Seleziona complementare, triadico, analogo o un'altra armonia adatta al tuo design

3

Copia e usa

Fai clic su un campione per copiare il suo esadecimale, o usa 'Copia come variabili CSS' per esportare l'intera palette

Casi d'uso della palette di colori

🌐

Web design

Costruisci un sistema di colori completo per il sito web partendo dal tuo colore brand primario

🏢

Identità di brand

Sviluppa una palette di colori di brand professionale con colori primario, secondario e di accento

📱

Design UI/UX

Crea colori accessibili e visivamente coerenti per pulsanti, testi e sfondi delle applicazioni

📊

Visualizzazione dei dati

Genera colori categoriali distinti per grafici, tabelle e dashboard di dati

Best practice per il design dei colori

✓ Verifica il contrasto dei colori (WCAG)

Assicurati che le coppie testo/sfondo soddisfino il rapporto di contrasto WCAG AA (4,5:1 per il testo normale) per l'accessibilità.

✓ Limita la tua palette

Mantieniti a 3-5 colori: 1 primario, 1 secondario, 1-2 di accento e neutri. Più colori creano disordine visivo.

✓ Considera la psicologia del colore

Blu = fiducia/professionalità, Verde = crescita/successo, Rosso = urgenza/energia, Giallo = ottimismo. Allinea la tua palette al messaggio del tuo brand.

✓ Testa in modalità scura

Genera una variante dark mode regolando i valori di luminosità. Il nero puro (#000) e il bianco puro (#fff) sono raramente ideali — usa quasi-nero e quasi-bianco.

❓ Domande frequenti

Cos'è uno schema di colori complementari?
I colori complementari si trovano opposti sulla ruota dei colori (es. blu e arancione, rosso e verde). Creano alto contrasto ed energia visiva — ideali per pulsanti call-to-action e evidenziazioni.
Quando usare uno schema di colori analoghi?
Gli schemi analoghi usano 3 colori adiacenti sulla ruota dei colori. Creano design armoniosi e tranquilli con poco contrasto — perfetti per sfondi, gradienti e design di interfacce dolci.
Cos'è HSL rispetto a RGB e Hex?
Tutti e tre rappresentano lo stesso colore in formati diversi. Hex (#6366f1) è usato in CSS. RGB (99, 102, 241) specifica i canali rosso/verde/blu. HSL (237°, 84%, 67%) usa tonalità, saturazione, luminosità — molto più intuitivo per generare palette armoniose.
Come creare una palette di colori per la dark mode?
Per la dark mode, riduci significativamente la luminosità dei tuoi colori (es. L:60% → L:30%) e scambia i ruoli di testo/sfondo. Mantieni tonalità e saturazione simili ma regola la luminosità in modo che i colori rimangano leggibili su sfondi scuri.