Immagine & Foto

Selettore di Colore da Immagine

Trascina una foto o uno screenshot, passa il mouse per una lente ingranditrice, clicca per scegliere un pixel — copia HEX, RGB o HSL e assembla una palette di fino a 20 colori come variabili CSS pronte per il copia e incolla.

Trascina la tua immagine qui

o clicca per sfogliare — JPG, PNG, WebP, GIF o BMP fino a 25 MB.

Privato per design. L'immagine viene decodificata e campionata interamente nel tuo browser tramite l'API Canvas. Niente viene caricato su un server.

Cos'è un selettore di colore da immagine?

Un selettore di colore da immagine legge il valore RGB esatto di un singolo pixel da una foto, screenshot o mock-up di design, così puoi usare quel colore altrove — in una palette di marca, una variabile CSS, un token di tema o un abbinamento di vernice. I designer lo usano per estrarre colori da bacheche di ispirazione. Gli sviluppatori front-end lo usano per abbinare uno screenshot a un tema CSS. I marketer lo usano per estrarre colori di marca da un logo. I pittori e gli artigiani lo usano per abbinare una foto del mondo reale a un chip di vernice o a un filo. A differenza di un rilevatore di 'colore dominante', questo strumento ti dà il controllo pixel per pixel: passa il mouse per visualizzare in anteprima, clicca per catturare. La lente ingranditrice ti mostra il pixel esatto sotto il cursore con uno zoom di 8×, quindi scegliere un singolo evidenziatore o un bordo di 1 pixel è semplice. Tutto funziona nel tuo browser — la tua immagine non lascia mai la pagina.

Come scegliere colori da un'immagine

1
Trascina la tua immagine
Trascina un file JPG, PNG, WebP, GIF o BMP nell'area di caricamento, oppure clicca per scegliere dal tuo dispositivo. L'immagine viene visualizzata nell'area di lavoro in scala di anteprima, ma il campionamento dei pixel avviene contro la copia a risoluzione originale.
2
Passa il mouse per visualizzare un colore
Sposta il cursore sopra l'immagine. Una lente ingranditrice appare sopra il cursore mostrando il pixel esatto sotto di esso con uno zoom di 8×, con un marcatore di 1 pixel al centro. La scheda del colore del cursore sotto il canvas si aggiorna in tempo reale con HEX, RGB e HSL.
3
Clicca per aggiungere un colore alla tua palette
Clicca su qualsiasi pixel per aggiungere il suo colore alla palette. I duplicati vengono automaticamente saltati, quindi è sicuro cliccare in giro senza gonfiare l'elenco. Fino a 20 colori possono essere inseriti in una palette.
4
Copia qualsiasi valore con un clic
Clicca su qualsiasi HEX, RGB o HSL nella palette per copiarlo negli appunti. Clicca sul campione stesso per copiare il suo HEX. L'intera palette può anche essere esportata come un blocco di proprietà CSS personalizzate (--color-1, --color-2, …).
5
Ripristina e prova un'immagine diversa
Clicca su Nuova immagine per pulire l'area di lavoro e caricare un file diverso. Usa Pulisci all'interno della scheda della palette per mantenere l'immagine ma ricominciare la palette.

Come funziona il campionamento dei pixel nel browser

1. Decodifica il file sorgente con new Image() — il browser gestisce JPG/PNG/WebP/GIF/BMP nativamente.
2. Disegna l'immagine a risoluzione originale su un canvas off-screen.
3. Rendi un'anteprima ridimensionata sul canvas visibile (max 900 px sul lato più lungo).
4. Al passaggio del mouse, mappa le coordinate del cursore (x,y) dallo spazio di anteprima a quello sorgente.
5. Leggi il pixel tramite getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Converti in HEX (R/G/B come esadecimale a 2 cifre) e HSL (rgbToHsl).

