Selettore di colori ed estrattore di palette - Seleziona colori dall'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.

Sì. Gratuito, senza account, senza limiti sulle dimensioni delle immagini o sul numero di palette estratte. Non c'è nulla da installare: l'intero strumento è un'unica pagina web.

Nessuna immagine necessaria. Il Selettore di colori e la Ruota in alto funzionano da soli — trascina il quadrato di saturazione/luminosità e il cursore della tonalità, oppure digita un qualsiasi valore HEX, RGB o HSL per impostare un colore preciso. Caricare un'immagine è facoltativo, 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 frazionati, tetradici e monocromatici secondo la teoria della ruota dei colori. Clicca su un campione qualsiasi per copiarne il codice HEX.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

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.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.