🏠 < Цвет < Материальный

Оттенки цвета

Материальная палитра веб-дизайна

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

Red

  • 50 87% FFEBEE 255 235 238
  • 100 70% FFCDD2 255 205 210
  • 200 44% EF9A9A 239 154 154
  • 300 30% E57373 229 115 115
  • 400 25% EF5350 239 83 80
  • 500 24% F44336 244 67 54
  • 600 20% E53935 229 57 53
  • 700 16% D32F2F 211 47 47
  • 800 14% C62828 198 40 40
  • 900 11% B71C1C 183 28 28
  • A100 41% FF8A80 255 138 128
  • A200 28% FF5252 255 82 82
  • A400 22% FF1744 255 23 68
  • A700 14% D50000 213 0 0

Pink

  • 50 82% FCE4EC 252 228 236
  • 100 60% F8BBD0 248 187 208
  • 200 42% F48FB1 244 143 177
  • 300 29% F06292 240 98 146
  • 400 23% EC407A 236 64 122
  • 500 19% E91E63 233 30 99
  • 600 16% D81B60 216 27 96
  • 700 13% C2185B 194 24 91
  • 800 10% AD1457 173 20 87
  • 900 6% 880E4F 136 14 79
  • A100 40% FF80AB 255 128 171
  • A200 27% FF4081 255 64 129
  • A400 20% F50057 245 0 87
  • A700 13% C51162 197 17 98

Purple

  • 50 82% F3E5F5 243 229 245
  • 100 59% E1BEE7 225 190 231
  • 200 39% CE93D8 206 147 216
  • 300 25% BA68C8 186 104 200
  • 400 17% AB47BC 171 71 188
  • 500 12% 9C27B0 156 39 176
  • 600 10% 8E24AA 142 36 170
  • 700 8% 7B1FA2 123 31 162
  • 800 6% 6A1B9A 106 27 154
  • 900 4% 4A148C 74 20 140
  • A100 40% EA80FC 234 128 252
  • A200 26% E040FB 224 64 251
  • A400 21% D500F9 213 0 249
  • A700 16% AA00FF 170 0 255

Deep Purple

  • 50 82% EDE7F6 237 231 246
  • 100 59% D1C4E9 209 196 233
  • 200 39% B39DDB 179 157 219
  • 300 24% 9575CD 149 117 205
  • 400 15% 7E57C2 126 87 194
  • 500 9% 673AB7 103 58 183
  • 600 8% 5E35B1 94 53 177
  • 700 6% 512DA8 81 45 168
  • 800 5% 4527A0 69 39 160
  • 900 4% 311B92 49 27 146
  • A100 34% B388FF 179 136 255
  • A200 17% 7C4DFF 124 77 255
  • A400 11% 651FFF 101 31 255
  • A700 9% 6200EA 98 0 234

Indigo

  • 50 83% E8EAF6 232 234 246
  • 100 60% C5CAE9 197 202 233
  • 200 40% 9FA8DA 159 168 218
  • 300 25% 7986CB 121 134 203
  • 400 17% 5C6BC0 92 107 192
  • 500 10% 3F51B5 63 81 181
  • 600 9% 3949AB 57 73 171
  • 700 7% 303F9F 48 63 159
  • 800 5% 283593 40 53 147
  • 900 3% 1A237E 26 35 126
  • A100 37% 8C9EFF 140 158 255
  • A200 20% 536DFE 83 109 254
  • A400 15% 3D5AFE 61 90 254
  • A700 13% 304FFE 48 79 254

Blue

  • 50 87% E3F2FD 227 242 253
  • 100 70% BBDEFB 187 222 251
  • 200 55% 90CAF9 144 202 249
  • 300 42% 64B5F6 100 181 246
  • 400 35% 42A5F5 66 165 245
  • 500 29% 2196F3 33 150 243
  • 600 24% 1E88E5 30 136 229
  • 700 18% 1976D2 25 118 210
  • 800 13% 1565C0 21 101 192
  • 900 7% 0D47A1 13 71 161
  • A100 43% 82B1FF 130 177 255
  • A200 27% 448AFF 68 138 255
  • A400 21% 2979FF 41 121 255
  • A700 16% 2962FF 41 98 255

