Every color in the Google Material Design color system — 19 color families with standard shades (50–900) and accent variants (A100–A700). Click any swatch or hex code to copy it instantly.
#F44336
#E91E63
#9C27B0
#673AB7
#3F51B5
#2196F3
#03A9F4
#00BCD4
#009688
#4CAF50
#8BC34A
#CDDC39
#FFEB3B
#FFC107
#FF9800
#FF5722
#795548
#9E9E9E
#607D8B
Material Design is Google's open-source design system, first released in 2014. Its color system provides a curated palette of 19 color families, each with 10 standard shades and up to 4 high-saturation accent variants. These colors are the foundation of Android, Google Workspace, and thousands of apps.
Standard shades run from 50 (near-white) to 900 (near-black), with 500 as the "primary" value. Accent shades (A100–A700) are highly saturated and meant for highlights, FABs, and small UI elements rather than large surfaces. Brown, Grey, and Blue Grey don't have accent variants.
Material colors have no built-in CSS variables — copy the hex codes and define your own CSS custom properties:--color-primary: #2196F3;Or import the Material Components Web library which ships CSS vars for the full palette.
Material colors tend to be more saturated and vibrant than Tailwind's palette. Material has 10 standard shades (50–900) while Tailwind has 11 (50–950). Material also adds accent variants not found in Tailwind. For Tailwind projects, see our Tailwind CSS Colors reference.