title: J1 Colors tagline: md color palette date: 2021-01-08 00:00:00 +100 description: >

The color palette used by J1 Template is based on
the definitions of Google's Material Design (MD).
The color scheme comprises primary and accent colors
that can be used for illustration or to develop individual
brand colors of a website, designed to work harmoniously
with each other.

categories: [ Previewer ] tags: [ MD, Colors ]

scrollbar: false flowtext: false

permalink: /pages/public/previewer/color_palette/ regenerate: false

resources: [] resource_options:

- attic:
    padding_top:                      400
    padding_bottom:                   50
    opacity:                          0.5
    slides:
      - url:                          /assets/images/modules/attics/markus-spiske4-1920x1280.jpg
        alt:                          Photo by Markus Spiske on Unsplash
        badge:
          type:                       unsplash
          author:                     Markus Spiske
          href:                       https://unsplash.com/@markusspiske

// Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid: // :scrollbars:

// Set (local) page attributes here // —————————————————————————– // :page–attr: <attr-value>

// Load Liquid procedures // —————————————————————————– {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes // —————————————————————————– {% include {{load_attributes}} scope=“global” %}

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Include sub-documents // —————————————————————————–

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

J1 Color Palette

The color palette used by J1 Template is based on the definitions of Google's *Material Design* (MD). The color scheme comprises primary and accent colors that can be used for illustration or to develop individual brand colors of a website; designed to work harmoniously with each other.

The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Desktop and Mobile web sites based on Android or iOS. Google suggests using the 500 colors as the primary colors for your web and the other colors as accents colors to support the content for better reading or orientation.

