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.

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.