Selettore di colore
Preleva qualsiasi colore da un'immagine e ottieni subito i codici HEX, RGB, HSL, HSV e CMYK.
Carica un'immagine per prelevare un colore
Trascina, incolla o sfoglia — PNG, JPG, WEBP o GIF
Suggerimento: puoi anche incollare un'immagine con Ctrl/Cmd + V
Codici colore
Nome colore più vicino: Royal Blue
Armonie di colore
Verifica contrasto (WCAG)
Testo di esempio
Colori salvati
Nessun colore salvato ancora — selezionane uno e tocca «Salva colore».
Un selettore di colore è uno strumento che ti permette di individuare un colore preciso e di conoscerne il codice esatto. Con il contagocce puoi campionare un singolo pixel di un'immagine e scoprire immediatamente in quali valori si traduce quel colore, senza doverlo indovinare a occhio. È una delle operazioni più comuni per chi lavora con la grafica: dal web design allo sviluppo, dalla stampa alla verifica dell'accessibilità.
Il nostro strumento è completamente gratuito e funziona direttamente nel tuo browser: l'immagine non viene mai caricata su un server, quindi i tuoi file restano privati sul tuo dispositivo. Per ogni colore selezionato ottieni subito i codici HEX, RGB, HSL, HSV e CMYK, puoi estrarre la palette dominante di una foto, generare armonie di colore in un solo clic e verificare il rapporto di contrasto secondo le linee guida WCAG per garantire testi leggibili e accessibili.
Come prelevare un colore da un'immagine
- 1
Carica o trascina un'immagine
Trascina un file nell'area di caricamento, incollalo con Ctrl/Cmd + V oppure scegli un'immagine dal tuo dispositivo. Sono supportati i formati PNG, JPG, WEBP e GIF, e tutto avviene localmente nel tuo browser.
- 2
Clicca con il contagocce su un pixel
Muovi il puntatore sull'immagine e clicca sul punto esatto di cui vuoi conoscere il colore. Lo zoom ti aiuta a campionare con precisione anche i dettagli più piccoli.
- 3
Leggi e copia i codici colore
Nel pannello dei valori trovi subito i codici HEX, RGB, HSL, HSV e CMYK del colore selezionato. Tocca «Copia» accanto a un formato per portarlo negli appunti e incollarlo nel tuo progetto.
- 4
Estrai la palette dall'immagine
Con un clic su «Estrai palette» ottieni i colori dominanti della foto: perfetto per costruire uno schema cromatico coerente a partire da un'immagine di riferimento.
- 5
Genera le armonie di colore
A partire dal colore scelto puoi generare automaticamente combinazioni complementari, analoghe, triadiche, tetradiche e monocromatiche, così da comporre rapidamente una tavolozza equilibrata.
- 6
Verifica il contrasto WCAG ed esporta
Confronta due colori per controllare il rapporto di contrasto rispetto agli standard WCAG (AA e AAA), poi salva i colori che ti servono ed esportali in formato CSS, JSON o PNG.
HEX, RGB, HSL, HSV e CMYK spiegati
Uno stesso colore può essere descritto in modi diversi a seconda del contesto in cui viene usato. Ogni modello di colore ha i suoi punti di forza: alcuni sono pensati per il codice e gli schermi, altri per la regolazione manuale delle tonalità o per la stampa. Ecco i cinque formati più usati e quando conviene scegliere ciascuno di essi.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web e CSS |
| RGB | rgb(59,130,246) | Schermi e display |
| HSL | hsl(217,91%,60%) | Regolazione intuitiva delle tonalità |
| HSV | hsv(217,76%,96%) | Strumenti di design |
| CMYK | cmyk(76%,47%,0%,4%) | Stampa |
Web e UI design
Quando progetti un'interfaccia o un sito web hai bisogno di colori coerenti e replicabili. Prelevare le tonalità da un mockup o da un'immagine di riferimento e ottenerne i codici esatti ti permette di costruire una palette solida, definire stati di hover e focus e mantenere il brand uniforme su tutte le schermate.
Sviluppo front-end
Per chi scrive codice, il valore HEX o RGB si traduce direttamente in variabili CSS e token di design. Copia il codice del colore e incollalo in una custom property (ad esempio --primary: #3B82F6;) per riutilizzarlo in tutto il foglio di stile, riducendo errori e duplicazioni.
Stampa e branding
Ciò che appare su uno schermo non sempre corrisponde a ciò che esce dalla stampante. Il formato CMYK descrive il colore in termini di inchiostri (ciano, magenta, giallo e nero) ed è il riferimento per volantini, biglietti da visita e materiali del marchio, così da avvicinare il più possibile la resa di stampa al progetto originale.
Accessibilità
Un testo deve essere leggibile da tutti. La verifica del contrasto secondo le linee guida WCAG confronta il colore del testo con quello dello sfondo e indica se il rapporto raggiunge i livelli AA o AAA. Controllare il contrasto fin dall'inizio evita combinazioni difficili da leggere per le persone ipovedenti.
Il confronto
Molti strumenti online si limitano a mostrare il codice HEX di un pixel. Ecco come il nostro selettore di colore si distingue rispetto a imagecolorpicker.com.
| Modelli di colore | HEX, RGB, HSL, HSV e CMYK, tutti visibili insieme | Principalmente HEX e RGB |
| CMYK per la stampa | Sì, con i valori pronti per i progetti di stampa | Non disponibile |
| Verifica del contrasto WCAG | Integrata, con esito per i livelli AA e AAA | Non disponibile |
| Armonie di colore | Complementari, analoghe, triadiche, tetradiche e monocromatiche | Assenti o molto limitate |
| Pubblicità | Interfaccia pulita, senza annunci invadenti | Presenza di banner pubblicitari |
Domande frequenti
Come si preleva un colore da un'immagine?
Carica o trascina l'immagine nello strumento, poi clicca con il contagocce sul punto esatto che ti interessa. Il selettore campiona quel pixel e mostra immediatamente i codici HEX, RGB, HSL, HSV e CMYK, che puoi copiare con un tocco.
Che cos'è un codice colore HEX?
Un codice HEX è una notazione esadecimale che descrive un colore, ad esempio #3B82F6. Le sei cifre rappresentano le componenti di rosso, verde e blu (due cifre ciascuna). È il formato più diffuso nel web design e nei fogli di stile CSS perché è compatto e universalmente riconosciuto.
Come si converte un colore da RGB a HEX?
Ogni valore RGB (compreso tra 0 e 255) viene convertito nel corrispondente numero esadecimale a due cifre e i tre risultati vengono uniti con il simbolo # davanti. Con il nostro strumento non devi fare calcoli: selezioni il colore e ottieni contemporaneamente sia il codice RGB sia quello HEX, pronti da copiare.
Come si crea una palette da una foto?
Carica la foto e clicca su «Estrai palette»: lo strumento analizza l'immagine e ne ricava i colori dominanti. Puoi selezionare i campioni che preferisci, salvarli ed esportarli in CSS o JSON per riutilizzarli nel tuo progetto.
Come si verifica il contrasto dei colori per l'accessibilità?
Nella sezione dedicata al contrasto scegli il colore del testo e quello dello sfondo: lo strumento calcola il rapporto di contrasto e indica se soddisfa i requisiti WCAG di livello AA e AAA. Un contrasto sufficiente garantisce che il testo resti leggibile anche per chi ha difficoltà visive.
Lo strumento è gratuito e i miei file sono al sicuro?
Sì, il selettore di colore è completamente gratuito e non richiede registrazione. L'elaborazione avviene interamente nel tuo browser: le immagini non vengono caricate su alcun server, quindi i tuoi file restano privati sul tuo dispositivo.
