Catturare il colore di un pixel di un'immagine

Dashboard
Documentazione
API

recupera il colore esatto di un pixel della tua immagine (RGB, HSL, esadecimale) cliccando sul punto di tua scelta

Cos'è un color picker di immagine?

Un color picker (in italiano pipetta di colori o cattura di colore) è uno strumento che restituisce il valore esatto di un pixel scelto su un'immagine. Caricate una foto, cliccate sul punto che vi interessa, e lo strumento restituisce il colore preciso in forma HEX, RGB e HSL. È l'equivalente web della pipetta dei software di design come Photoshop, GIMP o Figma.

Il nostro strumento funziona direttamente nel browser. Caricate la vostra immagine, viene mostrata nella pagina, e basta cliccare su un pixel per recuperare il suo colore. La lettura del pixel avviene lato client tramite l'API canvas, senza andata e ritorno al server, senza ricompressione e senza invio dell'immagine in rete per la selezione.

Differenza con un estrattore di colori

Il nostro estrattore di colori e il nostro color picker rispondono a due esigenze distinte, che è utile distinguere bene:

L'estrattore analizza l'insieme dell'immagine e restituisce la palette dominante (le 5, 8 o 10 tonalità più rappresentate). È lo strumento di scelta per sintetizzare l'atmosfera cromatica di una foto, creare un mood board o nutrire una linea grafica.
Il color picker restituisce il colore esatto di un pixel preciso che designate. È lo strumento di scelta quando sapete dove guardare: un logo in uno screenshot, una sfumatura precisa di un gradiente, uno sfondo di riferimento.

L'estrattore lavora su milioni di pixel e applica il clustering per far emergere gruppi di colori; il picker si limita a leggere il valore RGB memorizzato nella posizione che cliccate. Il primo generalizza, il secondo è chirurgico.

Come funziona, tecnicamente

Un'immagine digitale è una griglia di pixel, ogni pixel porta tre canali RGB (rosso, verde, blu) codificati in genere su 8 bit, ossia 256 valori per canale. Quando cliccate su un punto, lo strumento:

Disegna la vostra immagine in un elemento canvas, conservando le sue dimensioni native (con un tetto di 1500 pixel di larghezza per restare confortevole a schermo).
Converte la posizione del click in coordinate immagine native, compensando il ridimensionamento di visualizzazione del browser.
Legge il valore RGBA del pixel tramite l'API canvas.getContext('2d').getImageData(x, y, 1, 1).
Mostra un'anteprima del colore selezionato. Alla sottomissione, il server legge la stessa posizione con PHP GD e calcola i codici HEX, RGB e HSL definitivi.

Il valore HSL viene calcolato dal nostro servizio di conversione colore, identico a quello che usa il nostro convertitore di colori. Coerenza da un capo all'altro, ottenete gli stessi valori come se aveste digitato il codice HEX nel convertitore.

Casi d'uso tipici

Riprodurre un colore da uno screenshot: avete uno screenshot di un sito, volete riprendere esattamente la tonalità di un pulsante o di uno sfondo. Il picker vi dà il codice HEX preciso da reincollare nel vostro CSS.
Identificare un colore di linea grafica su una foto: un PDF di presentazione, una pagina di rivista, un visual prodotto. Niente più bisogno di chiedere la linea grafica, leggete il colore direttamente.
Reverse engineering di identità visiva: catturare il blu esatto di un logo, il rosa di un banner, l'arancione di una call to action.
Ispirazione e watch design: vedete una foto che vi piace, recuperate la tonalità esatta di un fiore, di un muro, di un poster.
Debug front-end: uno screenshot di bug mostra un colore errato, leggete il valore reale per confrontarlo con quello atteso nel mockup.
Creazione di palette a partire da un riferimento: prelevate più punti di una stessa immagine per ricostituire una palette personalizzata.

Come usare il color picker

Caricate la vostra immagine (PNG, JPG, GIF, BMP, WebP, fino a 20 MB).
Una preview appare nella pagina. Cliccate su un pixel per recuperare il suo colore.
Un mirino marca la posizione cliccata e un'anteprima del colore appare di fianco.
Validate con il pulsante di sottomissione per ottenere la resa finale: quadrato colorato, codice HEX, RGB e HSL.
Per trasformare il valore tra formati, passate per il nostro convertitore di colori.

Domande frequenti

Qual è la differenza tra HEX, RGB e HSL?

Sono tre rappresentazioni dello stesso colore. HEX (#ff0000) è il formato più usato in CSS. RGB esprime i tre canali rosso / verde / blu in valori 0-255. HSL (Hue, Saturation, Lightness) è più intuitivo per regolare una tonalità: è il formato da privilegiare quando volete scurire, desaturare o modificare un colore senza cambiare la tonalità di base.

Perché il mio click non restituisce esattamente il colore atteso?

Su una zona di gradiente, due pixel vicini possono avere valori molto diversi. Inoltre, le immagini JPG sono compresse con perdita: il colore di un pixel può differire leggermente dall'originale. Per codici colore affidabili, preferite PNG o immagini non ricompresse.

Le mie coordinate sono quelle dello schermo o dell'immagine?

Quelle dell'immagine originale. Il nostro script JavaScript converte automaticamente la posizione del click (in pixel di schermo) nella posizione nell'immagine nativa. Se la vostra immagine è di 4000x3000 e viene mostrata a 800x600, un click al centro vi restituirà (2000, 1500) e non (400, 300).

Il picker funziona con immagini trasparenti?

Sì. Se cliccate su un pixel trasparente, recuperate il colore RGB memorizzato in quel punto (spesso bianco o nero a seconda dell'editor originale). La trasparenza stessa (canale alpha) non viene restituita nel risultato; per analizzare un canale alpha, aprite l'immagine in un editor grafico.

Quale dimensione di immagine è accettata?

Fino a 20 MB, formati PNG, JPG, GIF, BMP e WebP. Le immagini molto grandi vengono mostrate a 1500 pixel di larghezza massima per restare confortevoli a schermo, ma il colore letto resta quello del pixel originale, senza ricampionamento.

Le mie immagini vengono memorizzate sul server?

No. La selezione avviene nel vostro browser. Al momento della sottomissione, il file viene elaborato al volo per confermare il colore del pixel richiesto, poi il file temporaneo viene eliminato. Nessuna immagine viene conservata, indicizzata o condivisa.

Cosa succede se JavaScript è disabilitato?

La sottomissione classica del form resta possibile. Le coordinate x e y sono gestite da campi nascosti che JavaScript riempie al click. Senza JavaScript, questi campi restano vuoti e il form segnalerà che manca una posizione, ma l'immagine stessa viene comunque trasmessa al server per l'elaborazione.

Esempio di richiesta

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Schema di input

Campo	Tipo	Richiesto	Predefinito
`image`	file	✓	–
`x`	string	–	–
`y`	string	–	–

questo strumento si aspetta un file - utilizzare Content-Type multipart/form-data invece di application/json

Endpoint

GET https://cdrn.fr/api/v1/tools - elenca tutti gli strumenti disponibili
GET https://cdrn.fr/api/v1/tools/color-picker - recupera lo schema di questo strumento
POST https://cdrn.fr/api/v1/tools/color-picker/execute - esegue questo strumento con un payload JSON