Estrai palette colori dalla tua foto — CSS, gradienti e JSON

Carica una foto o trascinala qui: ottieni palette dominanti, suggerimenti di contrasto, gradienti, ruoli UI (bg/primary/accent), e CSS variables + JSON esportabili. Tutto client-side.

Input immagine

anteprima
Consiglio: immagini < 4MB • verranno ridotte per l'analisi (max 500px)
Dimensioni immagine
—
Luminosità media
—

Palette dominante

Carica un'immagine e premi “Estrai palette”.

Ruoli UI suggeriti

Significato pratico: Background = colore di fondo della pagina; Primary = colore principale (brand, titoli, bottoni); Accent = tocchi di evidenza/CTA/link; Text = colore del testo che massimizza il contrasto su Background.

Background
—
Primary
—
Accent
—
Text
—
Gradienti (sfumature) — clicca per copiare il CSS
  • Contrasto forte: sfumatura tra i due colori più diversi della foto. Per hero/sfondi che devono spiccare.
  • Evidenza → Principale: dal colore di evidenza (accent) al colore principale del tema. Per bottoni/CTA o badge.

Cos’è e come usarlo

Carica una foto, estrai la palette, poi usa i ruoli UI per costruire rapidamente un tema. Mantieni il contrasto almeno AA per testi e bottoni. Esporta le variabili CSS o il JSON e incollale nel tuo progetto.

  1. Carica immagine e premi “Estrai palette”.
  2. Seleziona i colori proposti come Background/Primary/Accent/Text.
  3. Verifica i rapporti (pallini e numeri) e scegli combinazioni leggibili.
  4. Esporta CSS/JSON e usali nel tuo progetto.

Esporta

—
Diagnostica
Pronto.

MVP client-side. K-Means su campionamento — 6 cluster. WCAG contrast.

FAQ rapide su estrattore palette

Come si usa? Carica una foto, avvia l analisi e scegli i ruoli UI suggeriti.

I file restano privati? Si, l elaborazione avviene nel browser senza upload su server esterni.

Tool collegati: puoi combinare i risultati con Generatore Colori e Generatore Gradienti.