Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

Color Palette

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

Red

50 .red-50-background-color
100 .red-100-background-color
200 .red-200-background-color
300 .red-300-background-color
400 .red-400-background-color
500 .red-500-background-color
600 .red-600-background-color
700 .red-700-background-color
800 .red-800-background-color
900 .red-900-background-color
a100 .red-a100-background-color
a200 .red-a200-background-color
a400 .red-a400-background-color
a700 .red-a700-background-color

Pink

50 .pink-50-background-color
100 .pink-100-background-color
200 .pink-200-background-color
300 .pink-300-background-color
400 .pink-400-background-color
500 .pink-500-background-color
600 .pink-600-background-color
700 .pink-700-background-color
800 .pink-800-background-color
900 .pink-900-background-color
a100 .pink-a100-background-color
a200 .pink-a200-background-color
a400 .pink-a400-background-color
a700 .pink-a700-background-color

Purple

50 .purple-50-background-color
100 .purple-100-background-color
200 .purple-200-background-color
300 .purple-300-background-color
400 .purple-400-background-color
500 .purple-500-background-color
600 .purple-600-background-color
700 .purple-700-background-color
800 .purple-800-background-color
900 .purple-900-background-color
a100 .purple-a100-background-color
a200 .purple-a200-background-color
a400 .purple-a400-background-color
a700 .purple-a700-background-color

Deep Purple

50 .deep-purple-50-background-color
100 .deep-purple-100-background-color
200 .deep-purple-200-background-color
300 .deep-purple-300-background-color
400 .deep-purple-400-background-color
500 .deep-purple-500-background-color
600 .deep-purple-600-background-color
700 .deep-purple-700-background-color
800 .deep-purple-800-background-color
900 .deep-purple-900-background-color
a100 .deep-purple-a100-background-color
a200 .deep-purple-a200-background-color
a400 .deep-purple-a400-background-color
a700 .deep-purple-a700-background-color

Indigo

50 .indigo-50-background-color
100 .indigo-100-background-color
200 .indigo-200-background-color
300 .indigo-300-background-color
400 .indigo-400-background-color
500 .indigo-500-background-color
600 .indigo-600-background-color
700 .indigo-700-background-color
800 .indigo-800-background-color
900 .indigo-900-background-color
a100 .indigo-a100-background-color
a200 .indigo-a200-background-color
a400 .indigo-a400-background-color
a700 .indigo-a700-background-color

Blue

50 .blue-50-background-color
100 .blue-100-background-color
200 .blue-200-background-color
300 .blue-300-background-color
400 .blue-400-background-color
500 .blue-500-background-color
600 .blue-600-background-color
700 .blue-700-background-color
800 .blue-800-background-color
900 .blue-900-background-color
a100 .blue-a100-background-color
a200 .blue-a200-background-color
a400 .blue-a400-background-color
a700 .blue-a700-background-color

Light Blue

50 .light-blue-50-background-color
100 .light-blue-100-background-color
200 .light-blue-200-background-color
300 .light-blue-300-background-color
400 .light-blue-400-background-color
500 .light-blue-500-background-color
600 .light-blue-600-background-color
700 .light-blue-700-background-color
800 .light-blue-800-background-color
900 .light-blue-900-background-color
a100 .light-blue-a100-background-color
a200 .light-blue-a200-background-color
a400 .light-blue-a400-background-color
a700 .light-blue-a700-background-color

Cyan

50 .cyan-50-background-color
100 .cyan-100-background-color
200 .cyan-200-background-color
300 .cyan-300-background-color
400 .cyan-400-background-color
500 .cyan-500-background-color
600 .cyan-600-background-color
700 .cyan-700-background-color
800 .cyan-800-background-color
900 .cyan-900-background-color
a100 .cyan-a100-background-color
a200 .cyan-a200-background-color
a400 .cyan-a400-background-color
a700 .cyan-a700-background-color

Teal

50 .teal-50-background-color
100 .teal-100-background-color
200 .teal-200-background-color
300 .teal-300-background-color
400 .teal-400-background-color
500 .teal-500-background-color
600 .teal-600-background-color
700 .teal-700-background-color
800 .teal-800-background-color
900 .teal-900-background-color
a100 .teal-a100-background-color
a200 .teal-a200-background-color
a400 .teal-a400-background-color
a700 .teal-a700-background-color

Green

50 .green-50-background-color
100 .green-100-background-color
200 .green-200-background-color
300 .green-300-background-color
400 .green-400-background-color
500 .green-500-background-color
600 .green-600-background-color
700 .green-700-background-color
800 .green-800-background-color
900 .green-900-background-color
a100 .green-a100-background-color
a200 .green-a200-background-color
a400 .green-a400-background-color
a700 .green-a700-background-color

