feb19

Nobuhiro Takahashi
Designer / Engineer

menu
more_vert
Preview
Material Color Generator
star
label
Primary Text
Secondary Text
schedule
Disabled Text
Secondary Text

palette

Light Primary Color
#D7CCC8
Primary Color
#795548
Dark Primary Color
#5D4037
Accent Color
#69F0AE
Text / Icons
#FFFFFF
Primary Text
#212121
Secondary Text
#737373
Disabled Text
#9B9B9B
Divider Color
#DBDBDB
Background
#FAFAFA

option

CSS
Sass
Android XML
Tweet

1. Theme

2. Primary Color

50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900

3. Accent Color

A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700
A100
A200
A400
A700

4. Text Color

See Also:

Design: Android UI Design / Material Design 要点まとめ - feb19
不真面目に Material Design の配色する／Material Color Generator 作りました - feb19
Color - Style - Google design guidelines

  • Material Color Generator