How many colors are in Material Design?

Material Design includes 19 color families with 254 total shades, each ranging from 50 (lightest) to 900 (darkest), plus accent variants for selected families.

How do I use Material Design colors in my project?

Click any color swatch to copy its hex, RGB, or HSL value. You can also use the Export button to download the entire palette as CSS custom properties, Tailwind config, SCSS variables, or JSON.

What is the difference between primary and accent colors in Material Design?

Primary colors (shades 50–900) are used for main UI elements like app bars and buttons. Accent colors (A100–A700) are vivid alternatives used for floating action buttons, switches, and highlights.

Material Design Colors

19 color families, 254 shades. Click any color to copy.

Red

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Teal

Green

Light Green

Lime

Yellow

Amber

Orange

Deep Orange

Brown

Grey

Blue Grey

About Material Design Colors

Material Design's color system was created by Google to help designers and developers build visually cohesive products. The palette spans 19 primary color families — from Red and Pink to Blue Grey — each with 10 numbered shades (50 through 900) plus accent variants, giving you 254 hand-tuned colors that work harmoniously together.

Every shade is engineered for accessible contrast on light and dark surfaces. The 500 shade typically serves as the primary brand color, while lighter shades (50–200) work well for backgrounds and darker shades (700–900) suit text and icon tints. Accent shades (A100–A700) provide high-saturation options for call-to-action elements.

Click any swatch above to copy its hex, RGB, or HSL value. Use the Export button to download the entire set — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON for direct integration into your design system.