1
Carica un’immagine
Trascina, seleziona o incolla un’immagine. Lo strumento la riduce localmente ed estrae candidati adatti all’interfaccia con quantizzazione Celebi e ordinamento Score.
DEVELOP.09 MATERIAL COLOR
Tavolozza Monet
Carica un’immagine e genera temi dinamici con le Material Color Utilities ufficiali. Confronta varianti, modalità, ruoli semantici e palette tonali complete.
IMG
Trascina qui un’immagine
oppure fai clic per scegliere · puoi anche incollare
JPG, PNG, WebP, GIF · elaborazione locale Colori sorgente candidati Scegli un colore come seme del tema
CFG
Impostazioni del tema
Solo locale
Carica un’immagine per generare un tema
Estrarremo localmente i colori candidati e costruiremo un sistema di colori Material completo, pronto per l’interfaccia.
UI
Anteprima del tema nel contesto
§ 01
Come generare un tema Material da un’immagine
2
Confronta le varianti
Scegli le specifiche Material 3 o Material 3 Expressive e confronta le varianti con la stessa anteprima, colore sorgente e livello di contrasto.
3
Controlla ed esporta
Esamina insieme i temi chiaro e scuro, controlla ruoli semantici e palette complete, poi esporta proprietà CSS o JSON.
§ 02
9 stili di colori dinamici Material
Monochrome / Neutral
Schemi acromatici e poco cromatici per interfacce tranquille e ricche di contenuti.
Tonal Spot / Vibrant
Lo stile Material 3 equilibrato predefinito e un’interpretazione più colorata ed energica.
Expressive / Rainbow / Fruit Salad
Forti rotazioni della tonalità danno personalità a prodotti di brand ed esperienze giocose.
Fidelity / Content
Preservano meglio il colore sorgente e le relazioni di temperatura quando il contenuto deve guidare la tavolozza.
§ 03
Anteprima dei colori pensata per interfacce reali
✳
Ogni variante usa la stessa impronta di cinque colori per confrontare direttamente colori primari, secondari, terziari, di superficie ed errore.
✳
I temi chiaro e scuro sono mostrati insieme per controllare superfici, testo, pulsanti, contenitori e navigazione.
✳
Sono disponibili tutti i 13 toni delle palette primary, secondary, tertiary, neutral, neutral variant ed error.
✳
Usa le Material Color Utilities ufficiali di Google ed elabora tutto localmente.
§ 04
Domande frequenti
Q1Che cos’è Monet?
Monet è un nome comune per il sistema di colori dinamici di Android. Non copia semplicemente i colori dell’immagine: sceglie un colore sorgente adatto e crea un tema completo e contrastato nello spazio HCT.
Q2Qual è la differenza tra Material 3 e M3 Expressive?
Material 3 usa la specifica dei colori dinamici del 2021 e offre 9 varianti classiche. M3 Expressive usa la specifica del 2025; la libreria ufficiale propone nuove regole per Neutral, Tonal Spot, Vibrant ed Expressive, con differenze per dispositivo.
Q3Perché le varianti sono così diverse con la stessa sorgente?
Ogni variante applica rotazioni della tonalità e obiettivi di cromaticità diversi alle palette primaria, secondaria, terziaria e neutra. Neutral è sobria, Vibrant aumenta la cromaticità, Expressive ruota molto la tonalità e Fidelity conserva l’aspetto sorgente.
Q4La mia immagine viene caricata?
No. Decodifica, ridimensionamento, quantizzazione dei pixel, generazione ed esportazione avvengono nel browser. L’immagine non lascia il dispositivo.