Generatore di palette da immagine
Estrai i colori principali di un’immagine come palette e copiali come codici HEX, variabili CSS o JSON.
Generatore di palette da immagine trova i colori dominanti di una foto o di una grafica e li mostra come campioni. Puoi scegliere 3, 4, 5, 6 o 8 colori; sono ordinati dal colore che copre l’area maggiore, e le tonalità molto simili vengono unite perché ogni campione sia distinto. Copia la palette come variabili CSS o array JSON, o scaricala come tavolozza PNG.
Come usare Generatore di palette da immagine
- 1
Apri un’immagine
Trascina, scegli o incolla una foto, un’illustrazione, un logo o uno screenshot.
- 2
Scegli il numero di colori
Clicca 3, 4, 5, 6 o 8. I campioni si aggiornano subito.
- 3
Copia i singoli colori
Clicca l’icona di copia su un campione per copiarne il codice HEX.
- 4
Esporta la palette
Usa Copia variabili CSS o Copia JSON, oppure scarica la palette come tavolozza PNG.
Cosa fa
- Ordinati per copertura
- Il primo campione è il colore che copre la parte più grande dell’immagine.
- Tonalità distinte
- I colori quasi identici vengono uniti, così la palette non ripete la stessa tinta.
- Pronta per gli sviluppatori
- Esporta come proprietà personalizzate CSS (--color-1, --color-2 e così via) o come array JSON di codici HEX.
- Tavolozza PNG
- Scarica un’immagine della palette con il codice HEX scritto sotto ogni campione.
Domande
Come vengono scelti i colori della palette?
L’immagine viene campionata a dimensioni ridotte, i colori simili vengono raggruppati e i gruppi che coprono l’area maggiore vengono mostrati per primi. I pixel trasparenti vengono ignorati.
Perché ottengo meno colori di quelli selezionati?
Le tonalità molto vicine tra loro vengono unite, così ogni campione è chiaramente diverso. Un’immagine con pochi colori distinti può restituire meno campioni.
Come uso la palette nel CSS?
Clicca Copia variabili CSS per ottenere un blocco :root con variabili chiamate --color-1, --color-2 e così via, poi incollalo nel tuo foglio di stile.
Perché manca un piccolo colore d’accento?
La palette privilegia i colori che coprono un’area più grande, quindi un dettaglio minuscolo come un piccolo logo può non comparire. Usa Selettore colore da immagine per il valore esatto di un punto specifico.