Light Blue

  • 50 88% E1F5FE 225 245 254
  • 100 73% B3E5FC 179 229 252
  • 200 59% 81D4FA 129 212 250
  • 300 47% 4FC3F7 79 195 247
  • 400 41% 29B6F6 41 182 246
  • 500 35% 03A9F4 3 169 244
  • 600 29% 039BE5 3 155 229
  • 700 22% 0288D1 2 136 209
  • 800 17% 0277BD 2 119 189
  • 900 9% 01579B 1 87 155
  • A100 61% 80D8FF 128 216 255
  • A200 48% 40C4FF 64 196 255
  • A400 38% 00B0FF 0 176 255
  • A700 26% 0091EA 0 145 234

Cyan

  • 50 89% E0F7FA 224 247 250
  • 100 75% B2EBF2 178 235 242
  • 200 63% 80DEEA 128 222 234
  • 300 52% 4DD0E1 77 208 225
  • 400 46% 26C6DA 38 198 218
  • 500 41% 00BCD4 0 188 212
  • 600 33% 00ACC1 0 172 193
  • 700 25% 0097A7 0 151 167
  • 800 18% 00838F 0 131 143
  • 900 9% 006064 0 96 100
  • A100 84% 84FFFF 132 255 255
  • A200 79% 18FFFF 24 255 255
  • A400 63% 00E5FF 0 229 255
  • A700 39% 00B8D4 0 184 212

Teal

  • 50 86% E0F2F1 224 242 241
  • 100 67% B2DFDB 178 223 219
  • 200 51% 80CBC4 128 203 196
  • 300 38% 4DB6AC 77 182 172
  • 400 30% 26A69A 38 166 154
  • 500 24% 009688 0 150 136
  • 600 19% 00897B 0 137 123
  • 700 15% 00796B 0 121 107
  • 800 11% 00695C 0 105 92
  • 900 6% 004D40 0 77 64
  • A100 86% A7FFEB 167 255 235
  • A200 79% 64FFDA 100 255 218
  • A400 62% 1DE9B6 29 233 182
  • A700 40% 00BFA5 0 191 165

Green

  • 50 88% E8F5E9 232 245 233
  • 100 73% C8E6C9 200 230 201
  • 200 59% A5D6A7 165 214 167
  • 300 47% 81C784 129 199 132
  • 400 39% 66BB6A 102 187 106
  • 500 33% 4CAF50 76 175 80
  • 600 27% 43A047 67 160 71
  • 700 21% 388E3C 56 142 60
  • 800 15% 2E7D32 46 125 50
  • 900 8% 1B5E20 27 94 32
  • A100 80% B9F6CA 185 246 202
  • A200 68% 69F0AE 105 240 174
  • A400 58% 00E676 0 230 118
  • A700 42% 00C853 0 200 83

Light Green

  • 50 92% F1F8E9 241 248 233
  • 100 80% DCEDC8 220 237 200
  • 200 68% C5E1A5 197 225 165
  • 300 58% AED581 174 213 129
  • 400 51% 9CCC65 156 204 101
  • 500 45% 8BC34A 139 195 74
  • 600 37% 7CB342 124 179 66
  • 700 28% 689F38 104 159 56
  • 800 21% 558B2F 85 139 47
  • 900 11% 33691E 51 105 30
  • A100 86% CCFF90 204 255 144
  • A200 82% B2FF59 178 255 89
  • A400 75% 76FF03 118 255 3
  • A700 54% 64DD17 100 221 23

Lime

  • 50 95% F9FBE7 249 251 231
  • 100 87% F0F4C3 240 244 195
  • 200 80% E6EE9C 230 238 156
  • 300 74% DCE775 220 231 117
  • 400 69% D4E157 212 225 87
  • 500 64% CDDC39 205 220 57
  • 600 54% C0CA33 192 202 51
  • 700 42% AFB42B 175 180 43
  • 800 32% 9E9D24 158 157 36
  • 900 18% 827717 130 119 23
  • A100 92% F4FF81 244 255 129
  • A200 90% EEFF41 238 255 65
  • A400 84% C6FF00 198 255 0
  • A700 68% AEEA00 174 234 0

Yellow

  • 50 97% FFFDE7 255 253 231
  • 100 93% FFF9C4 255 249 196
  • 200 89% FFF59D 255 245 157
  • 300 85% FFF176 255 241 118
  • 400 83% FFEE58 255 238 88
  • 500 81% FFEB3B 255 235 59
  • 600 70% FDD835 253 216 53
  • 700 58% FBC02D 251 192 45
  • 800 48% F9A825 249 168 37
  • 900 35% F57F17 245 127 23
  • A100 95% FFFF8D 255 255 141
  • A200 93% FFFF00 255 255 0
  • A400 80% FFEA00 255 234 0
  • A700 69% FFD600 255 214 0

