Material Design Color Palette
Material Design palettes follow Google’s logic: one primary colour, one secondary for accents, neutral surfaces and a grey scale for text and elevation.
Example palette
Primary#1976D2
Primary light#42A5F5
Surface#FAFAFA
Secondary#FFA000
On surface#212121
Hex codes ready to copy
Built for interfaces
Where classic harmonies think in hues, Material thinks in roles: primary, secondary, surface, on-surface, error. Every colour has a job, which makes the palette directly translatable into design-system tokens.
Contrast and elevation
Material requires at least 4.5:1 contrast between text and its surface. Elevation levels come from progressively lightening the surface rather than stacking shadows — handy in dark theme, where shadows stop being visible.
Generate my palette material design
Free, no signup