blob: efc30b0723ef88e930c4c72b1e70ac42418aac66 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>palette test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23 /**
24 * Copyright 2015 Google Inc. All Rights Reserved.
25 *
26 * Licensed under the Apache License, Version 2.0 (the "License");
27 * you may not use this file except in compliance with the License.
28 * You may obtain a copy of the License at
29 *
30 * http://www.apache.org/licenses/LICENSE-2.0
31 *
32 * Unless required by applicable law or agreed to in writing, software
33 * distributed under the License is distributed on an "AS IS" BASIS,
34 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
35 * See the License for the specific language governing permissions and
36 * limitations under the License.
37 */
38
39.demo-page--palette.demo-preview-block {
40 display: inline-block;
41}
42
43.demo-palette {
44 margin-top: 15px;
45 width: 360px;
46 float: left;
47}
48
49@media screen and (max-width: 360px ) {
50 .demo-palette {
51 width: 272px;
52 }
53}
54
55.demo-palette-color, .demo-palette-heading {
56 max-width: 300px;
57 padding: 15px;
58 color: white;
59}
60
61.demo-palette .demo-palette--dark-text,
62.demo-palette-heading.demo-palette--dark-text .demo-palette-name {
63 color: #000;
64}
65
66.demo-palette-name {
67 padding: 0 0 60px 0;
68}
69
70.demo-palette-single {
71 padding: 15px 15px 25px;
72}
73
74.demo-palette-single .demo-palette-name {
75 padding: 0;
76 float: left;
77}
78
79 </style>
80
81 </head>
82 <body>
83
84 <div style="padding-top: 24px;">
85
86
87 <div class="demo-preview-block demo-page--palette">
88 <div class="demo-palette">
89 <div class="demo-palette-heading mdl-color--red-500">
90 <div class="demo-palette-name">Red</div>
91
92 500
93 </div>
94 <div class="demo-palette-color mdl-color--red-50 demo-palette--dark-text">50</div>
95 <div class="demo-palette-color mdl-color--red-100 demo-palette--dark-text">100</div>
96 <div class="demo-palette-color mdl-color--red-200 demo-palette--dark-text">200</div>
97 <div class="demo-palette-color mdl-color--red-300 demo-palette--dark-text">300</div>
98 <div class="demo-palette-color mdl-color--red-400 demo-palette--dark-text">400</div>
99 <div class="demo-palette-color mdl-color--red-500">500</div>
100 <div class="demo-palette-color mdl-color--red-600">600</div>
101 <div class="demo-palette-color mdl-color--red-700">700</div>
102 <div class="demo-palette-color mdl-color--red-800">800</div>
103 <div class="demo-palette-color mdl-color--red-900">900</div>
104 <div class="demo-palette-color mdl-color--red-A100 demo-palette--dark-text">A100</div>
105 <div class="demo-palette-color mdl-color--red-A200">A200</div>
106 <div class="demo-palette-color mdl-color--red-A400">A400</div>
107 <div class="demo-palette-color mdl-color--red-A700">A700</div>
108 </div>
109
110 <div class="demo-palette">
111 <div class="demo-palette-heading mdl-color--pink-500">
112 <div class="demo-palette-name">Pink</div>
113
114 500
115 </div>
116 <div class="demo-palette-color mdl-color--pink-50 demo-palette--dark-text">50</div>
117 <div class="demo-palette-color mdl-color--pink-100 demo-palette--dark-text">100</div>
118 <div class="demo-palette-color mdl-color--pink-200 demo-palette--dark-text">200</div>
119 <div class="demo-palette-color mdl-color--pink-300 demo-palette--dark-text">300</div>
120 <div class="demo-palette-color mdl-color--pink-400 demo-palette--dark-text">400</div>
121 <div class="demo-palette-color mdl-color--pink-500">500</div>
122 <div class="demo-palette-color mdl-color--pink-600">600</div>
123 <div class="demo-palette-color mdl-color--pink-700">700</div>
124 <div class="demo-palette-color mdl-color--pink-800">800</div>
125 <div class="demo-palette-color mdl-color--pink-900">900</div>
126 <div class="demo-palette-color mdl-color--pink-A100 demo-palette--dark-text">A100</div>
127 <div class="demo-palette-color mdl-color--pink-A200">A200</div>
128 <div class="demo-palette-color mdl-color--pink-A400">A400</div>
129 <div class="demo-palette-color mdl-color--pink-A700">A700</div>
130 </div>
131
132 <div class="demo-palette">
133 <div class="demo-palette-heading mdl-color--purple-500">
134 <div class="demo-palette-name">Purple</div>
135
136 500
137 </div>
138 <div class="demo-palette-color mdl-color--purple-50 demo-palette--dark-text">50</div>
139 <div class="demo-palette-color mdl-color--purple-100 demo-palette--dark-text">100</div>
140 <div class="demo-palette-color mdl-color--purple-200 demo-palette--dark-text">200</div>
141 <div class="demo-palette-color mdl-color--purple-300">300</div>
142 <div class="demo-palette-color mdl-color--purple-400">400</div>
143 <div class="demo-palette-color mdl-color--purple-500">500</div>
144 <div class="demo-palette-color mdl-color--purple-600">600</div>
145 <div class="demo-palette-color mdl-color--purple-700">700</div>
146 <div class="demo-palette-color mdl-color--purple-800">800</div>
147 <div class="demo-palette-color mdl-color--purple-900">900</div>
148 <div class="demo-palette-color mdl-color--purple-A100 demo-palette--dark-text">A100</div>
149 <div class="demo-palette-color mdl-color--purple-A200">A200</div>
150 <div class="demo-palette-color mdl-color--purple-A400">A400</div>
151 <div class="demo-palette-color mdl-color--purple-A700">A700</div>
152 </div>
153
154 <div class="demo-palette">
155 <div class="demo-palette-heading mdl-color--deep-purple-500">
156 <div class="demo-palette-name">Deep Purple</div>
157
158 500
159 </div>
160 <div class="demo-palette-color mdl-color--deep-purple-50 demo-palette--dark-text">50</div>
161 <div class="demo-palette-color mdl-color--deep-purple-100 demo-palette--dark-text">100</div>
162 <div class="demo-palette-color mdl-color--deep-purple-200 demo-palette--dark-text">200</div>
163 <div class="demo-palette-color mdl-color--deep-purple-300">300</div>
164 <div class="demo-palette-color mdl-color--deep-purple-400">400</div>
165 <div class="demo-palette-color mdl-color--deep-purple-500">500</div>
166 <div class="demo-palette-color mdl-color--deep-purple-600">600</div>
167 <div class="demo-palette-color mdl-color--deep-purple-700">700</div>
168 <div class="demo-palette-color mdl-color--deep-purple-800">800</div>
169 <div class="demo-palette-color mdl-color--deep-purple-900">900</div>
170 <div class="demo-palette-color mdl-color--deep-purple-A100 demo-palette--dark-text">A100</div>
171 <div class="demo-palette-color mdl-color--deep-purple-A200">A200</div>
172 <div class="demo-palette-color mdl-color--deep-purple-A400">A400</div>
173 <div class="demo-palette-color mdl-color--deep-purple-A700">A700</div>
174 </div>
175
176 <div class="demo-palette">
177 <div class="demo-palette-heading mdl-color--indigo-500">
178 <div class="demo-palette-name">Indigo</div>
179
180 500
181 </div>
182 <div class="demo-palette-color mdl-color--indigo-50 demo-palette--dark-text">50</div>
183 <div class="demo-palette-color mdl-color--indigo-100 demo-palette--dark-text">100</div>
184 <div class="demo-palette-color mdl-color--indigo-200 demo-palette--dark-text">200</div>
185 <div class="demo-palette-color mdl-color--indigo-300">300</div>
186 <div class="demo-palette-color mdl-color--indigo-400">400</div>
187 <div class="demo-palette-color mdl-color--indigo-500">500</div>
188 <div class="demo-palette-color mdl-color--indigo-600">600</div>
189 <div class="demo-palette-color mdl-color--indigo-700">700</div>
190 <div class="demo-palette-color mdl-color--indigo-800">800</div>
191 <div class="demo-palette-color mdl-color--indigo-900">900</div>
192 <div class="demo-palette-color mdl-color--indigo-A100 demo-palette--dark-text">A100</div>
193 <div class="demo-palette-color mdl-color--indigo-A200">A200</div>
194 <div class="demo-palette-color mdl-color--indigo-A400">A400</div>
195 <div class="demo-palette-color mdl-color--indigo-A700">A700</div>
196 </div>
197
198 <div class="demo-palette">
199 <div class="demo-palette-heading mdl-color--blue-500">
200 <div class="demo-palette-name">Blue</div>
201
202 500
203 </div>
204 <div class="demo-palette-color mdl-color--blue-50 demo-palette--dark-text">50</div>
205 <div class="demo-palette-color mdl-color--blue-100 demo-palette--dark-text">100</div>
206 <div class="demo-palette-color mdl-color--blue-200 demo-palette--dark-text">200</div>
207 <div class="demo-palette-color mdl-color--blue-300 demo-palette--dark-text">300</div>
208 <div class="demo-palette-color mdl-color--blue-400 demo-palette--dark-text">400</div>
209 <div class="demo-palette-color mdl-color--blue-500">500</div>
210 <div class="demo-palette-color mdl-color--blue-600">600</div>
211 <div class="demo-palette-color mdl-color--blue-700">700</div>
212 <div class="demo-palette-color mdl-color--blue-800">800</div>
213 <div class="demo-palette-color mdl-color--blue-900">900</div>
214 <div class="demo-palette-color mdl-color--blue-A100 demo-palette--dark-text">A100</div>
215 <div class="demo-palette-color mdl-color--blue-A200">A200</div>
216 <div class="demo-palette-color mdl-color--blue-A400">A400</div>
217 <div class="demo-palette-color mdl-color--blue-A700">A700</div>
218 </div>
219
220 <div class="demo-palette">
221 <div class="demo-palette-heading mdl-color--light-blue-500">
222 <div class="demo-palette-name">Light Blue</div>
223
224 500
225 </div>
226 <div class="demo-palette-color mdl-color--light-blue-50 demo-palette--dark-text">50</div>
227 <div class="demo-palette-color mdl-color--light-blue-100 demo-palette--dark-text">100</div>
228 <div class="demo-palette-color mdl-color--light-blue-200 demo-palette--dark-text">200</div>
229 <div class="demo-palette-color mdl-color--light-blue-300 demo-palette--dark-text">300</div>
230 <div class="demo-palette-color mdl-color--light-blue-400 demo-palette--dark-text">400</div>
231 <div class="demo-palette-color mdl-color--light-blue-500">500</div>
232 <div class="demo-palette-color mdl-color--light-blue-600">600</div>
233 <div class="demo-palette-color mdl-color--light-blue-700">700</div>
234 <div class="demo-palette-color mdl-color--light-blue-800">800</div>
235 <div class="demo-palette-color mdl-color--light-blue-900">900</div>
236 <div class="demo-palette-color mdl-color--light-blue-A100 demo-palette--dark-text">A100</div>
237 <div class="demo-palette-color mdl-color--light-blue-A200 demo-palette--dark-text">A200</div>
238 <div class="demo-palette-color mdl-color--light-blue-A400 demo-palette--dark-text">A400</div>
239 <div class="demo-palette-color mdl-color--light-blue-A700">A700</div>
240 </div>
241
242 <div class="demo-palette">
243 <div class="demo-palette-heading mdl-color--cyan-500">
244 <div class="demo-palette-name">Cyan</div>
245
246 500
247 </div>
248 <div class="demo-palette-color mdl-color--cyan-50 demo-palette--dark-text">50</div>
249 <div class="demo-palette-color mdl-color--cyan-100 demo-palette--dark-text">100</div>
250 <div class="demo-palette-color mdl-color--cyan-200 demo-palette--dark-text">200</div>
251 <div class="demo-palette-color mdl-color--cyan-300 demo-palette--dark-text">300</div>
252 <div class="demo-palette-color mdl-color--cyan-400 demo-palette--dark-text">400</div>
253 <div class="demo-palette-color mdl-color--cyan-500">500</div>
254 <div class="demo-palette-color mdl-color--cyan-600">600</div>
255 <div class="demo-palette-color mdl-color--cyan-700">700</div>
256 <div class="demo-palette-color mdl-color--cyan-800">800</div>
257 <div class="demo-palette-color mdl-color--cyan-900">900</div>
258 <div class="demo-palette-color mdl-color--cyan-A100 demo-palette--dark-text">A100</div>
259 <div class="demo-palette-color mdl-color--cyan-A200 demo-palette--dark-text">A200</div>
260 <div class="demo-palette-color mdl-color--cyan-A400 demo-palette--dark-text">A400</div>
261 <div class="demo-palette-color mdl-color--cyan-A700 demo-palette--dark-text">A700</div>
262 </div>
263
264 <div class="demo-palette">
265 <div class="demo-palette-heading mdl-color--teal-500">
266 <div class="demo-palette-name">Teal</div>
267
268 500
269 </div>
270 <div class="demo-palette-color mdl-color--teal-50 demo-palette--dark-text">50</div>
271 <div class="demo-palette-color mdl-color--teal-100 demo-palette--dark-text">100</div>
272 <div class="demo-palette-color mdl-color--teal-200 demo-palette--dark-text">200</div>
273 <div class="demo-palette-color mdl-color--teal-300 demo-palette--dark-text">300</div>
274 <div class="demo-palette-color mdl-color--teal-400 demo-palette--dark-text">400</div>
275 <div class="demo-palette-color mdl-color--teal-500">500</div>
276 <div class="demo-palette-color mdl-color--teal-600">600</div>
277 <div class="demo-palette-color mdl-color--teal-700">700</div>
278 <div class="demo-palette-color mdl-color--teal-800">800</div>
279 <div class="demo-palette-color mdl-color--teal-900">900</div>
280 <div class="demo-palette-color mdl-color--teal-A100 demo-palette--dark-text">A100</div>
281 <div class="demo-palette-color mdl-color--teal-A200 demo-palette--dark-text">A200</div>
282 <div class="demo-palette-color mdl-color--teal-A400 demo-palette--dark-text">A400</div>
283 <div class="demo-palette-color mdl-color--teal-A700 demo-palette--dark-text">A700</div>
284 </div>
285
286 <div class="demo-palette">
287 <div class="demo-palette-heading mdl-color--green-500">
288 <div class="demo-palette-name">Green</div>
289
290 500
291 </div>
292 <div class="demo-palette-color mdl-color--green-50 demo-palette--dark-text">50</div>
293 <div class="demo-palette-color mdl-color--green-100 demo-palette--dark-text">100</div>
294 <div class="demo-palette-color mdl-color--green-200 demo-palette--dark-text">200</div>
295 <div class="demo-palette-color mdl-color--green-300 demo-palette--dark-text">300</div>
296 <div class="demo-palette-color mdl-color--green-400 demo-palette--dark-text">400</div>
297 <div class="demo-palette-color mdl-color--green-500">500</div>
298 <div class="demo-palette-color mdl-color--green-600">600</div>
299 <div class="demo-palette-color mdl-color--green-700">700</div>
300 <div class="demo-palette-color mdl-color--green-800">800</div>
301 <div class="demo-palette-color mdl-color--green-900">900</div>
302 <div class="demo-palette-color mdl-color--green-A100 demo-palette--dark-text">A100</div>
303 <div class="demo-palette-color mdl-color--green-A200 demo-palette--dark-text">A200</div>
304 <div class="demo-palette-color mdl-color--green-A400 demo-palette--dark-text">A400</div>
305 <div class="demo-palette-color mdl-color--green-A700 demo-palette--dark-text">A700</div>
306 </div>
307
308 <div class="demo-palette">
309 <div class="demo-palette-heading mdl-color--light-green-500">
310 <div class="demo-palette-name">Light Green</div>
311
312 500
313 </div>
314 <div class="demo-palette-color mdl-color--light-green-50 demo-palette--dark-text">50</div>
315 <div class="demo-palette-color mdl-color--light-green-100 demo-palette--dark-text">100</div>
316 <div class="demo-palette-color mdl-color--light-green-200 demo-palette--dark-text">200</div>
317 <div class="demo-palette-color mdl-color--light-green-300 demo-palette--dark-text">300</div>
318 <div class="demo-palette-color mdl-color--light-green-400 demo-palette--dark-text">400</div>
319 <div class="demo-palette-color mdl-color--light-green-500 demo-palette--dark-text">500</div>
320 <div class="demo-palette-color mdl-color--light-green-600 demo-palette--dark-text">600</div>
321 <div class="demo-palette-color mdl-color--light-green-700 demo-palette--dark-text">700</div>
322 <div class="demo-palette-color mdl-color--light-green-800">800</div>
323 <div class="demo-palette-color mdl-color--light-green-900">900</div>
324 <div class="demo-palette-color mdl-color--light-green-A100 demo-palette--dark-text">A100</div>
325 <div class="demo-palette-color mdl-color--light-green-A200 demo-palette--dark-text">A200</div>
326 <div class="demo-palette-color mdl-color--light-green-A400 demo-palette--dark-text">A400</div>
327 <div class="demo-palette-color mdl-color--light-green-A700 demo-palette--dark-text">A700</div>
328 </div>
329
330 <div class="demo-palette">
331 <div class="demo-palette-heading mdl-color--lime-500 demo-palette--dark-text">
332 <div class="demo-palette-name">Lime</div>
333
334 500
335 </div>
336 <div class="demo-palette-color mdl-color--lime-50 demo-palette--dark-text">50</div>
337 <div class="demo-palette-color mdl-color--lime-100 demo-palette--dark-text">100</div>
338 <div class="demo-palette-color mdl-color--lime-200 demo-palette--dark-text">200</div>
339 <div class="demo-palette-color mdl-color--lime-300 demo-palette--dark-text">300</div>
340 <div class="demo-palette-color mdl-color--lime-400 demo-palette--dark-text">400</div>
341 <div class="demo-palette-color mdl-color--lime-500 demo-palette--dark-text">500</div>
342 <div class="demo-palette-color mdl-color--lime-600 demo-palette--dark-text">600</div>
343 <div class="demo-palette-color mdl-color--lime-700 demo-palette--dark-text">700</div>
344 <div class="demo-palette-color mdl-color--lime-800 demo-palette--dark-text">800</div>
345 <div class="demo-palette-color mdl-color--lime-900">900</div>
346 <div class="demo-palette-color mdl-color--lime-A100 demo-palette--dark-text">A100</div>
347 <div class="demo-palette-color mdl-color--lime-A200 demo-palette--dark-text">A200</div>
348 <div class="demo-palette-color mdl-color--lime-A400 demo-palette--dark-text">A400</div>
349 <div class="demo-palette-color mdl-color--lime-A700 demo-palette--dark-text">A700</div>
350 </div>
351
352 <div class="demo-palette">
353 <div class="demo-palette-heading mdl-color--yellow-500 demo-palette--dark-text">
354 <div class="demo-palette-name">Yellow</div>
355
356 500
357 </div>
358 <div class="demo-palette-color mdl-color--yellow-50 demo-palette--dark-text">50</div>
359 <div class="demo-palette-color mdl-color--yellow-100 demo-palette--dark-text">100</div>
360 <div class="demo-palette-color mdl-color--yellow-200 demo-palette--dark-text">200</div>
361 <div class="demo-palette-color mdl-color--yellow-300 demo-palette--dark-text">300</div>
362 <div class="demo-palette-color mdl-color--yellow-400 demo-palette--dark-text">400</div>
363 <div class="demo-palette-color mdl-color--yellow-500 demo-palette--dark-text">500</div>
364 <div class="demo-palette-color mdl-color--yellow-600 demo-palette--dark-text">600</div>
365 <div class="demo-palette-color mdl-color--yellow-700 demo-palette--dark-text">700</div>
366 <div class="demo-palette-color mdl-color--yellow-800 demo-palette--dark-text">800</div>
367 <div class="demo-palette-color mdl-color--yellow-900 demo-palette--dark-text">900</div>
368 <div class="demo-palette-color mdl-color--yellow-A100 demo-palette--dark-text">A100</div>
369 <div class="demo-palette-color mdl-color--yellow-A200 demo-palette--dark-text">A200</div>
370 <div class="demo-palette-color mdl-color--yellow-A400 demo-palette--dark-text">A400</div>
371 <div class="demo-palette-color mdl-color--yellow-A700 demo-palette--dark-text">A700</div>
372 </div>
373
374 <div class="demo-palette">
375 <div class="demo-palette-heading mdl-color--amber-500 demo-palette--dark-text">
376 <div class="demo-palette-name">Amber</div>
377
378 500
379 </div>
380 <div class="demo-palette-color mdl-color--amber-50 demo-palette--dark-text">50</div>
381 <div class="demo-palette-color mdl-color--amber-100 demo-palette--dark-text">100</div>
382 <div class="demo-palette-color mdl-color--amber-200 demo-palette--dark-text">200</div>
383 <div class="demo-palette-color mdl-color--amber-300 demo-palette--dark-text">300</div>
384 <div class="demo-palette-color mdl-color--amber-400 demo-palette--dark-text">400</div>
385 <div class="demo-palette-color mdl-color--amber-500 demo-palette--dark-text">500</div>
386 <div class="demo-palette-color mdl-color--amber-600 demo-palette--dark-text">600</div>
387 <div class="demo-palette-color mdl-color--amber-700 demo-palette--dark-text">700</div>
388 <div class="demo-palette-color mdl-color--amber-800 demo-palette--dark-text">800</div>
389 <div class="demo-palette-color mdl-color--amber-900 demo-palette--dark-text">900</div>
390 <div class="demo-palette-color mdl-color--amber-A100 demo-palette--dark-text">A100</div>
391 <div class="demo-palette-color mdl-color--amber-A200 demo-palette--dark-text">A200</div>
392 <div class="demo-palette-color mdl-color--amber-A400 demo-palette--dark-text">A400</div>
393 <div class="demo-palette-color mdl-color--amber-A700 demo-palette--dark-text">A700</div>
394 </div>
395
396 <div class="demo-palette">
397 <div class="demo-palette-heading mdl-color--orange-500 demo-palette--dark-text">
398 <div class="demo-palette-name">Orange</div>
399
400 500
401 </div>
402 <div class="demo-palette-color mdl-color--orange-50 demo-palette--dark-text">50</div>
403 <div class="demo-palette-color mdl-color--orange-100 demo-palette--dark-text">100</div>
404 <div class="demo-palette-color mdl-color--orange-200 demo-palette--dark-text">200</div>
405 <div class="demo-palette-color mdl-color--orange-300 demo-palette--dark-text">300</div>
406 <div class="demo-palette-color mdl-color--orange-400 demo-palette--dark-text">400</div>
407 <div class="demo-palette-color mdl-color--orange-500 demo-palette--dark-text">500</div>
408 <div class="demo-palette-color mdl-color--orange-600 demo-palette--dark-text">600</div>
409 <div class="demo-palette-color mdl-color--orange-700 demo-palette--dark-text">700</div>
410 <div class="demo-palette-color mdl-color--orange-800">800</div>
411 <div class="demo-palette-color mdl-color--orange-900">900</div>
412 <div class="demo-palette-color mdl-color--orange-A100 demo-palette--dark-text">A100</div>
413 <div class="demo-palette-color mdl-color--orange-A200 demo-palette--dark-text">A200</div>
414 <div class="demo-palette-color mdl-color--orange-A400 demo-palette--dark-text">A400</div>
415 <div class="demo-palette-color mdl-color--orange-A700 demo-palette--dark-text">A700</div>
416 </div>
417
418 <div class="demo-palette">
419 <div class="demo-palette-heading mdl-color--deep-orange-500">
420 <div class="demo-palette-name">Deep Orange</div>
421
422 500
423 </div>
424 <div class="demo-palette-color mdl-color--deep-orange-50 demo-palette--dark-text">50</div>
425 <div class="demo-palette-color mdl-color--deep-orange-100 demo-palette--dark-text">100</div>
426 <div class="demo-palette-color mdl-color--deep-orange-200 demo-palette--dark-text">200</div>
427 <div class="demo-palette-color mdl-color--deep-orange-300 demo-palette--dark-text">300</div>
428 <div class="demo-palette-color mdl-color--deep-orange-400 demo-palette--dark-text">400</div>
429 <div class="demo-palette-color mdl-color--deep-orange-500">500</div>
430 <div class="demo-palette-color mdl-color--deep-orange-600">600</div>
431 <div class="demo-palette-color mdl-color--deep-orange-700">700</div>
432 <div class="demo-palette-color mdl-color--deep-orange-800">800</div>
433 <div class="demo-palette-color mdl-color--deep-orange-900">900</div>
434 <div class="demo-palette-color mdl-color--deep-orange-A100 demo-palette--dark-text">A100</div>
435 <div class="demo-palette-color mdl-color--deep-orange-A200 demo-palette--dark-text">A200</div>
436 <div class="demo-palette-color mdl-color--deep-orange-A400">A400</div>
437 <div class="demo-palette-color mdl-color--deep-orange-A700">A700</div>
438 </div>
439
440 <div class="demo-palette">
441 <div class="demo-palette-heading mdl-color--brown-500">
442 <div class="demo-palette-name">Brown</div>
443
444 500
445 </div>
446 <div class="demo-palette-color mdl-color--brown-50 demo-palette--dark-text">50</div>
447 <div class="demo-palette-color mdl-color--brown-100 demo-palette--dark-text">100</div>
448 <div class="demo-palette-color mdl-color--brown-200 demo-palette--dark-text">200</div>
449 <div class="demo-palette-color mdl-color--brown-300">300</div>
450 <div class="demo-palette-color mdl-color--brown-400">400</div>
451 <div class="demo-palette-color mdl-color--brown-500">500</div>
452 <div class="demo-palette-color mdl-color--brown-600">600</div>
453 <div class="demo-palette-color mdl-color--brown-700">700</div>
454 <div class="demo-palette-color mdl-color--brown-800">800</div>
455 <div class="demo-palette-color mdl-color--brown-900">900</div>
456 </div>
457
458 <div class="demo-palette">
459 <div class="demo-palette-heading mdl-color--grey-500 demo-palette--dark-text">
460 <div class="demo-palette-name">Grey</div>
461
462 500
463 </div>
464 <div class="demo-palette-color mdl-color--grey-50 demo-palette--dark-text">50</div>
465 <div class="demo-palette-color mdl-color--grey-100 demo-palette--dark-text">100</div>
466 <div class="demo-palette-color mdl-color--grey-200 demo-palette--dark-text">200</div>
467 <div class="demo-palette-color mdl-color--grey-300 demo-palette--dark-text">300</div>
468 <div class="demo-palette-color mdl-color--grey-400 demo-palette--dark-text">400</div>
469 <div class="demo-palette-color mdl-color--grey-500 demo-palette--dark-text">500</div>
470 <div class="demo-palette-color mdl-color--grey-600">600</div>
471 <div class="demo-palette-color mdl-color--grey-700">700</div>
472 <div class="demo-palette-color mdl-color--grey-800">800</div>
473 <div class="demo-palette-color mdl-color--grey-900">900</div>
474 </div>
475
476 <div class="demo-palette">
477 <div class="demo-palette-heading mdl-color--blue-grey-500">
478 <div class="demo-palette-name">Blue Grey</div>
479
480 500
481 </div>
482 <div class="demo-palette-color mdl-color--blue-grey-50 demo-palette--dark-text">50</div>
483 <div class="demo-palette-color mdl-color--blue-grey-100 demo-palette--dark-text">100</div>
484 <div class="demo-palette-color mdl-color--blue-grey-200 demo-palette--dark-text">200</div>
485 <div class="demo-palette-color mdl-color--blue-grey-300 demo-palette--dark-text">300</div>
486 <div class="demo-palette-color mdl-color--blue-grey-400">400</div>
487 <div class="demo-palette-color mdl-color--blue-grey-500">500</div>
488 <div class="demo-palette-color mdl-color--blue-grey-600">600</div>
489 <div class="demo-palette-color mdl-color--blue-grey-700">700</div>
490 <div class="demo-palette-color mdl-color--blue-grey-800">800</div>
491 <div class="demo-palette-color mdl-color--blue-grey-900">900</div>
492 </div>
493
494 <div class="demo-palette">
495 <div class="demo-palette-heading demo-palette-single mdl-color--black">
496 <div class="demo-palette-name">Black</div>
497 </div>
498 <div class="demo-palette-heading demo-palette-single mdl-color--white demo-palette--dark-text">
499 <div class="demo-palette-name">White</div>
500 </div>
501 </div>
502
503 </div>
504
505
506 </div>
507 <!-- Built with love using Material Design Lite -->
508
509
510 <script>
511
512 </script>
513 </body>
514</html>