Light Green

50 .light-green-50-background-color
100 .light-green-100-background-color
200 .light-green-200-background-color
300 .light-green-300-background-color
400 .light-green-400-background-color
500 .light-green-500-background-color
600 .light-green-600-background-color
700 .light-green-700-background-color
800 .light-green-800-background-color
900 .light-green-900-background-color
a100 .light-green-a100-background-color
a200 .light-green-a200-background-color
a400 .light-green-a400-background-color
a700 .light-green-a700-background-color

Lime

50 .lime-50-background-color
100 .lime-100-background-color
200 .lime-200-background-color
300 .lime-300-background-color
400 .lime-400-background-color
500 .lime-500-background-color
600 .lime-600-background-color
700 .lime-700-background-color
800 .lime-800-background-color
900 .lime-900-background-color
a100 .lime-a100-background-color
a200 .lime-a200-background-color
a400 .lime-a400-background-color
a700 .lime-a700-background-color

Yellow

50 .yellow-50-background-color
100 .yellow-100-background-color
200 .yellow-200-background-color
300 .yellow-300-background-color
400 .yellow-400-background-color
500 .yellow-500-background-color
600 .yellow-600-background-color
700 .yellow-700-background-color
800 .yellow-800-background-color
900 .yellow-900-background-color
a100 .yellow-a100-background-color
a200 .yellow-a200-background-color
a400 .yellow-a400-background-color
a700 .yellow-a700-background-color

Amber

50 .amber-50-background-color
100 .amber-100-background-color
200 .amber-200-background-color
300 .amber-300-background-color
400 .amber-400-background-color
500 .amber-500-background-color
600 .amber-600-background-color
700 .amber-700-background-color
800 .amber-800-background-color
900 .amber-900-background-color
a100 .amber-a100-background-color
a200 .amber-a200-background-color
a400 .amber-a400-background-color
a700 .amber-a700-background-color

Orange

50 .orange-50-background-color
100 .orange-100-background-color
200 .orange-200-background-color
300 .orange-300-background-color
400 .orange-400-background-color
500 .orange-500-background-color
600 .orange-600-background-color
700 .orange-700-background-color
800 .orange-800-background-color
900 .orange-900-background-color
a100 .orange-a100-background-color
a200 .orange-a200-background-color
a400 .orange-a400-background-color
a700 .orange-a700-background-color

Deep Orange

50 .deep-orange-50-background-color
100 .deep-orange-100-background-color
200 .deep-orange-200-background-color
300 .deep-orange-300-background-color
400 .deep-orange-400-background-color
500 .deep-orange-500-background-color
600 .deep-orange-600-background-color
700 .deep-orange-700-background-color
800 .deep-orange-800-background-color
900 .deep-orange-900-background-color
a100 .deep-orange-a100-background-color
a200 .deep-orange-a200-background-color
a400 .deep-orange-a400-background-color
a700 .deep-orange-a700-background-color

Brown

50 .brown-50-background-color
100 .brown-100-background-color
200 .brown-200-background-color
300 .brown-300-background-color
400 .brown-400-background-color
500 .brown-500-background-color
600 .brown-600-background-color
700 .brown-700-background-color
800 .brown-800-background-color
900 .brown-900-background-color
a100 .brown-a100-background-color
a200 .brown-a200-background-color
a400 .brown-a400-background-color
a700 .brown-a700-background-color

Grey

50 .grey-50-background-color
100 .grey-100-background-color
200 .grey-200-background-color
300 .grey-300-background-color
400 .grey-400-background-color
500 .grey-500-background-color
600 .grey-600-background-color
700 .grey-700-background-color
800 .grey-800-background-color
900 .grey-900-background-color
a100 .grey-a100-background-color
a200 .grey-a200-background-color
a400 .grey-a400-background-color
a700 .grey-a700-background-color

Blue Grey

50 .blue-grey-50-background-color
100 .blue-grey-100-background-color
200 .blue-grey-200-background-color
300 .blue-grey-300-background-color
400 .blue-grey-400-background-color
500 .blue-grey-500-background-color
600 .blue-grey-600-background-color
700 .blue-grey-700-background-color
800 .blue-grey-800-background-color
900 .blue-grey-900-background-color
a100 .blue-grey-a100-background-color
a200 .blue-grey-a200-background-color
a400 .blue-grey-a400-background-color
a700 .blue-grey-a700-background-color