Generatore di palette colori

Come usare il generatore di palette

1. Premi Nuova palette (o la barra spaziatrice sulla tastiera) per ottenere cinque colori che seguono un’armonia cromatica. Ogni pressione genera una nuova palette casuale.
2. Blocca i colori che ti piacciono con il lucchetto sotto ogni campione. I colori bloccati restano al loro posto mentre gli altri cambiano; in modalità casuale il primo colore bloccato diventa anche l’ancora attorno a cui vengono costruiti i nuovi colori, che continuano così ad abbinarsi.
3. Parti dal tuo colore: imposta Parti da su Il mio colore base e sceglilo — il colore del tuo marchio, per esempio. Ogni palette conterrà esattamente quel colore.
4. Scegli un’armonia (analoga, monocromatica, complementare, complementare divisa, triade, tetrade oppure tinte e ombre), o lascia Qualsiasi per cambiarla ogni volta.
5. Ritocca un colore con la matita, che apre il selettore di colore del dispositivo; il colore modificato viene bloccato automaticamente.
6. Ricava i colori da una foto: premi Colori da un’immagine, trascina il file sullo strumento o incolla uno screenshot. I cinque colori principali dell’immagine vengono individuati e bloccati.
7. Copia ed esporta: tocca un codice per copiarlo, passa tra HEX, RGB, HSL e OKLCH, copia l’intera palette come variabili CSS o JSON oppure scarica un PNG con i cinque campioni. Copia link crea un indirizzo che riapre esattamente questa palette.

Tutto funziona nel browser. L’immagine che carichi viene letta sul tuo dispositivo, ridotta a non più di 100 pixel sul lato lungo e analizzata lì; non viene mai caricata su un server.

Perché le palette nascono in OKLCH

Le ruote dei colori più comuni — HSL nel CSS, HSV/HSB nei programmi di grafica — sono solo riorganizzazioni dei canali rosso, verde e blu, non modelli della vista umana. A parità di luminosità HSL del 50%, il giallo puro sembra molto più chiaro del blu puro, e una palette che ruota la tinta in HSL salta tra colori sgargianti e spenti. Questo generatore lavora in OKLCH, la forma polare di OKLab, uno spazio colore percettivo pubblicato da Björn Ottosson nel 2020 e adottato dal CSS Color Module Level 4 come funzione oklch(). I tre numeri sono L (luminosità percepita, 0–100%), C (croma, quanto è intenso il colore: 0 è grigio, i colori sRGB arrivano a circa 0,32) e H (angolo di tinta in gradi). Passi uguali di L appaiono come passi uguali di chiarezza, qualunque sia la tinta.

La conversione avviene in tre passaggi: si annulla la curva gamma di sRGB per avere luce lineare, si moltiplica per una matrice fissa e si estraggono le radici cubiche, poi una seconda matrice dà L, a e b. Il croma è √(a² + b²) e la tinta è atan2(b, a). Valori di riferimento di questo strumento, uguali a quelli pubblicati:

Non tutti i colori OKLCH esistono su uno schermo. Quando un colore previsto esce dal gamut sRGB, il generatore ne mantiene luminosità e tinta e abbassa il croma finché non rientra — la stessa idea del gamut mapping di CSS Color 4 —, così la palette non cambia mai tinta solo perché un colore è stato tagliato.

Come viene costruita una palette

Ogni palette parte da un’ancora: il tuo colore base, il primo colore bloccato o un colore casuale con luminosità tra 45% e 80% e croma moderato. Gli altri quattro colori ricevono le tinte dell’armonia scelta e livelli di luminosità distribuiti tra 30% e 90% (il livello più vicino all’ancora viene saltato, quindi ogni colore se ne distingue per chiarezza). Il croma varia fino al 30% attorno a quello dell’ancora e cala verso i colori molto chiari e molto scuri, che risultano sgargianti se troppo saturi. Un numero casuale estratto a ogni nuova palette guida tutte le scelte, e lo stesso numero dà sempre la stessa palette: è così che un link copiato riproduce i tuoi colori.

Poiché gli angoli si misurano sulla ruota OKLCH, il complementare di un colore può essere diverso da quello di una ruota HSL o del cerchio cromatico dei pittori (rosso-giallo-blu): il complementare OKLCH del blu navy #1f4e79 (tinta 249°) è un caldo verde oliva aranciato, intorno a 69°.

Esempio: una triade da #1f4e79

Con il colore base #1f4e79 (luminosità OKLCH 41,4%, croma 0,088, tinta 249,1°) e l’armonia triade, il seme iniziale della pagina produce i colori qui sotto. Le tinte stanno intorno a 249°, 9° e 129°, a 120° l’una dall’altra, e la luminosità va dal 28,7% al 92,9%:

Le colonne di contrasto dicono quale testo funziona su ogni colore. Il bordeaux scuro regge il testo bianco con 14,66:1, il rosa pallido il testo nero con 16,79:1, mentre il verde intermedio arriva solo a 3,64:1 con il bianco: va bene per titoli grandi, non per il testo corrente.

Contrasto e accessibilità

Ogni campione mostra la scelta migliore tra testo bianco e nero, con rapporto e livello, e la tabella del contrasto sotto la palette li elenca entrambi. I numeri seguono le Linee guida per l’accessibilità dei contenuti web (WCAG) 2.2 del W3C: la luminanza relativa è 0,2126 R + 0,7152 G + 0,0722 B dei canali linearizzati e il rapporto è (più chiaro + 0,05) / (più scuro + 0,05), da 1:1 a 21:1. Il testo normale richiede 4,5:1 per il livello AA e 7:1 per AAA; il testo grande (24 px, o 18,7 px in grassetto) richiede 3:1 per AA. I rapporti vengono troncati, non arrotondati, alla seconda cifra decimale, così un colore non risulta mai promosso se non lo è.

Consigli per usare una palette

• Dai un ruolo a ogni colore. Una ripartizione diffusa è 60% per lo sfondo o il colore dominante, 30% per il secondario e 10% per l’accento; il colore più scuro spesso serve per il testo.
• Controlla il testo prima di decidere. Usa la tabella del contrasto, oppure incolla una coppia nel selettore colori per vederne codici e contrasto.
• Non affidarti solo alla tinta. Circa un uomo su dodici ha un deficit della visione dei colori rosso-verde; varia anche la luminosità.
• Usa l’esportazione CSS come base per i design token: rinomina --color-1 e gli altri in ruoli come --marchio o --sfondo.

Domande frequenti

Ultimo aggiornamento: 15 ottobre 2026