5 min read
2026-02-14
One primary color, one accent, and one neutral (gray). This is the foundation of a harmonious Material Design interface.
Shades A200, A400 are intended for interactive elements: buttons, links, action icons.
White text on the primary color should have a contrast ratio of at least 4.5:1. Shades 500 and above usually work.
Use shades of one color to create hierarchy: 900 for headings, 700 for text, 300 for backgrounds.
Material Design offers an inverted palette for dark theme: shade 200 instead of 500 for the primary color.
| Primary | Secondary | Style |
|---|---|---|
| Indigo 500 | Pink A200 | Classic Material |
| Teal 500 | Orange A400 | Modern |
| Deep Purple 500 | Lime A200 | Creative |
See also: Tailwind CSS Colors, Color Blender