How to Use the Material Design 3 (M3) Tonal Palette Builder
-
1
Enter a primary brand seed color (e.g. `#6750a4`).
-
2
The generator builds the core M3 tonal palette roles: Primary, Secondary, Tertiary, Neutral (Surface), Neutral Variant, and Error.
-
3
Inspect each role's full 13-tone scale (Tone 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100).
-
4
Export formatted code for Flutter `ColorScheme`, Jetpack Compose, or CSS Custom Properties.
Practical Example & Use Case
Common Real-World Scenario
Generating full Material 3 light and dark theme tokens for an Android or Flutter mobile application from a single company logo color.
Technical Notes & Limitations
Browser Engine Architecture
Calculates tonal palettes adhering to Google Material Design 3 HCT (Hue, Chroma, Tone) perceptual space principles.
Frequently Asked Questions
What is "Tone" in Material Design 3?
Tone corresponds to perceptual luminance from 0 (pure black) to 100 (pure white). Tones with the same number share the same contrast regardless of hue.