Skip to content
ToolQivo

Material Design Palette Generator

Generate a Material palette, primary through A700.

Color Tools Reviews Free · no sign-up

Your primary colour

Palette 
The palette appears here

Quick Tool Overview

The Material Design Palette Generator builds all fourteen Material colours from one seed — 50 through 900 plus the A100–A700 accents — with Flutter, Android XML and CSS output and the text colour Material specifies for each shade.

What it does
Generates a Material palette from one colour
You give it
A primary colour
You get back
Ten shades, four accents and platform code
Best for
Flutter and Android theming
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Material Design Palette Generator

Material Design asks for a specific shape of palette: ten shades from 50 to 900, plus four accent colours numbered A100 to A700 for the things that have to stand out. This generates all fourteen from a single colour.

Your colour is placed at 500, the position Material treats as the primary, and the rest are derived by matching the lightness progression of the official Material palettes. The accents are built differently from the main ramp, as they are in the real thing — more saturated and pushed further from the base, because their job is to interrupt rather than to blend.

The output covers the platforms that actually consume a Material palette: a Flutter MaterialColor definition, an Android colors.xml block, CSS custom properties, and a Material 3 seed line for projects using ColorScheme.fromSeed instead of an explicit swatch. Each shade is shown with the text colour Material specifies for it, which is the detail that stops a generated palette from looking off.

Key features of the Material Design Palette Generator

Accents built properly

A100 to A700 are more saturated and further from the base, as they are in the official palettes — their job is to interrupt.

Platform output

A Flutter MaterialColor, an Android colors.xml block, CSS custom properties, and a Material 3 seed line.

Text colours computed

Dark or white per shade, calculated from contrast rather than guessed at a fixed boundary.

Matches the official curve

The lightness progression follows the real Material palettes, so a generated swatch sits beside a stock one.

Material 2 and 3

The swatch structure Flutter widgets still need, plus the seed approach for newer projects.

How to use the Material Design Palette Generator

  1. 1

    Enter your primary colour

    It becomes the 500, the same as in the official palettes.

  2. 2

    Review the ramp

    Ten shades plus four accents, each with its recommended text colour.

  3. 3

    Choose your platform

    Flutter, Android XML, CSS variables, or a Material 3 seed.

  4. 4

    Copy the palette

    The whole definition, ready to paste into a theme.

Frequently asked questions

Emphasis. Material uses them for floating action buttons, selection controls and anything that has to be noticed rather than read. They are deliberately more saturated than the main ramp.

Reviews of the Material Design Palette Generator

What people who use the Material Design Palette Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Material Design Palette Generator. It takes half a minute and no account.

Write the first review

More color tools