Red and Pink

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex"><a id="F44336" class="mdColorValue md-white" title="Red" href="#void">#f44336</a></span> </li>
      <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex"><a id="ffebee" class="mdColorValue" title="Red 50" href="#void">#ffebee</a></span> </li>
      <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex"><a id="ffcdd2" class="mdColorValue" title="Red 100" href="#void">#ffcdd2</a></span> </li>
      <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex"><a id="ef9a9a" class="mdColorValue" title="Red 200" href="#void">#ef9a9a</a></span> </li>
      <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex"><a id="e57373" class="mdColorValue md-white" title="Red 300" href="#void">#e57373</a></span> </li>
      <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex"><a id="ef5350" class="mdColorValue md-white" title="Red 400" href="#void">#ef5350</a></span> </li>
      <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex"><a id="f44336" class="mdColorValue md-white" title="Red 500" href="#void">#f44336</a></span> </li>
      <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex"><a id="e53935" class="mdColorValue md-white" title="Red 600" href="#void">#e53935</a></span> </li>
      <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex"><a id="d32f2f" class="mdColorValue md-white" title="Red 700" href="#void">#d32f2f</a></span> </li>
      <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex"><a id="c62828" class="mdColorValue md-white" title="Red 800" href="#void">#c62828</a></span> </li>
      <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex"><a id="b71c1c" class="mdColorValue md-white" title="Red 900" href="#void">#b71c1c</a></span> </li>
      <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex"><a id="ff8a80" class="mdColorValue" title="Red A100" href="#void">#ff8a80</a></span> </li>
      <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff5252" class="mdColorValue md-white" title="Red A200" href="#void">#ff5252</a></span> </li>
      <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff1744" class="mdColorValue md-white" title="Red A400" href="#void">#ff1744</a></span> </li>
      <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex"><a id="d50000" class="mdColorValue md-white" title="Red A700" href="#void">#d50000</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="e91e63" class="mdColorValue md-white" title="Pink" href="#void">#e91e63</a></span> </li>
      <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex"><a id="fce4ec" class="mdColorValue" title="Pink 50" href="#void">#fce4ec</a></span> </li>
      <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex"><a id="f8bbd0" class="mdColorValue" title="Pink 100" href="#void">#f8bbd0</a></span> </li>
      <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex"><a id="f48fb1" class="mdColorValue" title="Pink 200" href="#void">#f48fb1</a></span> </li>
      <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex"><a id="f06292" class="mdColorValue md-white" title="Pink 300" href="#void">#f06292</a></span> </li>
      <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex"><a id="ec407a" class="mdColorValue md-white" title="Pink 400" href="#void">#ec407a</a></span> </li>
      <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex"><a id="e91e63" class="mdColorValue md-white" title="Pink 500" href="#void">#e91e63</a></span> </li>
      <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex"><a id="d81b60" class="mdColorValue md-white" title="Pink 600" href="#void">#d81b60</a></span> </li>
      <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex"><a id="c2185b" class="mdColorValue md-white" title="Pink 700" href="#void">#c2185b</a></span> </li>
      <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex"><a id="ad1457" class="mdColorValue md-white" title="Pink 800" href="#void">#ad1457</a></span> </li>
      <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex"><a id="880e4f" class="mdColorValue md-white" title="Pink 900" href="#void">#880e4f</a></span> </li>
      <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex"><a id="ff80ab" class="mdColorValue" title="Pink A100" href="#void">#ff80ab</a></span> </li>
      <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff4081" class="mdColorValue md-white" title="Pink A200" href="#void">#ff4081</a></span> </li>
      <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex"><a id="f50057" class="mdColorValue md-white" title="Pink A400" href="#void">#f50057</a></span> </li>
      <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex"><a id="c51162" class="mdColorValue md-white" title="Pink A700" href="#void">#c51162</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Purple and Deep Purple

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex"><a id="9c27b0" class="mdColorValue md-white" title="Purple" href="#void">#9c27b0</a></span> </li>
      <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex"><a id="f3e5f5" class="mdColorValue" title="Purple 50" href="#void">#f3e5f5</a></span> </li>
      <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex"><a id="e1bee7" class="mdColorValue" title="Purple 100" href="#void">#e1bee7</a></span> </li>
      <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex"><a id="ce93d8" class="mdColorValue" title="Purple 200" href="#void">#ce93d8</a></span> </li>
      <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex"><a id="ba68c8" class="mdColorValue md-white" title="Purple 300" href="#void">#ba68c8</a></span> </li>
      <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex"><a id="ab47bc" class="mdColorValue md-white" title="Purple 400" href="#void">#ab47bc</a></span> </li>
      <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex"><a id="9c27b0" class="mdColorValue md-white" title="Purple 500" href="#void">#9c27b0</a></span> </li>
      <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex"><a id="8e24aa" class="mdColorValue md-white" title="Purple 600" href="#void">#8e24aa</a></span> </li>
      <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex"><a id="7b1fa2" class="mdColorValue md-white" title="Purple 700" href="#void">#7b1fa2</a></span> </li>
      <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex"><a id="6a1b9a" class="mdColorValue md-white" title="Purple 800" href="#void">#6a1b9a</a></span> </li>
      <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex"><a id="4a148c" class="mdColorValue md-white" title="Purple 900" href="#void">#4a148c</a></span> </li>
    <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex"><a id="ea80fc" class="mdColorValue" title="Purple A100" href="#void">#ea80fc</a></span> </li>
      <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex"><a id="e040fb" class="mdColorValue md-white" title="Purple A200" href="#void">#e040fb</a></span> </li>
      <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex"><a id="d500f9" class="mdColorValue md-white" title="Purple A400" href="#void">#d500f9</a></span> </li>
      <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex"><a id="aa00ff" class="mdColorValue md-white" title="Purple A700" href="#void">#aa00ff</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex"><a id="673ab7" class="mdColorValue md-white" title="Deep Purple" href="#void">#673ab7</a></span> </li>
      <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex"><a id="ede7f6" class="mdColorValue" title="Deep Purple 50" href="#void">#ede7f6</a></span> </li>
      <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex"><a id="d1c4e9" class="mdColorValue" title="Deep Purple 100" href="#void">#d1c4e9</a></span> </li>
      <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex"><a id="b39ddb" class="mdColorValue" title="Deep Purple 200" href="#void">#b39ddb</a></span> </li>
      <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex"><a id="9575cd" class="mdColorValue md-white" title="Deep Purple 300" href="#void">#9575cd</a></span> </li>
      <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex"><a id="7e57c2" class="mdColorValue md-white" title="Deep Purple 400" href="#void">#7e57c2</a></span> </li>
      <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex"><a id="673ab7" class="mdColorValue md-white" title="Deep Purple 500" href="#void">#673ab7</a></span> </li>
      <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex"><a id="5e35b1" class="mdColorValue md-white" title="Deep Purple 600" href="#void">#5e35b1</a></span> </li>
      <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex"><a id="512da8" class="mdColorValue md-white" title="Deep Purple 700" href="#void">#512da8</a></span> </li>
      <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex"><a id="4527a0" class="mdColorValue md-white" title="Deep Purple 800" href="#void">#4527a0</a></span> </li>
      <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex"><a id="311b92" class="mdColorValue md-white" title="Deep Purple 900" href="#void">#311b92</a></span> </li>
      <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex"><a id="b388ff" class="mdColorValue" title="Deep Purple A100" href="#void">#b388ff</a></span> </li>
      <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="7c4dff" class="mdColorValue md-white" title="Deep Purple A200" href="#void">#7c4dff</a></span> </li>
      <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="651fff" class="mdColorValue md-white" title="Deep Purple A400" href="#void">#651fff</a></span> </li>
      <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex"><a id="6200ea" class="mdColorValue md-white" title="Deep Purple A700" href="#void">#6200ea</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Indigo and Blue

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex"><a id="3f51b5" class="mdColorValue md-white" title="Indigo" href="#void">#3f51b5</a></span> </li>
      <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex"><a id="e8eaf6" class="mdColorValue" title="Indigo 50" href="#void">#e8eaf6</a></span> </li>
      <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex"><a id="c5cae9" class="mdColorValue" title="Indigo 100" href="#void">#c5cae9</a></span> </li>
      <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex"><a id="9fa8da" class="mdColorValue" title="Indigo 200" href="#void">#9fa8da</a></span> </li>
      <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex"><a id="7986cb" class="mdColorValue md-white" title="Indigo 300" href="#void">#7986cb</a></span> </li>
      <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex"><a id="5c6bc0" class="mdColorValue md-white" title="Indigo 400" href="#void">#5c6bc0</a></span> </li>
      <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex"><a id="3f51b5" class="mdColorValue md-white" title="Indigo 500" href="#void">#3f51b5</a></span> </li>
      <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex"><a id="3949ab" class="mdColorValue md-white" title="Indigo 600" href="#void">#3949ab</a></span> </li>
      <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex"><a id="303f9f" class="mdColorValue md-white" title="Indigo 700" href="#void">#303f9f</a></span> </li>
      <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex"><a id="283593" class="mdColorValue md-white" title="Indigo 800" href="#void">#283593</a></span> </li>
      <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex"><a id="1a237e" class="mdColorValue md-white" title="Indigo 900" href="#void">#1a237e</a></span> </li>
      <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex"><a id="8c9eff" class="mdColorValue" title="Indigo A100" href="#void">#8c9eff</a></span> </li>
      <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex"><a id="536dfe" class="mdColorValue md-white" title="Indigo A200" href="#void">#536dfe</a></span> </li>
      <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex"><a id="3d5afe" class="mdColorValue md-white" title="Indigo A400" href="#void">#3d5afe</a></span> </li>
      <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex"><a id="304ffe" class="mdColorValue md-white" title="Indigo A700" href="#void">#304ffe</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="2196f3" class="mdColorValue md-white" title="Blue" href="#void">#2196f3</a></span> </li>
      <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex"><a id="e3f2fd" class="mdColorValue" title="Blue 50" href="#void">#e3f2fd</a></span> </li>
      <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex"><a id="bbdefb" class="mdColorValue" title="Blue 100" href="#void">#bbdefb</a></span> </li>
      <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex"><a id="90caf9" class="mdColorValue" title="Blue 200" href="#void">#90caf9</a></span> </li>
      <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex"><a id="64b5f6" class="mdColorValue md-white" title="Blue 300" href="#void">#64b5f6</a></span> </li>
      <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex"><a id="42a5f5" class="mdColorValue md-white" title="Blue 400" href="#void">#42a5f5</a></span> </li>
      <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex"><a id="2196f3" class="mdColorValue md-white" title="Blue 500" href="#void">#2196f3</a></span> </li>
      <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex"><a id="1e88e5" class="mdColorValue md-white" title="Blue 600" href="#void">#1e88e5</a></span> </li>
      <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex"><a id="1976d2" class="mdColorValue md-white" title="Blue 700" href="#void">#1976d2</a></span> </li>
      <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex"><a id="1565c0" class="mdColorValue md-white" title="Blue 800" href="#void">#1565c0</a></span> </li>
      <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex"><a id="0d47a1" class="mdColorValue md-white" title="Blue 900" href="#void">#0d47a1</a></span> </li>
      <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex"><a id="82b1ff" class="mdColorValue" title="Blue A100" href="#void">#82b1ff</a></span> </li>
      <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="448aff" class="mdColorValue md-white" title="Blue A200" href="#void">#448aff</a></span> </li>
      <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="2979ff" class="mdColorValue md-white" title="Blue A400" href="#void">#2979ff</a></span> </li>
      <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex"><a id="2962ff" class="mdColorValue md-white" title="Blue A700" href="#void">#2962ff</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Light Blue and Cyan

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark"><a id="03a9f4" class="mdColorValue md-white" title="Light Blue" href="#void">#03a9f4</a></span> </li>
      <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex"><a id="e1f5fe" class="mdColorValue" title="Light Blue 50" href="#void">#e1f5fe</a></span> </li>
      <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex"><a id="b3e5fc" class="mdColorValue" title="Light Blue 100" href="#void">#b3e5fc</a></span> </li>
      <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex"><a id="81d4fa" class="mdColorValue" title="Light Blue 200" href="#void">#81d4fa</a></span> </li>
      <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex"><a id="4fc3f7" class="mdColorValue md-white" title="Light Blue 300" href="#void">#4fc3f7</a></span> </li>
      <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex"><a id="29b6f6" class="mdColorValue md-white" title="Light Blue 400" href="#void">#29b6f6</a></span> </li>
      <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex"><a id="val" class="mdColorValue md-white" title="Light Blue 500" href="#void">#03a9f4</a></span> </li>
      <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex"><a id="039be5" class="mdColorValue md-white" title="Light Blue 600" href="#void">#039be5</a></span> </li>
      <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex"><a id="0288d1" class="mdColorValue md-white" title="Light Blue 700" href="#void">#0288d1</a></span> </li>
      <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex"><a id="0277bd" class="mdColorValue md-white" title="Light Blue 800" href="#void">#0277bd</a></span> </li>
      <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex"><a id="01579b" class="mdColorValue md-white" title="Light Blue 900" href="#void">#01579b</a></span> </li>
      <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex"><a id="80d8ff" class="mdColorValue" title="Light Blue A100" href="#void">#80d8ff</a></span> </li>
      <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="40c4ff" class="mdColorValue md-white" title="Light Blue A200" href="#void">#40c4ff</a></span> </li>
      <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00b0ff" class="mdColorValue md-white" title="Light Blue A400" href="#void">#00b0ff</a></span> </li>
      <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex"><a id="0091ea" class="mdColorValue md-white" title="Light Blue A700" href="#void">#0091ea</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark"><a id="00bcd4" class="mdColorValue md-white" title="Cyan" href="#void">#00bcd4</a></span> </li>
      <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex"><a id="e0f7fa" class="mdColorValue" title="Cyan 50" href="#void">#e0f7fa</a></span> </li>
      <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex"><a id="b2ebf2" class="mdColorValue" title="Cyan 100" href="#void">#b2ebf2</a></span> </li>
      <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex"><a id="80deea" class="mdColorValue" title="Cyan 200" href="#void">#80deea</a></span> </li>
      <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex"><a id="4dd0e1" class="mdColorValue md-white" title="Cyan 300" href="#void">#4dd0e1</a></span> </li>
      <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex"><a id="26c6da" class="mdColorValue md-white" title="Cyan 400" href="#void">#26c6da</a></span> </li>
      <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex"><a id="00bcd4" class="mdColorValue md-white" title="Cyan 500" href="#void">#00bcd4</a></span> </li>
      <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex"><a id="00acc1" class="mdColorValue md-white" title="Cyan 600" href="#void">#00acc1</a></span> </li>
      <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex"><a id="0097a7" class="mdColorValue md-white" title="Cyan 700" href="#void">#0097a7</a></span> </li>
      <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex"><a id="00838f" class="mdColorValue md-white" title="Cyan 800" href="#void">#00838f</a></span> </li>
      <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex"><a id="006064" class="mdColorValue md-white" title="Cyan 900" href="#void">#006064</a></span> </li>
      <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex"><a id="84ffff" class="mdColorValue" title="Cyan A100" href="#void">#84ffff</a></span> </li>
      <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="18ffff" class="mdColorValue md-white" title="Cyan A200" href="#void">#18ffff</a></span> </li>
      <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00e5ff" class="mdColorValue md-white" title="Cyan A400" href="#void">#00e5ff</a></span> </li>
      <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex"><a id="00b8d4" class="mdColorValue md-white" title="Cyan A700" href="#void">#00b8d4</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Teal and Green

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="009688" class="mdColorValue md-white" title="Teal" href="#void">#009688</a></span> </li>
      <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex"><a id="e0f2f1" class="mdColorValue" title="Teal 50" href="#void">#e0f2f1</a></span> </li>
      <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex"><a id="b2dfdb" class="mdColorValue" title="Teal 100" href="#void">#b2dfdb</a></span> </li>
      <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex"><a id="80cbc4" class="mdColorValue" title="Teal 200" href="#void">#80cbc4</a></span> </li>
      <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex"><a id="4db6ac" class="mdColorValue md-white" title="Teal 300" href="#void">#4db6ac</a></span> </li>
      <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex"><a id="26a69a" class="mdColorValue md-white" title="Teal 400" href="#void">#26a69a</a></span> </li>
      <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex"><a id="009688" class="mdColorValue md-white" title="Teal 500" href="#void">#009688</a></span> </li>
      <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex"><a id="00897b" class="mdColorValue md-white" title="Teal 600" href="#void">#00897b</a></span> </li>
      <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex"><a id="00796b" class="mdColorValue md-white" title="Teal 700" href="#void">#00796b</a></span> </li>
      <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex"><a id="00695c" class="mdColorValue md-white" title="Teal 800" href="#void">#00695c</a></span> </li>
      <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex"><a id="004d40" class="mdColorValue md-white" title="Teal 900" href="#void">#004d40</a></span> </li>
      <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex"><a id="a7ffeb" class="mdColorValue" title="Teal A100" href="#void">#a7ffeb</a></span> </li>
    <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex"><a id="64ffda" class="mdColorValue md-white" title="Teal A200" href="#void">#64ffda</a></span> </li>
      <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex"><a id="1de9b6" class="mdColorValue md-white" title="Teal A400" href="#void">#1de9b6</a></span> </li>
      <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex"><a id="00bfa5" class="mdColorValue md-white" title="Teal A700" href="#void">#00bfa5</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark"><a id="4caf50" class="mdColorValue md-white" title="Green" href="#void">#4caf50</a></span> </li>
      <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex"><a id="e8f5e9" class="mdColorValue" title="Green 50" href="#void">#e8f5e9</a></span> </li>
      <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex"><a id="c8e6c9" class="mdColorValue" title="Green 100" href="#void">#c8e6c9</a></span> </li>
      <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex"><a id="a5d6a7" class="mdColorValue" title="Green 200" href="#void">#a5d6a7</a></span> </li>
      <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex"><a id="81c784" class="mdColorValue md-white" title="Green 300" href="#void">#81c784</a></span> </li>
      <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex"><a id="66bb6a" class="mdColorValue md-white" title="Green 400" href="#void">#66bb6a</a></span> </li>
      <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex"><a id="4caf50" class="mdColorValue md-white" title="Green 500" href="#void">#4caf50</a></span> </li>
      <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex"><a id="43a047" class="mdColorValue md-white" title="Green 600" href="#void">#43a047</a></span> </li>
      <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex"><a id="388e3c" class="mdColorValue md-white" title="Green 700" href="#void">#388e3c</a></span> </li>
      <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex"><a id="2e7d32" class="mdColorValue md-white" title="Green 800" href="#void">#2e7d32</a></span> </li>
      <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex"><a id="1b5e20" class="mdColorValue md-white" title="Green 900" href="#void">#1b5e20</a></span> </li>
      <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex"><a id="b9f6ca" class="mdColorValue" title="Green A100" href="#void">#b9f6ca</a></span> </li>
      <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex"><a id="69f0ae" class="mdColorValue md-white" title="Green A200" href="#void">#69f0ae</a></span> </li>
      <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00e676" class="mdColorValue md-white" title="Green A400" href="#void">#00e676</a></span> </li>
      <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex"><a id="00c853" class="mdColorValue md-white" title="Green A700" href="#void">#00c853</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Light Green and Lime

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark"><a id="8bc34a" class="mdColorValue md-white" title="Light Green" href="#void">#8bc34a</a></span> </li>
      <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex"><a id="f1f8e9" class="mdColorValue" title="Light Green 50" href="#void">#f1f8e9</a></span> </li>
      <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex"><a id="dcedc8" class="mdColorValue" title="Light Green 100" href="#void">#dcedc8</a></span> </li>
      <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex"><a id="c5e1a5" class="mdColorValue" title="Light Green 200" href="#void">#c5e1a5</a></span> </li>
      <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex"><a id="aed581" class="mdColorValue md-white" title="Light Green 300" href="#void">#aed581</a></span> </li>
      <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex"><a id="9ccc65" class="mdColorValue md-white" title="Light Green 400" href="#void">#9ccc65</a></span> </li>
      <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex"><a id="8bc34a" class="mdColorValue md-white" title="Light Green 500" href="#void">#8bc34a</a></span> </li>
      <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex"><a id="7cb342" class="mdColorValue md-white" title="Light Green 600" href="#void">#7cb342</a></span> </li>
      <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex"><a id="689f38" class="mdColorValue md-white" title="Light Green 700" href="#void">#689f38</a></span> </li>
      <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex"><a id="558b2f" class="mdColorValue md-white" title="Light Green 800" href="#void">#558b2f</a></span> </li>
      <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex"><a id="33691e" class="mdColorValue md-white" title="Light Green 900" href="#void">#33691e</a></span> </li>
      <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex"><a id="ccff90" class="mdColorValue" title="Light Green A100" href="#void">#ccff90</a></span> </li>
      <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex"><a id="b2ff59" class="mdColorValue" title="Light Green A200" href="#void">#b2ff59</a></span> </li>
      <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex"><a id="76ff03" class="mdColorValue" title="Light Green A400" href="#void">#76ff03</a></span> </li>
      <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex"><a id="64dd17" class="mdColorValue" title="Light Green A700" href="#void">#64dd17</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark"><a id="cddc39" class="mdColorValue md-white" title="Lime" href="#void">#cddc39</a></span> </li>
      <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex"><a id="f9fbe7" class="mdColorValue" title="Lime 50" href="#void">#f9fbe7</a></span> </li>
      <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex"><a id="f0f4c3" class="mdColorValue" title="Lime 100" href="#void">#f0f4c3</a></span> </li>
      <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex"><a id="e6ee9c" class="mdColorValue" title="Lime 200" href="#void">#e6ee9c</a></span> </li>
      <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex"><a id="dce775" class="mdColorValue md-white" title="Lime 300" href="#void">#dce775</a></span> </li>
      <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex"><a id="d4e157" class="mdColorValue md-white" title="Lime 400" href="#void">#d4e157</a></span> </li>
      <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex"><a id="cddc39" class="mdColorValue md-white" title="Lime 500" href="#void">#cddc39</a></span> </li>
      <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex"><a id="c0ca33" class="mdColorValue md-white" title="Lime 600" href="#void">#c0ca33</a></span> </li>
      <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex"><a id="afb42b" class="mdColorValue md-white" title="Lime 700" href="#void">#afb42b</a></span> </li>
      <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex"><a id="9e9d24" class="mdColorValue md-white" title="Lime 800" href="#void">#9e9d24</a></span> </li>
      <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex"><a id="827717" class="mdColorValue md-white" title="Lime 900" href="#void">#827717</a></span> </li>
      <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex"><a id="f4ff81" class="mdColorValue" title="Lime A100" href="#void">#f4ff81</a></span> </li>
      <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex"><a id="eeff41" class="mdColorValue" title="Lime A200" href="#void">#eeff41</a></span> </li>
      <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="c6ff00" class="mdColorValue" title="Lime A400" href="#void">#c6ff00</a></span> </li>
      <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex"><a id="aeea00" class="mdColorValue" title="Lime A700" href="#void">#aeea00</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Yellow and Amber

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark"><a id="ffeb3b" class="mdColorValue" title="Yellow" href="#void">#ffeb3b</a></span> </li>
      <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex"><a id="fffde7" class="mdColorValue" title="Yellow 50" href="#fffde7">#fffde7</a></span> </li>
      <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex"><a id="fff9c4" class="mdColorValue" title="Yellow 100" href="#void">#fff9c4</a></span> </li>
      <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex"><a id="fff59d" class="mdColorValue" title="Yellow 200" href="#void">#fff59d</a></span> </li>
      <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex"><a id="fff176" class="mdColorValue" title="Yellow 300" href="#void">#fff176</a></span> </li>
      <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex"><a id="ffee58" class="mdColorValue" title="Yellow 400" href="#void">#ffee58</a></span> </li>
      <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex"><a id="ffeb3b" class="mdColorValue" title="Yellow 500" href="#void">#ffeb3b</a></span> </li>
      <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex"><a id="fdd835" class="mdColorValue" title="Yellow 600" href="#void">#fdd835</a></span> </li>
      <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex"><a id="fbc02d" class="mdColorValue" title="Yellow 700" href="#void">#fbc02d</a></span> </li>
      <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex"><a id="f9a825" class="mdColorValue" title="Yellow 800" href="#void">#f9a825</a></span> </li>
      <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex"><a id="f57f17" class="mdColorValue" title="Yellow 900" href="#void">#f57f17</a></span> </li>
      <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex"><a id="ffff8d" class="mdColorValue" title="Yellow A100" href="#void">#ffff8d</a></span> </li>
      <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffff00" class="mdColorValue" title="Yellow A200" href="#void">#ffff00</a></span> </li>
      <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ffea00" class="mdColorValue" title="Yellow A400" href="#void">#ffea00</a></span> </li>
      <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex"><a id="ffd600" class="mdColorValue" title="Yellow A700" href="#void">#ffd600</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark"><a id="ffc107" class="mdColorValue" title="Amber" href="#void">#ffc107</a></span> </li>
      <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex"><a id="fff8e1" class="mdColorValue" title="Amber 50" href="#void">#fff8e1</a></span> </li>
      <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex"><a id="ffecb3" class="mdColorValue" title="Amber 100" href="#void">#ffecb3</a></span> </li>
      <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex"><a id="ffe082" class="mdColorValue" title="Amber 200" href="#void">#ffe082</a></span> </li>
      <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex"><a id="ffd54f" class="mdColorValue" title="Amber 300" href="#void">#ffd54f</a></span> </li>
      <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex"><a id="ffca28" class="mdColorValue" title="Amber 400" href="#void">#ffca28</a></span> </li>
      <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex"><a id="ffc107" class="mdColorValue" title="Amber 500" href="#void">#ffc107</a></span> </li>
      <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex"><a id="ffb300" class="mdColorValue" title="Amber 600" href="#void">#ffb300</a></span> </li>
      <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex"><a id="ffa000" class="mdColorValue" title="Amber 700" href="#void">#ffa000</a></span> </li>
      <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex"><a id="ff8f00" class="mdColorValue" title="Amber 800" href="#void">#ff8f00</a></span> </li>
      <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex"><a id="ff6f00" class="mdColorValue" title="Amber 900" href="#void">#ff6f00</a></span> </li>
      <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex"><a id="ffe57f" class="mdColorValue" title="Amber A100" href="#void">#ffe57f</a></span> </li>
      <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffd740" class="mdColorValue" title="Amber A200" href="#void">#ffd740</a></span> </li>
      <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ffc400" class="mdColorValue" title="Amber A400" href="#void">#ffc400</a></span> </li>
      <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex"><a id="ffab00" class="mdColorValue" title="Amber A700" href="#void">#ffab00</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Orange and Deep Orange

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small"><a id="ff9800" class="mdColorValue md-white" title="Orange" href="#void">#ff9800</a></span> </li>
      <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex"><a id="fff3e0" class="mdColorValue" title="Orange 50" href="#void">#fff3e0</a></span> </li>
      <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex"><a id="ffe0b2" class="mdColorValue" title="Orange 100" href="#void">#ffe0b2</a></span> </li>
      <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex"><a id="ffcc80" class="mdColorValue" title="Orange 200" href="#void">#ffcc80</a></span> </li>
      <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex"><a id="ffb74d" class="mdColorValue md-white" title="Orange 300" href="#void">#ffb74d</a></span> </li>
      <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex"><a id="ffa726" class="mdColorValue md-white" title="Orange 400" href="#void">#ffa726</a></span> </li>
      <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex"><a id="ff9800" class="mdColorValue md-white" title="Orange 500" href="#void">#ff9800</a></span> </li>
      <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex"><a id="fb8c00" class="mdColorValue md-white" title="Orange 600" href="#void">#fb8c00</a></span> </li>
      <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex"><a id="f57c00" class="mdColorValue md-white" title="Orange 700" href="#void">#f57c00</a></span> </li>
      <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex"><a id="ef6c00" class="mdColorValue md-white" title="Orange 800" href="#void">#ef6c00</a></span> </li>
      <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex"><a id="e65100" class="mdColorValue md-white" title="Orange 900" href="#void">#e65100</a></span> </li>
      <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex"><a id="ffd180" class="mdColorValue" title="Orange A100" href="#void">#ffd180</a></span> </li>
      <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffab40" class="mdColorValue md-white" title="Orange A200" href="#void">#ffab40</a></span> </li>
      <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff9100" class="mdColorValue md-white" title="Orange A400" href="#void">#ff9100</a></span> </li>
      <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex"><a id="ff6d00" class="mdColorValue md-white" title="Orange A700" href="#void">#ff6d00</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="ff5722" class="mdColorValue md-white" title="Deep Orange" href="#void">#ff5722</a></span> </li>
      <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex"><a id="fbe9e7" class="mdColorValue" title="Deep Orange 50" href="#void">#fbe9e7</a></span> </li>
      <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex"><a id="ffccbc" class="mdColorValue" title="Deep Orange 100" href="#void">#ffccbc</a></span> </li>
      <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex"><a id="ffab91" class="mdColorValue" title="Deep Orange 200" href="#void">#ffab91</a></span> </li>
      <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex"><a id="ff8a65" class="mdColorValue md-white" title="Deep Orange 300" href="#void">#ff8a65</a></span> </li>
      <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex"><a id="ff7043" class="mdColorValue md-white" title="Deep Orange 400" href="#void">#ff7043</a></span> </li>
      <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex"><a id="ff5722" class="mdColorValue md-white" title="Deep Orange 500" href="#void">#ff5722</a></span> </li>
      <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex"><a id="f4511e" class="mdColorValue md-white" title="Deep Orange 600" href="#void">#f4511e</a></span> </li>
      <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex"><a id="e64a19" class="mdColorValue md-white" title="Deep Orange 700" href="#void">#e64a19</a></span> </li>
      <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex"><a id="d84315" class="mdColorValue md-white" title="Deep Orange 800" href="#void">#d84315</a></span> </li>
      <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex"><a id="bf360c" class="mdColorValue md-white" title="Deep Orange 900" href="#void">#bf360c</a></span> </li>
      <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex"><a id="ff9e80" class="mdColorValue" title="Deep Orange A100" href="#void">#ff9e80</a></span> </li>
      <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff6e40" class="mdColorValue md-white" title="Deep Orange A200" href="#void">#ff6e40</a></span> </li>
      <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff3d00" class="mdColorValue md-white" title="Deep Orange A400" href="#void">#ff3d00</a></span> </li>
      <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex"><a id="dd2c00" class="mdColorValue md-white" title="Deep Orange A700" href="#void">#dd2c00</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Brown and Grey

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex"><a id="795548" class="mdColorValue md-white" title="Brown" href="#void">#795548</a></span> </li>
      <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex"><a id="efebe9" class="mdColorValue" title="Brown" href="#void">#efebe9</a></span> </li>
      <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex"><a id="d7ccc8" class="mdColorValue" title="Brown" href="#void">#d7ccc8</a></span> </li>
      <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex"><a id="bcaaa4" class="mdColorValue" title="Brown" href="#void">#bcaaa4</a></span> </li>
      <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex"><a id="a1887f" class="mdColorValue md-white" title="Brown" href="#void">#a1887f</a></span> </li>
      <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex"><a id="8d6e63" class="mdColorValue md-white" title="Brown" href="#void">#8d6e63</a></span> </li>
      <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex"><a id="795548" class="mdColorValue md-white" title="Brown" href="#void">#795548</a></span> </li>
      <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex"><a id="6d4c41" class="mdColorValue md-white" title="Brown" href="#void">#6d4c41</a></span> </li>
      <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex"><a id="5d4037" class="mdColorValue md-white" title="Brown" href="#void">#5d4037</a></span> </li>
      <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex"><a id="4e342e" class="mdColorValue md-white" title="Brown" href="#void">#4e342e</a></span> </li>
      <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex"><a id="3e2723" class="mdColorValue md-white" title="Brown" href="#void">#3e2723</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small"><a id="9e9e9e" class="mdColorValue md-white" title="Grey" href="#void">#9e9e9e</a></span> </li>
      <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex"><a id="fafafa" class="mdColorValue" title="Grey" href="#void">#fafafa</a></span> </li>
      <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex"><a id="f5f5f5" class="mdColorValue" title="Grey" href="#void">#f5f5f5</a></span> </li>
      <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex"><a id="eeeeee" class="mdColorValue" title="Grey" href="#void">#eeeeee</a></span> </li>
      <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex"><a id="e0e0e0" class="mdColorValue" title="Grey" href="#void">#e0e0e0</a></span> </li>
      <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex"><a id="bdbdbd" class="mdColorValue" title="Grey" href="#void">#bdbdbd</a></span> </li>
      <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex"><a id="9e9e9e" class="mdColorValue md-white" title="Grey" href="#void">#9e9e9e</a></span> </li>
      <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex"><a id="757575" class="mdColorValue md-white" title="Grey" href="#void">#757575</a></span> </li>
      <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex"><a id="616161" class="mdColorValue md-white" title="Grey" href="#void">#616161</a></span> </li>
      <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex"><a id="424242" class="mdColorValue md-white" title="Grey" href="#void">#424242</a></span> </li>
    <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex"><a id="212121" class="mdColorValue md-white" title="Grey" href="#void">#212121</a></span> </li>
    </ul>
  </div>
