Selettore colore immagine

Selettore di pixel o estrattore di palette, due lavori diversi

Una confusione comune che vale la pena chiarire subito: questo è un selettore di pixel, non un estrattore di palette. I due strumenti sembrano simili ed entrambi coinvolgono immagini, ma rispondono a domande diverse:

• Selettore di pixel (questo strumento): fai clic su una posizione esatta e lo strumento legge il colore di quel singolo pixel. Usalo quando ti serve il colore di un elemento specifico, il rosso del marchio su un logo, l'esatto azzurro di un cielo in una foto di riferimento, il bianco sporco di uno sfondo dell'interfaccia in uno screenshot.
• Estrattore di palette: lo strumento analizza l'intera immagine e restituisce statisticamente i 5-8 colori dominanti. Usalo quando vuoi una combinazione di colori ispirata a un'immagine nel suo insieme, non a un punto specifico.

Se invece vuoi davvero i colori dominanti statistici, lo strumento Estrattore di palette di colori gratuito è la scelta giusta. I due strumenti si completano a vicenda: estrai una palette per comprendere il racconto cromatico complessivo, poi usa questo selettore per catturare accenti specifici.

Come funziona

Il browser disegna l'immagine che hai caricato su un elemento HTML <canvas>. Quando fai clic, lo strumento chiama ctx.getImageData(x, y, 1, 1): un metodo dell'API Canvas 2D che restituisce i valori RGBA di un singolo pixel come array di quattro elementi (rosso, verde, blu, alfa). Quei valori vengono poi formattati come HEX, RGB e HSL per la visualizzazione. La lente d'ingrandimento è un secondo canvas che copia una piccola regione attorno al cursore e la mostra ingrandita, così puoi vedere esattamente quale pixel stai per selezionare. Tutto viene eseguito localmente nel tuo browser; i byte dell'immagine non vengono mai trasmessi.

Quando ricorri a un selettore di pixel

• Abbinamento del marchio: estrai il colore esatto di un logo per usarlo altrove in un progetto grafico o in un materiale di marketing.
• Fotografia di riferimento: trova la tonalità precisa del cielo, dell'incarnato o di un materiale naturale da un'immagine di riferimento.
• Controllo qualità del design: verifica che uno screenshot corrisponda al colore delle specifiche pixel per pixel.
• Reverse engineering di un sito esistente: preleva il colore effettivamente renderizzato di un pulsante o di uno sfondo quando i DevTools non sono un'opzione (uno screenshot di un collega, l'interfaccia di un concorrente).
• Analisi dei mockup: estrai i colori esatti da una mood board o da una bozza di design.
• Ispezione di screenshot da mobile: gli screenshot del telefono possono essere esaminati su desktop senza bisogno del dispositivo originale.
• Verifiche di accessibilità: leggi il colore effettivamente renderizzato del testo o degli elementi dell'interfaccia (che può differire dal CSS sorgente a causa dell'anti-aliasing o della sovrapposizione di trasparenze).

HEX, RGB, HSL, stesso colore, tre notazioni

Lo strumento emette lo stesso valore di colore in tre formati perché contesti diversi ne preferiscono di diversi:

• HEX: #2b7190. Compatto, sei caratteri, lo standard di fatto per il web design e per la maggior parte dei flussi di lavoro copia-incolla. Facile da inserire nel CSS, nei selettori di colore degli strumenti di design o nel markdown.
• RGB: rgb(43, 113, 144). La forma numerica sottostante. Utile quando devi regolare i canali in modo indipendente o quando lavori in strumenti che si aspettano valori decimali (i valori arbitrari di Tailwind, la generazione programmatica).
• HSL: hsl(199, 54%, 37%). Tonalità / saturazione / luminosità, su cui è più facile ragionare per gli esseri umani. Regolare «la stessa tonalità, leggermente più chiara» è un solo numero in HSL ma un cambiamento multicanale in HEX o RGB.

La trappola dell'anti-aliasing

Un selettore pixel-perfect legge esattamente il pixel sotto il cursore, ma nelle immagini reali quel pixel potrebbe non essere il colore che pensi. L'anti-aliasing fonde i bordi di lettere, icone e forme curve con lo sfondo circostante per farli apparire morbidi. Quindi fare clic sul «bordo» di un testo nero su bianco può darti un grigio anziché il nero puro. Due abitudini pratiche per evitare la trappola:

• Preleva dal centro delle forme piene, non dai bordi dove avviene l'anti-aliasing.
• Usa la lente d'ingrandimento per confermare di essere su un pixel che è chiaramente il colore del marchio anziché un pixel di bordo sfumato.

La compressione JPEG e perché la qualità del riferimento conta

