Vedi un colore che vuoi riutilizzare — in una foto, nello screenshot di un sito che ti piace, in un vecchio logo i cui file sorgente sono spariti da tempo — e ti serve il codice hex vero, non un'ipotesi. Andare a occhio non funziona mai del tutto; i monitor mentono e "quel blu" sono in realtà sei blu leggermente diversi. Estrarre la palette direttamente dai pixel ti dà codici che puoi incollare nel CSS, in uno strumento di design o in un documento di brand.

Ecco come farlo, e come ottenere una palette davvero utilizzabile anziché una presa casuale di pixel.

Cosa fa davvero "estrarre una palette"

Come estrarre una palette di colori da qualsiasi immagine — visual 1
Cosa fa davvero "estrarre una palette"

Lo strumento scansiona l'immagine e trova i colori che la rappresentano meglio — le tonalità dominanti più gli accenti notevoli — poi ti dà ognuno come un codice hex che puoi copiare. Invece di un milione di colori di pixel individuali, ottieni un insieme ordinato (diciamo 5 o 8) che riassume l'immagine.

Questo è genuinamente utile per alcuni lavori comuni:

  • Recuperare i colori del marchio da un logo o una vecchia risorsa quando non hai la specifica originale.
  • Costruire una palette di design da una foto la cui atmosfera vuoi abbinare — un paesaggio, uno scatto di prodotto, un'opera d'arte.
  • Abbinare un sito o una grafica esistente di cui hai solo uno screenshot.
  • Scegliere uno sfondo o un accento che armonizzi con un'immagine che stai già usando.

Trascina un'immagine e leggi i codici:

Usa il controllo del numero per ottenere una palette utile

Come estrarre una palette di colori da qualsiasi immagine — visual 2
Usa il controllo del numero per ottenere una palette utile

L'impostazione più importante è quanti colori estrai. Cambia completamente la risposta.

  • Meno colori (3–5) ti danno la palette essenziale — la manciata di tonalità che definiscono l'immagine. È ciò che di solito vuoi per il branding o un sistema di design, dove un insieme ristretto è una caratteristica, non un limite.
  • Più colori (8–12) catturano accenti sottili e gradienti. Utile quando un'immagine è ricca e variata e vuoi anche le tonalità secondarie, o quando stai studiando esattamente come è composta una foto.

Se il primo risultato non convince — una tonalità domina, o un accento che volevi è stato fuso via — regola il numero e rileggi. Una foto che è 80% cielo ti darà molto blu a numeri bassi; aumenta il numero per far emergere i tocchi di colore più piccoli.

Clicca per copiare — il flusso di lavoro che conta

Leggere un codice hex e digitarlo è dove si insinuano gli errori (#3A7BD5 vs #3A7BD6 e hai passato dieci minuti a chiederti perché appare sbagliato). Nello strumento Palette di colori, ogni campione copia il suo codice hex al clic, così vai direttamente dall'immagine agli appunti al tuo foglio di stile senza toccare la tastiera.

Un flusso pratico:

  1. Carica l'immagine.
  2. Imposta il numero per adattarlo al lavoro — basso per una palette di brand, più alto per catturare gli accenti.
  3. Clicca ogni campione che vuoi; incollalo dove va.
  4. Non abbastanza gamma? Ritocca il numero e prendi gli extra.

Leggere i risultati con l'occhio di un designer

Alcune cose che vale la pena sapere così la palette funziona bene:

  • Il colore dominante non è sempre quello utile. Una foto di prodotto su sfondo bianco riporterà molto bianco o quasi-bianco. È accurato, ma il colore che ti interessa davvero è il prodotto — porta il numero più in alto per estrarlo, o ritaglia prima sul soggetto.
  • Le foto hanno più colori di quanto sembri. Pelle, ombre e riflessi aggiungono tonalità che non hai notato consapevolmente. Un numero più alto le rivela; uno più basso le nasconde dietro le medie.
  • L'hex è portatile. Ogni codice che copi funziona direttamente in CSS, Figma, Photoshop, Canva o un documento di brand. Nessuna conversione necessaria.

Perché resta nel tuo browser

L'intera estrazione gira localmente — l'immagine viene letta e analizzata nel tuo browser con Canvas, e non viene mai caricata su un server. Questo conta quando l'"immagine" è un mockup non rilasciato, una risorsa di brand privata di un cliente o uno screenshot interno che non dovresti pubblicare su uno strumento web a caso. È gratis, non richiede registrazione, e dopo la prima visita funziona offline.

Prendi i colori, clicca per copiare, incollali dove appartengono.