Identificare il codice esatto di un colore è una necessità costante nel design: replicare il colore di un logo di riferimento, estrarre la palette da una foto d'ispirazione, mantenere coerenza tra diversi elementi di un'identità visiva. A seconda del contesto — se hai accesso al file, se il colore è in un'immagine online, in un sito o in una foto scattata con il cellulare — il metodo più efficiente varia.
Capire i formati di codice colore
Prima di passare ai metodi, vale la pena capire i tre formati più usati per rappresentare i colori digitalmente:
| Formato | Esempio | Dove viene usato |
|---|---|---|
| HEX | #3ecf8e | CSS, HTML, design web, la maggior parte degli strumenti di design |
| RGB | rgb(62, 207, 142) | CSS, editing immagini, stampa digitale |
| HSL | hsl(152, 57%, 53%) | CSS, manipolazione dei colori nel design, regolazioni di tonalità |
| CMYK | C:70 M:0 Y:31 K:19 | Stampa grafica (volantini, biglietti, imballaggi) |
HEX e RGB rappresentano la stessa informazione in formati diversi — è sempre possibile convertire dall'uno all'altro. HSL descrive il colore in termini di tonalità, saturazione e luminosità, ed è più intuitivo per le regolazioni manuali. CMYK è esclusivo per la stampa.
Metodo 1: Estrattore di Colori online (il più rapido)
Per identificare i colori dominanti di un'immagine intera — o localizzare un pixel specifico con precisione — un estrattore di colori online è la soluzione più diretta. Basta caricare l'immagine e lo strumento identifica automaticamente i colori più presenti, con i codici HEX pronti da copiare.
L'Estrattore di Colori di ImageTools analizza qualsiasi foto o immagine e restituisce i colori dominanti con i rispettivi codici HEX. Tutto funziona direttamente nel browser — l'immagine non lascia il tuo dispositivo.
- Vai allo strumento di estrazione dei colori.
- Carica l'immagine o trascina il file nell'area indicata.
- Lo strumento identifica automaticamente i colori più presenti nell'immagine.
- Clicca su qualsiasi colore per copiare il codice HEX.
🎨 Consiglio extra: dopo aver estratto i colori dominanti di un'immagine, usa il Generatore di Palette per creare armonie complementari, analoghe o monocromatiche a partire da uno qualsiasi di questi colori — ed espandere la palette del tuo progetto.
Estrai subito i colori di qualsiasi immagine
Carica una foto e ottieni i codici HEX dei colori dominanti in pochi secondi. Gratuito, senza registrazione, elaborato nel tuo browser.
Estrai colori dall'immagineMetodo 2: Usare il contagocce del browser (Chrome DevTools)
Se il colore che vuoi identificare è su un sito — nello sfondo di una pagina, in un pulsante, in un logo — Chrome ha uno strumento integrato per questo.
- Apri il sito su Google Chrome.
- Premi F12 (oppure clicca con il tasto destro e scegli "Ispeziona").
- Nel pannello DevTools, clicca sull'icona del cursore nell'angolo in alto a sinistra (oppure premi Ctrl+Shift+C).
- Passa il mouse su qualsiasi elemento della pagina — il DevTools mostrerà le proprietà CSS, inclusi i colori in HEX o RGB.
- Per aprire il selettore di colore visivo, clicca sul quadrato colorato accanto a qualsiasi valore di colore nel pannello CSS.
Il DevTools di Chrome ha anche un Color Picker integrato: cliccando sul quadrato di colore nel pannello degli stili CSS, si apre un selettore che permette di navigare nello spettro e vedere i valori in HEX, RGB, HSL e HSLA contemporaneamente.
Metodo 3: Contagocce in Canva
Se stai lavorando in Canva e vuoi catturare un colore da un'immagine già presente nel tuo progetto:
- Seleziona l'elemento di cui vuoi cambiare il colore di riempimento (un testo, una forma o uno sfondo).
- Clicca sul colore dell'elemento nel pannello laterale per aprire il selettore di colore.
- Nel selettore, clicca sull'icona del contagocce (eyedropper).
- Clicca su qualsiasi punto dell'immagine nel canvas per catturare il colore esatto di quel pixel.
- Il codice HEX verrà mostrato nel campo di testo del selettore.
Metodo 4: Contagocce in Photoshop e Illustrator
Photoshop
Con l'immagine aperta, seleziona lo strumento Contagocce (scorciatoia: tasto I). Clicca su qualsiasi punto dell'immagine — il colore catturato viene mostrato nella casella colore del pannello degli strumenti. Per vedere il codice HEX, fai doppio clic sulla casella colore (si apre il Color Picker) e il valore HEX appare nel campo in basso a destra.
Illustrator
Con il file aperto, seleziona un oggetto e poi clicca sul colore di riempimento o contorno nel pannello degli strumenti. Nel Color Picker che si apre, il codice HEX è nel campo inferiore. In alternativa, usa lo strumento Contagocce (scorciatoia: I) per raccogliere il colore da qualsiasi punto del canvas.
Metodo 5: Estensione del browser — ColorZilla
L'estensione ColorZilla (disponibile per Chrome e Firefox) aggiunge un contagocce permanente al tuo browser. Con l'estensione installata, puoi:
- Catturare il colore di qualsiasi pixel su qualsiasi sito con un clic.
- Vedere il codice in HEX, RGB e HSL immediatamente.
- Copiare il valore con un clic.
- Accedere a uno storico degli ultimi colori raccolti.
È la soluzione più pratica per chi ha bisogno di catturare colori da siti frequentemente, senza dover aprire il DevTools ogni volta.
Metodo 6: App di cattura colore sul cellulare
Per identificare colori di oggetti fisici — il colore di una parete, di un prodotto, di una confezione — o di immagini sul cellulare, esistono app specifiche:
- Color Grab (Android) — punta la fotocamera su qualsiasi superficie e cattura il codice HEX in tempo reale.
- Palette Cam (iOS/Android) — estrae la palette completa di colori da foto scattate al momento o dalla galleria.
- Canva (iOS/Android) — il contagocce di Canva mobile funziona per immagini importate.
Come usare i codici colore estratti
Dopo aver identificato il codice HEX di un colore, le applicazioni più comuni sono:
Nel CSS / sviluppo web
Usa direttamente nel codice: color: #3ecf8e; oppure background-color: #3ecf8e;. Per varianti più chiare o scure, usa HSL — è molto più intuitivo regolare la luminosità che manipolare manualmente i valori HEX.
In Canva, Figma o Adobe
Incolla il codice HEX nel campo colore di qualsiasi elemento. Tutti i principali strumenti di design accettano HEX direttamente.
Per creare una palette completa
Con il colore base identificato, il Generatore di Palette di Colori genera automaticamente combinazioni armoniche — complementare, analoga, triade e monocromatica — con tutti i codici in HEX, RGB e HSL pronti da usare nel progetto.
Per la stampa
Converti l'HEX in CMYK prima di inviarlo alla tipografia. I colori sullo schermo (RGB/HEX) e in stampa (CMYK) hanno gamut diversi — ciò che sembra identico sul monitor può avere una variazione visibile una volta stampato. Strumenti come Adobe Illustrator e Affinity Designer eseguono questa conversione automaticamente durante l'esportazione per la stampa.
Perché il colore estratto potrebbe non essere esattamente quello che volevi
Un dettaglio importante: le immagini fotografiche raramente hanno un colore perfettamente uniforme in un'area. Ciò che sembra un blu solido in una foto può avere decine di variazioni sottili pixel per pixel, causate da illuminazione, compressione JPG e rumore della fotocamera. Il contagocce cattura il colore esatto di un pixel specifico — che può essere leggermente diverso dal "blu generale" che stai cercando di identificare.
Per le aree fotografiche, l'ideale è usare un estrattore che calcola il colore dominante di una regione — come fa l'Estrattore di Colori — invece di catturare un singolo pixel. Il risultato è un colore più rappresentativo e più utile per l'uso nel design.
Domande frequenti
#3ecf8e e RGB 62, 207, 142 sono lo stesso colore. Per il design web e il CSS usa HEX (più comune e più corto). Per applicazioni che richiedono i tre canali separati — alcune piattaforme di stampa, app di editing — usa RGB. Qualsiasi strumento converte tra i due in pochi secondi.