## 色彩
{% raw %}
<link rel="stylesheet" type="text/css" href="/assets/static/css/color.css">
<div class="color">
<h3>基础调色板</h3>
<div class="primaries">
<div class="bg-red">red</div>
<div class="bg-pink">pink</div>
<div class="bg-purple">purple</div>
<div class="bg-deep-purple">deep-purple</div>
<div class="bg-indigo">indigo</div>
<div class="bg-blue">blue</div>
<div class="bg-light-blue">light-blue</div>
<div class="bg-cyan">cyan</div>
<div class="bg-teal">teal</div>
<div class="bg-green">green</div>
<div class="bg-light-green">light-green</div>
<div class="bg-lime">lime</div>
<div class="bg-yellow grey">yellow</div>
<div class="bg-amber">amber</div>
<div class="bg-orange">orange</div>
<div class="bg-deep-orange">deep-orange</div>
<div class="bg-brown">brown</div>
<div class="bg-grey">grey</div>
<div class="bg-blue-grey">blue-grey</div>
<div class="bg-black">black</div>
<p>以上基础调色板均以背景色为示例，对应的字体颜色去掉bg即可。例如：背景色为.bg-grey，字体色为.grey</p>
</div>
<div class="example-wrap">
<h3 class="example-title">调色板</h3>
<p >调色板包含了主色和不同色阶的颜色</p>
<h4>具体使用</h4>
<p>1、引入u.css文件</p>
<p>2、背景色使用样式类名为'.bg-颜色的名字'，字体使用样式类名为'.颜色的名字'。例如红色A700对应的背景色为<code>.bg-red-A700</code>,字体色为<code>.red-A700</code></p>
<div class="u-row  color-palette">
<div class="u-col-4">
<h5 class="text-uppercase">red</h5>
<ul class="list-group">
<li class="bg-red-A700 grey-800 list-group-item">
<span>A700</span> /
<span>#d50000</span>
</li>
<li class="bg-red-A400 grey-800 list-group-item">
<span>A400</span> /
<span>#ff1744</span>
</li>
<li class="bg-red-A200 grey-800 list-group-item">
<span>A200</span> /
<span>#ff5252</span>
</li>
<li class="bg-red-A100 grey-800 list-group-item">
<span>A100</span> /
<span>#ff8a80</span>
</li>
<li class="bg-red-900 list-group-item">
<span>900</span> /
<span>#b71c1c</span>
</li>
<li class="bg-red-800 list-group-item">
<span>800</span> /
<span>#c62828</span>
</li>
<li class="bg-red-700 list-group-item">
<span>700</span> /
<span>#d32f2f</span>
</li>
<li class="bg-red-600 list-group-item">
<span>600</span> /
<span>#e53935</span>
</li>
<li class="bg-red-500 list-group-item">
<span>500</span> /
<span>#f44336</span>
</li>
<li class="bg-red-400 grey-800 list-group-item">
<span>400</span> /
<span>#ef5350</span>
</li>
<li class="bg-red-300 grey-800 list-group-item">
<span>300</span> /
<span>#e57373</span>
</li>
<li class="bg-red-200 grey-800 list-group-item">
<span>200</span> /
<span>#ef9a9a</span>
</li>
<li class="bg-red-100 grey-800 list-group-item">
<span>100</span> /
<span>#ffcdd2</span>
</li>
<li class="bg-red-50 grey-800 list-group-item">
<span>50</span> /
<span>#ffebee</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">pink</h5>
<ul class="list-group">
<li class="bg-pink-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#c51162</span>
</li>
<li class="bg-pink-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#f50057</span>
</li>
<li class="bg-pink-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#ff4081</span>
</li>
<li class="bg-pink-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ff80ab</span>
</li>
<li class="bg-pink-900 list-group-item">
<span>900</span> /
<span>#880e4f</span>
</li>
<li class="bg-pink-800 list-group-item">
<span>800</span> /
<span>#ad1457</span>
</li>
<li class="bg-pink-700 list-group-item">
<span>700</span> /
<span>#c2185b</span>
</li>
<li class="bg-pink-600 list-group-item">
<span>600</span> /
<span>#d81b60</span>
</li>
<li class="bg-pink-500 list-group-item">
<span>500</span> /
<span>#e91e63</span>
</li>
<li class="bg-pink-400 grey-800 list-group-item">
<span>400</span> /
<span>#ec407a</span>
</li>
<li class="bg-pink-300 grey-800 list-group-item">
<span>300</span> /
<span>#f06292</span>
</li>
<li class="bg-pink-200 grey-800 list-group-item">
<span>200</span> /
<span>#f48fb1</span>
</li>
<li class="bg-pink-100 grey-800 list-group-item">
<span>100</span> /
<span>#f8bbd0</span>
</li>
<li class="bg-pink-50 grey-800 list-group-item">
<span>50</span> /
<span>#fce4ec</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">purple</h5>
<ul class="list-group">
<li class="bg-purple-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#aa00ff</span>
</li>
<li class="bg-purple-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#d500f9</span>
</li>
<li class="bg-purple-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#e040fb</span>
</li>
<li class="bg-purple-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ea80fc</span>
</li>
<li class="bg-purple-900 list-group-item">
<span>900</span> /
<span>#4a148c</span>
</li>
<li class="bg-purple-800 list-group-item">
<span>800</span> /
<span>#6a1b9a</span>
</li>
<li class="bg-purple-700 list-group-item">
<span>700</span> /
<span>#7b1fa2</span>
</li>
<li class="bg-purple-600 list-group-item">
<span>600</span> /
<span>#8e24aa</span>
</li>
<li class="bg-purple-500 list-group-item">
<span>500</span> /
<span>#9c27b0</span>
</li>
<li class="bg-purple-400 grey-800 list-group-item">
<span>400</span> /
<span>#ab47bc</span>
</li>
<li class="bg-purple-300 grey-800 list-group-item">
<span>300</span> /
<span>#ba68c8</span>
</li>
<li class="bg-purple-200 grey-800 list-group-item">
<span>200</span> /
<span>#ce93d8</span>
</li>
<li class="bg-purple-100 grey-800 list-group-item">
<span>100</span> /
<span>#e1bee7</span>
</li>
<li class="bg-purple-50 grey-800 list-group-item">
<span>50</span> /
<span>#f3e5f5</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">deep-purple</h5>
<ul class="list-group">
<li class="bg-deep-purple-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#6200ea</span>
</li>
<li class="bg-deep-purple-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#651fff</span>
</li>
<li class="bg-deep-purple-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#7c4dff</span>
</li>
<li class="bg-deep-purple-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#b388ff</span>
</li>
<li class="bg-deep-purple-900 list-group-item">
<span>900</span> /
<span>#311b92</span>
</li>
<li class="bg-deep-purple-800 list-group-item">
<span>800</span> /
<span>#4527a0</span>
</li>
<li class="bg-deep-purple-700 list-group-item">
<span>700</span> /
<span>#512da8</span>
</li>
<li class="bg-deep-purple-600 list-group-item">
<span>600</span> /
<span>#5e35b1</span>
</li>
<li class="bg-deep-purple-500 list-group-item">
<span>500</span> /
<span>#673ab7</span>
</li>
<li class="bg-deep-purple-400 grey-800 list-group-item">
<span>400</span> /
<span>#7e57c2</span>
</li>
<li class="bg-deep-purple-300 grey-800 list-group-item">
<span>300</span> /
<span>#9575cd</span>
</li>
<li class="bg-deep-purple-200 grey-800 list-group-item">
<span>200</span> /
<span>#b39ddb</span>
</li>
<li class="bg-deep-purple-100 grey-800 list-group-item">
<span>100</span> /
<span>#d1c4e9</span>
</li>
<li class="bg-deep-purple-50 grey-800 list-group-item">
<span>50</span> /
<span>#ede7f6</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">indigo</h5>
<ul class="list-group">
<li class="bg-indigo-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#304ffe</span>
</li>
<li class="bg-indigo-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#3d5afe</span>
</li>
<li class="bg-indigo-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#536dfe</span>
</li>
<li class="bg-indigo-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#8c9eff</span>
</li>
<li class="bg-indigo-900 list-group-item">
<span>900</span> /
<span>#1a237e</span>
</li>
<li class="bg-indigo-800 list-group-item">
<span>800</span> /
<span>#283593</span>
</li>
<li class="bg-indigo-700 list-group-item">
<span>700</span> /
<span>#303f9f</span>
</li>
<li class="bg-indigo-600 list-group-item">
<span>600</span> /
<span>#3949ab</span>
</li>
<li class="bg-indigo-500 list-group-item">
<span>500</span> /
<span>#3f51b5</span>
</li>
<li class="bg-indigo-400 grey-800 list-group-item">
<span>400</span> /
<span>#5c6bc0</span>
</li>
<li class="bg-indigo-300 grey-800 list-group-item">
<span>300</span> /
<span>#7986cb</span>
</li>
<li class="bg-indigo-200 grey-800 list-group-item">
<span>200</span> /
<span>#9fa8da</span>
</li>
<li class="bg-indigo-100 grey-800 list-group-item">
<span>100</span> /
<span>#c5cae9</span>
</li>
<li class="bg-indigo-50 grey-800 list-group-item">
<span>50</span> /
<span>#e8eaf6</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">blue</h5>
<ul class="list-group">
<li class="bg-blue-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#2962ff</span>
</li>
<li class="bg-blue-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#2979ff</span>
</li>
<li class="bg-blue-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#448aff</span>
</li>
<li class="bg-blue-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#82b1ff</span>
</li>
<li class="bg-blue-900 list-group-item">
<span>900</span> /
<span>#0d47a1</span>
</li>
<li class="bg-blue-800 list-group-item">
<span>800</span> /
<span>#1565c0</span>
</li>
<li class="bg-blue-700 list-group-item">
<span>700</span> /
<span>#1976d2</span>
</li>
<li class="bg-blue-600 list-group-item">
<span>600</span> /
<span>#1e88e5</span>
</li>
<li class="bg-blue-500 list-group-item">
<span>500</span> /
<span>#2196f3</span>
</li>
<li class="bg-blue-400 grey-800 list-group-item">
<span>400</span> /
<span>#42a5f5</span>
</li>
<li class="bg-blue-300 grey-800 list-group-item">
<span>300</span> /
<span>#64b5f6</span>
</li>
<li class="bg-blue-200 grey-800 list-group-item">
<span>200</span> /
<span>#90caf9</span>
</li>
<li class="bg-blue-100 grey-800 list-group-item">
<span>100</span> /
<span>#bbdefb</span>
</li>
<li class="bg-blue-50 grey-800 list-group-item">
<span>50</span> /
<span>#e3f2fd</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">light-blue</h5>
<ul class="list-group">
<li class="bg-light-blue-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#0091ea</span>
</li>
<li class="bg-light-blue-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#00b0ff</span>
</li>
<li class="bg-light-blue-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#40c4ff</span>
</li>
<li class="bg-light-blue-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#80d8ff</span>
</li>
<li class="bg-light-blue-900 list-group-item">
<span>900</span> /
<span>#01579b</span>
</li>
<li class="bg-light-blue-800 list-group-item">
<span>800</span> /
<span>#0277bd</span>
</li>
<li class="bg-light-blue-700 list-group-item">
<span>700</span> /
<span>#0288d1</span>
</li>
<li class="bg-light-blue-600 list-group-item">
<span>600</span> /
<span>#039be5</span>
</li>
<li class="bg-light-blue-500 list-group-item">
<span>500</span> /
<span>#03a9f4</span>
</li>
<li class="bg-light-blue-400 grey-800 list-group-item">
<span>400</span> /
<span>#29b6f6</span>
</li>
<li class="bg-light-blue-300 grey-800 list-group-item">
<span>300</span> /
<span>#4fc3f7</span>
</li>
<li class="bg-light-blue-200 grey-800 list-group-item">
<span>200</span> /
<span>#81d4fa</span>
</li>
<li class="bg-light-blue-100 grey-800 list-group-item">
<span>100</span> /
<span>#b3e5fc</span>
</li>
<li class="bg-light-blue-50 grey-800 list-group-item">
<span>50</span> /
<span>#e1f5fe</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">cyan</h5>
<ul class="list-group">
<li class="bg-cyan-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#00b8d4</span>
</li>
<li class="bg-cyan-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#00e5ff</span>
</li>
<li class="bg-cyan-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#18ffff</span>
</li>
<li class="bg-cyan-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#84ffff</span>
</li>
<li class="bg-cyan-900 list-group-item">
<span>900</span> /
<span>#006064</span>
</li>
<li class="bg-cyan-800 list-group-item">
<span>800</span> /
<span>#00838f</span>
</li>
<li class="bg-cyan-700 list-group-item">
<span>700</span> /
<span>#0097a7</span>
</li>
<li class="bg-cyan-600 list-group-item">
<span>600</span> /
<span>#00acc1</span>
</li>
<li class="bg-cyan-500 list-group-item">
<span>500</span> /
<span>#00bcd4</span>
</li>
<li class="bg-cyan-400 grey-800 list-group-item">
<span>400</span> /
<span>#26c6da</span>
</li>
<li class="bg-cyan-300 grey-800 list-group-item">
<span>300</span> /
<span>#4dd0e1</span>
</li>
<li class="bg-cyan-200 grey-800 list-group-item">
<span>200</span> /
<span>#80deea</span>
</li>
<li class="bg-cyan-100 grey-800 list-group-item">
<span>100</span> /
<span>#b2ebf2</span>
</li>
<li class="bg-cyan-50 grey-800 list-group-item">
<span>50</span> /
<span>#e0f7fa</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">teal</h5>
<ul class="list-group">
<li class="bg-teal-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#00bfa5</span>
</li>
<li class="bg-teal-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#1de9b6</span>
</li>
<li class="bg-teal-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#64ffda</span>
</li>
<li class="bg-teal-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#a7ffeb</span>
</li>
<li class="bg-teal-900 list-group-item">
<span>900</span> /
<span>#004d40</span>
</li>
<li class="bg-teal-800 list-group-item">
<span>800</span> /
<span>#00695c</span>
</li>
<li class="bg-teal-700 list-group-item">
<span>700</span> /
<span>#00796b</span>
</li>
<li class="bg-teal-600 list-group-item">
<span>600</span> /
<span>#00897b</span>
</li>
<li class="bg-teal-500 list-group-item">
<span>500</span> /
<span>#009688</span>
</li>
<li class="bg-teal-400 grey-800 list-group-item">
<span>400</span> /
<span>#26a69a</span>
</li>
<li class="bg-teal-300 grey-800 list-group-item">
<span>300</span> /
<span>#4db6ac</span>
</li>
<li class="bg-teal-200 grey-800 list-group-item">
<span>200</span> /
<span>#80cbc4</span>
</li>
<li class="bg-teal-100 grey-800 list-group-item">
<span>100</span> /
<span>#b2dfdb</span>
</li>
<li class="bg-teal-50 grey-800 list-group-item">
<span>50</span> /
<span>#e0f2f1</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">green</h5>
<ul class="list-group">
<li class="bg-green-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#00c853</span>
</li>
<li class="bg-green-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#00e676</span>
</li>
<li class="bg-green-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#69f0ae</span>
</li>
<li class="bg-green-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#b9f6ca</span>
</li>
<li class="bg-green-900 list-group-item">
<span>900</span> /
<span>#1b5e20</span>
</li>
<li class="bg-green-800 list-group-item">
<span>800</span> /
<span>#2e7d32</span>
</li>
<li class="bg-green-700 list-group-item">
<span>700</span> /
<span>#388e3c</span>
</li>
<li class="bg-green-600 list-group-item">
<span>600</span> /
<span>#43a047</span>
</li>
<li class="bg-green-500 list-group-item">
<span>500</span> /
<span>#4caf50</span>
</li>
<li class="bg-green-400 grey-800 list-group-item">
<span>400</span> /
<span>#66bb6a</span>
</li>
<li class="bg-green-300 grey-800 list-group-item">
<span>300</span> /
<span>#81c784</span>
</li>
<li class="bg-green-200 grey-800 list-group-item">
<span>200</span> /
<span>#a5d6a7</span>
</li>
<li class="bg-green-100 grey-800 list-group-item">
<span>100</span> /
<span>#c8e6c9</span>
</li>
<li class="bg-green-50 grey-800 list-group-item">
<span>50</span> /
<span>#e8f5e9</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">light-green</h5>
<ul class="list-group">
<li class="bg-light-green-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#64dd17</span>
</li>
<li class="bg-light-green-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#76ff03</span>
</li>
<li class="bg-light-green-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#b2ff59</span>
</li>
<li class="bg-light-green-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ccff90</span>
</li>
<li class="bg-light-green-900 list-group-item">
<span>900</span> /
<span>#33691e</span>
</li>
<li class="bg-light-green-800 list-group-item">
<span>800</span> /
<span>#558b2f</span>
</li>
<li class="bg-light-green-700 list-group-item">
<span>700</span> /
<span>#689f38</span>
</li>
<li class="bg-light-green-600 list-group-item">
<span>600</span> /
<span>#7cb342</span>
</li>
<li class="bg-light-green-500 list-group-item">
<span>500</span> /
<span>#8bc34a</span>
</li>
<li class="bg-light-green-400 grey-800 list-group-item">
<span>400</span> /
<span>#9ccc65</span>
</li>
<li class="bg-light-green-300 grey-800 list-group-item">
<span>300</span> /
<span>#aed581</span>
</li>
<li class="bg-light-green-200 grey-800 list-group-item">
<span>200</span> /
<span>#c5e1a5</span>
</li>
<li class="bg-light-green-100 grey-800 list-group-item">
<span>100</span> /
<span>#dcedc8</span>
</li>
<li class="bg-light-green-50 grey-800 list-group-item">
<span>50</span> /
<span>#f1f8e9</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">lime</h5>
<ul class="list-group">
<li class="bg-lime-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#aeea00</span>
</li>
<li class="bg-lime-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#c6ff00</span>
</li>
<li class="bg-lime-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#eeff41</span>
</li>
<li class="bg-lime-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#f4ff81</span>
</li>
<li class="bg-lime-900 list-group-item">
<span>900</span> /
<span>#827717</span>
</li>
<li class="bg-lime-800 list-group-item">
<span>800</span> /
<span>#9e9d24</span>
</li>
<li class="bg-lime-700 list-group-item">
<span>700</span> /
<span>#afb42b</span>
</li>
<li class="bg-lime-600 list-group-item">
<span>600</span> /
<span>#c0ca33</span>
</li>
<li class="bg-lime-500 list-group-item">
<span>500</span> /
<span>#cddc39</span>
</li>
<li class="bg-lime-400 grey-800 list-group-item">
<span>400</span> /
<span>#d4e157</span>
</li>
<li class="bg-lime-300 grey-800 list-group-item">
<span>300</span> /
<span>#dce775</span>
</li>
<li class="bg-lime-200 grey-800 list-group-item">
<span>200</span> /
<span>#e6ee9c</span>
</li>
<li class="bg-lime-100 grey-800 list-group-item">
<span>100</span> /
<span>#f0f4c3</span>
</li>
<li class="bg-lime-50 grey-800 list-group-item">
<span>50</span> /
<span>#f9fbe7</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">yellow</h5>
<ul class="list-group">
<li class="bg-yellow-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#ffd600</span>
</li>
<li class="bg-yellow-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#ffea00</span>
</li>
<li class="bg-yellow-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#ffff00</span>
</li>
<li class="bg-yellow-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ffff8d</span>
</li>
<li class="bg-yellow-900 list-group-item">
<span>900</span> /
<span>#f57f17</span>
</li>
<li class="bg-yellow-800 list-group-item">
<span>800</span> /
<span>#f9a825</span>
</li>
<li class="bg-yellow-700 list-group-item">
<span>700</span> /
<span>#fbc02d</span>
</li>
<li class="bg-yellow-600 list-group-item">
<span>600</span> /
<span>#fdd835</span>
</li>
<li class="bg-yellow-500 list-group-item">
<span>500</span> /
<span>#ffeb3b</span>
</li>
<li class="bg-yellow-400 grey-800 list-group-item">
<span>400</span> /
<span>#ffee58</span>
</li>
<li class="bg-yellow-300 grey-800 list-group-item">
<span>300</span> /
<span>#fff176</span>
</li>
<li class="bg-yellow-200 grey-800 list-group-item">
<span>200</span> /
<span>#fff59d</span>
</li>
<li class="bg-yellow-100 grey-800 list-group-item">
<span>100</span> /
<span>#fff9c4</span>
</li>
<li class="bg-yellow-50 grey-800 list-group-item">
<span>50</span> /
<span>#fffde7</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">amber</h5>
<ul class="list-group">
<li class="bg-amber-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#ffab00</span>
</li>
<li class="bg-amber-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#ffc400</span>
</li>
<li class="bg-amber-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#ffd740</span>
</li>
<li class="bg-amber-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ffe57f</span>
</li>
<li class="bg-amber-900 list-group-item">
<span>900</span> /
<span>#ff6f00</span>
</li>
<li class="bg-amber-800 list-group-item">
<span>800</span> /
<span>#ff8f00</span>
</li>
<li class="bg-amber-700 list-group-item">
<span>700</span> /
<span>#ffa000</span>
</li>
<li class="bg-amber-600 list-group-item">
<span>600</span> /
<span>#ffb300</span>
</li>
<li class="bg-amber-500 list-group-item">
<span>500</span> /
<span>#ffc107</span>
</li>
<li class="bg-amber-400 grey-800 list-group-item">
<span>400</span> /
<span>#ffca28</span>
</li>
<li class="bg-amber-300 grey-800 list-group-item">
<span>300</span> /
<span>#ffd54f</span>
</li>
<li class="bg-amber-200 grey-800 list-group-item">
<span>200</span> /
<span>#ffe082</span>
</li>
<li class="bg-amber-100 grey-800 list-group-item">
<span>100</span> /
<span>#ffecb3</span>
</li>
<li class="bg-amber-50 grey-800 list-group-item">
<span>50</span> /
<span>#fff8e1</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">orange</h5>
<ul class="list-group">
<li class="bg-orange-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#ff6d00</span>
</li>
<li class="bg-orange-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#ff9100</span>
</li>
<li class="bg-orange-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#ffab40</span>
</li>
<li class="bg-orange-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ffd180</span>
</li>
<li class="bg-orange-900 list-group-item">
<span>900</span> /
<span>#e65100</span>
</li>
<li class="bg-orange-800 list-group-item">
<span>800</span> /
<span>#ef6c00</span>
</li>
<li class="bg-orange-700 list-group-item">
<span>700</span> /
<span>#f57c00</span>
</li>
<li class="bg-orange-600 list-group-item">
<span>600</span> /
<span>#fb8c00</span>
</li>
<li class="bg-orange-500 list-group-item">
<span>500</span> /
<span>#ff9800</span>
</li>
<li class="bg-orange-400 grey-800 list-group-item">
<span>400</span> /
<span>#ffa726</span>
</li>
<li class="bg-orange-300 grey-800 list-group-item">
<span>300</span> /
<span>#ffb74d</span>
</li>
<li class="bg-orange-200 grey-800 list-group-item">
<span>200</span> /
<span>#ffcc80</span>
</li>
<li class="bg-orange-100 grey-800 list-group-item">
<span>100</span> /
<span>#ffe0b2</span>
</li>
<li class="bg-orange-50 grey-800 list-group-item">
<span>50</span> /
<span>#fff3e0</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">deep-orange</h5>
<ul class="list-group">
<li class="bg-deep-orange-A700 grey-800 list-group-item">
<span>a700</span> /
<span>#dd2c00</span>
</li>
<li class="bg-deep-orange-A400 grey-800 list-group-item">
<span>a400</span> /
<span>#ff3d00</span>
</li>
<li class="bg-deep-orange-A200 grey-800 list-group-item">
<span>a200</span> /
<span>#ff6e40</span>
</li>
<li class="bg-deep-orange-A100 grey-800 list-group-item">
<span>a100</span> /
<span>#ff9e80</span>
</li>
<li class="bg-deep-orange-900 list-group-item">
<span>900</span> /
<span>#bf360c</span>
</li>
<li class="bg-deep-orange-800 list-group-item">
<span>800</span> /
<span>#d84315</span>
</li>
<li class="bg-deep-orange-700 list-group-item">
<span>700</span> /
<span>#e64a19</span>
</li>
<li class="bg-deep-orange-600 list-group-item">
<span>600</span> /
<span>#f4511e</span>
</li>
<li class="bg-deep-orange-500 list-group-item">
<span>500</span> /
<span>#ff5722</span>
</li>
<li class="bg-deep-orange-400 grey-800 list-group-item">
<span>400</span> /
<span>#ff7043</span>
</li>
<li class="bg-deep-orange-300 grey-800 list-group-item">
<span>300</span> /
<span>#ff8a65</span>
</li>
<li class="bg-deep-orange-200 grey-800 list-group-item">
<span>200</span> /
<span>#ffab91</span>
</li>
<li class="bg-deep-orange-100 grey-800 list-group-item">
<span>100</span> /
<span>#ffccbc</span>
</li>
<li class="bg-deep-orange-50 grey-800 list-group-item">
<span>50</span> /
<span>#fbe9e7</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">brown</h5>
<ul class="list-group">
<li class="bg-brown-900 list-group-item">
<span>900</span> /
<span>#3e2723</span>
</li>
<li class="bg-brown-800 list-group-item">
<span>800</span> /
<span>#4e342e</span>
</li>
<li class="bg-brown-700 list-group-item">
<span>700</span> /
<span>#5d4037</span>
</li>
<li class="bg-brown-600 list-group-item">
<span>600</span> /
<span>#6d4c41</span>
</li>
<li class="bg-brown-500 list-group-item">
<span>500</span> /
<span>#795548</span>
</li>
<li class="bg-brown-400 grey-800 list-group-item">
<span>400</span> /
<span>#8d6e63</span>
</li>
<li class="bg-brown-300 grey-800 list-group-item">
<span>300</span> /
<span>#a1887f</span>
</li>
<li class="bg-brown-200 grey-800 list-group-item">
<span>200</span> /
<span>#bcaaa4</span>
</li>
<li class="bg-brown-100 grey-800 list-group-item">
<span>100</span> /
<span>#d7ccc8</span>
</li>
<li class="bg-brown-50 grey-800 list-group-item">
<span>50</span> /
<span>#efebe9</span>
</li>
</ul>
</div>
<div class="u-col-4">
<h5 class="text-uppercase">grey</h5>
<ul class="list-group">
<li class="bg-grey-900 list-group-item">
<span>900</span> /
<span>#212121</span>
</li>
<li class="bg-grey-800 list-group-item">
<span>800</span> /
<span>#424242</span>
</li>
<li class="bg-grey-700 list-group-item">
<span>700</span> /
<span>#616161</span>
</li>
<li class="bg-grey-600 list-group-item">
<span>600</span> /
<span>#757575</span>
</li>
<li class="bg-grey-500 list-group-item">
<span>500</span> /
<span>#9e9e9e</span>
</li>
<li class="bg-grey-400 grey-800 list-group-item">
<span>400</span> /
<span>#bdbdbd</span>
</li>
<li class="bg-grey-300 grey-800 list-group-item">
<span>300</span> /
<span>#e0e0e0</span>
</li>
<li class="bg-grey-200 grey-800 list-group-item">
<span>200</span> /
<span>#eeeeee</span>
</li>
<li class="bg-grey-100 grey-800 list-group-item">
<span>100</span> /
<span>#f5f5f5</span>
</li>
<li class="bg-grey-50 grey-800 list-group-item">
<span>50</span> /
<span>#fafafa</span>
</li>
</ul>
</div>
</div>
<div class="u-row   color-palette">
<div class="u-col-4">
<h5 class="text-uppercase">blue-grey</h5>
<ul class="list-group">
<li class="bg-blue-grey-900 list-group-item">
<span>900</span> /
<span>#263238</span>
</li>
<li class="bg-blue-grey-800 list-group-item">
<span>800</span> /
<span>#37474f</span>
</li>
<li class="bg-blue-grey-700 list-group-item">
<span>700</span> /
<span>#455a64</span>
</li>
<li class="bg-blue-grey-600 list-group-item">
<span>600</span> /
<span>#546e7a</span>
</li>
<li class="bg-blue-grey-500 list-group-item">
<span>500</span> /
<span>#607d8b</span>
</li>
<li class="bg-blue-grey-400 grey-800 list-group-item">
<span>400</span> /
<span>#78909c</span>
</li>
<li class="bg-blue-grey-300 grey-800 list-group-item">
<span>300</span> /
<span>#90a4ae</span>
</li>
<li class="bg-blue-grey-200 grey-800 list-group-item">
<span>200</span> /
<span>#b0bec5</span>
</li>
<li class="bg-blue-grey-100 grey-800 list-group-item">
<span>100</span> /
<span>#cfd8dc</span>
</li>
<li class="bg-blue-grey-50 grey-800 list-group-item">
<span>50</span> /
<span>#eceff1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endraw %}