La compressione JPEG introduce piccole distorsioni del colore, specialmente attorno ai bordi di contrasto e nelle aree piatte di colore pieno. Un «rosso puro» (#FF0000) del marchio esportato come JPEG e poi reimportato può risultare #FE0102 o simile, vicino ma non identico all'originale. Per un abbinamento esatto del marchio, preferisci:

• Immagini sorgente PNG o WebP-lossless quando prelevi colori importanti.
• File sorgente vettoriali (SVG, PDF) renderizzati a zoom elevato, i colori vettoriali sono esatti.
• Direttamente dallo strumento di design (Figma, Sketch, Photoshop) quando possibile, anziché da uno screenshot.

Alternative di contagocce a livello di browser e di sistema operativo

Diversi altri modi per prelevare colori dallo schermo:

• L'API CSS EyeDropper (new EyeDropper()). Lo stato secondo MDN: «Disponibilità limitata, questa funzionalità non è Baseline perché non funziona in alcuni dei browser più diffusi.» In pratica, supportata in Chrome ed Edge (da Chrome 95), non in Firefox o Safari. Restituisce un colore come { sRGBHex }. Buona quando supportata, ma il supporto irregolare fa sì che un selettore basato su Canvas mantenga il suo valore per l'uso cross-browser.
• macOS Digital Color Meter: app integrata di macOS che legge qualsiasi pixel sullo schermo.
• Windows PowerToys Color Picker: l'utility ufficiale PowerToys di Microsoft include un selettore di pixel.
• DevTools del browser: sia Chrome sia Firefox includono contagocce nell'interfaccia del loro selettore di colore quando si modifica il CSS nell'Inspector.

Perché un selettore basato sul web mantiene comunque il suo valore: funziona su screenshot condivisi arrivati via Slack o email, non richiede l'installazione di software, gira da qualsiasi browser su qualsiasi sistema operativo, e l'immagine non lascia mai la tua macchina.

Privacy

Le immagini spesso contengono più dei soli pixel: i metadati EXIF possono includere le coordinate GPS di dove è stata scattata la foto, il numero di serie della fotocamera e i timestamp originali di acquisizione. Gli screenshot possono contenere interfacce riservate, testo in bozza o branding pre-rilascio. I volti sono identificatori biometrici secondo le leggi sulla privacy di diverse giurisdizioni. Questo strumento viene eseguito interamente nel tuo browser, l'immagine va dal tuo file system a un canvas in memoria, viene campionata pixel per pixel, e l'unica cosa che lascia la pagina è il valore del colore quando lo copi. Gli strumenti di selezione colore lato server caricano l'intera immagine; questo è il compromesso.

Errori comuni

1. Prelevare su un bordo con anti-aliasing. Il colore che ottieni è una fusione della forma e del suo sfondo. Preleva invece dal centro delle aree piene.
2. Prelevare da un JPEG fortemente compresso. Gli artefatti di compressione spostano i colori in modo sottile. Usa una sorgente di qualità superiore per un abbinamento esatto del marchio.
3. Confondere il selettore con un estrattore di palette. Se vuoi i colori dominanti di un'immagine nel suo insieme, ti serve un estrattore di palette, non un selettore di pixel.
4. Prelevare da un PNG trasparente su uno sfondo di pagina colorato. A seconda di come il canvas compone la trasparenza, potresti finire per campionare lo sfondo della pagina attraverso il canale alfa. Converti prima l'immagine su uno sfondo noto se la precisione è importante.
5. Fidarsi esattamente del colore di uno screenshot. Alcuni monitor applicano una calibrazione del colore che sposta il colore renderizzato rispetto alla sorgente. Il valore del pixel che il selettore legge è ciò che è codificato nell'immagine, non necessariamente ciò che mostrava il display di origine.
6. Prelevare da un'immagine a bassa risoluzione e perdere dettagli. Una miniatura 200×100 di un logo offre meno pixel distinti tra cui scegliere rispetto all'asset originale. Quando possibile, lavora dalla sorgente alla massima risoluzione.

Altre domande frequenti

Qual è la differenza tra questo e un generatore di palette di colori?

Un selettore legge il colore di uno specifico pixel su cui fai clic. Un generatore di palette analizza l'intera immagine e restituisce statisticamente i colori più dominanti. Lavori diversi: i selettori sono precisi, i generatori di palette sono interpretativi. Per una palette generata dalla tua immagine, vedi Estrattore di palette di colori gratuito.

Perché il colore che prelevo è diverso dalle specifiche del marchio?

Due ragioni comuni. Primo, l'immagine da cui stai prelevando potrebbe essere stata compressa (la ricodifica JPEG sposta i colori di alcuni valori RGB). Secondo, il pixel su cui hai fatto clic potrebbe essere su un bordo con anti-aliasing che si fonde con lo sfondo. Per un abbinamento esatto del marchio, usa una sorgente vettoriale o un PNG / WebP-lossless di alta qualità e preleva dal centro delle aree piene.

Posso usarlo su dispositivi mobili?

Sì, il tocco per prelevare funziona sui dispositivi touch, anche se il comportamento della lente d'ingrandimento e la precisione esatta dei pixel possono variare a seconda del browser mobile. Per un lavoro pixel-perfect su mobile, il bersaglio tattile più grande rende difficile un selettore ancorato alla lente; valuta di effettuare le selezioni critiche per il colore su un browser desktop quando possibile.

L'immagine viene caricata da qualche parte?

No. L'immagine viene caricata in un elemento Canvas locale tramite le API FileReader / di caricamento immagini del browser; le letture dei pixel avvengono tramite getImageData; nulla viene trasmesso a un server, nessun endpoint di analisi vede l'immagine. Utile quando l'immagine contiene dati GPS EXIF, volti, screenshot di interfacce riservate o branding pre-rilascio che non vuoi caricare.

Perché prelevare un colore da un'immagine quando il CSS mostra il valore?

Il CSS mostra il colore dichiarato, ma i pixel renderizzati possono differire, gradienti, sovrapposizione di opacità, anti-aliasing, regolazioni della modalità scura, gestione del profilo colore del browser e compressione degli screenshot causano tutti una divergenza. Quando hai bisogno di sapere cosa è davvero il pixel (per il controllo qualità del design, l'accessibilità o il confronto con un riferimento), leggere direttamente il pixel renderizzato è l'unica risposta affidabile.

Perché la lente d'ingrandimento è utile?

I singoli pixel sono minuscoli, alla risoluzione tipica dello schermo i singoli pixel sono ben al di sotto della dimensione che il tuo occhio può distinguere senza aiuto. La lente d'ingrandimento mostra una vista ingrandita dell'area sotto il cursore così puoi confermare esattamente su quale pixel farai clic. Particolarmente preziosa su immagini dense, testo con anti-aliasing o forme curve dove i pixel adiacenti differiscono di piccole quantità.