A Complete Guide to Google Material Design 3 Colors

Category: Design Systems · Published: 2026-08-08 · Updated: 2026-10-18

With the release of Android 12 and modern web interfaces, Google revolutionized how digital software handles color by introducing Material Design 3 (M3), affectionately known as Material You. Instead of forcing rigid, static corporate color palettes onto users, M3 introduced algorithmic personalization: dynamic color extraction, mathematical tonal palettes, and semantic surface container roles that guarantee digital accessibility across light and dark modes.

1. Introduction to Material Design 3

In traditional web design, a designer chooses 3 or 4 static brand colors, manually creates light and dark variations, and hopes that text contrast passes accessibility audits. Material Design 3 replaces this manual friction with algorithmic color science using the HCT (Hue, Chroma, Tone) color space.

HCT unites the scientific color modeling of CIELAB with the intuitive hue organization of Cam16. Unlike HSL (where colors with identical "lightness" values actually have drastically different perceived brightness to human eyes), HCT's "Tone" mathematically correlates 1:1 with relative luminance. If two colors in HCT have a Tone delta of 40 or greater, they are mathematically guaranteed to meet WCAG AA contrast compliance.

2. The Philosophy of Dynamic Color

Dynamic color bridges the gap between branding and user preferences. The Android operating system extracts a single "seed color" from the user's wallpaper using quantization algorithms. It then calculates its chroma and hue coordinates and generates five separate tonal palettes:

• Primary Palette: Derived from the key seed color; used for prominent components like floating action buttons and active states.
• Secondary Palette: Uses the same hue but with reduced chroma; used for less prominent filters, chips, and secondary buttons.
• Tertiary Palette: Uses a complementary or analogous hue shift; used for balancing accents and input validation highlights.
• Neutral Palette: Almost zero chroma; used for primary canvas backgrounds, card surfaces, and sheets.
• Neutral Variant: Slight chroma tint; used for card borders, dividers, and unselected text icons.

3. Understanding Tonal Palettes (13 Tonal Steps)

Every palette in Material 3 consists of 13 specific tones stepped from 0 (absolute black) to 100 (pure white):

Because Tone represents pure perceived lightness, contrast is calculated programmatically:

• Light Theme: The Primary button background uses Tone 40, while the text ("On Primary") uses Tone 100. The delta is 60, easily surpassing WCAG AA.
• Dark Theme: The Primary button background uses Tone 80, while the text uses Tone 20. The delta is 60, providing identical contrast without any manual recalculations!

4. Core Color Roles and Container Variants

M3 divides design systems into explicit semantic roles:

• Primary & On-Primary: High-emphasis active elements. "On-Primary" is the text/icon color rendered directly on top of the primary surface.
• Primary Container & On-Primary Container: Muted surface fill for grouping related content (like unread message badges or banner cards).
• Secondary & Secondary Container: Supporting actions that should not overpower the primary call to action.
• Surface, Surface Dim & Surface Bright: Background elevations that replace artificial drop shadows with tonal lightness shifts.

5. Implementing Material 3 Colors in CSS

Here is how you structure a production-ready Material 3 color system using CSS Custom Variables:

6. Accessibility Architecture in Material Design 3

The tonal palette system enforces contrast compliance mathematically. By locking the rule that text must always be placed on a container with a minimum 40-tone delta (for Level AA) or 60-tone delta (for Level AAA), designers cannot accidentally create unreadable interfaces.

You can test seed colors and tonal variations using our Color Palette Generator and verify ratios using the WCAG Contrast Checker.

7. Frequently Asked Questions