Il campionamento contro il canvas a piena risoluzione (anziché l'anteprima) è importante perché il ridimensionamento media i pixel vicini — ciò che sembra un rosso pulito su un'anteprima alta 100px potrebbe essere (240, 30, 30) invece dell'esatto (255, 0, 0) della sorgente. Mappare le coordinate del cursore di nuovo alla risoluzione sorgente e campionare lì mantiene il colore scelto fedele al file originale. La lente ingranditrice adotta lo stesso approccio: cattura un piccolo quadrato del canvas a risoluzione originale attorno al cursore e lo rende a 8× in un cerchio di 120 pixel, con imageSmoothingEnabled = false in modo che i singoli pixel rimangano nitidi.

Riferimento: MDN — CanvasRenderingContext2D.getImageData

Lavori comuni di selezione dei colori

Fonte	Miglior flusso di lavoro
Logo di marca PNG con uno sfondo trasparente	Sposta la lente sopra l'area colorata solida, clicca una volta. Copia l'HEX. Fatto in due clic. La trasparenza PNG si presenta contro lo sfondo della pagina — campiona all'interno del logo, non sul bordo.
Screenshot di ispirazione da un sito di design	Seleziona lo sfondo, il colore dell'azione principale, l'accento secondario e il colore del testo del corpo. Copia le variabili CSS. Palette di quattro colori sono solitamente sufficienti per ricreare un sistema di design.
Foto per riferimento artistico (gradiente del cielo, corrispondenza della vernice)	Usa la lente per selezionare pixel esatti lungo il gradiente. Crea una palette di 5-7 colori per ricreare l'aspetto. I gradienti fotografici hanno rumore — seleziona da aree dall'aspetto solido, non dai bordi.
Screenshot di segnalazione bug con la tonalità di rosso sbagliata	Sposta la lente sopra il rosso errato, copia l'HEX, incolla nel problema con l'HEX atteso accanto. La lente rende selezionabili bordi di 1 pixel e linee sottili senza ingrandire il browser.

Quando usare un selettore di colori per immagini

Estrai i colori del marchio da un logo PNG per costruire una palette di variabili CSS.
Abbina uno screenshot da un sito di design al tuo foglio di stile senza aprire Figma.
Estrai una palette di riferimento di 5-7 colori da una foto per pittura, maglieria o lavoro di texture 3D.
Verifica il colore esatto prodotto da un renderer — utile quando uno screenshot appare 'sbagliato' ma non riesci a capire perché.
Campiona colori da un moodboard o uno screenshot di ispirazione per una presentazione.
Seleziona un colore di vernice o tessuto da una foto del mondo reale (blu cielo, terracotta, ecc.) per un redesign.
Costruisci una palette di temi direttamente da un'immagine principale in modo che l'interfaccia circostante sembri visivamente unificata.

Strumenti correlati

Rimuovi Sfondo

Ritaglia il soggetto da qualsiasi foto con AI su dispositivo — nessun upload richiesto.

Compressore di Immagini

Riduci le dimensioni dei file JPG, PNG o WebP nel tuo browser con un cursore di qualità interattivo.

Editor Fotografico

Regola, filtra, ruota e ritaglia foto nel browser — senza caricamenti, senza filigrana.

Creatore di Meme

Crea meme e collage di screenshot con veri livelli — incolla, trascina, ritaglia, aggiungi didascalie, esporta.

Domande frequenti

I colori sono selezionati dal file originale o dall'anteprima?

Dal file originale. Il canvas visibile viene ridotto per prestazioni, ma il campionamento dei pixel avviene contro una copia off-screen a risoluzione completa. Le coordinate del cursore vengono mappate di nuovo nello spazio sorgente prima di leggere il pixel, quindi il colore che copi corrisponde a quello presente nel file che hai caricato.

Perché il mio HEX selezionato differisce dal valore nel mio strumento di design?

Due cause comuni. Prima, la compressione JPG media i pixel vicini, quindi una regione di colore 'piatto' può avere alcuni valori HEX all'interno di un intervallo RGB di 1-2 unità — seleziona dal centro visivo, non dal bordo. Secondo, i browser e gli strumenti di design a volte applicano la gestione del colore; per una fedeltà assoluta, lavora con fonti PNG, che preservano l'RGB esatto.

L'immagine viene caricata su un server?

No. La decodifica, il rendering e il campionamento dei pixel avvengono tutti nel tuo browser tramite l'API Canvas. Puoi verificare nella scheda di rete che nessun byte dell'immagine lascia la pagina dopo il caricamento.

Perché la lente ingrandisce così tanto?

L'ingrandimento 8× senza sfocatura rende visibili i singoli pixel, che è l'intero punto — selezionare un bordo di 1 pixel o un singolo evidenziatore è impossibile a 1× perché il cursore stesso è più grande del pixel. Il marcatore bianco e nero di 1 pixel al centro della lente mostra esattamente quale pixel sarà campionato se clicchi.

Posso selezionare più di 20 colori?

Ventidue è il limite perché la maggior parte dei casi d'uso delle palette (sistemi di marca, corrispondenza di vernice, generazione di temi) richiede 5-12 colori e qualsiasi cosa più grande diventa ingombrante. Se raggiungi il limite, le voci più vecchie vengono eliminate per fare spazio a nuove selezioni.

E i pixel trasparenti nei PNG?

Se clicchi su un pixel completamente trasparente, il selettore legge (0, 0, 0) poiché l'RGB sottostante è 0. Per selezionare il colore visibile, sposta la lente sopra un'area completamente opaca dell'immagine. I loghi con sfondi trasparenti funzionano finché clicchi all'interno della forma colorata.

Qual è la differenza tra questo e il Convertitore di Colori?

Il Convertitore di Colori prende un HEX o RGB che già conosci e converte tra formati. Questo strumento estrae il colore da un pixel in un'immagine. Usa prima il selettore per estrarre colori da uno screenshot, poi il convertitore se hai bisogno di OKLCH o di qualsiasi altro formato che il selettore non rende.

Ultimo aggiornamento 2026-04-29

Caricamento...

Cos'è un selettore di colore da immagine?

Come scegliere colori da un'immagine

Trascina la tua immagine

Trascina un file JPG, PNG, WebP, GIF o BMP nell'area di caricamento, oppure clicca per scegliere dal tuo dispositivo. L'immagine viene visualizzata nell'area di lavoro in scala di anteprima, ma il campionamento dei pixel avviene contro la copia a risoluzione originale.

Passa il mouse per visualizzare un colore

Sposta il cursore sopra l'immagine. Una lente ingranditrice appare sopra il cursore mostrando il pixel esatto sotto di esso con uno zoom di 8×, con un marcatore di 1 pixel al centro. La scheda del colore del cursore sotto il canvas si aggiorna in tempo reale con HEX, RGB e HSL.

Clicca per aggiungere un colore alla tua palette

Clicca su qualsiasi pixel per aggiungere il suo colore alla palette. I duplicati vengono automaticamente saltati, quindi è sicuro cliccare in giro senza gonfiare l'elenco. Fino a 20 colori possono essere inseriti in una palette.

Copia qualsiasi valore con un clic

Clicca su qualsiasi HEX, RGB o HSL nella palette per copiarlo negli appunti. Clicca sul campione stesso per copiare il suo HEX. L'intera palette può anche essere esportata come un blocco di proprietà CSS personalizzate (--color-1, --color-2, …).

Ripristina e prova un'immagine diversa

Clicca su Nuova immagine per pulire l'area di lavoro e caricare un file diverso. Usa Pulisci all'interno della scheda della palette per mantenere l'immagine ma ricominciare la palette.

Come funziona il campionamento dei pixel nel browser

1. Decodifica il file sorgente con new Image() — il browser gestisce JPG/PNG/WebP/GIF/BMP nativamente.
2. Disegna l'immagine a risoluzione originale su un canvas off-screen.
3. Rendi un'anteprima ridimensionata sul canvas visibile (max 900 px sul lato più lungo).
4. Al passaggio del mouse, mappa le coordinate del cursore (x,y) dallo spazio di anteprima a quello sorgente.
5. Leggi il pixel tramite getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Converti in HEX (R/G/B come esadecimale a 2 cifre) e HSL (rgbToHsl).

Lavori comuni di selezione dei colori

Fonte	Miglior flusso di lavoro
Logo di marca PNG con uno sfondo trasparente	Sposta la lente sopra l'area colorata solida, clicca una volta. Copia l'HEX. Fatto in due clic. La trasparenza PNG si presenta contro lo sfondo della pagina — campiona all'interno del logo, non sul bordo.
Screenshot di ispirazione da un sito di design	Seleziona lo sfondo, il colore dell'azione principale, l'accento secondario e il colore del testo del corpo. Copia le variabili CSS. Palette di quattro colori sono solitamente sufficienti per ricreare un sistema di design.
Foto per riferimento artistico (gradiente del cielo, corrispondenza della vernice)	Usa la lente per selezionare pixel esatti lungo il gradiente. Crea una palette di 5-7 colori per ricreare l'aspetto. I gradienti fotografici hanno rumore — seleziona da aree dall'aspetto solido, non dai bordi.
Screenshot di segnalazione bug con la tonalità di rosso sbagliata	Sposta la lente sopra il rosso errato, copia l'HEX, incolla nel problema con l'HEX atteso accanto. La lente rende selezionabili bordi di 1 pixel e linee sottili senza ingrandire il browser.

Quando usare un selettore di colori per immagini

Estrai i colori del marchio da un logo PNG per costruire una palette di variabili CSS.

Abbina uno screenshot da un sito di design al tuo foglio di stile senza aprire Figma.

Estrai una palette di riferimento di 5-7 colori da una foto per pittura, maglieria o lavoro di texture 3D.

Verifica il colore esatto prodotto da un renderer — utile quando uno screenshot appare 'sbagliato' ma non riesci a capire perché.

Campiona colori da un moodboard o uno screenshot di ispirazione per una presentazione.

Seleziona un colore di vernice o tessuto da una foto del mondo reale (blu cielo, terracotta, ecc.) per un redesign.

Costruisci una palette di temi direttamente da un'immagine principale in modo che l'interfaccia circostante sembri visivamente unificata.