Material Design Color Chart

The full Material Design palette

The Material Design color palette

Google's Material Design 2 palette organizes color into 19 hues — red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, gray and blue gray. The full palette publishes each hue at ten tonal weights, 50 and 100–900, and the more saturated hues add accent weights A100, A200, A400 and A700. The chart above shows the six most-used steps of every hue — 50, 100, 300, 500, 700 and 900 — which is enough to build most UI. The 500 weight is the reference tone: the one Material uses as the default primary color. Click any swatch to copy its hex code.

Material 2's palette shaped a decade of Android and web UI, and its hex codes still appear everywhere: #2196F3 (Blue 500), #4CAF50 (Green 500) and #F44336 (Red 500) are among the most recognized colors in interface design. Material 3 (Material You) moved to dynamically generated tonal palettes, but the fixed Material 2 values on this page remain the practical reference for most existing products, component libraries and design assets.

Using Material colors in a project

Pick a hue's 500 as your primary, a darker weight (700–900) for headings and pressed states, and a light weight (50–100) for surfaces and hover fills. Use an accent weight (A200 or A400) sparingly for a single call-to-action. Run any text-on-background pair through the contrast checker first — mid weights on white frequently miss WCAG AA for body text. To generate a Material-style tonal ramp from your own brand color, use the palette generator; to convert any Material hex to RGB, HSL or CMYK, use the color converter.

Material's structure is close to the Tailwind CSS palette, so the weight-based approach carries over. See the full color charts hub for Flat UI and the web-safe grid, or the 140 CSS color names for the standard browser keywords.