Material Design Color Palette Generator
Generate a complete Material Design 3 color scheme from a single seed color. Preview tonal palettes for primary, secondary, tertiary, error, and surface roles, then export as Flutter/Dart, Android XML, Kotlin, or CSS variables.
How the Material Design Color Palette Generator Works
This tool takes a single hex color as your brand seed and derives a full Material Design 3 tonal palette using HSL color space manipulation. Material Design 3, also known as Material You, introduced a dynamic color system where an entire theme is generated from one source color. This generator replicates that process in your browser, producing tonal palettes for six color roles: primary, secondary, tertiary, error, neutral, and neutral variant.
Tonal Palette Generation
Each color role is mapped to 13 tones from 0 (black) to 100 (white). The primary role uses your seed hue directly. The secondary role desaturates the seed by roughly 45 percent. The tertiary role shifts the hue by 60 degrees for complementary contrast. Neutral tones use a heavily desaturated version of the seed to maintain subtle warmth or coolness, while the neutral variant retains slightly more chroma for surface containers and outlines.
Understanding Material Design 3 Color Roles
Material Design 3 organizes colors into semantic roles rather than fixed palettes. The primary color is used for key components like FABs and filled buttons. The secondary color accents less prominent elements such as filter chips and selection controls. The tertiary color provides additional contrast for balancing primary and secondary, often used for complementary accents. Each role includes an "on" color for legible text and icons on that surface, plus a container variant for filled backgrounds with its own "on" color.
Tones and Light vs Dark Themes
A tonal palette spans 13 lightness levels. In a light theme, the primary color typically maps to tone 40 and its container to tone 90. In a dark theme, primary maps to tone 80 and its container to tone 30. This tool generates both theme mappings so you can see exactly which tone value to use for each context. Surface colors use neutral tones to provide non-distracting backgrounds that harmonize with your brand.
Exporting to Flutter, Android, and CSS
The generator outputs production-ready code in four formats. The Flutter/Dart output gives you a complete ColorScheme constructor for both light and dark themes. The Android XML output produces a colors resource file compatible with Material Components for Android. The Kotlin output provides color constants for Jetpack Compose theming. The CSS variables output maps every color role to custom properties you can use in web projects following Material Design guidelines.
Why Dynamic Color Matters
Dynamic color ensures visual harmony across your entire interface from a single brand decision. Instead of manually picking dozens of shades and hoping they work together, the tonal algorithm guarantees accessible contrast ratios and perceptual balance. On Android 12 and later, this same approach powers wallpaper-based theming, making your app feel native to each user's device.
Privacy and Processing
All palette calculations run entirely in your browser using JavaScript. No color data is sent to any server. Your brand colors remain completely private.