Palette Colori da Immagine
Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
Aggiornato maggio 2026
Revisionato da Rafael Duarte
Come estrarre i colori da un'immagine
Dalla foto alla palette in codici HEX, RGB e HSL
1. Carica l'immagine
Trascina un JPG, PNG, WebP, GIF o SVG nell'area di caricamento, oppure incolla l'URL di un'immagine pubblica.
2. Scegli quanti colori
Da 3 a 12: ogni volta che cambi il numero, i colori dominanti vengono ricalcolati.
3. Copia o esporta
Clicca un colore per copiarne l'HEX, oppure esporta l'intera palette in CSS, Tailwind, JSON, DESIGN.md o PNG.
Cosa fa l'estrattore di palette
Raggruppamento k-means, non una semplice media
Colori dominanti con k-means
I pixel vengono raggruppati per somiglianza e ogni gruppo restituisce il suo colore medio: ottieni tinte realmente presenti, non un'unica media spenta.
Trasparenza ignorata
I pixel trasparenti (opacità sotto il 50%) non entrano nel calcolo, così lo sfondo vuoto di un logo PNG non diventa un colore della palette.
Cinque formati di esportazione
Variabili CSS, configurazione Tailwind, JSON con HEX/RGB/HSL, tabella DESIGN.md e una scheda PNG con i campioni.
Elaborazione nel browser
L'immagine viene letta con la Canvas API sul tuo dispositivo: foto private e materiali di brand non vengono caricati su alcun server.
Risultato in pochi millisecondi
L'immagine viene ridotta a 150 pixel sul lato lungo prima dell'analisi, per questo anche una foto pesante si elabora quasi all'istante.
Esempi di esportazione
Con una palette di esempio di tre colori, ordinati dal più scuro al più chiaro
Quando estrarre una palette da una foto
Scenari tipici per designer, sviluppatori e creator
Colori di un logo
Estrai 4–6 colori dal file del logo per avere gli HEX esatti da riportare nelle linee guida o in Figma.
Tema per un sito
Esporta la palette come extend.colors di Tailwind o come variabili CSS e parti da lì per il tema del progetto.
Moodboard e fotografia
Ricava l'atmosfera cromatica di una foto di riferimento con 8–12 colori e usala per un servizio, un'illustrazione o un video.
Feed social coerente
Analizza i post che hanno funzionato meglio e riusa le stesse tinte per mantenere riconoscibile il profilo Instagram.
Arredamento e materiali
Ottieni un riferimento HEX dalla foto di un ambiente come base per cercare tessuti o tinte; per le vernici serve comunque un campione reale.
Errori comuni nell'estrazione dei colori
URL bloccato da CORS
Molti siti non permettono di leggere i pixel delle loro immagini da un'altra pagina. Se l'estrazione da URL fallisce, scarica l'immagine e caricala come file.
Aspettarsi risultati identici a ogni estrazione
Il k-means parte da punti scelti a caso, quindi premendo Riestrai le tinte possono cambiare di poco. Se una palette ti convince, copiala subito.
Prendere i nomi DESIGN.md come ruoli semantici
Nel formato DESIGN.md i nomi (primary, secondary, accent…) seguono solo l'ordine dal colore più scuro al più chiaro. Rinomina i token in base all'uso reale.
Chiedere troppi colori a un logo semplice
Con 12 colori su un logo a due tinte ottieni sfumature quasi identiche dovute a bordi e antialiasing. Per un logo bastano 3–5 colori.
Perché usare questo estrattore di palette
Il raggruppamento k-means trova i colori che occupano davvero l'immagine, invece di restituire una media che non compare da nessuna parte. Puoi scegliere da 3 a 12 colori e vedere subito HEX, RGB e HSL di ciascuno.
Tutto avviene nel browser, senza registrazione e senza inviare le immagini a un server. L'esportazione copre i formati che servono nel lavoro quotidiano: CSS, Tailwind, JSON, DESIGN.md e PNG.
Colori dominanti o colore medio?
Perché il k-means dà un risultato più fedele
Domande frequenti
Carica l'immagine o incollane l'URL e scegli quanti colori vuoi: in pochi millisecondi compaiono i colori dominanti con i codici HEX, RGB e HSL. Basta un clic su un colore per copiarne l'HEX.
Riferimenti
Strumenti correlati
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
- Generatore CSS Flexbox Design Generatore CSS Flexbox gratuito: anteprima live, export Tailwind, CSS e React/JSX in schede, 11 layout predefiniti e proprietà dei singoli elementi incluse nel codice. Senza registrazione.
