Gruppo di un pixel
k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)
I pixel dello stesso gruppo vengono mediati.
Estrattore di colori da un’immagine
Analizza localmente un’immagine PNG, JPEG o WebP e recupera i suoi colori dominanti in HEX e RGB.
- Appunti
Immagine
Nessuna immagine caricata
Trascina qui un’immagine
Aggiungi un’immagine PNG, JPEG o WebP. Il file resta sul dispositivo e tutte le modifiche vengono eseguite localmente nel browser.
Ti servono più opzioni?
Usa più strumenti di modifica in un unico spazio, con il file aperto e le modifiche in corso.
Apri l’editor completoElaborazione…0 %
Questo strumento ti è stato utile?
Come funziona questo strumento?
Una foto, un manifesto o un logo contengono pochi colori dominanti che ne fanno l’identità. Questo estrattore li trova automaticamente, da 4 a 12 a scelta, con il codice esadecimale e la parte dell’immagine che occupano. Serve a riportare l’atmosfera di una foto in un mockup, a recuperare i colori di un logo senza file sorgente o a costruire una palette coerente con un’immagine di copertina.
Importa un’immagine PNG, JPEG o WebP, scegli il Numero di colori (4, 6, 8, 10 o 12; 6 di default) e fai clic su Estrai la palette. Per essere rapida, l’analisi lavora su una copia ridotta a 420 px sul lato più lungo; i pixel quasi trasparenti vengono ignorati.
I colori sono raggruppati per gradini di 24 livelli su ciascun canale rosso, verde e blu, e ogni gruppo prende il colore medio dei suoi pixel. Si conservano i gruppi più numerosi, poi i colori a meno di 28 di distanza nello spazio RGB vengono uniti: due rossi quasi uguali contano come uno solo.
La palette compare dal colore più presente al meno presente. Ogni campione indica il codice HEX e la percentuale dell’immagine analizzata che rappresenta; un clic copia il codice. Un’immagine poco colorata può restituire meno colori di quelli richiesti.
Come usare questo strumento
Importa l’immagine
Trascina una foto, uno screenshot o un logo in PNG, JPEG o WebP.
Scegli il numero di colori
4 per un logo semplice, da 8 a 12 per una foto ricca di sfumature.
Estrai e copia
Fai clic su Estrai la palette e poi su un campione per copiarne il codice HEX.
Come viene calcolata la palette
L’estrazione combina una quantizzazione a gradini, l’unione dei colori vicini e un calcolo di quota.
Unione dei colori vicini
d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28
Due colori più vicini di 28 vengono uniti in una media ponderata.
Quota dell’immagine
p = nc ÷ n_opachi × 100
Arrotondata al decimo.
- R, G, B
- canali rosso, verde e blu da 0 a 255
- nc
- numero di pixel attribuiti al colore
- n_opachi
- numero di pixel analizzati non trasparenti
Casi d’uso
Riprendere l’atmosfera di una foto
Recupera i toni di una foto di copertina per colorare titoli e pulsanti di una pagina.
Recuperare i colori di un logo
Ottieni i codici HEX di un logo di cui hai solo un’immagine PNG.
Verificare un’identità visiva
Controlla che un progetto usi davvero i colori del marchio nelle giuste proporzioni.
Esempi
Foto di spiaggia con zona trasparente
I 200 pixel trasparenti sono esclusi dal calcolo, da cui 600 ÷ 1000 = 60 %. Esistono solo 3 colori distinti, quindi la palette ne contiene 3 e non 4.
Input
Immagine di 1.200 pixel: 600 azzurro cielo (135, 206, 235), 300 sabbia (228, 197, 144), 100 grigio scuro e 200 trasparenti; 4 colori richiestiRisultato
#87CEEB 60 % · #E4C590 30 % · #282828 10 %Due rossi quasi identici
I due rossi distano √(15² + 10² + 5²) ≈ 18,7 < 28: vengono uniti in una media ponderata (206, 34, 32) che rappresenta l’80 % dell’immagine.
Input
500 pixel (200, 30, 30), 300 pixel (215, 40, 35) e 200 pixel blu (30, 60, 200)Risultato
#CE2220 80 % · #1E3CC8 20 %Consigli e buone pratiche
- Ritaglia prima l’immagine sulla zona che ti interessa: un grande sfondo bianco o un cielo occuperebbero il primo posto della palette.
- Con una foto chiedi più colori del necessario, poi tieni quelli che stanno bene insieme.
- I colori estratti sono medie: per il codice esatto di un pixel, ingrandisci una zona uniforme e verifica con il convertitore di colori.
- Prova poi la palette con il simulatore di daltonismo se deve servire a distinguere delle informazioni.
Fonti e riferimenti
- MDN Web Docs, Pixel manipulation with canvas (si apre in una nuova scheda)Pagina in inglese
Domande frequenti
Come sceglie lo strumento i colori dominanti?
Raggruppa i pixel vicini per gradini di 24 livelli per canale, conserva i gruppi più numerosi, unisce i colori troppo simili e ordina il risultato per quota dell’immagine.
Perché ottengo meno colori di quelli richiesti?
Perché l’immagine non ne contiene abbastanza di distinti: dopo l’unione dei toni vicini possono restare meno colori del numero scelto.
Che cosa indica la percentuale?
La quota dei pixel analizzati, esclusi quelli trasparenti, attribuiti a quel colore. La somma può essere inferiore al 100 % se i colori secondari non sono mostrati.
I codici sono esatti al pixel?
Sono medie di gruppi di pixel calcolate su una copia ridotta a 420 px. Riflettono fedelmente l’atmosfera, non il valore di un singolo pixel.
Le zone trasparenti contano?
No. I pixel con opacità molto bassa vengono ignorati, così un logo scontornato non restituisce nero o bianco indesiderati.
La mia immagine viene caricata su un server?
No. Campionamento e calcolo della palette avvengono nel tuo browser.
Strumenti correlati
Continua con questi strumenti
Strumenti simili o complementari a questo.
Strumenti simili
Crea una tavolozza complementare, analoga, triadica o monocromatica a partire da un colore.
Immagini e graficaUsa questo strumento
Converti un colore tra HEX, RGB e HSL con i valori equivalenti.
Immagini e graficaUsa questo strumento
Visualizza un’immagine come può essere percepita con diversi tipi di daltonismo.
Immagini e graficaUsa questo strumento
Leggi anche
RiferimentoConcetti e tecnologiePrincipiante
Come è costruita un’immagine digitale?
Scopri come pixel, canali di colore, profondità e trasparenza si combinano per formare un’immagine visualizzata sullo schermo.
31 agosto 20263 min
GuidaBuone pratichePrincipiante
Come creare una palette di colori da un’immagine?
Estrai i colori dominanti di un’immagine, assegna loro un ruolo e crea una palette coerente senza confondere frequenza e importanza visiva.
31 agosto 20263 min
RiferimentoConcetti e tecnologiePrincipiante
RGB, HEX o HSL: quale notazione scegliere?
Comprendi come RGB, HEX e HSL descrivono i colori sRGB per scegliere una notazione CSS leggibile e convertire i valori senza confusione.
31 agosto 20263 min
GuidaBuone pratichePrincipiante
Contrasto WCAG: come rendere accessibili i colori?
Comprendi le soglie di contrasto WCAG, misura una combinazione di colori e correggi i casi che ostacolano la lettura o l’uso dell’interfaccia.
31 agosto 20264 min