Skip to content

Material Design colors

Classic Material “500” style families (red, purple, teal, …) with tap-to-copy HEX. Android and MUI developers still reference these names in legacy code — use Google’s current spec when you adopt dynamic color (Material You) roles instead of static ramps.

What this page is

A searchable slice of the palette that popularised numeric shade steps in product design. It is not the full dynamic color role system — those tokens map to wallpaper-derived schemes on Android 12+.

How to use it

  1. Filter by hue family, copy HEX into Compose XML, CSS, or Figma stylesheets.
  2. Pair saturated 500-level fills with neutrals from the same table for text backgrounds — then verify contrast.
  3. When you ship tokens to web and Android together, mirror ramps in the Android colors.xml exporter after you lock anchors.

Use Material’s own tools when…

You need tonal palettes tied to colorScheme surfaces, elevation overlays, and state layers — export from Material Theme Builder instead of extending this flat list by hand.

Related on ChromaXP

Adjacent system palettes.

Bootstrap 5 Semantic theme colors when your stack is web-first instead of Material. Contrast checker Validate body copy on Material 500 fills before you ship. All palettes Jump to Tailwind, Ant Design, or HTML named colors.

FAQ

Is this the full Material catalog?

No — we ship a curated core set from our static data file. Follow Google’s official spec for every accent family, dynamic roles, and accessibility tuning.

Does this include Material You dynamic colors?

Dynamic schemes are contextual — they cannot be flattened to one HEX table. Use Material Theme Builder or on-device APIs for those pipelines.

Why do some colors clip on wide-gamut displays?

HEX encodes sRGB. HDR UI may need additional design work beyond these values; test on actual hardware profiles.