</div>

</div> ++++

Blue Grey and BW

++++ <div class=“row col-list”>

<div class="color-palette col-lg-12">
  <div class="color-group col-lg-6">
    <ul>
      <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="607d8b" class="mdColorValue md-white" title="Blue Grey" href="#void">#607d8b</a></span> </li>
      <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex"><a id="eceff1" class="mdColorValue" title="Blue Grey" href="#void">#eceff1</a></span> </li>
      <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex"><a id="cfd8dc" class="mdColorValue" title="Blue Grey" href="#void">#cfd8dc</a></span> </li>
      <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex"><a id="b0bec5" class="mdColorValue" title="Blue Grey" href="#void">#b0bec5</a></span> </li>
      <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex"><a id="90a4ae" class="mdColorValue" title="Blue Grey" href="#void">#90a4ae</a></span> </li>
      <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex"><a id="78909c" class="mdColorValue md-white" title="Blue Grey" href="#void">#78909c</a></span> </li>
      <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex"><a id="607d8b" class="mdColorValue md-white" title="Blue Grey" href="#void">#607d8b</a></span> </li>
      <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex"><a id="546e7a" class="mdColorValue md-white" title="Blue Grey" href="#void">#546e7a</a></span> </li>
      <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex"><a id="455a64" class="mdColorValue md-white" title="Blue Grey" href="#void">#455a64</a></span> </li>
      <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex"><a id="37474f" class="mdColorValue md-white" title="Blue Grey" href="#void">#37474f</a></span> </li>
      <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex"><a id="263238" class="mdColorValue md-white" title="Blue Grey" href="#void">#263238</a></span> </li>
    </ul>
  </div>
  <div class="color-group col-lg-6">
    <ul>
      <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex"><a id="000000" class="mdColorValue md-white" title="Black" href="#void">#000000</a></span> </li>
      <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex"><a id="ffffff" class="mdColorValue" title="Black" href="#void">#ffffff</a></span> </li>
    </ul>
  </div>
