Skip to main content
Back to Colors generators

Colors

Material Design Color Palette Generator

Used by developers, writers, and creators worldwide.

A Material Design color palette generator creates a structured ten-step tonal scale — shades 50 through 900 — that mirrors Google's own component libraries. Designers and developers use it to establish consistent color hierarchies without manually interpolating values in Figma or code. You control two inputs: base hue (0–360) and saturation percentage. Those two numbers determine everything from your near-white surface backgrounds at shade 50 to your high-contrast text and icon colors at shade 900. Lowering saturation to 40–55% yields calm enterprise tones; pushing it past 75% produces vivid consumer-facing palettes. The output drops directly into Flutter ThemeData, Angular Material SCSS maps, Tailwind config, or Figma token libraries.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Enter your brand color's hue value (0–360) into the Base Hue field — find it in any color picker app.
  2. Adjust the Saturation slider to match the vibrancy level your project requires (40–55% for professional, 70–85% for vibrant).
  3. Click Generate to produce all ten shades from 50 to 900 with their hex values.
  4. Copy individual hex values or the full list to paste into your Flutter theme, CSS variables, or design tokens.

Use Cases

  • •Building a Flutter MaterialColor swatch map with shades 50–900 inside ThemeData.primarySwatch
  • •Mapping shades 50–200 as surface and container tokens in a Figma local variable collection
  • •Generating an Angular Material SCSS palette for mat.define-palette() and a custom light theme
  • •Setting CSS custom properties like --color-primary-500 in :root for a Tailwind or vanilla stylesheet
  • •Prototyping a muted enterprise dashboard palette by dropping saturation to 45% before committing to a hue

Tips

  • →Set saturation below 50% before tweaking hue — muted palettes reveal hue differences more clearly than vivid ones.
  • →Use shade 500 as your interactive element color, 100 as its hover background, and 700 as its pressed/active state.
  • →For dark mode, swap surface roles: use shades 800–900 as backgrounds and 100–200 as on-surface text colors.
  • →If shade 900 looks brownish or muddy, lower saturation by 10–15% — high saturation compresses well at dark ends.
  • →Generate two palettes with complementary hues (180 degrees apart) to get a ready-made primary and secondary token set.
  • →Cross-check shade 500 against your original brand hex in a color picker; adjust hue by 1–5 degrees if the generated shade drifts.

FAQ

how do i use material design shades 50 to 900 in my app

Each shade has a defined role: 50–200 for backgrounds and surfaces, 400–500 for primary brand color, 600+ for text, icons, and high-contrast states. In Flutter, build a MaterialColor swatch map with all ten keys and assign it to primarySwatch. In Angular Material, paste the values into a $custom-palette SCSS map and pass it to mat.define-palette().

which generated shades pass wcag aa contrast on white

At 60–80% saturation, shades 600 and above typically hit the 4.5:1 ratio required for WCAG AA on white backgrounds. Shades 700–900 almost always pass; shades below 400 rarely do for body text. Always verify your specific hex values with a contrast checker like WebAIM's tool, since saturation shifts the exact cutoff.

how is this different from google's official material color tool

Google's tool limits you to a fixed set of predefined brand colors. This generator accepts any hue from 0 to 360 and any saturation level, so you can match an exact brand hex or experiment freely. It's especially useful when a brand's primary color falls between Google's preset options.