1
Upload an image
Drop, select, or paste an image. The tool downsizes it locally, then extracts UI-ready source candidates with Celebi quantization and Score ranking.
DEVELOP.09 MATERIAL COLOR
Monet Palette
Upload an image and generate dynamic themes with the official Material Color Utilities. Compare variants, light and dark modes, semantic roles, and full tonal palettes.
IMG
Drop an image here
or click to select · paste supported
JPG, PNG, WebP, GIF · processed locally Source candidates Choose a color as the theme seed
CFG
Theme settings
Local only
Upload an image to generate a theme
We will extract source candidates locally, then build a complete Material color system ready for interface use.
UI
Theme in context
§ 01
How to Generate a Material Theme from an Image
2
Compare variants
Choose the Material 3 or Material 3 Expressive spec and compare variants with the same interface preview, source color, and contrast level.
3
Inspect and export
Check light and dark themes together, inspect semantic roles and full tonal palettes, then export CSS custom properties or JSON.
§ 02
9 Material Dynamic Color Styles
Monochrome / Neutral
Achromatic and low-chroma schemes for quiet, content-dense interfaces.
Tonal Spot / Vibrant
The balanced Material 3 default and a more colorful, energetic interpretation.
Expressive / Rainbow / Fruit Salad
Strong hue rotations give brand-focused and playful products a distinct personality.
Fidelity / Content
Preserve more of the source color and temperature relationships when content should lead.
§ 03
Color Preview Built for Real Interfaces
✳
Each variant uses the same five-color fingerprint for direct comparison of primary, secondary, tertiary, surface, and error colors.
✳
Light and dark themes are shown together to inspect surfaces, text, buttons, containers, and navigation.
✳
All 13 tones are available for primary, secondary, tertiary, neutral, neutral variant, and error palettes.
✳
Powered by Google's official Material Color Utilities with fully local processing.
§ 04
Frequently Asked Questions
Q1What is Monet?
Monet is a common name for Android's dynamic color system. It does not simply copy image colors: it selects a suitable source color and builds a complete, contrast-aware theme in the HCT color space.
Q2How do Material 3 and M3 Expressive differ?
Material 3 uses the 2021 dynamic color spec and offers 9 classic variants. M3 Expressive uses the 2025 spec; the official library currently provides new rules for Neutral, Tonal Spot, Vibrant, and Expressive, including device-specific behavior.
Q3Why can variants look so different from the same source?
Each variant applies different hue rotations and chroma targets to primary, secondary, tertiary, and neutral palettes. Neutral stays restrained, Vibrant raises chroma, Expressive rotates hue strongly, while Fidelity aims to preserve the source appearance.
Q4Is my image uploaded?
No. Image decoding, resizing, pixel quantization, theme generation, and exports all happen in your browser. The image never leaves your device.