Material Design Color Chart
Google's standard Material Design color palette featuring all 19 primary families across shades 50 to 900. Select any swatch to inspect Hex, RGB, HSL, and OKLCH codes, test shades, and copy color values instantly.
Understanding the Material Design Color Palette
Introduced by Google as part of the Material Design specification, this color system is crafted with bold hues that reflect physical material properties, architectural spaces, and dynamic studio lighting. Each hue has a primary base swatch at 500, extending lighter to 50 and deeper to 900.
The Anchor 500 Value
In Material Design, shade 500 represents the primary brand hue used for app bars, navigation headers, and primary buttons. Shades 700 and 800 serve as status bar and focused state anchors.
19 Carefully Calibrated Hues
Spanning vibrant chromatic ranges (Cyan, Indigo, Lime, Amber) to nuanced structural neutrals (Grey, Blue Grey, Brown), each palette offers consistent saturation progressions across every tier.
Material Surface Hierarchy
Lighter tiers (50–200) are engineered as background tints, chip badges, and hover card overlays that maintain legibility without overpowering content.
Accessibility & Legibility
Google's Material guidelines stipulate a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Material 500 shades in Blue, Indigo, and Teal pair cleanly with white text.
Frequently Asked Questions
What is the recommended primary color in Material Design?
Google recommends choosing a 500 shade from any chromatic family (such as Blue 500 #2196F3 or Indigo 500 #3F51B5) as your primary brand color, and the 700 shade for the mobile status bar.
How does Material Design compare to Tailwind CSS colors?
Material Design organizes colors in 10-step scales (50 to 900) anchored around the 500 primary, whereas Tailwind CSS uses an 11-step scale (50 to 950) optimized specifically for modern utility classes and dark mode design.