Amber

  • 50 94% FFF8E1 255 248 225
  • 100 85% FFECB3 255 236 179
  • 200 76% FFE082 255 224 130
  • 300 69% FFD54F 255 213 79
  • 400 64% FFCA28 255 202 40
  • 500 59% FFC107 255 193 7
  • 600 54% FFB300 255 179 0
  • 700 46% FFA000 255 160 0
  • 800 41% FF8F00 255 143 0
  • 900 33% FF6F00 255 111 0
  • A100 79% FFE57F 255 229 127
  • A200 70% FFD740 255 215 64
  • A400 61% FFC400 255 196 0
  • A700 50% FFAB00 255 171 0

Orange

  • 50 91% FFF3E0 255 243 224
  • 100 78% FFE0B2 255 224 178
  • 200 66% FFCC80 255 204 128
  • 300 56% FFB74D 255 183 77
  • 400 49% FFA726 255 167 38
  • 500 44% FF9800 255 152 0
  • 600 39% FB8C00 251 140 0
  • 700 34% F57C00 245 124 0
  • 800 29% EF6C00 239 108 0
  • 900 23% E65100 230 81 0
  • A100 68% FFD180 255 209 128
  • A200 51% FFAB40 255 171 64
  • A400 42% FF9100 255 145 0
  • A700 32% FF6D00 255 109 0

Deep Orange

  • 50 85% FBE9E7 251 233 231
  • 100 68% FFCCBC 255 204 188
  • 200 52% FFAB91 255 171 145
  • 300 40% FF8A65 255 138 101
  • 400 33% FF7043 255 112 67
  • 500 28% FF5722 255 87 34
  • 600 25% F4511E 244 81 30
  • 700 22% E64A19 230 74 25
  • 800 19% D84315 216 67 21
  • 900 14% BF360C 191 54 12
  • A100 47% FF9E80 255 158 128
  • A200 33% FF6E40 255 110 64
  • A400 25% FF3D00 255 61 0
  • A700 17% DD2C00 221 44 0

Brown

  • 50 84% EFEBE9 239 235 233
  • 100 62% D7CCC8 215 204 200
  • 200 42% BCAAA4 188 170 164
  • 300 27% A1887F 161 136 127
  • 400 18% 8D6E63 141 110 99
  • 500 11% 795548 121 85 72
  • 600 9% 6D4C41 109 76 65
  • 700 6% 5D4037 93 64 55
  • 800 4% 4E342E 78 52 46
  • 900 3% 3E2723 62 39 35

Blue Grey

  • 50 86% ECEFF1 236 239 241
  • 100 68% CFD8DC 207 216 220
  • 200 50% B0BEC5 176 190 197
  • 300 36% 90A4AE 144 164 174
  • 400 26% 78909C 120 144 156
  • 500 19% 607D8B 96 125 139
  • 600 14% 546E7A 84 110 122
  • 700 9% 455A64 69 90 100
  • 800 6% 37474F 55 71 79
  • 900 3% 263238 38 50 56

Gray

  • 50 96% FAFAFA 250 250 250
  • 100 91% F5F5F5 245 245 245
  • 200 85% EEEEEE 238 238 238
  • 300 75% E0E0E0 224 224 224
  • 400 51% BDBDBD 189 189 189
  • 500 34% 9E9E9E 158 158 158
  • 600 18% 757575 117 117 117
  • 700 12% 616161 97 97 97
  • 800 5% 424242 66 66 66
  • 900 2% 212121 33 33 33
  • White 100% FFFFFF 255 255 255
  • A500 21% 7F7F7F 127 127 127
  • A800 3% 303030 48 48 48
  • 950 1% 151515 21 21 21
  • Black 0% 000000 0 0 0

Материальный цвет

Эта цветовая палитра включает в себя основной и дополнительные цвета, которые могут быть использованы для иллюстрации или по разработке своих цветов бренда. Они были разработаны, чтобы гармонично работать друг с другом. Цветовая палитра начинается с основных цветов и заполняет в спектре, чтобы создать полную и удобную палитру для Web, Android и IOS. Google предлагает использовать "500" цвет в качестве основных цветов в вашем приложении и другие цвета в качестве акцентов цвета.

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

Цветовые схемы

Выбор цветовой палитры

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

Использование цветовой палитры материала дизайн

Приложения, которые не имеют существующие цветовые схемы могут выбрать цвета из материала дизайн цветовой палитры. Ограничьте выбор цветов трёх оттенков из основной палитры и одного акцентного цвета из палитры вторичной.

Скопировано
0.01541 ...