Preleva il colore esatto da qualsiasi immagine

Carica qualsiasi JPG, PNG, WebP o GIF e clicca in un punto qualsiasi dell'immagine visualizzata: il pixel esatto sotto il cursore viene campionato e mostrato come HEX, RGB e HSL con copia con un clic per ciascun formato. Perfetto per abbinare un colore del brand, campionare una tonalità da una fotografia o catturare i toni d'accento da un mockup di design.

Clicca su un qualsiasi pixel e questo strumento di selezione colore ne mostra il codice colore HEX (ad esempio #FF6B35) insieme a RGB e HSL — gli stessi codici colore HTML/CSS che incolli direttamente in un foglio di stile, un design token o un attributo HTML. Premi Copia per ottenere il codice esadecimale con un solo clic.

L'immagine viene ridotta a 320 pixel sul lato più lungo, poi ogni pixel viene raggruppato in base ai 4 bit più significativi per canale. I gruppi più popolati vengono mediati fino al colore completo a 8 bit, ordinati per frequenza e restituiti come la tua palette. Il risultato è in genere di 5-24 colori dominanti che riassumono visivamente l'immagine.

Sì. I pulsanti di download producono due formati: un blocco di variabili CSS pronto da incollare in un selettore :root (--color-1, --color-2…) e un file JSON con valore esadecimale, componenti RGB e percentuale di peso per ciascun colore. Entrambi i formati si integrano perfettamente in design token, configurazioni Tailwind e librerie di palette.

No — la selezione dei colori e l'estrazione della palette avvengono interamente nel tuo browser tramite l'API canvas di HTML. L'immagine resta sul tuo dispositivo, il che rende lo strumento sicuro per foto di prodotti non ancora pubblicati, bozze di mockup e risorse di brand soggette a NDA.

Per il lavoro sull'identità del brand, 5-8 colori sono il punto ideale: catturano il tema dominante senza diluire le scelte degli accenti. Per la visualizzazione dei dati consigliamo 10-16 colori, così da avere abbastanza tonalità categoriali. Il cursore ti permette di scegliere tra 5 e 24.

I pixel con valore alpha inferiore a 128 vengono ignorati, così gli sfondi trasparenti non contaminano la palette con i colori dello "sfondo". Questo rende il Selettore colore immagine particolarmente adatto a ritagli di prodotti, grafiche per sticker e soggetti isolati.

HEX (#RRGGBB) è il più compatto ed è quello che CSS, Figma e Sketch usano per impostazione predefinita. RGB mostra i tre valori delle componenti da 0 a 255, utile quando si lavora con i dati delle immagini a livello di codice. HSL (tonalità, saturazione, luminosità) è intuitivo per regolare i colori: sposta la tonalità per cambiare famiglia di colore, regola la luminosità per tinte e sfumature.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

Non serve nessuna immagine. Il selettore e la ruota dei colori in alto funzionano da soli: trascina il quadrato saturazione/luminosità e il cursore della tonalità, oppure digita un valore HEX, RGB o HSL per impostare il colore esatto. Caricare un'immagine è facoltativo e serve solo a prelevare i colori da una foto con il contagocce.

Scegli il tuo colore di base e il pannello Armonie di colore costruisce all'istante schemi complementari, analoghi, triadici, complementari divisi, tetradici e monocromatici usando la teoria del cerchio cromatico. Fai clic su un campione per copiarne il codice HEX.

Nel Selettore colore e ruota autonomo, imposta il tuo colore e il pannello mostra il suo rapporto di contrasto rispetto al bianco puro e al nero puro insieme alla valutazione WCAG — AAA, AA, AA Large o Fail. Usalo prima di finalizzare un colore di testo o pulsante così rimane leggibile e rispetta le linee guida di accessibilità WCAG 2.1.

Sì. Il Color Picker & Wheel autonomo mostra il colore CSS con nome più vicino accanto a qualsiasi valore HEX, RGB o HSL tu abbia impostato, il che è comodo per descrivere rapidamente una tonalità in un brief, un ticket o una specifica di design senza tirare a indovinare.

Clicca Random nel Color Picker & Wheel per passare a un nuovo colore, poi usa il pannello Color harmonies sottostante per vedere palette complementari, analoghe, triadiche e altre combinazioni costruite a partire da quel colore — un modo rapido per trovare un punto di partenza quando progetti da zero invece di campionare un'immagine esistente.

Usa il menu a discesa Dimensione sopra la palette per scegliere 5, 8, 10, 16 o 24 colori dominanti: la palette si ricalcola all'istante man mano che la modifichi. Combina una dimensione piccola come 5 per una palette di brand pulita con il contagocce di selezione colore per catturare una o due sfumature d'accento esatte che l'estrazione automatica potrebbe attenuare nella media.

Sì — il Selettore e ruota dei colori autonomo mostra il rapporto di contrasto del tuo colore corrente rispetto al bianco puro e al nero puro proprio sotto il campione, etichettato AAA, AA, AA Large o Fail secondo le soglie WCAG (7:1, 4.5:1, 3:1). Usalo per verificare che un abbinamento testo/sfondo soddisfi gli standard di accessibilità prima di fissare un colore di design.

Il Selettore e la Ruota dei colori abbinano automaticamente qualsiasi colore tu abbia impostato — tramite il selettore, la casella HEX o i campi RGB/HSL — al nome di colore CSS standard più vicino, mostrato come 'Nome più vicino' accanto al campione. È un modo rapido per descrivere un colore a parole o trovare il suo equivalente web-safe più prossimo.

Sì — ogni clic o tocco sull'immagine caricata aggiunge un nuovo campione al tuo elenco Colori selezionati anziché sostituire l'ultimo, così puoi comporre un set personalizzato di colori esatti dei pixel da diverse parti di una foto. Rimuovi un singolo campione con il suo pulsante ×, oppure svuota l'intero elenco con Cancella selezionati.

Sì — il pulsante Casuale (icona di mescolamento) nel Selettore e ruota dei colori salta a una nuova combinazione di tonalità, saturazione e luminosità con un solo clic, utile per superare il blocco creativo o esplorare una palette che non avresti digitato manualmente. HEX, RGB, HSL e i campioni di armonia sottostanti si aggiornano tutti insieme.

Su un touchscreen, trascina il dito sull'immagine per vedere in anteprima il colore sottostante in un campione fluttuante dal vivo, poi solleva il dito per aggiungere quel pixel esatto al tuo elenco Colori selezionati — non serve un tocco di conferma separato. Lo stesso menu a tendina della dimensione della palette e i pulsanti di esportazione funzionano in modo identico su mobile.

Sì. La ruota dei colori in cima alla pagina ha un pulsante Casuale che salta a un colore casuale e mostra istantaneamente i suoi codici HEX, RGB e HSL, il nome del colore più vicino, i rapporti di contrasto su bianco e nero, e set completi di armonie — complementare, analoga, triadica, complementare divisa, tetradica e monocromatica. È un modo rapido per esplorare punti di partenza per una palette.

Questo strumento campiona i colori da un'immagine caricata o dalla ruota dei colori integrata, invece di leggere lo schermo in tempo reale. La soluzione più rapida per un selettore di colore dello schermo: fai uno screenshot, trascinalo nella pagina e clicca sull'esatto pixel che vuoi — ottieni gli stessi codici HEX, RGB e HSL senza installare un'estensione, e lo screenshot non lascia mai il tuo browser.