Материальный дизайн — Цвет

Цвет в материальном дизайне пропитан духом смелых оттенков, стоящих бок о бок с приглушенным окружением, глубокими тенями и яркими светлыми участками. В качестве примеров использовались современная архитектура, дорожные знаки, маркировочная лента тротуаров и спортивные площадки. Используйте неожиданные и полные жизни цвета.

Цветовая палитра

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.

Red 500 #f44336
50 #ffebee
100 #ffcdd2
200 #ef9a9a
300 #e57373
400 #ef5350
500 #f44336
600 #e53935
700 #d32f2f
800 #c62828
900 #b71c1c
A100 #ff8a80
A200 #ff5252
A400 #ff1744
A700 #d50000

Pink 500 #e91e63
50 #fce4ec
100 #f8bbd0
200 #f48fb1
300 #f06292
400 #ec407a
500 #e91e63
600 #d81b60
700 #c2185b
800 #ad1457
900 #880e4f
A100 #ff80ab
A200 #ff4081
A400 #f50057
A700 #c51162

Purple 500 #9c27b0
50 #f3e5f5
100 #e1bee7
200 #ce93d8
300 #ba68c8
400 #ab47bc
500 #9c27b0
600 #8e24aa
700 #7b1fa2
800 #6a1b9a
900 #4a148c
A100 #ea80fc
A200 #e040fb
A400 #d500f9
A700 #aa00ff

Deep Purple 500 #673ab7
50 #ede7f6
100 #d1c4e9
200 #b39ddb
300 #9575cd
400 #7e57c2
500 #673ab7
600 #5e35b1
700 #512da8
800 #4527a0
900 #311b92
A100 #b388ff
A200 #7c4dff
A400 #651fff
A700 #6200ea

Indigo 500 #3f51b5
50 #e8eaf6
100 #c5cae9
200 #9fa8da
300 #7986cb
400 #5c6bc0
500 #3f51b5
600 #3949ab
700 #303f9f
800 #283593
900 #1a237e
A100 #8c9eff
A200 #536dfe
A400 #3d5afe
A700 #304ffe

Blue 500 #2196f3
50 #e3f2fd
100 #bbdefb
200 #90caf9
300 #64b5f6
400 #42a5f5
500 #2196f3
600 #1e88e5
700 #1976d2
800 #1565c0
900 #0d47a1
A100 #82b1ff
A200 #448aff
A400 #2979ff
A700 #2962ff

Light Blue 500 #03a9f4
50 #e1f5fe
100 #b3e5fc
200 #81d4fa
300 #4fc3f7
400 #29b6f6
500 #03a9f4
600 #039be5
700 #0288d1
800 #0277bd
900 #01579b
A100 #80d8ff
A200 #40c4ff
A400 #00b0ff
A700 #0091ea

Cyan 500 #00bcd4
50 #e0f7fa
100 #b2ebf2
200 #80deea
300 #4dd0e1
400 #26c6da
500 #00bcd4
600 #00acc1
700 #0097a7
800 #00838f
900 #006064
A100 #84ffff
A200 #18ffff
A400 #00e5ff
A700 #00b8d4

Teal 500 #009688
50 #e0f2f1
100 #b2dfdb
200 #80cbc4
300 #4db6ac
400 #26a69a
500 #009688
600 #00897b
700 #00796b
800 #00695c
900 #004d40
A100 #a7ffeb
A200 #64ffda
A400 #1de9b6
A700 #00bfa5

Green 500 #4caf50
50 #e8f5e9
100 #c8e6c9
200 #a5d6a7
300 #81c784
400 #66bb6a
500 #4caf50
600 #43a047
700 #388e3c
800 #2e7d32
900 #1b5e20
A100 #b9f6ca
A200 #69f0ae
A400 #00e676
A700 #00c853

Light Green 500 #8bc34a
50 #f1f8e9
100 #dcedc8
200 #c5e1a5
300 #aed581
400 #9ccc65
500 #8bc34a
600 #7cb342
700 #689f38
800 #558b2f
900 #33691e
A100 #ccff90
A200 #b2ff59
A400 #76ff03
A700 #64dd17

Lime 500 #cddc39
50 #f9fbe7
100 #f0f4c3
200 #e6ee9c
300 #dce775
400 #d4e157
500 #cddc39
600 #c0ca33
700 #afb42b
800 #9e9d24
900 #827717
A100 #f4ff81
A200 #eeff41
A400 #c6ff00
A700 #aeea00

Yellow 500 #ffeb3b
50 #fffde7
100 #fff9c4
200 #fff59d
300 #fff176
400 #ffee58
500 #ffeb3b
600 #fdd835
700 #fbc02d
800 #f9a825
900 #f57f17
A100 #ffff8d
A200 #ffff00
A400 #ffea00
A700 #ffd600

Amber 500 #ffc107
50 #fff8e1
100 #ffecb3
200 #ffe082
300 #ffd54f
400 #ffca28
500 #ffc107
600 #ffb300
700 #ffa000
800 #ff8f00
900 #ff6f00
A100 #ffe57f
A200 #ffd740
A400 #ffc400
A700 #ffab00

Orange 500 #ff9800
50 #fff3e0
100 #ffe0b2
200 #ffcc80
300 #ffb74d
400 #ffa726
500 #ff9800
600 #fb8c00
700 #f57c00
800 #ef6c00
900 #e65100
A100 #ffd180
A200 #ffab40
A400 #ff9100
A700 #ff6d00

Deep Orange 500 #ff5722
50 #fbe9e7
100 #ffccbc
200 #ffab91
300 #ff8a65
400 #ff7043
500 #ff5722
600 #f4511e
700 #e64a19
800 #d84315
900 #bf360c
A100 #ff9e80
A200 #ff6e40
A400 #ff3d00
A700 #dd2c00

Brown 500 #795548
50 #efebe9
100 #d7ccc8
200 #bcaaa4
300 #a1887f
400 #8d6e63
500 #795548
600 #6d4c41
700 #5d4037
800 #4e342e
900 #3e2723

Grey 500 #9e9e9e
50 #fafafa
100 #f5f5f5
200 #eeeeee
300 #e0e0e0
400 #bdbdbd
500 #9e9e9e
600 #757575
700 #616161
800 #424242
900 #212121

Blue Grey 500 #607d8b
50 #eceff1
100 #cfd8dc
200 #b0bec5
300 #90a4ae
400 #78909c
500 #607d8b
600 #546e7a
700 #455a64
800 #37474f
900 #263238

Black #000000
White #ffffff

Использование цветов в UI

Выберите палитру

Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.

📎📎📎📎📎📎📎📎📎📎