Il selettore di colore HEX da immagine: estrarre pixel per pixel il codice esadecimale
Questa pagina trasforma un’immagine locale in una sorgente di campioni di colore, restituendo per ogni pixel il suo codice esadecimale (HEX) a sei cifre, insieme ai valori RGB e HSL. Il selettore è pensato per chi lavora con il Web e il design: il codice HEX è il formato standard per CSS, privo di parentesi o sintassi aggiuntive, e può essere copiato direttamente in color, background-color o qualsiasi proprietà di colore.
Come funziona: da file a codice esadecimale
Carichi un’immagine nei formati supportati (PNG, JPG, WebP, GIF, AVIF, HEIC). Appena caricata, la pagina mostra immediatamente il colore del pixel centrale, con le sue coordinate (x, y), il codice HEX, i valori RGB e HSL. Spostando il mouse sull’immagine, il colore campionato cambia pixel per pixel. Una lente d’ingrandimento aiuta a centrare esattamente il punto desiderato, particolarmente utile in aree anti-aliased o compresse.
Cliccando sull’immagine salvi il colore visualizzato nella cronologia dei “picks”. Puoi usare anche la tastiera: i tasti freccia muovono un mirino pixel per pixel; tenendo premuto Shift si sposta di 10 pixel alla volta. Invio o Spazio salvano il colore corrente.
Output immediato
- Dimensioni immagine (larghezza × altezza)
- Coordinate pixel (x, y)
- HEX codice esadecimale a sei cifre (es.
#1E90FF) - RGB valori rosso, verde, blu
- HSL tonalità, saturazione, luminosità
- Se il pixel è semitrasparente: “Alpha ‹n›% — questo pixel è parzialmente trasparente.”
- Al salvataggio: “Salvato ‹hex› nei tuoi picks.”
- Cliccando su qualsiasi valore (HEX, RGB, HSL) lo copia negli appunti.
Cosa rende unica questa pagina: HEX come output primario
A differenza delle pagine sorelle che si concentrano sulla notazione funzionale RGB o su HSL, questa pagina dà il codice HEX come risultato principale. Il motivo è pratico: HEX è il formato più compatto per rappresentare un colore sRGB in CSS, scritto come #RRGGBB (sei cifre esadecimali) o, quando possibile, nella forma abbreviata a tre cifre (#RGB). Non richiede parentesi né virgole; lo incolli e funziona.
Un punto cruciale: il codice HEX a sei cifre non contiene canale alpha. La trasparenza viene segnalata separatamente come percentuale (“Alpha ‹n›% — questo pixel è parzialmente trasparente”). Se un pixel ha alpha = 50%, il codice HEX mostrato è quello del colore non moltiplicato per lo sfondo, cioè il valore puro memorizzato nel file immagine. Questo è importante perché in CSS, per rappresentare un colore con alpha, si usa la notazione rgba() o hsla(), oppure il formato esadecimale a 8 cifre (#RRGGBBAA), che però non è gestito da questa pagina.
Formati supportati e limiti tecnici
La pagina accetta file con MIME type: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Se provi a caricare un formato non supportato, compare il messaggio: “Questo tipo di file non è supportato. Prova con un’immagine PNG, JPG, WebP, GIF, AVIF o HEIC.” Se l’immagine non può essere aperta perché corrotta o in un formato non riconosciuto, viene mostrato: “Impossibile aprire l’immagine. Potrebbe essere danneggiata o in un formato non supportato.”
Limite dimensioni
Le immagini con il lato più lungo superiore a 4096 pixel vengono ridimensionate automaticamente. Questo evita che il caricamento e l’elaborazione di file enormi blocchino il browser. Il ridimensionamento può alterare leggermente i pixel rispetto all’originale, ma per la maggior parte degli usi la differenza è trascurabile.
Effetti di compressione e anti-aliasing
Se l’immagine è un JPEG o uno screenshot, la compressione e l’anti-aliasing possono aver modificato i valori dei pixel. Due pixel adiacenti in una zona apparentemente uniforme possono avere codici HEX diversi a causa di queste alterazioni. Il selettore legge il valore esatto memorizzato nel file, senza tentare di mediare o “correggere”. Per questo è essenziale usare la lente d’ingrandimento per selezionare il pixel giusto.
Pixel semitrasparenti
I file PNG e WebP possono contenere pixel con canale alpha. Il selettore legge il pixel per quello che è, senza considerare ciò che potrebbe esserci dietro. Il valore RGB è quello del pixel stesso, non il risultato di una composizione su sfondo bianco o nero. La trasparenza viene riportata a parte: se un pixel ha alpha = 30%, vedrai “Alpha 30% — questo pixel è parzialmente trasparente.” Non viene generato un codice HEX con alpha perché la pagina usa il formato a sei cifre.
Cronologia dei colori salvati
Fino a 12 colori possono essere conservati nella cronologia. Ogni volta che clicchi sull’immagine, il colore corrente viene aggiunto. Colori con gli stessi valori RGB ma alpha diverso vengono salvati come voci separate: un pixel con RGB(255,0,0) e alpha 100% è distinto da uno con stesso RGB ma alpha 50%.
Cliccando su una delle miniature nella cronologia, quel colore viene ricaricato nei campi di output, permettendo di copiarne i valori senza dover ricampionare l’immagine. Puoi anche cliccare su qualsiasi valore (HEX, RGB, HSL) per copiarlo negli appunti. Se il browser blocca la clipboard, compare: “Impossibile copiare — il tuo browser ha bloccato l’accesso agli appunti.”
Il pulsante “Ricominciare” cancella tutto: immagine, cronologia, e riporta lo strumento allo stato iniziale.
Navigazione da tastiera e accessibilità
Chi non può usare il mouse può comunque campionare i colori con la tastiera. Una volta caricata l’immagine, un mirino invisibile si posiziona al centro. I tasti freccia spostano il mirino di 1 pixel per volta; tenendo premuto Shift, il passo diventa 10 pixel. Invio o Spazio salvano il colore attuale. Questo permette una selezione precisa anche su dispositivi senza puntatore, e facilita l’uso da parte di chi ha difficoltà motorie.
La combinazione Shift+freccia è utile per spostarsi rapidamente su aree grandi, mentre le frecce singole permettono di centrare esattamente il pixel voluto.
Domande frequenti
Perché il codice HEX non include il canale alpha?
Il formato esadecimale standard per il Web è a sei cifre (#RRGGBB), che non supporta la trasparenza. La pagina mostra l’alpha separatamente in percentuale. Per usare un colore con alpha in CSS, puoi copiare i valori RGB e utilizzare rgba(), oppure usare il formato a 8 cifre (#RRGGBBAA) se il tuo progetto lo supporta (ma non viene generato da questa pagina).
Posso usare immagini da Internet?
No, la pagina accetta solo file caricati dal tuo dispositivo. Non c’è upload su server: l’elaborazione avviene interamente nel browser, garantendo la privacy.
Perché alcuni pixel mostrano colori leggermente diversi da quelli che vedo a schermo?
Il selettore legge i valori numerici esatti dei pixel dall’immagine. Il tuo monitor potrebbe applicare una calibrazione del colore, mentre il codice HEX rappresenta il colore sRGB standard. Inoltre, come detto, compressione JPEG e anti-aliasing alterano i pixel rispetto all’immagine “ideale”.
Cosa succede se l’immagine è molto grande?
Se il lato più lungo supera 4096 pixel, l’immagine viene ridimensionata proporzionalmente. I pixel risultanti possono differire leggermente dall’originale a causa dell’interpolazione. Se hai bisogno di precisione assoluta, ridimensiona l’immagine prima del caricamento.
Posso salvare più di 12 colori?
No, la cronologia è limitata a 12 voci. Se aggiungi un tredicesimo colore, non viene memorizzato. Per un uso esteso, copia i codici man mano e incollali altrove.
Come si copia un valore?
Clicca direttamente sul valore HEX, RGB o HSL visualizzato a schermo. Il testo viene copiato negli appunti. Se la copia fallisce, controlla le impostazioni di sicurezza del browser.