</div>

</div>

<script>

$(document).on('click', '.mdColorValue', function () {
  copyText(this.id)
});

function copyText(id) {
  var copyText = id.toUpperCase();
  var copyFrom = document.createElement('textarea');

// var language = 'de';

  var language = '{{site.language}}';

  if (language == 'en') {
    responseText = 'Copied to Clipboard';
  } else if (language == 'de') {
    responseText = 'Kopiert zur Zwischenablage';
  } else {
    responseText = 'Copied to Clipboard';
  }

  copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
  copyFrom.value = copyText;
  document.body.appendChild(copyFrom);
  copyFrom.select();
  document.execCommand('copy');
  var copied = document.createElement('div');
  copied.setAttribute('class', 'copied');
  copied.appendChild(document.createTextNode(responseText));
  document.body.appendChild(copied);

  setTimeout(function () {
    document.body.removeChild(copyFrom);
    document.body.removeChild(copied);
  }, 1500);

} // END copyText

</script>

<style> .mdColorValue:hover {

color: rgba(0, 0, 0, 0.9) !important;
font-weight: 600 !important;
text-decoration: none !important;

}

div.copied {

position: fixed;
top: 100px;
left: 50%;
width: 300px;
text-align: center;
color: #FAFAFA;
background-color: #2196F3;
border: 1px solid #0D47A1;
padding: 10px 15px;
border-radius: 4px;
margin-left: -100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

} </style>

++++