Selettore colori da immagine

Carica o incolla l'immagine qui e clicca sul pixel che vuoi — lo strumento lo legge tramite canvas HTML e mostra istantaneamente i valori HEX, RGB e HSL, copiando il codice hex negli appunti. La lente di ingrandimento mostra i singoli pixel intorno al cursore così riesci a colpire esattamente quello giusto. Non avviene alcun upload a un server in nessun momento; tutto funziona nel browser grazie all'API canvas HTML5. Questo lo rende istantaneo, privato e utilizzabile offline una volta caricata la pagina. Per le aree difficili da cliccare come il testo anti-aliasing o i bordi dei loghi, ingrandisci prima con lo zoom integrato del browser prima di fare clic.

Usa questo contagocce gratuito basato su browser: inserisci l'immagine, clicca su un pixel e copia il codice. Niente da installare, nessuna registrazione. A differenza di Adobe Photoshop o Illustrator — entrambi a partire da circa 20 €/mese — questo strumento è completamente gratuito. A differenza di Digital Color Meter di macOS o Color Picker di Windows PowerToys, estrae anche automaticamente la palette dominante dell'immagine, così ottieni tutti i colori principali in una volta anziché cliccarli uno per uno. imagecolorpicker.com è l'alternativa dedicata più popolare, ma carica il tuo file su un server; questo strumento no.

