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