Nessun caricamento · Funziona nel tuo browser
Selettore di colore per immagini
Preleva un colore da qualsiasi punto di un’immagine e ottieni i suoi valori in HEX, RGB, HSL e CMYK. Vengono estratti anche i colori principali dell’immagine, e per ogni colore si verifica se un testo posato sopra sarebbe davvero leggibile.
Trascina qui un’immagine
Nulla viene caricato: i pixel vengono letti nel tuo browser.
Passa sopra l’immagine, poi fai clic per fissare un colore. Fissato.
Colori principali di questa immagine
Prelevati
Testo su questo colore
Contrasto WCAG, per il testo normale.
Passo dopo passo
Come prelevare un colore da un’immagine in 4 passaggi
-
Aggiungi la tua immagine
-
Passaci sopra con il puntatore
Una lente mostra i singoli pixel sotto il puntatore: senza di essa, impossibile mirarne uno a occhio.
-
Fai clic per fissare il valore, così da poterlo leggere e copiare
-
Fai clic su un valore per copiarlo
Oppure prendine uno dalla tavolozza estratta sotto l’immagine.
Da sapere
Leggere un colore e annotarlo
Perché c’è una lente
Un’immagine viene mostrata a schermo alla dimensione che le dà la pagina, e ciò che si vuole puntare (un riflesso in un occhio, un singolo capello, il tono esatto di un logo) copre spesso solo pochi pixel. Alla dimensione dello schermo il puntatore li copre tutti, e ottieni il colore che si trovava lì per caso.
Per questo la lente mostra una griglia dei pixel veri attorno al puntatore. È la differenza tra il colore che volevi e un colore vicino.
Le quattro notazioni
- HEX:
#3ba7c4. Ciò che usano il CSS e gli strumenti di grafica. Tre coppie di cifre esadecimali per il rosso, il verde e il blu. - RGB: gli stessi tre numeri in decimale, da 0 a 255. La stessa informazione, scritta in un altro modo.
- HSL: tonalità, saturazione e luminosità. Utile per regolare un colore: per una versione più scura dello stesso tono, cambi un solo numero invece di indovinarne tre.
- CMYK (la quadricromia): i quattro inchiostri di stampa. Leggi la nota qui sotto prima di usarlo.
Sul valore CMYK
Il valore CMYK mostrato qui è la conversione semplice standard, ed è bene saperlo. Una vera conversione dipende dal processo di stampa, dalla carta, dal set di inchiostri e da un profilo ICC: lo stesso file stampato in due modi diversi richiede due set di valori diversi.
Usalo come punto di partenza per una discussione con uno stampatore, non come una specifica. Se un colore conta davvero (un colore di marca su una confezione), lo stampatore vorrà il Pantone o il valore con profilo, non quattro percentuali prese da una pagina web.
Inoltre alcuni colori semplicemente non si possono stampare. I colori dello schermo vivaci e saturi, soprattutto verdi e arancioni, sono fuori da ciò che l’inchiostro su carta può produrre, e la conversione CMYK restituisce in silenzio il colore raggiungibile più vicino.
I colori dell’immagine
Sotto l’immagine c’è una tavolozza dei colori dominanti, estratta con un algoritmo chiamato median cut. Divide ripetutamente lo spazio dei colori lungo l’asse in cui i colori sono più dispersi, invece di contare quali valori esatti sono più frequenti.
La differenza conta per le foto. Un cielo è fatto di migliaia di blu quasi identici, nessuno dei quali è frequente come valore preciso: contare le frequenze restituisce più volte lo stesso colore, a un passo di distanza. Dividere lo spazio restituisce i colori che una persona nominerebbe davvero.
Ciò che non fa: mettere in evidenza una manciata di pixel tra migliaia. Un valore isolato e insignificante non è un colore dominante, e segnalarlo significherebbe segnalare rumore.
Qualità
Il contrasto, e quanto è preciso
Posso mettere del testo su questo colore?
È quasi sempre la vera domanda, quindi rispondiamo direttamente: ogni colore prelevato viene valutato con la formula WCAG per il contrasto con un testo bianco e un testo nero, e accanto al rapporto viene indicato se supera la soglia o no.
- 4,5:1 è il minimo per il testo normale (WCAG AA).
- 3:1 è il minimo per il testo grande: circa 24 px, o 19 px in grassetto.
- 7:1 è il livello AAA, più esigente.
La formula non è un semplice confronto di luminosità. Usa la luminanza relativa, che dà molto più peso al verde che al rosso e al blu, e applica una curva gamma. Per questo un blu saturo che sembra «medio» è molto più scuro di quanto appaia, e un giallo che sembra intenso è chiaro quasi quanto il bianco.
È impossibile giudicarlo in modo affidabile a occhio, ed è per questo che vale la pena mostrare il numero.
Perché il colore ottenuto può essere diverso dall’originale
Due precisazioni oneste:
- La compressione JPEG modifica leggermente i colori. L’informazione di colore viene memorizzata a una risoluzione più bassa della luminosità: il valore esatto di un piccolo dettaglio colorato può quindi essere scivolato rispetto a ciò che ha catturato la fotocamera. Puntare su una grande zona uniforme ti avvicina.
- I profili di colore non vengono applicati. Un’immagine contrassegnata come Adobe RGB o Display P3 viene letta come semplici numeri: un colore saturo può quindi risultare diverso da come lo mostra un’applicazione con gestione del colore. Per le immagini sRGB, cioè quasi tutto il web, non c’è alcuna differenza.
A cosa serve
- Ritrovare un colore di marca a partire da un logo, quando nessuno trova più il manuale di identità visiva.
- Creare una tavolozza a partire da una foto: un modo comune e davvero efficace per scegliere i colori di un sito o di una presentazione.
- Esaminare uno screenshot per trovare il colore esatto di un design.
- Ottenere valori CSS da un mockup ricevuto come immagine.
- Verificare la leggibilità prima di posare del testo su una foto o su un colore piatto.
Nulla viene caricato
L’immagine viene decodificata e letta nel tuo browser. Non potrebbe essere altrimenti a questa velocità, perché tutta l’interazione consiste nel rispondere a «cosa c’è sotto il mio puntatore» alla stessa velocità con cui lo muovi, il che significa che il file non lascia mai il tuo dispositivo.
Merita di essere detto, perché le immagini che si analizzano spesso non sono nostre: un design non pubblicato, gli elementi di marca di un cliente, lo screenshot di un concorrente.
Prelevare da una foto, non da un colore piatto
Un consiglio pratico. Le foto non hanno colori uniformi. Ciò che sembra un maglione rosso uniforme sono centinaia di rossi che variano con la luce e l’ombra, e il pixel su cui fai clic è un campione di quella gamma, non «il» colore.
Su una foto, la tavolozza estratta è di solito più utile di qualsiasi prelievo singolo, perché ogni voce è la media di un intero gruppo e non un pixel arbitrario. Su un logo, uno screenshot o una grafica a colori piatti, un solo prelievo è esattamente ciò che serve: quelli hanno davvero un solo valore.
Ottenere una versione più scura o più chiara
Usa l’HSL. Mantieni tonalità e saturazione, e cambia solo la luminosità: da hsl(199, 55%, 50%) a
hsl(199, 55%, 35%) è senza dubbio lo stesso colore, più scuro. Fare lo stesso in HEX obbliga a regolare tre
valori insieme tirando a indovinare, ed è così che le tavolozze finiscono con un «blu scuro» scivolato verso il viola
senza che nessuno se ne accorga.
Strumenti correlati
Se analizzi un’immagine per riprodurne lo stile, il visualizzatore di metadati indica con quale fotocamera e quali impostazioni è stata scattata. Se creerai qualcosa con i colori trovati, lo strumento per la filigrana accetta direttamente un valore esadecimale.
Domande e risposte
Selettore di colore: domande frequenti
Perché c’è una lente?
Perché ciò che si vuole puntare (un riflesso, un capello, il tono esatto di un logo) copre spesso solo pochi pixel, e alla dimensione dello schermo il puntatore li copre tutti. La lente mostra i pixel veri sotto il puntatore: è la differenza tra il colore che volevi e un colore vicino.
Posso fidarmi dei valori CMYK per la stampa?
Usali come punto di partenza, non come una specifica. È la conversione semplice standard; una vera conversione dipende dalla stampante, dalla carta, dal set di inchiostri e da un profilo ICC, e lo stesso file stampato in due modi richiede due set di valori diversi. Se un colore conta davvero, il tuo stampatore vorrà un Pantone o un valore con profilo.
Come vengono calcolati i colori principali?
Con il median cut, che divide ripetutamente lo spazio dei colori lungo l’asse in cui i colori sono più dispersi. Sulle foto funziona meglio che contare i valori più frequenti: un cielo è fatto di migliaia di blu quasi identici, nessuno dei quali è frequente, e contare le frequenze restituirebbe più volte lo stesso colore a un passo di distanza.
Perché il colore prelevato è diverso dall’originale?
Per due motivi probabili. Il JPEG memorizza il colore a una risoluzione più bassa della luminosità: i piccoli dettagli colorati scivolano un po’, e puntare su una grande zona uniforme lo evita. E i profili di colore non vengono applicati: un’immagine Adobe RGB o Display P3 viene letta come semplici numeri. Per le immagini sRGB, cioè quasi tutto il web, nessuno dei due conta.
Che rapporto di contrasto mi serve?
4,5:1 per il testo normale, 3:1 per il testo grande (circa 24 px, o 19 px in grassetto) e 7:1 per il livello AAA, più esigente. Questo numero non è un confronto di luminosità: dà molto più peso al verde che al blu e applica una curva gamma, ed è per questo che un blu saturo è molto più scuro di quanto sembri. Giudicare a occhio non è affidabile, da qui il numero mostrato.
Le mie immagini vengono caricate?
No. L’immagine viene decodificata e letta nel tuo browser; a questa velocità non potrebbe essere altrimenti, perché lo strumento risponde a «cosa c’è sotto il mio puntatore» alla stessa velocità con cui lo muovi. Buono a sapersi, perché le immagini analizzate sono spesso design non pubblicati o elementi di marca di qualcun altro.
Come ottengo una versione più scura di un colore?
Usa il valore HSL e cambia solo la luminosità, mantenendo tonalità e saturazione. Fare lo stesso in HEX obbliga a regolare tre numeri insieme tirando a indovinare, ed è così che una tavolozza finisce con un «blu scuro» scivolato verso il viola senza che nessuno se ne accorga.
Continua a esplorare
Strumenti per immagini correlati
Aggiungere una filigrana a un’immagine
Aggiungi alle tue foto una filigrana di testo o un logo. Posizione, angolo, opacità e ripetizione a mosaico. Gratis, senza registrazione.
Unire più immagini in una
Unisci più immagini in una sola: affiancate, impilate o a griglia. Cambia l’ordine trascinando le righe. Gratis, senza registrazione.
Visualizzatore di metadati delle immagini
Scopri esattamente cosa registrano le tue foto: fotocamera, impostazioni, date e coordinate GPS del luogo dello scatto.
Convertire PNG in JPG
Converti PNG in JPG gratis e senza registrazione. Regola la qualità e il colore di sfondo per le aree trasparenti.