Material Design Color System: A Complete Guide for Designers
Learn how to use the Material Design color system effectively. Explore primary, secondary, and accent palettes with shade variations for modern UI design.
What Is the Material Design Color System?
Material Design, created by Google, uses a structured color system built around primary and accent colors with carefully designed shade variations. Each color has 14 variants: 10 standard shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) and 4 accent shades (A100, A200, A400, A700).
The 500 shade is the "base" color. Lighter shades (50-400) work for backgrounds and large surfaces. Darker shades (600-900) work for text and emphasis. Accent shades provide vibrant alternatives for highlights and calls-to-action.
The 19 Material Colors
| Color | Base (500) | Best for |
|---|
| Red | #F44336 | Errors, alerts, destructive actions |
|---|---|---|
| Pink | #E91E63 | Fashion, beauty, feminine themes |
| Purple | #9C27B0 | Creativity, luxury, premium |
| Deep Purple | #673AB7 | Technology, innovation |
| Indigo | #3F51B5 | Professional, corporate, trust |
| Blue | #2196F3 | Links, primary actions, calm |
| Light Blue | #03A9F4 | Sky, openness, fresh |
| Cyan | #00BCD4 | Health, clean, modern |
| Teal | #009688 | Nature, balance, stability |
| Green | #4CAF50 | Success, growth, confirmation |
| Light Green | #8BC34A | Eco, organic, fresh |
| Lime | #CDDC39 | Energy, playful, highlight |
| Yellow | #FFEB3B | Warning, attention, optimism |
| Amber | #FFC107 | Caution, warmth, premium |
| Orange | #FF9800 | Action, enthusiasm, fun |
| Deep Orange | #FF5722 | Bold, urgent, energetic |
| Brown | #795548 | Earth, rustic, reliable |
| Grey | #9E9E9E | Neutral, secondary, disabled |
| Blue Grey | #607D8B | Corporate, subdued, professional |
Choosing a Primary Color
Your primary color is the most visible color in your app. It appears in the app bar, buttons, and key UI elements. Pick based on your brand personality:
- Trust and professionalism: Blue, Indigo, Blue Grey
- Energy and action: Red, Orange, Deep Orange
- Growth and health: Green, Teal, Cyan
- Creativity: Purple, Deep Purple, Pink
Using Shades Effectively
Light Shades (50-200)
Use for page backgrounds, card surfaces, and hover states. These are subtle and non-intrusive.
.card { background-color: #E3F2FD; } /* Blue 50 */
.hover-state { background-color: #BBDEFB; } /* Blue 100 */
Medium Shades (300-500)
Use for primary buttons, icons, and interactive elements. The 500 shade is your base.
.button { background-color: #2196F3; } /* Blue 500 */
.icon { color: #1976D2; } /* Blue 700 */
Dark Shades (700-900)
Use for text on light backgrounds, status bars, and app bar variants.
.heading { color: #0D47A1; } /* Blue 900 */
.status-bar { background-color: #1565C0; } /* Blue 800 */
Accent Colors
Accent shades (A100-A700) are saturated variants designed for floating action buttons, selection controls, and highlighted text. Use them sparingly for maximum impact.
.fab { background-color: #448AFF; } /* Blue A200 */
.link-active { color: #2979FF; } /* Blue A400 */
Accessibility
Always check contrast ratios between your text and background colors. Material Design recommends:
- 4.5:1 minimum for normal text (WCAG AA)
- 3:1 minimum for large text (18px+ or 14px+ bold)
Use our Color Contrast Checker to verify your combinations meet these standards.
Browse and Copy Colors
Use our Material Color Picker to browse all 19 Material Design colors with every shade variant. Click any swatch to copy the hex code. View RGB, HSL, and Tailwind equivalents.