Color & Design·4 min read

The Material Color System, from 500s to Tones

Android theming has always started from a small set of named slots and a big table of hues to fill them with. The original Material color system is that table plus the rules for using it: 19 hues, each graded from a pale 50 to a deep 900, most with saturated accent swatches on the side. Learn how the numbering works and an app theme stops being guesswork; you pick a hue, read three values off its column, and the interface holds together on every screen.

Open the free Material Design Color Palette All insights

Theming an Android app with Material tones

Three slots, one table.

The classic Android theme asks for three colors before anything renders: colorPrimary for the app bar and major surfaces, colorPrimaryDark for the status bar behind it, and colorAccent for controls that need attention, like FABs, switches, and text cursors. The Material palette answers all three with a pattern rather than a debate.

Primary comes from a hue's 500 column, the tone Google tuned as each hue's balanced workhorse. PrimaryDark is the same hue's 700, dark enough to read as depth behind the app bar without becoming a different color. Accent comes from a different hue's A-series, because accents must contrast with primary to do their job. Fill the slots this way and screens you haven't designed yet inherit a coherent look.

The Material color system in plain terms

What the numbers and letters mean.

Each hue in the system is really two families. The numbered run from 50 to 900 tracks lightness: 50 is a whisper of the hue for backgrounds, 500 is the reference tone, 900 is nearly black with the hue still present. The lettered run, A100 through A700, holds brighter, more saturated variants built for small doses of emphasis. Brown, grey and blue grey have no accents, since a muted accent is a contradiction.

Material 3 later reframed this as tonal palettes, where a seed color generates a set of tones and color roles like primary, onPrimary, and primaryContainer map tones to jobs automatically. The vocabulary changed from swatch numbers to roles, but the underlying idea, one hue expressed at many controlled lightness levels, is the same system wearing new names. The Material Design Color Palette tool covers the original palette, not Material 3's generated schemes.

A worked Material theme: indigo plus a pink accent

The classic starter combination.

Read three values off the grid: indigo 500 is #3F51B5, indigo 700 is #303F9F, and pink A200 is #FF4081. Assign them as colorPrimary #3F51B5, colorPrimaryDark #303F9F, colorAccent #FF4081, and you've rebuilt the starter theme that shipped with Android Studio project templates for years.

The combination works for teachable reasons. The 700 sits two visible steps below the 500 in the same column, so bar and status bar read as one material under different light. The pink accent sits far from indigo on the hue wheel, so a floating action button in #FF4081 can't be mistaken for chrome. Swap in teal 500 #009688 with teal 700 #00796B and an orange accent, and the same three-slot logic holds.

Before you click, set the copy format. HEX gives #3F51B5, RGB gives rgb(63, 81, 181), MUI gives indigo[500] or pink.A200 for code that imports colors from @mui/material/colors, and CSS variable gives a ready line like --md-indigo-500: #3F51B5;. Picking the format your codebase uses saves a round of find and replace later.

Material tone mistakes that flatten an interface

How good palettes get misused.

The table is forgiving; these habits defeat it anyway.

Using an A-series swatch as a surface color. Accents are tuned for small areas; an A400 app bar reads as alarm, not brand.
Pairing 500 text with a 50 background of the same hue and assuming it passes contrast. Many such pairs land near the AA boundary; measure, don't assume.
Pulling primary and primaryDark from different hues. The status bar stops reading as shadow and starts reading as a second brand color.
Hard-coding hexes throughout layouts instead of referencing theme attributes, which turns a later palette change into a repo-wide find and replace.

Getting more from Material tones than three slots

The columns beyond 500 and 700.

The light end of each column is quietly useful. A hue's 50 makes selected-state backgrounds and info banners that feel branded without shouting, and the 100 works for chips and avatars behind dark text of the 800 or 900 from the same column, keeping tonal harmony automatic.

When you move from the classic table to Material 3's generated schemes, bring the old hexes along as seeds. Feeding indigo 500 into a dynamic color pipeline produces tonal palettes that keep continuity with the brand your users already know, rather than starting color identity from zero.

Material Design Color Palette and the tools around it

Where this grid fits in the shelf.

The Material Design Color Palette is a fixed reference table: click a swatch, get the documented value in your chosen format, no generation involved. Its closest sibling is the Tailwind Color Palette, the same idea for the web framework world, and comparing the two grids explains a lot about why Android and web builds of the same product drift apart in color.

Two checks belong in every Material workflow. The Color Blindness Simulator reveals whether your chosen primary and accent stay distinguishable under deuteranopia, a real risk with red and green picks from the table. And custom in-between tones the palette doesn't provide are a job for the Color Shades Generator, seeded with any hex from this grid.