Generatore di palette
Da un colore base a cinque armonie, con il rapporto di contrasto di bianco e nero su ogni campione ed esportazione in CSS.
strumenti / palette-da-immagine
Palette da immagine
Trascina un'immagine ed estrai da tre a otto colori dominanti, con hex e contrasto. L'immagine resta nel tuo browser.
Gratuito, nel browser, senza account
Trascina qui un’immagine, oppure
Da 3 a 8. Cambiando il numero non si rilegge il file: si riusano i pixel già letti.
Il metodo è il median cut: si prende il gruppo di pixel più largo su un canale, lo si taglia in due e si ripete. Il taglio cade dove i valori cambiano davvero, così un colore che occupa più di metà immagine non viene spezzato in due sfumature che nell’immagine non ci sono.
L’immagine viene ridotta a 256 pixel di lato prima di essere letta. I colori dominanti non cambiano scalando — è la proprietà che li rende dominanti — e su una foto da dodici megapixel il conto sarebbe cinquanta volte più lungo per la stessa risposta.
L’immagine resta nel tuo browser: entra in un canvas e ne esce una lista di colori. Non viene caricata da nessuna parte e non se ne leggono i dati EXIF.
Come funziona
- Trascina un'immagine nel riquadro, o scegli un file.
- Sposta il cursore per decidere quanti colori estrarre.
- Copia un singolo esadecimale, o tutta la palette come lista o variabili CSS.
Cosa fa
Legge un’immagine e ne ricava i colori dominanti, da tre a otto. Per ognuno dà l’esadecimale e dice se ci si legge meglio il testo bianco o il nero, con il rapporto.
Serve a partire da una fotografia, da una copertina o da un logo e ottenere i colori da usare attorno.
Sul metodo
Il metodo è il median cut. Si prende il gruppo di pixel più largo su un canale, lo si taglia in due, e si ripete finché i gruppi sono quanti ne servono. Il colore di un gruppo è la media di quello che contiene.
Il taglio cade dove i valori cambiano davvero, non a metà del gruppo. È l’unico scostamento dal metodo da manuale, e serve: tagliando a metà, un colore che occupa più della metà dell’immagine verrebbe spezzato in due, e ne uscirebbero due sfumature che nell’immagine non ci sono. Su una fotografia, dove i valori sono tutti diversi, i due tagli coincidono.
Median cut e non k-means perché è deterministico: la stessa immagine dà gli stessi colori, sempre. K-means parte da punti scelti a caso, e due estrazioni della stessa immagine darebbero due palette diverse.
Sui pixel trasparenti
I pixel trasparenti vengono scartati, non composti sul bianco.
Un PNG con il fondo trasparente darebbe altrimenti il bianco come colore dominante — che è il colore di niente, e per giunta quello che manda a monte tutta la palette.
Se l’immagine è interamente trasparente non esce nessun colore, e la pagina lo dice.
Sulla riduzione
L’immagine viene ridotta a 256 pixel di lato prima di essere letta.
I colori dominanti non cambiano scalando: è esattamente la proprietà che li rende dominanti. Su una fotografia da dodici megapixel il conto sarebbe cinquanta volte più lungo per la stessa risposta.
Cambiando il numero di colori il file non viene riletto: si riusano i pixel già in memoria.
Su cosa non c’è
L’immagine non esce dal tuo browser. Entra in un canvas e ne esce una lista di colori. Non viene caricata da nessuna parte.
I dati EXIF non vengono letti. Una fotografia può contenere il modello della macchina, la data e le coordinate GPS: qui non vengono nemmeno guardati.
Sui tuoi dati
Tutto avviene nel tuo browser. Questo sito è fatto di file statici e non ha un server a cui mandare qualcosa, anche volendo.
Da qui si passa anche di qua
Comprimi e ridimensiona immagini
Trascina le foto, scegli il lato lungo e la qualità, guarda quanto pesano prima e dopo. Fino a venti per volta, tutto nel browser.
Converti formato immagini
Da PNG a JPG, a WebP e indietro. Le misure restano, la qualità si sceglie, e sotto la trasparenza ci metti il colore che vuoi.