Material Color Reference

Browse and copy all Material Design color codes instantly. Find hex values for the complete 256-color Material palette with one-click copy.

No results found

How It Works

  1. Open the Material Color Reference tool in your browser.
  2. Browse the complete palette of 256 colors organized by color families and shade levels.
  3. Find your desired color by scrolling through the groups or locating a specific hue.
  4. Click any color swatch to instantly copy its hex code to your clipboard.
  5. Paste the hex code directly into your CSS, Figma, Sketch, or any other design tool.

Example

Input: Material Purple 500
Result: #9C27B0

FAQ

It is Google's official color system featuring 256 carefully curated colors organized into families such as Red, Blue, Green, and Purple, each with multiple shade levels ranging from 50 (lightest) to 900 (darkest).

Absolutely. All processing happens entirely client-side in your browser. No data is sent to any server, making it completely private and secure.

Simply click on any color swatch or its hex value and it will be copied instantly to your clipboard, ready to paste anywhere.

Yes, Material Design colors are freely available and widely used in web, mobile, and desktop applications, both personal and commercial.

Most color families include shades 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900, plus accent variants (A100, A200, A400, A700) where applicable.