Entrambi codificano lo stesso colore in due modi diversi. HEX scrive rosso/verde/blu come tre coppie esadecimali (#FF5733) ed è lo standard in CSS e nel web design; RGB usa tre numeri decimali da 0 a 255 — rgb(255, 87, 51) — comune negli editor di immagini e nel codice. La conversione tra i due è senza perdita di dati, e questo strumento mostra entrambi per ogni pixel su cui fai clic. Usa HEX quando scrivi CSS o classi Tailwind; usa RGB quando lavori con canvas, WebGL, o codice di elaborazione immagini che si aspetta canali numerici. Entrambi i formati descrivono lo stesso punto cromatico sRGB.

HSL descrive un colore tramite Tonalità (0-360°), Saturazione e Luminosità — il che è più intuitivo per regolare i colori. Puoi rendere un colore più chiaro o meno saturo senza cambiarne affatto la tonalità. CSS supporta hsl() nativamente, quindi i designer spesso lavorano in HSL quando costruiscono una palette: aumenta la Luminosità per una tinta, riducila per un'ombra. Il selettore mostra HEX, RGB e HSL per ogni pixel, così puoi copiare qualunque formato ti serva nel tuo flusso di lavoro. Per Figma, Sketch o Adobe XD, HEX è di solito il formato più veloce da incollare; per Tailwind o le proprietà CSS personalizzate, HEX e HSL funzionano entrambi bene.

Basta caricare la foto — la palette dominante appare automaticamente. Lo strumento quantizza i pixel dell'immagine in cluster e li ordina per frequenza, restituendo gli otto colori più dominanti come campioni con codici HEX. Clicca su qualsiasi campione per copiarlo, oppure copia l'intera palette in una sola volta. Adobe Color e il generatore di palette di Canva fanno la stessa cosa ma richiedono un account; Coolors.co può generare palette dalle foto ma invia l'immagine al suo server. Qui l'estrazione della palette avviene interamente nel browser — niente upload, nessun account richiesto e nessuna pubblicità che interrompe il flusso di lavoro.

L'immagine viene disegnata su un elemento canvas HTML nel browser; cliccando si leggono i valori rosso, verde e blu di quel pixel tramite l'API getImageData e si convertono in HEX, RGB e HSL. Poiché canvas funziona localmente, non è coinvolto alcun server. La lente di ingrandimento usa un secondo elemento canvas per ingrandire la regione di pixel intorno al cursore, permettendoti di individuare esattamente il pixel giusto anche su immagini con dettagli fini come testo anti-aliasing, bordi di loghi o sfumature fotografiche.

Con questo strumento, sì — l'immagine viene caricata solo nella memoria del browser e non viene mai trasmessa da nessuna parte. Puoi verificarlo nella scheda Rete del browser: non vengono effettuate richieste dopo il caricamento della pagina. Questo è importante per i design non pubblicati, i loghi dei clienti e le foto private. Molti selettori basati su upload — tra cui imagecolorpicker.com e alcune funzionalità di Canva — inviano il tuo file a un server e lo archiviano temporaneamente. Questo strumento elabora tutto localmente, quindi i tuoi file rimangono sul dispositivo e scompaiono quando chiudi la scheda.

Sì — il pulsante 'Seleziona dallo schermo' usa l'API EyeDropper (supportata in Chrome ed Edge) per campionare qualsiasi pixel in qualsiasi punto del display, incluse altre finestre, app e schede del browser. Il colore selezionato appare nello stesso pannello HEX/RGB/HSL e nella cronologia dei campionamenti da immagine. Per i browser privi dell'API (Safari, Firefox), il flusso di lavoro con incolla copre la lacuna: fai uno screenshot con Stamp (o Cmd+Maiusc+4 su Mac), poi incollalo direttamente in questa pagina con Ctrl+V — non è necessario salvare prima il file. Questo funziona per fotogrammi video, PDF nel browser e qualsiasi pagina web aperta.

Salva o fotografa il logo e caricalo qui, poi clicca sul colore del brand e copia il codice HEX. Oppure salta lo screenshot: usa il pulsante contagocce schermo per campionare il sito web live direttamente mentre è aperto in un'altra scheda. È più veloce che usare i DevTools del browser per ispezionare gli stili calcolati, in particolare quando il colore è incorporato in un SVG o in una risorsa immagine anziché in una proprietà CSS. La cronologia dei campionamenti conserva gli ultimi 16 colori, così puoi raccogliere un'intera palette brand da più fonti prima di passare allo strumento di design.

La maggior parte delle palette utilizzabili ha 3–6 colori: un colore dominante, uno o due secondari e degli accenti. Il selettore restituisce otto campioni dominanti così puoi scegliere il sottoinsieme più adatto — copia i singoli campioni o prendi l'intero set per una mood board. In pratica, quattro colori è un ottimo punto di partenza: un primario, un secondario, un neutro e un accento. I design system di aziende come Stripe e Linear usano palette compatte con molte varianti di luminosità e saturazione degli stessi toni, anziché molti colori distinti.

HEX per CSS e web (il più comune nei codebase e negli strumenti di design), RGB/RGBA per schermi e codice canvas, HSL per la costruzione di palette e le modifiche sistematiche, e CMYK per la stampa. Figma, Sketch e Adobe XD supportano tutti HEX, RGB e HSL. Questo selettore mostra HEX, RGB e HSL per ogni pixel così puoi copiare quello che ti serve senza conversioni manuali. Se hai bisogno anche del CMYK per la stampa, incolla il codice HEX in un convertitore online gratuito — l'API canvas non produce CMYK nativamente.

Cliccare su un pixel copia automaticamente il suo codice HEX negli appunti. Ogni riga di valore, campione nella cronologia e chip della palette è anche cliccabile per copiare — basta cliccare sul valore o sul campione e viene copiato. La cronologia dei campionamenti conserva gli ultimi 16 colori così puoi raccogliere diverse tonalità da un'immagine in sequenza prima di passare a un'altra. Passa il cursore sui campioni per vedere i loro valori prima di fare clic. Se hai bisogno dell'intera palette come elenco, usa 'Copia tutti' per ottenere tutti e otto i codici hex separati da virgola, pronti per essere incollati in variabili CSS o in un documento di design.

Sì — fai uno screenshot del fotogramma o della pagina e incollalo nel selettore con Ctrl+V (non è necessario salvare un file), oppure usa il contagocce schermo per campionare direttamente mentre il PDF o il video è in riproduzione. Per i PDF aperti nel browser, il contagocce schermo è di solito il metodo più rapido: apri il PDF in Chrome, clicca su 'Seleziona dallo schermo', poi clicca sul colore che vuoi. Per i video, metti in pausa sul fotogramma prima per ottenere il campione più accurato.

I browser possono applicare la conversione del profilo colore (ICC) durante il rendering delle immagini, e gli screenshot ereditano il profilo colore del display. Il selettore riporta i valori pixel sRGB effettivi come renderizzati dal browser — i valori che useresti in CSS — il che è corretto per il lavoro web. Se noti una discrepanza rispetto a Photoshop o Figma, verifica che il display sia calibrato su sRGB e che il file immagine abbia un profilo colore incorporato corrispondente. Per le risorse logo, il designer dovrebbe idealmente fornire direttamente i valori HEX del brand anziché fare affidamento sull'estrazione.

imagecolorpicker.com è l'alternativa più utilizzata — offre la selezione del singolo pixel e l'estrazione della palette, ma carica l'immagine sul suo server e mostra annunci. Adobe Color estrae palette dalle foto ma richiede un account Adobe e invia le immagini ai server di Adobe; non offre inoltre la selezione del singolo pixel con lente di ingrandimento. Il selettore colore di Canva è integrato nell'editor Canva e funziona solo su immagini all'interno di un progetto Canva. Digital Color Meter di macOS e Color Picker di Windows PowerToys funzionano per il campionamento dello schermo ma non estraggono palette dai file. Questo strumento è l'unica opzione gratuita, completamente lato client, con lente di ingrandimento, contagocce schermo, cronologia a 16 colori ed estrazione palette combinati — nessun account, nessuna pubblicità, nessun upload.