Material Design Generator
Generate complete palettes following Google's Material Design guidelines
Generate a complete palette of 10 shades (50-900) following Google's Material Design system. Ideal for creating consistent design systems.
Base Color
rgb(33, 150, 243)
Tip
Shade 500 will be your base color. Lower shades are lighter, higher shades are darker.
Generated Palette
#eff3f6
#dce7ef
#b5cfe3
#89b7dc
#59a0d9
#0d8df2
#0c7fda
#0a70c2
#0962a9
#074679
Export Code
:root {
--primary-50: #eff3f6;
--primary-100: #dce7ef;
--primary-200: #b5cfe3;
--primary-300: #89b7dc;
--primary-400: #59a0d9;
--primary-500: #0d8df2;
--primary-600: #0c7fda;
--primary-700: #0a70c2;
--primary-800: #0962a9;
--primary-900: #074679;
}Usage Guide
Shades
- • 50-200: Light backgrounds, elevated surfaces
- • 300-500: Primary colors, buttons, links
- • 600-900: Text on light backgrounds, emphasis
Recommendations
- • 500: Your brand's main color
- • 700: Hover and active states
- • 50-100: Backgrounds and surfaces
How it works
Material Design is Google's design system that defines how to create consistent color palettes.
Material palette structure
- 50-100: Very light tones for backgrounds
- 200-400: Light tones for secondary elements
- 500: Main base color
- 600-700: Tones for hover and active states
- 800-900: Dark tones for text and accents
- A100-A700: Vibrant accent colors
💡 Practical Use Cases
Case 1: Android app with custom theme
Your app needs a theme based on corporate color #6366F1.
→ Generate the complete 50-900 palette
→ Primary: 500, PrimaryDark: 700, Accent: A200
Case 2: React/Angular Material components
Configure custom theme in Angular Material or MUI.
→ Export palette as JS object
→ Use directly in createTheme() or $mat-palette
Case 3: FAB and highlighted elements
You need the floating button to stand out from the UI.
→ Use A200 or A400 color for maximum vibrancy
→ Contrast with primary 500 color