Skip to content

Material Design Color Palette

Every Material color, one click to copy.

Loading…

The Material Design palette gives each of its 19 hues — from red to blue grey — ten shades from 50 to 900 and, for most hues, four bright accents from A100 to A700. Click any swatch to copy its HEX code, or type a color to find the closest Material color, handy when you move a design to a Material-based app or theme.

How to copy Material Design colors

  1. Step 1

    Browse the palette.

  2. Step 2

    Click a swatch to copy its HEX code.

  3. Step 3

    Or type a color to find the closest Material one.

Why use PhotoTools

Complete palette

19 hues, 254 colors.

One click

The HEX code is copied instantly.

Closest match

The Material color nearest to any color.

Supported formats

Output

  • HEX

Frequently asked questions

Which shade is the main color?

Shade 500 is the primary shade of each hue; lighter shades (50–400) suit backgrounds and darker ones (600–900) suit text and pressed states.

What are the A shades?

Accent shades (A100–A700) are brighter, more saturated variants for buttons, switches and highlights. Brown, grey and blue grey have none.

Is it free?

Yes. Browser tools on PhotoTools are free, unlimited and work without an account.

Are my images uploaded to a server?

No. This tool runs entirely in your browser using WebAssembly. Your images never leave your device, and nothing is stored.