Selettore di Colore da Immagine
Carica una foto e clicca in un punto qualsiasi per ottenerne il colore esatto — valori hex, RGB e HSL, con una palette che si aggiorna man mano.
1.194 visualizzazioni
Clicca sull'immagine per scegliere un colore
Come Funziona la Selezione del Colore
Quando una foto viene caricata, viene disegnata su un elemento HTML5 <canvas> all'interno del browser. Cliccare in un punto qualsiasi dell'immagine richiama la funzione dell'API canvas getImageData() esattamente in quella coordinata di pixel, che restituisce i valori grezzi dei canali rosso, verde, blu e alfa memorizzati per quel pixel — non un'approssimazione o un colore campionato da uno screenshot, ma gli stessi dati numerici che il browser stesso usa per disegnare l'immagine. Questi valori grezzi vengono poi convertiti e mostrati simultaneamente come hex (per esempio #3a7bd5), RGB (per esempio rgb(58, 123, 213)) e HSL (tonalità, saturazione, luminosità), così qualsiasi formato di cui ha bisogno uno strumento di design è pronto per essere copiato.
Ogni immagine gestita in questo modo viene decodificata e letta in sRGB, lo spazio colore standard usato dalla stragrande maggioranza delle foto digitali, degli schermi e delle fotocamere. È il valore predefinito assunto a meno che un'immagine non incorpori esplicitamente un profilo colore diverso, il che copre praticamente tutta la fotografia consumer e le immagini web.
Il formato HSL funziona con una logica diversa dall'RGB: esprime separatamente la tonalità (hue, 0-360 gradi), la saturazione (percentuale) e la luminosità (percentuale); questo lo rende più intuitivo dell'RGB soprattutto per chi vuole mantenere fissa la tonalità di un colore e variare solo la sua chiarezza o saturazione. Nello sviluppo web, nella creazione di una palette di brand o nell'individuazione dei colori dominanti in una foto, questi tre formati si completano a vicenda: l'hex è il più usato nel CSS, l'RGB è il più diretto negli ambienti di programmazione, e l'HSL è il più utile per le regolazioni cromatiche. Per esempio, un designer che vuole mantenere il colore principale di un brand producendo solo una tonalità più chiara o più scura ottiene il risultato molto più rapidamente modificando il valore di luminosità in HSL, invece di ricalcolare i tre canali dell'RGB uno per uno.
Cosa Dovresti Sapere
- Niente viene caricato da nessuna parte — l'intero processo, dal disegno dell'immagine alla lettura dei dati dei pixel, avviene localmente nella memoria del browser. Nessun server riceve mai la foto.
- La lettura è esatta, non stimata — poiché getImageData() restituisce il valore di pixel letteralmente memorizzato, la precisione è limitata solo dalla qualità dell'immagine stessa e da dove esattamente cade il clic, non dalla luminosità, dal contrasto o dalla calibrazione dello schermo.
- La compressione può spostare leggermente il colore reale — la compressione JPEG media il colore su piccoli blocchi di pixel, quindi una foto molto compressa può restituire un valore leggermente diverso dal colore reale della scena; PNG e altri formati senza perdita preservano esattamente il valore catturato.
- Ogni colore scelto alimenta una palette progressiva sotto l'immagine, rendendo possibile campionare più punti da una stessa foto — un cielo, una maglia, un muro — ed esportare un piccolo set di colori coordinato in un'unica sessione.
Domande Frequenti
Quanto è precisa la scelta del colore?
Legge il valore esatto del pixel sul canvas nel punto cliccato — preciso quanto l'immagine stessa e la tua precisione di clic, senza essere influenzato dalla calibrazione dello schermo, poiché legge dati grezzi dei pixel, non ciò che percepiscono i tuoi occhi.
Questo carica la mia foto da qualche parte?
No — l'immagine viene disegnata su un elemento canvas locale e campionata interamente lato client. Nulla lascia il tuo browser.
Cos'è lo sRGB e perché è importante?
Lo sRGB è lo spazio colore standard che la maggior parte delle fotocamere digitali, dei telefoni, dei monitor e delle immagini web usa per impostazione predefinita. Poiché quasi ogni foto caricata qui è già codificata in sRGB, i valori hex, RGB e HSL letti da questo strumento corrispondono a quelli che mostrerebbe la maggior parte dei software di design senza alcuna conversione necessaria. Le foto scattate in uno spazio colore più ampio, come l'Adobe RGB, e non convertite possono mostrare una discrepanza se confrontate con strumenti basati su sRGB.
Perché lo stesso colore può apparire leggermente diverso in due foto?
Le condizioni di illuminazione, il bilanciamento del bianco e l'elaborazione della fotocamera influenzano tutti i valori RGB esatti che una fotocamera registra per ciò che all'occhio sembra lo stesso colore — un muro bianco fotografato al tramonto acquisisce una dominante calda che un selettore legge onestamente come un bianco leggermente venato d'arancione, non un bianco puro. La compressione JPEG può inoltre introdurre piccolissimi spostamenti a livello di pixel intorno ai bordi di colore netti.
Si possono scegliere colori da una foto scattata con un telefono?
Sì — qualsiasi file immagine che il browser può visualizzare, inclusi JPEG, PNG, WebP e la maggior parte degli altri formati comuni, funziona con questo strumento, indipendentemente dal dispositivo o dalla fotocamera usata per scattarla.
Strumenti Simili
Segnala un Problema
Selettore di Colore da Immagine
Commenti
Ancora nessun commento — scrivi il primo!