Material Color Guide
Complete reference to Google's Material Design color palette — all families, the 50-900 scale, and how Material 3 uses color roles.
What Is Material Design Color?
Material Design is Google's design system used across Android, Google products, and millions of third-party apps. Its color palette is a curated set of 19 color families, each with 10 shades from 50 to 900.
The 19 families:
red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, gray, blue-gray
Material 2 vs Material 3
Material Design has evolved through two major color systems:
Material 2 (2014–2021)
Direct shade-based system: "primary 500" or "accent A200". Simple, predictable, but does not support dynamic theming well.
Material 3 (2021–present)
Role-based system: "primary", "on-primary", "primary-container", "on-primary-container", and so on. Each role has a defined semantic meaning, enabling automatic theming and dynamic color.
Material 3 Color Roles
Material 3 uses 26 color roles organized into 5 categories:
Primary (4 roles)
- primary: The main brand color — used for FABs, prominent buttons, active states
- on-primary: Text/icons on primary surfaces
- primary-container: A lighter/tonal version of primary for containers
- on-primary-container: Text/icons on primary-container
Secondary and Tertiary (4 roles each)
Similar structure: secondary / on-secondary / secondary-container / on-secondary-container, plus a tertiary equivalent. Secondary is a supporting color; tertiary is an accent.
Error (4 roles)
error / on-error / error-container / on-error-container — used for error states.
Surface (6 roles)
- surface: The main background color
- on-surface: Text on surface
- surface-variant: Secondary surface for cards and panels
- on-surface-variant: Text on surface-variant
- surface-container: Container background
- outline: Borders and dividers
The 50-900 Scale in Material
Material 3 uses tonal palettes with the same 0-100 tonal structure. The traditional Material 2 scale of 50-900 maps roughly as follows:
| Shade | Material 2 Use | Material 3 Equivalent |
|---|---|---|
| 50 | Backgrounds | surface-container-lowest |
| 100 | Hover states | surface-container-low |
| 200 | Borders | outline-variant |
| 300 | Disabled | outline |
| 400 | Inactive | on-surface-variant |
| 500 | Primary | primary |
| 600 | Hover | primary (darkened) |
| 700 | Active | primary (darker) |
| 800 | Strong text | on-primary-container |
| 900 | Headings | on-surface |
Using Material Colors
In HTML/CSS
.button-primary {
background: #1976D2; /* Material blue 700 */
color: #FFFFFF;
}
.button-primary:hover {
background: #1565C0; /* Material blue 800 */
}In React with Material UI
import { blue } from '@mui/material/colors';
In Material 3 (Android/Compose)
val colorScheme = lightColorScheme(
primary = Color(0xFF1976D2),
onPrimary = Color(0xFFFFFFFF),
surface = Color(0xFFF8FAFF),
)Color Family Overview
Cool families
- Blue: Trust, professional, standard
- Light-blue: Fresh, modern
- Cyan: Bright, tech
- Teal: Calm, natural
- Indigo: Deep, premium
- Purple / Deep-purple: Creative, luxury
Warm families
- Red: Alert, energetic
- Pink: Playful, friendly
- Orange / Deep-orange: Warm, action
- Amber / Yellow: Attention, caution
Natural families
- Green: Growth, success
- Light-green / Lime: Fresh, youthful
- Brown: Earth, grounded
Neutrals
- Gray: Pure neutral
- Blue-gray: Cool neutral
Best Practices
Use tonal palettes, not fixed shades
Material 3 encourages generating tonal palettes from a seed color, so the entire UI updates when the brand color changes.
Pair primary with on-primary
Material 3 explicitly pairs each "surface" color with an "on-surface" color to guarantee contrast. Follow this pattern for accessibility.
Respect the role system
Do not use "primary" for backgrounds if the role is for buttons. The semantic system exists so components can be reused and re-themed.
Test contrast
Material 3's defaults are designed for accessibility but you should still verify combinations you actually use.
Common Mistakes
Using Material 2 shades in Material 3
Material 3 expects color roles, not shade numbers. Using "primary-500" in Material 3 code will work syntactically but breaks theming.
Ignoring dark mode
Material 3 has separate color roles for light and dark themes. Do not try to reuse light theme colors in dark mode — use the dark theme roles.
Mixing with other design systems
Material colors paired with Tailwind colors creates inconsistency. Pick one system.
Not testing with dynamic color
Material 3's dynamic color (Android 12+) generates palettes from the user's wallpaper. Test how your UI looks with wallpapers that produce unexpected color schemes.