Strumenti per le immagini

Estrattore di Palette di Colori

Trascina un'immagine ed estrai i suoi colori dominanti con valori HEX, RGB e HSL, pronti da copiare.

Trascina un'immagine qui o clicca per selezionarla

Trascina un'immagine qui o clicca per selezionarla PNG, JPG, WebP o GIF

Tutta l'elaborazione nel tuo browser — nessun upload, nessun tracciamento.

Quanti colori

4 6 8 12

Palette

Cosa fa questo strumento

I designer rubano palette di colori dal mondo continuamente — un tramonto, un poster, un fotogramma di un film, lo screenshot dell'app di qualcuno. Questo strumento automatizza tutto. Trascina qualsiasi immagine e ottieni in cambio i suoi colori dominanti come un set di campioni, ognuno etichettato con valori HEX, RGB e HSL che puoi copiare con un solo clic. Scegli 4 campioni per una palette stretta in stile brand, 6 per una palette UI flessibile, 8 per un set illustrativo o 12 per catturare le sfumature delle fotografie. Oltre alla copia per singolo campione, puoi esportare l'intera palette in tre formati: variabili CSS pronte per essere inserite in :root, uno snippet di configurazione Tailwind per il tuo tailwind.config.js, oppure JSON con HEX/RGB/HSL per qualsiasi altro strumento. L'immagine non lascia mai il tuo browser. La sottocampioniamo su un piccolo canvas, campioniamo ogni pixel e raggruppiamo i colori vicini — tutto localmente. Questo significa che puoi estrarre palette da mockup interni, asset di brand sotto NDA o foto personali senza alcun rischio per la privacy. Nessun upload, nessun tracciamento, nessuna copia temporanea memorizzata su un server da qualche parte.

Come usarlo

Trascina l'immagine — Funziona qualsiasi formato comune — PNG, JPG, WebP, GIF. La qualità della palette è migliore con immagini che hanno regioni di colore chiare; immagini molto rumorose o granulose possono produrre campioni torbidi.
Scegli il conteggio — 4 per una palette decisa in stile brand. 6 è il punto ideale per UI. 8–12 catturano sfumature più sottili, utili per riferimenti illustrativi.
Copia singoli campioni — Clicca qualsiasi campione per copiare il suo valore HEX negli appunti. Il chip lampeggia con "Copiato!" per confermare.
Esporta l'intera palette — Usa i pulsanti in basso per copiare la palette come variabili CSS, un oggetto colors Tailwind, o JSON. Incolla direttamente nel tuo progetto.

Come funziona l'estrazione

Ridimensioniamo l'immagine su un canvas 200×200 (campionando l'intera immagine, non gli angoli) e leggiamo ogni pixel tramite getImageData. L'RGB di ogni pixel viene arrotondato per difetto al multiplo di 32 più vicino, producendo 512 possibili bucket (8×8×8). I bucket vengono conteggiati, ordinati per frequenza, e percorriamo l'elenco scegliendo i colori più frequenti che non siano troppo vicini a uno già scelto (distanza euclidea ≥ 38 nello spazio RGB) in modo che la palette abbia varietà visiva. Il campione visualizzato è la media RGB di tutti i pixel in quel bucket, non il rappresentante arrotondato del bucket — questo dà colori leggermente più accurati. I pixel completamente trasparenti e quasi trasparenti vengono esclusi.

Scegliere il conteggio giusto

4 colori funziona per loghi e identità di brand minimali — impone una gerarchia rigorosa. 6 colori è ciò su cui si attestano la maggior parte dei design system: 1–2 brand, 1 accento, neutri. 8 colori ti offre accenti secondari e neutri di tono medio. 12 colori sono per riferimenti illustrativi e fotografici dove vuoi catturare sottili gradazioni. Oltre i 12 la palette diventa rumorosa e difficile da usare come vincolo di design.

Domande frequenti

Perché i colori della mia palette sono leggermente diversi da un contagocce di Photoshop?

Mediamo i colori all'interno di un bucket, quindi un campione potrebbe non corrispondere esattamente a un singolo pixel — rappresenta la media del cluster. Di solito è più vicino al colore dominante percepito rispetto alla scelta di un pixel arbitrario.

L'algoritmo funziona come K-means?

È un approccio di bucketing per frequenza più semplice. K-means produce cluster marginalmente migliori per immagini complesse ma è molto più lento e aggiunge una dipendenza. Per il 95% degli input il metodo a bucket produce palette altrettanto utilizzabili in meno di 50 ms.

Perché mancano alcuni colori che mi aspettavo?

Piccoli tocchi di colore vengono soffocati dalla dominanza dello sfondo. Se un colore occupa meno dell'1-2% circa dell'immagine, probabilmente non entrerà nella palette a meno che non aumenti il conteggio. Ritaglia l'immagine sull'area che ti interessa per risultati migliori.

Le immagini vengono caricate?

No. Tutto avviene nel tuo browser. Le uniche chiamate di rete che questa pagina effettua sono per i propri asset.

Posso estrarre palette da immagini su un sito web?

Salva o fai uno screenshot dell'immagine prima, poi trascinala qui. Non recuperiamo URL perché ciò richiederebbe un proxy CORS o un server, e siamo rigidi nel restare lato client.

Perché l'export Tailwind usa brand-1, brand-2?

Sono nomi generici che puoi rinominare per adattarli al tuo progetto. Inserisci lo snippet in tailwind.config.js sotto theme.extend.colors, poi rinomina le chiavi con quelle che usano i tuoi design token.

Estrattore di Palette di Colori