Tutti gli strumenti

Codedge Palette Extractor

Da foto a palette UI, con colori puliti e riutilizzabili.

Carica una foto, estrai i colori dominanti e genera ruoli UI, contrasti, CSS variables e JSON. L'analisi avviene localmente nel browser.

Palette dominante

I 5 colori più presenti, ordinati in base alla loro percentuale nell'immagine.

Pronto
Carica un'immagine o avvia la demo.

Ruoli UI

Colori pronti per tema, testi e CTA.

Export

CSS variables e JSON generati dalla palette corrente.

:root {
  --color-1: ...
}

Estrattore Palette Colore da Immagine

L'estrazione dei colori da un'immagine rappresenta un passaggio fondamentale nella definizione della visual identity di un progetto web. Questo estrattore di palette colore online elabora localmente nel browser qualsiasi fotografia o screenshot. Raggruppa i pixel visivamente simili nello spazio colore CIE L*a*b* e restituisce i cinque colori più presenti in ordine percentuale decrescente.

Una volta estratti i colori, lo strumento li organizza per te assegnando ruoli UI strategici: avrai a disposizione un colore di sfondo (background), una tonalità principale (primary) per elementi dominanti, un colore di accento (accent) per le chiamate all'azione e una tinta per il testo, calcolando in tempo reale il rapporto di contrasto WCAG. Questo ti garantisce di progettare interfacce inclusive e accessibili fin dal primo istante.

Domande Frequenti (FAQ)

Come funziona il calcolo dei colori dominanti?

L'immagine viene campionata nel browser e i colori simili vengono raggruppati con un processo iterativo nello spazio CIE L*a*b*. I cinque colori risultanti sono ordinati esclusivamente per copertura percentuale, quindi il primo campione è sempre quello più presente.

Posso scaricare i colori estratti?

Sì. Puoi copiare le variabili CSS pronte per il tuo foglio di stile, esportare l'intera palette in formato JSON, oppure scaricare direttamente i file di configurazione (.css e .json) per integrarli nel tuo design system o in Tailwind.

La privacy delle mie immagini è garantita?

Assolutamente sì. L'intero processo di elaborazione delle immagini avviene al 100% all'interno del tuo browser web (lato client) tramite Canvas API. Nessuna foto viene caricata su server esterni o memorizzata in database di terze parti.