What is Material Design Color Picker?

Material Design Color Picker provides the complete Material Design color palette with all primary colors and their shade variants (50 to 900). Click any swatch to get the exact HEX value, ready to use in your design system or code.

How to use

  1. Browse the color grid showing all Material Design primary colors — Red, Pink, Purple, Deep Purple, Indigo, Blue, and more.
  2. Click a primary color to expand its shade variants from lightest (50) to darkest (900), including accent shades (A100–A700).
  3. Click any shade to copy its HEX code, or build a palette by selecting multiple colors for your project.

Result

You're building a dashboard and need the exact Material Design 'Indigo 500' (#3F51B5) for your primary button color and 'Indigo 50' (#E8EAF6) for the hover background.

Related Tools