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 material color system is that table plus the rules for using it: a table of classic hue palettes, each graded from a pale 50 to a deep 900, 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 tool 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 table 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. Muted hues like brown never got accents, since a muted accent is a contradiction.

Material 3 later reframed this thinking as primary and tonal palettes, where a seed color generates a 13-tone ramp and material 3 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.

A worked material theme: indigo plus a pink accent

The template Android Studio made famous.

Read three values off the Material Design Colors 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 exact starter theme that shipped with Android Studio templates for years, the one behind thousands of released apps.

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.

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 leave the classic table for 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 Colors and the tools around it

Where this grid fits in the shelf.

Material Design Colors is the fixed, official table: click a swatch, get the documented hex, no generation involved. Its closest sibling is the Tailwind Color Picker, 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 spec doesn't provide are a job for Shades & Tints, seeded with any hex from this grid.