Generatore di Palette di Colori (5 schemi da un colore base)

Scegli un colore base, seleziona uno schema cromatico e ottieni una palette coordinata. Clicca sui campioni per copiare i singoli valori hex, o copia tutto in una volta per l'uso in strumenti di design e variabili CSS.

Colore base

Schema cromatico

Palette generata

#3BDFF6
#3B82F6
#513BF6

Strumenti correlati

Come funziona

I cinque schemi di teoria dei colori

Complementare: due colori alle estremità opposte della ruota dei colori (180° di distanza). Alto contrasto, vibrante. Usato per accenti, pulsanti call-to-action e creazione di punti focali.

Analoga: tre colori adiacenti sulla ruota (30° di distanza). Armoniosa e piacevole, basso contrasto. Comune in natura; ottima per sfondi e superfici UI.

Triadica: tre colori equidistanti (120° di distanza). Vibrante ed equilibrata. Usata in design giocosi o energici.

Tetradica (rettangolo): quattro colori che formano un rettangolo (90° di distanza). Palette ricca ma difficile da bilanciare — tipicamente si usa uno come dominante e gli altri come accenti.

Monocromatica: toni, tinte e sfumature di un singolo colore. Sofisticata e unificata. Comune nei design minimalisti e nel branding aziendale.

Scegliere un colore di partenza

Colori del brand: la maggior parte dei progetti parte da un logo o colore del brand esistente. Testalo come base su tutti e 5 gli schemi per trovare la soluzione migliore per il tuo design.

Ispirazione: scegli un colore da fotografia, arte o natura. I colori vividi (alta saturazione, luminosità media) funzionano meglio come base; i colori molto chiari o molto scuri producono palette sbiadite.

Accessibilità: assicurati che la tua palette finale abbia abbastanza contrasto per il testo. Usa il nostro controllo del contrasto per verificare che le combinazioni testo/sfondo soddisfino WCAG AA (4,5:1 per il testo normale).

Usare la palette

Variabili CSS: definisci i colori della palette come variabili :root (--color-primary, --color-accent, ecc.) così puoi cambiare tema modificando un solo punto.

Strumenti di design: incolla i valori hex nelle librerie di colori di Figma, Sketch o Adobe XD. La maggior parte degli strumenti accetta l'hex direttamente; alcuni accettano anche HSL o colori CSS nominati.

Limita l'uso: anche con 5 colori, i design reali tipicamente usano 2-3 in modo prominente e gli altri con parsimonia. La regola 60-30-10 (60% dominante, 30% secondario, 10% accento) è un buon equilibrio di partenza.

Domande frequenti

›Quale schema dovrei usare?

L'analoga è la scelta più sicura per la maggior parte dei design — tre colori vicini creano armonia senza monotonia. Il complementare funziona bene per l'enfasi (pulsanti CTA). Il monocromatico è il migliore per brand minimali/sofisticati. Il triadico per sensazioni giocose/energiche.

›Posso ottenere più di 5 colori?

Non da questo strumento — generiamo gli schemi canonici a 2-5 colori. Per palette più grandi, usa l'output dell'analoga e crea sfumature monocromatiche di ciascuno (combina gli schemi).

›L'algoritmo usa uno spazio cromatico percettivamente uniforme?

Usiamo la matematica HSL, che è veloce e prevedibile. Per risultati percettivamente uniformi (migliori per palette ottimizzate per l'accessibilità), gli strumenti avanzati usano OKLCH o CIELAB. HSL è sufficiente per la maggior parte del lavoro di design.

›La mia palette sarà accessibile?

Non automaticamente. Gli schemi di teoria dei colori garantiscono armonia estetica, non contrasto per il testo. Controlla sempre le combinazioni testo-su-sfondo con il nostro controllo del contrasto prima di pubblicare.

›Posso salvare le mie palette preferite?

Non ancora — copia i codici hex nel tuo sistema di design o nelle tue note. Gli URL di palette aggiungibili ai segnalibri sono in roadmap.

›E per le palette di Material Design o Tailwind?

Quelli sono sistemi pre-curati. Genera uno schema base qui, poi cerca colori Material/Tailwind simili. Alcune app esportano codici hex direttamente compatibili con questi sistemi.

›Perché la mia palette sembra 'piatta'?

Se il tuo colore base è molto chiaro (alta luminosità) o molto scuro (bassa luminosità), la palette generata ha una gamma dinamica limitata. Scegli una base con luminosità media (40-60%) e alta saturazione (70%+) per risultati vividi.

›I dati lasciano il mio browser?

No. Tutti i calcoli vengono eseguiti localmente; nulla viene inviato a un server.

Informativa pubblicità

NordVPN
Sponsored
VPN no-log con oltre 6.400 server in 111 paesi. Threat Protection blocca pubblicità, tracker e malware.
Ottieni NordVPN →
Cloudways
Sponsored
Cloud hosting gestito su DigitalOcean, AWS o GCE: server pronti in pochi minuti, senza amministrazione di sistema.
Prova Cloudways →