Generatore di palette colori

Una palette di colori armoniosa in pochi secondi

Questo generatore di palette colori ti propone cinque colori che stanno bene insieme, partendo dal caso, da un colore di base o da una foto. Per ogni colore trovi i codici HEX, RGB e HSL, il contrasto con il bianco e il nero e il colore del testo leggibile sopra. Tutto viene calcolato nel browser: non viene inviato nulla.

Come si usa

1. Clicca su «Genera una palette» o premi la barra spaziatrice. Il menu «Armonia» sceglie la regola, da «Complementare» a «Monocromatica», oppure «Casuale».
2. Un colore ti piace? Clicca sul suo lucchetto: resta fermo e gli altri vengono costruiti attorno a lui.
3. Per partire da un colore preciso, scrivilo in «Colore di base» e clicca su «Applica l'armonia». «Calcolo delle tinte» passa da HSL a OKLCH, che mantiene la luminosità più regolare da una tinta all'altra.
4. Ritocca un colore con il selettore o il campo HEX; trascina la maniglia di un campione per cambiare l'ordine.
5. Clicca su un codice per copiarlo. «Esporta la palette» offre variabili CSS, un array JSON, un'immagine PNG e un link che riapre la palette.

Puoi anche ricavare una palette da una foto, trasformare un colore nella «Scala di tonalità da 50 a 900» e tenere i preferiti e le ultime 20 palette su questo dispositivo.

Il cerchio cromatico e le armonie di colori

Sul cerchio cromatico ogni tinta ha un angolo: il rosso a 0°, il verde a 120°, il blu a 240°. Un'armonia è una combinazione di angoli. Ecco i risultati in modalità HSL partendo dal rosso puro #ff0000:

I colori complementari stanno uno di fronte all'altro e danno il contrasto più forte. Gli analoghi sono vicini e trasmettono calma. La palette monocromatica tiene una sola tinta e gioca sulla luminosità. Se un'armonia ha meno di cinque colori, lo strumento aggiunge versioni più chiare o più scure.

HEX scrive un colore con tre coppie di cifre esadecimali per rosso, verde e blu, come #1d4ed8. RGB riporta gli stessi valori da 0 a 255, rgb(29, 78, 216), mentre HSL li traduce in tinta, saturazione e luminosità, hsl(224, 76%, 48%).

Usare bene una palette: la regola 60-30-10

La regola 60-30-10 assegna il 60% della superficie a un colore dominante, spesso neutro, il 30% a un colore secondario e il 10% a un colore d'accento per ciò che deve farsi notare.

• Sito web: sfondo chiaro, colore del marchio per i titoli, accento per i pulsanti.
• Logo: due o tre colori, da provare in bianco e nero e in piccolo, per esempio su un biglietto da visita.
• Presentazione: uno sfondo, un colore per i titoli, uno o due per i grafici, con contrasto alto perché il proiettore sbiadisce i colori.
• Arredamento: le pareti prendono il 60%, i mobili il 30%, cuscini e oggetti il 10%. La pittura non appare mai come sullo schermo: prova un campione sul muro.

Contrasto, accessibilità e daltonismo

Le linee guida WCAG chiedono un contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande (livello AA), e 7:1 per il livello AAA. Il nero #000000 su bianco raggiunge 21:1. Il grigio #777777 su bianco si ferma a 4,48:1: non basta per il testo normale e lo strumento mostra «AA testo grande».

Si stima che circa l'8% degli uomini e lo 0,5% delle donne di origine europea abbia una qualche forma di daltonismo, il più delle volte una difficoltà a distinguere il rosso dal verde. La «Simulazione del daltonismo» mostra la tua palette con protanopia, deuteranopia e tritanopia. Se due colori si confondono, aggiungi un'etichetta o un'icona.

Domande frequenti

Perché il complementare cambia in OKLCH?

In HSL il complementare di #ff0000 è #00ffff. In OKLCH la tinta ruota a parità di luminosità percepita e dà #009aac, più equilibrato accanto al rosso.

Come tengo un colore quando rigenero?

Clicca sul suo lucchetto. La barra spaziatrice non fa nulla mentre scrivi in un campo.

Le mie foto vengono caricate da qualche parte?

No. L'immagine viene analizzata nel browser: i pixel sono raggruppati per colori simili e ogni gruppo importante diventa un colore.

Come condivido una palette?

«Copia il link della palette» mette i cinque codici nell'indirizzo, per esempio #ff0000-00ffff-….