Material 3 Theme & Colors

H4L Soft

Contains ads

About this app

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.