Palette di colori da un'immagine

Come estrarre una palette di colori da un’immagine

1. Trascina un’immagine nell’area di caricamento, o cliccaci sopra per scegliere un file. Funzionano JPG, PNG, WebP, GIF e qualsiasi altro formato che il tuo browser sa mostrare.
2. Lo strumento analizza subito l’immagine e ne mostra i Colori dominanti, ordinati dal più al meno presente.
3. Regola il Numero di colori (da 3 a 12) per ottenere una palette più ampia o più ristretta. Togli la spunta da Ignora i pixel bianchi e quasi bianchi se il bianco è un colore importante della tua immagine, per esempio un prodotto bianco o la neve.
4. Copia un colore con il pulsante Copia sotto il suo campione, oppure scegli un formato in Esporta come (Elenco HEX, Variabili CSS, Variabili SCSS, Array JSON o Colori Tailwind) e clicca su Copia o Scarica per l’intera palette. Estrai i colori ripete l’analisi.

La tua immagine viene letta localmente dal browser. Non viene mai caricata su un server.

Come vengono trovati i colori dominanti

L’immagine viene prima disegnata su un canvas invisibile, ridotta in modo che il lato più lungo misuri al massimo 512 pixel. Così l’analisi resta veloce senza alterare i colori complessivi. I pixel vengono poi raggruppati con un algoritmo di quantizzazione (il modified median cut della libreria open source Color Thief) che lavora nello spazio colore OKLCH, così i colori che all’occhio sembrano simili finiscono nello stesso gruppo.

Ogni gruppo diventa un colore della palette, e la percentuale sotto ogni campione è la sua quota sui pixel campionati. La barra sopra i campioni mostra queste proporzioni a colpo d’occhio. I pixel trasparenti vengono saltati, e lo stesso vale per i pixel bianchi e quasi bianchi finché l’opzione è attiva, perché altrimenti i semplici sfondi bianchi dominerebbero la maggior parte delle foto di prodotto e degli screenshot.

Ogni campione mostra il suo codice HEX in nero o in bianco, a seconda di quale si legge meglio, così l’etichetta resta leggibile sia sui colori chiari sia su quelli scuri.

Idee per usare la palette di un’immagine

• Branding e web design: costruisci il tema di un sito a partire da una foto di copertina o da un logo, così l’interfaccia si accorda con l’immagine.
• Presentazioni e social media: scegli colori del testo e dello sfondo adatti a un’immagine di copertina.
• Arredamento, moda e arte: cattura l’atmosfera di una foto, di un dipinto o di un campione di tessuto.
• Visualizzazione dei dati: prendi i colori dei grafici da un’illustrazione usata nello stesso report.

I colori estratti sono medie di molti pixel, quindi possono sembrare un po’ meno vivaci del punto più saturo della foto. Se ti serve il colore esatto di un pixel specifico, usa invece uno strumento per prendere un colore da un’immagine.