Material 3 Theme & Colors
Loading..
Pick one color. Get a complete Material Design 3 theme — and the
code to drop straight into your project.
PICK A SEED WATCH A REAL APP REPAINT
Tap a shade from the Material palette or open the picker and enter any color you like. All 48 Material 3 color roles are generated for both light and dark then rendered on genuine Material 3 components — filled tonal and outlined buttons chips a switch elevated and filled cards a floating action button an app bar. You see an app not a grid of swatches.
Change the seed on the palette page and the preview repaints as you go.
NINE STYLES THREE CONTRAST LEVELS
One color can produce nine different schemes: Tonal spot (the one Android itself uses) Neutral Vibrant Expressive Content Fidelity Monochrome Rainbow and Fruit salad. Each at standard medium or high contrast.
Flip between the light and dark preview without touching your device settings so you can check both halves of a theme in one sitting.
CHECK THE CONTRAST
Every foreground and background pair in the generated scheme is measured against WCAG 2.1 and graded AA or AAA. You get the exact ratio plus a live sample of text in that color on that background — because a number tells you whether it passes and the sample tells you whether it is comfortable.
Raise the contrast level and watch the grades climb.
EXPORT IN THE FORMAT YOU ACTUALLY USE
• Jetpack Compose — a Theme.kt with lightColorScheme and darkColorScheme ready to paste
• Android XML — colors.xml for values/ and values-night/ named the way Material Theme Builder names them
• CSS — --md-sys-color-* custom properties with dark in a prefers-color-scheme block
• JSON — both schemes plus all six tonal palettes at thirteen tones each
Copy it to the clipboard or share it to mail chat or notes and pick it up on your computer. Every individual role can be copied as a hex code too.
THE MATERIAL PALETTE STILL HERE
All 19 Material Design palettes and 254 shades each with its name and hex code one tap to copy. It is where the app started and it is still the fastest way to grab a color — it just doubles as the seed picker now.
PRACTICAL THINGS
• Free no account no sign-in
• Works offline — the color engine runs on your device
• Follows your system light or dark theme
• Tablet layout puts the controls beside the preview
• Available in 15 languages
Built for Android and web developers and for designers who would rather hand over a working theme than a screenshot.
Material Design is a design system published by Google. This app is an independent tool that generates color schemes compatible with it.
PICK A SEED WATCH A REAL APP REPAINT
Tap a shade from the Material palette or open the picker and enter any color you like. All 48 Material 3 color roles are generated for both light and dark then rendered on genuine Material 3 components — filled tonal and outlined buttons chips a switch elevated and filled cards a floating action button an app bar. You see an app not a grid of swatches.
Change the seed on the palette page and the preview repaints as you go.
NINE STYLES THREE CONTRAST LEVELS
One color can produce nine different schemes: Tonal spot (the one Android itself uses) Neutral Vibrant Expressive Content Fidelity Monochrome Rainbow and Fruit salad. Each at standard medium or high contrast.
Flip between the light and dark preview without touching your device settings so you can check both halves of a theme in one sitting.
CHECK THE CONTRAST
Every foreground and background pair in the generated scheme is measured against WCAG 2.1 and graded AA or AAA. You get the exact ratio plus a live sample of text in that color on that background — because a number tells you whether it passes and the sample tells you whether it is comfortable.
Raise the contrast level and watch the grades climb.
EXPORT IN THE FORMAT YOU ACTUALLY USE
• Jetpack Compose — a Theme.kt with lightColorScheme and darkColorScheme ready to paste
• Android XML — colors.xml for values/ and values-night/ named the way Material Theme Builder names them
• CSS — --md-sys-color-* custom properties with dark in a prefers-color-scheme block
• JSON — both schemes plus all six tonal palettes at thirteen tones each
Copy it to the clipboard or share it to mail chat or notes and pick it up on your computer. Every individual role can be copied as a hex code too.
THE MATERIAL PALETTE STILL HERE
All 19 Material Design palettes and 254 shades each with its name and hex code one tap to copy. It is where the app started and it is still the fastest way to grab a color — it just doubles as the seed picker now.
PRACTICAL THINGS
• Free no account no sign-in
• Works offline — the color engine runs on your device
• Follows your system light or dark theme
• Tablet layout puts the controls beside the preview
• Available in 15 languages
Built for Android and web developers and for designers who would rather hand over a working theme than a screenshot.
Material Design is a design system published by Google. This app is an independent tool that generates color schemes compatible with it.
Show More >
