Image Picker
Se vuoi sapere di che colore è la tua foto Image Picker è lo strumento adatto alla tua esigenza.
Con questo strumento è possibile ricavare il colore esatto da un punto specifico di una fotografia o immagine.
I colori supportati sono Hex, Rgb e Hsl (hue, saturation, lightness)
Come utilizzare Image Picker?
Il tool gratuito Image Picker offre due metodi di caricamento immagini.
- La prima è scaricando un'immagine da url esterno.
- La seconda caricando un'immagine direttamente dal proprio computer o dispositivo.
Una volta caricata un'immagine per avviare il Picker basta cliccare sul pulsante apri color picker e una lente d'ingrandimento con un piccolo selettore ti permetteranno di posizionarti sul punto esatto dell'immagine e selezionare il colore desiderato.
Dopo la selezione i valori di Hex, Rgb e Hsl saranno mostrati nelle relative input di selezione.
Come funziona Image Picker?
Image Picker sfrutta una funzionalità nativa dei browser moderni: EyeDropper
Quando si clicca su apri color picker una nuova istanza di EyeDropper viene eseguita e se il Browser supporta la funzionalità il tool viene avviato permettendo all'utente di selezionare il colore sullo schermo.
EyeDropper funziona solamente su applicazioni servite in HTTPS, qua sono disponibili maggiori informazioni.
EyeDropper è supportato solamente da alcuni browser tra cui Chrome, qui la tabella delle compatibilità.
Cosa sono i valori Hex, Rgb e Hsl?
Hex
Il valore Hex è la rappresentazione esadecimale dei colori RGB.
Il risultato è il valore esadecimale di Rosso, Verde, e Blu.
I valori esadecimali hanno un range che va da 00 a FF.
Le prime due cifre corrispondono al valore del rosso, le seconde due del verde e le terze del blu.
Ad esempio se si prende il colore rosso #FF0000 si avranno le prime due cifre che corrispondono al rosso perchè il loro massimo valore è FF mentre le cifre del verde e blu sono a zero
Rgb
Il valore RGB corrisponde alla quantità di Rosso, Verde e Blu.
Le cifre per ogni colore vanno da un minimo di zero a un massimo di 255.
Ad esempio con RGB(255,255,255) otterrai il bianco.
Hsl
Il valore Hsl corrisponde a tonalità, saturazione e contrasto.
H sta per Hue, tonalità, e il valore può variare da 0 to 360.
S sta per Saturation, saturazione, ed è una percentuale che va da 0 a 100.
L sta per Lightness, luminosità, e anche in questo caso viene espresso in valori percentuali da 0 a 100.