Estrattore Palette Colori da Immagine (HEX, RGB, Tailwind CSS)
Carica qualsiasi immagine e lo strumento trova i colori dominanti con il clustering k-means, mostrando ogni campione con la sua quota nell'immagine. Scegli da 2 a 10 colori e copiali come valori HEX, RGB, proprietà personalizzate CSS, un blocco @theme di Tailwind CSS v4 o uno snippet di config Tailwind v3. Clicca un campione per copiarne il codice. L'immagine viene analizzata localmente e mai caricata.
Verificato da Vincenzo Manto, Fondatore e Lead Developer · Ultimo aggiornamento 30 settembre 2026
Come funziona
- 1
Trascina un'immagine o scegli un file.
- 2
Regola il cursore per scegliere quanti colori estrarre.
- 3
Clicca un campione per copiare un colore oppure scegli un formato e copia l'intera palette.
Costruire una palette dalle immagini
Fotografie, loghi e opere grafiche sono una fonte naturale per i colori di brand e interfaccia. Estrarre una palette da un'immagine hero aiuta a scegliere accenti in armonia con essa, mantenere coerenti le grafiche social con le foto di prodotto o adattare il tema di un sito a un visual di campagna.
Trasformare i colori estratti in un design system
I colori estratti sono un punto di partenza, non un sistema finito. Controlla il contrasto del testo su ogni colore, assegna nomi per ruolo come primario, accento e superficie e genera tonalità più chiare e scure per stati hover e sfondi. Poi incolla le variabili CSS o il tema Tailwind nel tuo progetto.
K-means, non un semplice istogramma
Un approccio ingenuo al "pixel più comune" si fa ingannare da rumore e anti-aliasing, restituendo sfumature quasi duplicate invece di colori davvero distinti. Il clustering con k-means raggruppa prima i pixel simili, così ogni campione rappresenta una vera area di colore visivamente separata dell'immagine e non un caso statistico.
Domande frequenti
Come vengono scelti i colori dominanti?
L'immagine viene ridotta e i suoi pixel vengono raggruppati in cluster con k-means. Il centro di ogni cluster diventa un colore della palette, ordinato per quanta parte dell'immagine copre. I pixel trasparenti vengono ignorati.
Perché i colori non corrispondono esattamente ai pixel della mia foto?
Ogni colore della palette è la media di un gruppo di pixel simili, quindi rappresenta un'area dell'immagine e non un singolo pixel. È proprio ciò che rende la palette utile per il design.
Quale formato Tailwind devo usare?
Tailwind CSS v4 definisce i colori del tema in CSS con un blocco @theme, quindi usa quello per i nuovi progetti. L'opzione v3 produce uno snippet di tailwind.config.js per configurazioni più vecchie.
L'immagine viene caricata online?
No. L'immagine viene decodificata e analizzata solo nel tuo browser.
Strumenti correlati
Screenshot Beautifier
Trasforma uno screenshot in un mockup da studio con cornici finestra, tilt 3D, ombre e censure.
Screenshot Showcase Generator
Trasforma screenshot in grafiche showcase multi-device professionali.
Convertitore da Immagini a Video
Trasforma una serie di immagini in un video slideshow, esportato in MP4 o WebM.