Selezionatore di colore ed estrattore di palette - Scegliere i colori dall'immagine

Carica qualsiasi JPG, PNG, WebP o GIF e clicca ovunque sull'immagine visualizzata — il pixel esatto sotto il cursore viene campionato e mostrato come HEX, RGB e HSL con una copia con un clic per ogni formato. Perfetto per abbinare un colore di un marchio, campionare un campione da una fotografia o prendere tonalità d'accento da un mockup di design.

L'immagine viene ridimensionata a 320 pixel sul suo lato più lungo, poi ogni pixel viene suddiviso per i suoi primi 4 bit per canale. I bucket più popolati vengono mediati fino a colori a 8 bit pieni, ordinati per frequenza e restituiti come palette. Il risultato è tipicamente 5-24 colori dominanti che riassumono visivamente l'immagine.

Sì. I pulsanti Download producono due formati: un blocco variabile CSS pronto per essere incollato in un selettore :root (--color-1, --color-2...), e un file JSON con componenti esadecimali, RGB e percentuale di peso per ogni colore. Entrambi i formati si integrano perfettamente nei token di design, nelle configurazioni Tailwind e nelle librerie di palette.

No — la selezione dei colori e l'estrazione della palette avvengono interamente nel browser usando l'API HTML Canvas. L'immagine rimane sul tuo dispositivo, il che rende lo strumento sicuro per foto di prodotto non pubblicate, bozze di prototipi e asset di brand sotto NDA.

Per il lavoro sull'identità del marchio, 5-8 colori è il punto giusto — cattura il tema dominante senza diluire le scelte di accento. Per la visualizzazione dei dati consigliamo 10-16 colori così da avere tonalità categoriche sufficienti. Il cursore ti permette di scegliere tra 5 e 24.

I pixel con alfa inferiore a 128 vengono ignorati, quindi gli sfondi trasparenti non inquinano la palette con colori di "sfondo". Questo rende Image Color Picker particolarmente adatto per ritagli di prodotti, disegni di adesivi e soggetti isolati.

HEX (#RRGGBB) è il più compatto ed è quello che CSS, Figma e Sketch usano di default. RGB mostra i tre valori dei componenti da 0 a 255 — utile quando si lavora con dati immagine in modo programmativo. HSL (tonalità, saturazione, luminosità) è intuitiva per regolare i colori: spostare la tonalità per cambiare la famiglia di colori, regolare la luminosità per tonalità e sfumature.

Sì. Gratuito, senza account richiesto, senza limiti sulla dimensione dell'immagine o sul numero di palette estratte. Non c'è nulla da installare — l'intero strumento è una singola pagina web.