Generatore di palette colori
Crea una palette di colori partendo da un colore di base, con gli schemi complementare, analogo, triadico e le altre armonie classiche. Salva i colori che ti piacciono, controlla il contrasto WCAG tra due colori ed esporta il risultato come variabili CSS o JSON. Se ti serve solo scegliere un colore e convertirlo tra HEX, RGB e HSL, usa il color picker.
Due colori opposti sulla ruota dei colori: contrasto alto, la scelta classica per base e colore d'accento.
Verifica del contrasto WCAG
Come funziona
Scegli un colore di base con il selettore, scrivendo il codice HEX (per esempio #1A73E8) o cliccando uno degli otto colori predefiniti. Poi scegli un'armonia dal menu: lo strumento calcola la palette ruotando la tonalità sulla ruota dei colori e lasciando uguali saturazione e luminosità.
Le sei armonie: • Complementare: il colore di base e quello opposto sulla ruota, a 180°. Il massimo contrasto di tinta, la scelta classica per pulsanti e colori d'accento. • Analoga: il colore di base e i due vicini, a −30° e +30°. Un effetto calmo, adatto a sfumature e sfondi. • Triadica: tre colori distanti 120° tra loro. Vivace ma equilibrata. • Complementare divisa: il colore di base e i due colori ai lati del suo complementare, a +150° e +210°. Un contrasto più morbido della complementare pura. • Tetradica: quattro colori a 90° l'uno dall'altro, cioè due coppie complementari. Ricca ma difficile da bilanciare: usane uno come dominante e gli altri come accenti. • Monocromatica: cinque varianti della stessa tonalità, con la luminosità abbassata o alzata di 15 e 30 punti. La più sicura per la palette di un solo brand.
Ogni campione mostra il colore in HEX, RGB e HSL, ciascuno con il suo pulsante Copia, e una stella per salvarlo. I colori salvati (fino a 24) finiscono nella sezione Colori salvati e restano nel localStorage del browser anche la volta dopo: un clic su un colore salvato lo usa come nuovo colore di base, il clic destro lo rimuove, Cancella tutti svuota la sezione.
Verifica del contrasto WCAG. Sotto la palette scegli due colori (Colore A e Colore B) e vedi un testo di prova in entrambe le combinazioni, il rapporto di contrasto calcolato secondo le WCAG 2.1 e tre esiti: • AA testo normale (almeno 4,5:1): il minimo per il testo dei contenuti. In Italia la Legge Stanca e le linee guida AgID rimandano alla norma EN 301 549, che chiede il livello AA delle WCAG 2.1. • AAA testo normale (almeno 7:1): il livello più alto, consigliato per contenuti dove la leggibilità è critica. • AA testo grande (almeno 3:1): per testo da 18 punti in su, o da 14 punti in grassetto.
Un esempio con il colore di partenza: #1A73E8 e il suo complementare #E9901C sono lontanissimi come tinta, ma hanno un contrasto di appena 1,82:1 e non superano nessuna soglia. Nella palette monocromatica dello stesso blu, invece, il più scuro (#0A3061) e il più chiaro (#A7C9F6) arrivano a 7,67:1. Colori che stanno bene insieme non sono per forza leggibili uno sull'altro.
Esportazione. • Esporta variabili CSS scarica palette.css con un blocco :root { --color-1: …; } pronto da incollare nel foglio di stile o nel tema. • Esporta JSON scarica palette.json con, per ogni colore, il codice HEX e i valori RGB e HSL separati, comodo per i design token. • Copia il link copia l'indirizzo della pagina, che contiene colore di base e armonia: chi lo apre ritrova la stessa palette.
Se ti serve solo scegliere un colore e convertirlo tra HEX, RGB e HSL, senza armonie, usa il color picker di questo sito.
Tutto viene calcolato nel browser: nessun colore viene inviato a un server.
Domande frequenti
Come trovo il colore complementare di un colore?
- Ruotando la tonalità di 180° sulla ruota dei colori: inserisci il colore di base e scegli l'armonia Complementare. Per esempio il complementare del blu #1A73E8 è l'arancione #E9901C. Saturazione e luminosità restano quelle del colore di partenza, cambia solo la tinta.
Come si abbinano i colori per un sito o un logo?
- Parti dal colore principale del brand e scegli un'armonia in base all'effetto che vuoi: complementare per un accento che salta all'occhio, analoga per un insieme calmo, monocromatica per una palette sobria con varianti chiare e scure dello stesso colore. Poi controlla con la verifica del contrasto WCAG che le coppie usate per il testo siano leggibili.
Che differenza c'è tra colori analoghi e triadici?
- La distanza sulla ruota. Gli analoghi sono i colori vicini al colore di base (a −30° e +30°) e danno un effetto armonioso e tranquillo. I triadici sono tre colori distanti 120° l'uno dall'altro, quindi nessuno è vicino agli altri: l'effetto è più vivace, ma resta bilanciato.
Quando conviene una palette monocromatica?
- Quando ti servono varianti coerenti di un solo colore per gli stati di un'interfaccia: sfondo, normale, hover, attivo, disattivato. Le cinque tinte hanno la stessa tonalità e la stessa saturazione e cambiano solo di luminosità (−30, −15, base, +15, +30 punti, senza arrivare al nero o al bianco puri), quindi è difficile che stonino tra loro.
Cosa misura il rapporto di contrasto WCAG?
- La differenza di luminanza relativa tra due colori, calcolata come previsto dalle WCAG 2.1. Va da 1:1 (colori identici) a 21:1 (nero su bianco). Per il testo normale il livello AA chiede almeno 4,5:1 e il livello AAA almeno 7:1; per il testo grande (18 punti, o 14 in grassetto) basta 3:1. Gli esiti diventano verdi quando la coppia supera la soglia.
Perché due colori che stanno bene insieme non superano il test di contrasto?
- Perché l'armonia riguarda la tinta, il contrasto la luminosità. Blu #1A73E8 e arancione #E9901C sono opposti sulla ruota, ma hanno una luminosità simile e si fermano a 1,82:1. Per il testo abbina colori con luminosità molto diverse, come le due estremità di una palette monocromatica, e usa i colori accesi per titoli, pulsanti e dettagli.
Come salvo un colore che mi piace?
- Clicca la stella sul campione: diventa piena e il colore compare nella sezione Colori salvati, che resta nel browser anche quando torni sulla pagina. Un clic su un colore salvato lo usa come colore di base, il clic destro lo rimuove. Puoi tenerne fino a 24.
Come uso la palette nel mio CSS?
- Premi Esporta variabili CSS e ottieni palette.css con le variabili --color-1, --color-2 e così via dentro :root. Incollale nel foglio di stile e usale con var(--color-1). Per i design token scegli invece Esporta JSON, che per ogni colore riporta HEX, RGB e HSL.
Posso condividere una palette?
- Sì. Colore di base e armonia sono salvati nell'indirizzo della pagina: premi Copia il link e invialo, chi lo apre vede la stessa palette. I colori salvati con la stella invece restano solo nel tuo browser.
I miei colori vengono salvati su un server?
- No. La palette è calcolata da JavaScript nel browser e i colori salvati stanno nel localStorage del tuo dispositivo. Nella scheda Rete degli strumenti per sviluppatori puoi vedere che scegliendo, salvando o esportando non parte nessuna richiesta.
Armonie di colore: quale usare
Guida rapida per scegliere l'armonia giusta. L'angolo sulla ruota dei colori decide quanto la palette risulta uniforme o contrastata.
| Armonia | Angolo sulla ruota | Colori | Effetto e uso tipico |
|---|---|---|---|
| Complementare | 180° | 2 | Contrasto massimo di tinta: pulsanti, avvisi, colore d'accento |
| Analoga | −30° e +30° dal colore di base | 3 | Calma e naturale: sfondi, sfumature, illustrazioni |
| Triadica | 120° tra un colore e l'altro | 3 | Vivace ma bilanciata: brand giocosi, infografiche |
| Complementare divisa | +150° e +210° | 3 | Più morbida della complementare: contrasto amichevole, editoria |
| Tetradica | 90° tra un colore e l'altro | 4 | Ricca: dashboard con molte categorie, layout da rivista |
| Monocromatica | Stessa tonalità | 5 | Sicura per un solo brand: stati dell'interfaccia |
Calcolo nello spazio HSL: la tonalità ruota dell'angolo indicato, saturazione e luminosità restano quelle del colore di base (nella monocromatica cambia solo la luminosità, di 15 e 30 punti). Per il testo verifica sempre le coppie con il controllo del contrasto WCAG: una palette armoniosa può comunque non superare il livello AA.