Material Design Generator

Generate complete Material Design 3 palettes with 50-900 shades, A100-A700 accents, MD3 color roles, and UI preview

Generate complete Material Design 3 palettes: 50-900 scale, A100-A700 accents, MD3 color roles (Primary, Secondary, Tertiary, Surface), WCAG contrast, UI preview and export to CSS, Tailwind, Flutter, Android XML, SCSS and JSON.

Base Color

rgb(33, 150, 243)

Secondary

#f37e21

Tertiary

#f32196

Material Design Presets

Primary Shades (50-900)

#f0f3f5

AAA

100

#dfe6ec

AAA

200

#b5cfe3

AAA

300

#82b8e3

AAA

400

#4ba2e7

AAA

500

#2196f3

AA Large

600

#0673d0

700

#015db1

800

#01488e

AAA

900

#032d59

AAA

Accent Colors (A100-A700)

Vibrant saturated variants for FABs, CTAs, and highlighted elements

A100

#a3d6ff

AAA

A200

#4db0ff

AAA

A400

#008eff

AA Large

A700

#0072cc

Contrast Ratios (WCAG)

Shade	HEX	vs White	vs Black	WCAG
50	#f0f3f5	1.11:1	18.84:1	AAA
100	#dfe6ec	1.26:1	16.67:1	AAA
200	#b5cfe3	1.62:1	13.00:1	AAA
300	#82b8e3	2.12:1	9.91:1	AAA
400	#4ba2e7	2.76:1	7.62:1	AAA
500	#2196f3	3.12:1	6.72:1	AA
600	#0673d0	4.80:1	4.37:1	AA
700	#015db1	6.56:1	3.20:1	AA
800	#01488e	9.06:1	2.32:1	AAA
900	#032d59	13.78:1	1.52:1	AAA
A100	#a3d6ff	1.54:1	13.62:1	AAA
A200	#4db0ff	2.34:1	8.97:1	AAA
A400	#008eff	3.33:1	6.31:1	AA
A700	#0072cc	4.91:1	4.28:1	AA

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

Accent Colors

• A100: Light accent, tooltips
• A200: FABs, switches, sliders
• A400-A700: Strong CTAs, active states

How it works

Material Design is Google's design system used across Android, Flutter, Angular Material, and MUI (React). This generator creates complete palettes compatible with Material Design 3 (Material You), including the shade scale, accent colors, and the color roles defined by the specification.

Material Design palette structure

50-100: Very light tones — backgrounds, elevated surfaces, containers
200-400: Mid tones — secondary elements, borders, disabled states
500: Main base color — your brand or primary color
600-700: Tones for hover, active states, and AppBar
800-900: Dark tones — text on light backgrounds, strong emphasis
A100-A700: Vibrant accent colors — FABs, CTAs, switches, sliders

Material Design 3 Color Roles

Material Design 3 introduces a color roles system that goes beyond the simple shade scale:

Primary / On Primary: Main color and its legible text
Primary Container / On Primary Container: Soft backgrounds with matching text
Secondary: Complementary color, auto-generated
Tertiary: Triadic color for visual variety
Error: Semantic red for error states
Surface / On Surface: General backgrounds and text (light and dark mode)
Outline: Borders and dividers

💡 Practical use cases

Case 1: Android / Flutter app with Material You

Your app needs a theme based on corporate color #6366F1.

→ Generate the 50-900 palette + A100-A700 accents
→ Use the "MD3 Roles" tab to get Primary, Secondary, Tertiary, Surface
→ Export directly to Flutter (Dart) or Android XML
→ Preview with "UI Preview" in light and dark mode

Case 2: React (MUI) / Angular Material

Configure a custom theme with createTheme() in MUI or $mat-palette in Angular Material.

→ Export as CSS custom properties or SCSS map
→ Automatically includes MD3 roles as variables
→ Secondary and tertiary colors are auto-generated

Case 3: Tailwind CSS with Material tokens

You need to integrate Material Design colors into your Tailwind project.

→ Export as ready-to-paste Tailwind config
→ Includes primary (all shades), secondary, tertiary, and error
→ Use bg-primary-500, text-primary-900, etc.

Case 4: Verify WCAG accessibility

You need to ensure your theme colors meet contrast standards.

→ Each shade shows its WCAG level (AAA, AA, AA Large, or Fail)
→ The contrast table shows exact ratios vs white and black
→ Identify which shades are safe for text and which for backgrounds

Export formats

Export your complete Material Design palette (14 shades + MD3 roles) to 6 formats:

CSS: Custom properties with MD3 variables
SCSS: Sass map + role variables
Tailwind: Ready config for tailwind.config.js
Flutter: Dart class with Color constants
Android XML: colors.xml resource file for Android
JSON: Complete data with shades and roles

Frequently Asked Questions

What is the 500 color in Material Design?

The 500 shade is the base color of the palette, equivalent to your brand's primary color. All other shades (50-400 lighter, 600-900 darker) are derived from this base color. It's used as the main color for AppBars, primary buttons, and highlighted elements.

What are accent colors A100-A700 for?

Accent colors (A100, A200, A400, A700) are more saturated, vibrant versions of the base color. They're used for FABs (Floating Action Buttons), switches, sliders, CTAs, and any element that needs to visually stand out in the interface. A200 is the most commonly used for FABs in Material Design.

What are color roles in Material Design 3?

Material Design 3 (Material You) defines semantic roles like Primary, Secondary, Tertiary, Error, and Surface. Each role has variants: the base color (e.g., Primary), its legible text (On Primary), a softer container version (Primary Container), and its text (On Primary Container). This system ensures consistency and accessibility across your app.

How do I verify WCAG contrast for my Material palette?

In the "Palette" tab, each shade displays its WCAG level (AAA, AA, AA Large, or Fail) directly on the swatch. Additionally, the contrast table shows exact ratios for each shade against white and black, so you know which combinations are accessible for normal text (4.5:1 for AA) or large text (3:1 for AA Large).

Can I export the Material palette for Flutter or Android?

Yes. We offer 6 export formats: CSS custom properties, SCSS map, Tailwind config, Flutter (Dart class with Color constants), Android XML (colors.xml), and JSON. All include the 14 palette shades (50-900 + A100-A700) and MD3 color roles.

How are secondary and tertiary colors generated?

The secondary color is automatically generated as the complementary of the base color (opposite on the color wheel). The tertiary is calculated as the first triadic color (120° separation). Both are shown next to the picker and included in all exports with their corresponding MD3 roles.