RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / public / src / template-builder / contents /
Filename : css-color.html
back
<div class="section">
  <div class="card">
    <div class="card-content">
      <p class="caption">Here is a color palette based on the material design base colors. Each of these colors is
        defined with a base color class and an optional lighten or darken class.</p>
    </div>
  </div>
  <!--Color Usage-->
  <div class="row">
    <div class="col s12 m12 l12">
      <div id="background-color" class="card card card-default">
        <div class="card-content">
          <div class="row">
            <div class="col s12">
              <h4 class="card-title">Background Color</h4>
              <p>To apply a background color, just add the color name and light/darkness as a class to the element.</p>
            </div>
            <div class="col s12">
              <div class="card-panel light-blue lighten-2 white-text">This is a card panel with a light-blue lighten-2
                class</div>
            </div>
          </div>
          <div class="row">
            <div class="col s12">
              <h4 class="header">Text Color</h4>
              <p>To apply a text color, just append <code class="languague-markup">-text</code> to the color class like
                this:</p>
            </div>
            <div class="col s12">
              <div class="card-panel">
                <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Dynamic Gradient Color-->
  <div class="row">
    <div class="col s12 m12 l12">
      <div id="gradient-color-palette" class="card card card-default">
        <div class="card-content">
          <div class="row">
            <div class="col s12 m12 l12">
              <h4 class="card-title">Gradient Color Palette</h4>
            </div>
            <div class="col s12 m6 l4">
              <div class="gradient-45deg-amber-amber padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-amber-amber</div>
              <br>
              <div class="gradient-45deg-blue-indigo padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-blue-indigo</div>
              <br>
              <div class="gradient-45deg-indigo-light-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-indigo-light-blue</div>
              <br>
              <div class="gradient-45deg-red-pink padding-5 medium-small" style="color: rgba(255, 255, 255, 0.901961);">
                gradient-45deg-red-pink</div>
              <br>
              <div class="gradient-45deg-light-blue-teal padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-light-blue-teal</div>
              <br>
              <div class="gradient-45deg-light-blue-indigo padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-light-blue-indigo
              </div>
              <br>
              <div class="gradient-45deg-yellow-green padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-yellow-green</div>
              <br>
              <div class="gradient-45deg-orange-deep-orange padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-orange-deep-orange
              </div>
              <br>
              <div class="gradient-45deg-deep-purple-purple padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-deep-purple-purple
              </div>
              <br>
              <div class="gradient-45deg-light-green-amber padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-light-green-amber
              </div>
              <br>
              <div class="gradient-45deg-purple-pink padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-purple-pink</div>
            </div>
            <div class="col s12 m6 l4">
              <div class="gradient-45deg-indigo-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-indigo-blue</div>
              <br>
              <div class="gradient-45deg-brown-brown padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-brown-brown</div>
              <br>
              <div class="gradient-45deg-blue-grey-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-blue-grey-blue</div>
              <br>
              <div class="gradient-45deg-purple-deep-orange padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-purple-deep-orange</div>
              <br>
              <div class="gradient-45deg-green-teal padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-green-teal</div>
              <br>
              <div class="gradient-45deg-indigo-light-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-indigo-light-blue</div>
              <br>
              <div class="gradient-45deg-teal-cyan padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-teal-cyan</div>
              <br>
              <div class="gradient-45deg-blue-grey-blue-grey padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-blue-grey-blue-grey
              </div>
              <br>
              <div class="gradient-45deg-cyan-light-green padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-cyan-light-green</div>
              <br>
              <div class="gradient-45deg-orange-amber padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-orange-amber</div>
            </div>
            <div class="col s12 m6 l4">
              <div class="gradient-45deg-indigo-purple padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-indigo-purple</div>
              <br>
              <div class="gradient-45deg-deep-purple-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-deep-purple-blue</div>
              <br>
              <div class="gradient-45deg-deep-orange-orange padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-deep-orange-orange</div>
              <br>
              <div class="gradient-45deg-light-blue-cyan padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-light-blue-cyan</div>
              <br>
              <div class="gradient-45deg-purple-amber padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-purple-amber</div>
              <br>
              <div class="gradient-45deg-purple-deep-purple padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-purple-deep-purple</div>
              <br>
              <div class="gradient-45deg-purple-light-blue padding-5 medium-small"
                style="color: rgba(255, 255, 255, 0.901961);">gradient-45deg-purple-light-blue</div>
              <br>
              <div class="gradient-45deg-cyan-cyan padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-cyan-cyan</div>
              <br>
              <div class="gradient-45deg-yellow-teal padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-yellow-teal</div>
              <br>
              <div class="gradient-45deg-cyan-light-green padding-5 medium-small" style="color: rgba(0, 0,0,1);">
                gradient-45deg-cyan-light-green</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Dynamic Color-->
  <div class="row">
    <div class="col s12 m12 l12">
      <div id="color-palette" class="card card card-default">
        <div class="card-content">
          <div class="row">
            <div class="dynamic-color">
              <div class="col s12 m12 l12 m-0">
                <h4 class="card-title">Color Palette</h4>
              </div>
              <div class="col s12 m6 l4">
                <div class="red lighten-5" style="color: rgba(0, 0,0,1);">#ffebee red lighten-5</div>
                <div class="red lighten-4" style="color: rgba(0, 0,0,1);">#ffcdd2 red lighten-4</div>
                <div class="red lighten-3" style="color: rgba(0, 0,0,1);">#ef9a9a red lighten-3</div>
                <div class="red lighten-2" style="color: rgba(0, 0,0,1);">#e57373 red lighten-2</div>
                <div class="red lighten-1" style="color: rgba(0, 0,0,1);">#ef5350 red lighten-1</div>
                <div class="red" style="color: rgba(0, 0,0,1);">#f44336 red</div>
                <div class="red darken-1" style="color: rgba(255, 255, 255, 0.901961);">#e53935 red darken-1</div>
                <div class="red darken-2" style="color: rgba(255, 255, 255, 0.901961);">#d32f2f red darken-2</div>
                <div class="red darken-3" style="color: rgba(255, 255, 255, 0.901961);">#c62828 red darken-3</div>
                <div class="red darken-4" style="color: rgba(255, 255, 255, 0.901961);">#b71c1c red darken-4</div>
                <div class="red accent-1" style="color: rgba(0, 0,0,1);">#ff8a80 red accent-1</div>
                <div class="red accent-2" style="color: rgba(0, 0,0,1);">#ff5252 red accent-2</div>
                <div class="red accent-3" style="color: rgba(0, 0,0,1);">#ff1744 red accent-3</div>
                <div class="red accent-4" style="color: rgba(0, 0,0,1);">#d50000 red accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="pink lighten-5" style="color: rgba(0, 0,0,1);">#fce4ec pink lighten-5</div>
                <div class="pink lighten-4" style="color: rgba(0, 0,0,1);">#f8bbd0 pink lighten-4</div>
                <div class="pink lighten-3" style="color: rgba(0, 0,0,1);">#f48fb1 pink lighten-3</div>
                <div class="pink lighten-2" style="color: rgba(0, 0,0,1);">#f06292 pink lighten-2</div>
                <div class="pink lighten-1" style="color: rgba(0, 0,0,1);">#ec407a pink lighten-1</div>
                <div class="pink" style="color: rgba(0, 0,0,1);">#e91e63 pink</div>
                <div class="pink darken-1" style="color: rgba(255, 255, 255, 0.901961);">#d81b60 pink darken-1</div>
                <div class="pink darken-2" style="color: rgba(255, 255, 255, 0.901961);">#c2185b pink darken-2</div>
                <div class="pink darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ad1457 pink darken-3</div>
                <div class="pink darken-4" style="color: rgba(255, 255, 255, 0.901961);">#880e4f pink darken-4</div>
                <div class="pink accent-1" style="color: rgba(0, 0,0,1);">#ff80ab pink accent-1</div>
                <div class="pink accent-2" style="color: rgba(0, 0,0,1);">#ff4081 pink accent-2</div>
                <div class="pink accent-3" style="color: rgba(0, 0,0,1);">#f50057 pink accent-3</div>
                <div class="pink accent-4" style="color: rgba(0, 0,0,1);">#c51162 pink accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="purple lighten-5" style="color: rgba(0, 0,0,1);">#f3e5f5 purple lighten-5</div>
                <div class="purple lighten-4" style="color: rgba(0, 0,0,1);">#e1bee7 purple lighten-4</div>
                <div class="purple lighten-3" style="color: rgba(0, 0,0,1);">#ce93d8 purple lighten-3</div>
                <div class="purple lighten-2" style="color: rgba(0, 0,0,1);">#ba68c8 purple lighten-2</div>
                <div class="purple lighten-1" style="color: rgba(0, 0,0,1);">#ab47bc purple lighten-1</div>
                <div class="purple" style="color: rgba(0, 0,0,1);">#9c27b0 purple</div>
                <div class="purple darken-1" style="color: rgba(255, 255, 255, 0.901961);">#8e24aa purple darken-1</div>
                <div class="purple darken-2" style="color: rgba(255, 255, 255, 0.901961);">#7b1fa2 purple darken-2</div>
                <div class="purple darken-3" style="color: rgba(255, 255, 255, 0.901961);">#6a1b9a purple darken-3</div>
                <div class="purple darken-4" style="color: rgba(255, 255, 255, 0.901961);">#4a148c purple darken-4</div>
                <div class="purple accent-1" style="color: rgba(0, 0,0,1);">#ea80fc purple accent-1</div>
                <div class="purple accent-2" style="color: rgba(0, 0,0,1);">#e040fb purple accent-2</div>
                <div class="purple accent-3" style="color: rgba(0, 0,0,1);">#d500f9 purple accent-3</div>
                <div class="purple accent-4" style="color: rgba(0, 0,0,1);">#aa00ff purple accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="deep-purple lighten-5" style="color: rgba(0, 0,0,1);">#ede7f6 deep-purple lighten-5</div>
                <div class="deep-purple lighten-4" style="color: rgba(0, 0,0,1);">#d1c4e9 deep-purple lighten-4</div>
                <div class="deep-purple lighten-3" style="color: rgba(0, 0,0,1);">#b39ddb deep-purple lighten-3</div>
                <div class="deep-purple lighten-2" style="color: rgba(0, 0,0,1);">#9575cd deep-purple lighten-2</div>
                <div class="deep-purple lighten-1" style="color: rgba(0, 0,0,1);">#7e57c2 deep-purple lighten-1</div>
                <div class="deep-purple" style="color: rgba(0, 0,0,1);">#673ab7 deep-purple</div>
                <div class="deep-purple darken-1" style="color: rgba(255, 255, 255, 0.901961);">#5e35b1 deep-purple
                  darken-1</div>
                <div class="deep-purple darken-2" style="color: rgba(255, 255, 255, 0.901961);">#512da8 deep-purple
                  darken-2</div>
                <div class="deep-purple darken-3" style="color: rgba(255, 255, 255, 0.901961);">#4527a0 deep-purple
                  darken-3</div>
                <div class="deep-purple darken-4" style="color: rgba(255, 255, 255, 0.901961);">#311b92 deep-purple
                  darken-4</div>
                <div class="deep-purple accent-1" style="color: rgba(0, 0,0,1);">#b388ff deep-purple accent-1</div>
                <div class="deep-purple accent-2" style="color: rgba(0, 0,0,1);">#7c4dff deep-purple accent-2</div>
                <div class="deep-purple accent-3" style="color: rgba(0, 0,0,1);">#651fff deep-purple accent-3</div>
                <div class="deep-purple accent-4" style="color: rgba(0, 0,0,1);">#6200ea deep-purple accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="indigo lighten-5" style="color: rgba(0, 0,0,1);">#e8eaf6 indigo lighten-5</div>
                <div class="indigo lighten-4" style="color: rgba(0, 0,0,1);">#c5cae9 indigo lighten-4</div>
                <div class="indigo lighten-3" style="color: rgba(0, 0,0,1);">#9fa8da indigo lighten-3</div>
                <div class="indigo lighten-2" style="color: rgba(0, 0,0,1);">#7986cb indigo lighten-2</div>
                <div class="indigo lighten-1" style="color: rgba(0, 0,0,1);">#5c6bc0 indigo lighten-1</div>
                <div class="indigo" style="color: rgba(0, 0,0,1);">#3f51b5 indigo</div>
                <div class="indigo darken-1" style="color: rgba(255, 255, 255, 0.901961);">#3949ab indigo darken-1</div>
                <div class="indigo darken-2" style="color: rgba(255, 255, 255, 0.901961);">#303f9f indigo darken-2</div>
                <div class="indigo darken-3" style="color: rgba(255, 255, 255, 0.901961);">#283593 indigo darken-3</div>
                <div class="indigo darken-4" style="color: rgba(255, 255, 255, 0.901961);">#1a237e indigo darken-4</div>
                <div class="indigo accent-1" style="color: rgba(0, 0,0,1);">#8c9eff indigo accent-1</div>
                <div class="indigo accent-2" style="color: rgba(0, 0,0,1);">#536dfe indigo accent-2</div>
                <div class="indigo accent-3" style="color: rgba(0, 0,0,1);">#3d5afe indigo accent-3</div>
                <div class="indigo accent-4" style="color: rgba(0, 0,0,1);">#304ffe indigo accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="blue lighten-5" style="color: rgba(0, 0,0,1);">#e3f2fd blue lighten-5</div>
                <div class="blue lighten-4" style="color: rgba(0, 0,0,1);">#bbdefb blue lighten-4</div>
                <div class="blue lighten-3" style="color: rgba(0, 0,0,1);">#90caf9 blue lighten-3</div>
                <div class="blue lighten-2" style="color: rgba(0, 0,0,1);">#64b5f6 blue lighten-2</div>
                <div class="blue lighten-1" style="color: rgba(0, 0,0,1);">#42a5f5 blue lighten-1</div>
                <div class="blue" style="color: rgba(0, 0,0,1);">#2196f3 blue</div>
                <div class="blue darken-1" style="color: rgba(255, 255, 255, 0.901961);">#1e88e5 blue darken-1</div>
                <div class="blue darken-2" style="color: rgba(255, 255, 255, 0.901961);">#1976d2 blue darken-2</div>
                <div class="blue darken-3" style="color: rgba(255, 255, 255, 0.901961);">#1565c0 blue darken-3</div>
                <div class="blue darken-4" style="color: rgba(255, 255, 255, 0.901961);">#0d47a1 blue darken-4</div>
                <div class="blue accent-1" style="color: rgba(0, 0,0,1);">#82b1ff blue accent-1</div>
                <div class="blue accent-2" style="color: rgba(0, 0,0,1);">#448aff blue accent-2</div>
                <div class="blue accent-3" style="color: rgba(0, 0,0,1);">#2979ff blue accent-3</div>
                <div class="blue accent-4" style="color: rgba(0, 0,0,1);">#2962ff blue accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="light-blue lighten-5" style="color: rgba(0, 0,0,1);">#e1f5fe light-blue lighten-5</div>
                <div class="light-blue lighten-4" style="color: rgba(0, 0,0,1);">#b3e5fc light-blue lighten-4</div>
                <div class="light-blue lighten-3" style="color: rgba(0, 0,0,1);">#81d4fa light-blue lighten-3</div>
                <div class="light-blue lighten-2" style="color: rgba(0, 0,0,1);">#4fc3f7 light-blue lighten-2</div>
                <div class="light-blue lighten-1" style="color: rgba(0, 0,0,1);">#29b6f6 light-blue lighten-1</div>
                <div class="light-blue" style="color: rgba(0, 0,0,1);">#03a9f4 light-blue</div>
                <div class="light-blue darken-1" style="color: rgba(255, 255, 255, 0.901961);">#039be5 light-blue
                  darken-1</div>
                <div class="light-blue darken-2" style="color: rgba(255, 255, 255, 0.901961);">#0288d1 light-blue
                  darken-2</div>
                <div class="light-blue darken-3" style="color: rgba(255, 255, 255, 0.901961);">#0277bd light-blue
                  darken-3</div>
                <div class="light-blue darken-4" style="color: rgba(255, 255, 255, 0.901961);">#01579b light-blue
                  darken-4</div>
                <div class="light-blue accent-1" style="color: rgba(0, 0,0,1);">#80d8ff light-blue accent-1</div>
                <div class="light-blue accent-2" style="color: rgba(0, 0,0,1);">#40c4ff light-blue accent-2</div>
                <div class="light-blue accent-3" style="color: rgba(0, 0,0,1);">#00b0ff light-blue accent-3</div>
                <div class="light-blue accent-4" style="color: rgba(0, 0,0,1);">#0091ea light-blue accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="cyan lighten-5" style="color: rgba(0, 0,0,1);">#e0f7fa cyan lighten-5</div>
                <div class="cyan lighten-4" style="color: rgba(0, 0,0,1);">#b2ebf2 cyan lighten-4</div>
                <div class="cyan lighten-3" style="color: rgba(0, 0,0,1);">#80deea cyan lighten-3</div>
                <div class="cyan lighten-2" style="color: rgba(0, 0,0,1);">#4dd0e1 cyan lighten-2</div>
                <div class="cyan lighten-1" style="color: rgba(0, 0,0,1);">#26c6da cyan lighten-1</div>
                <div class="cyan" style="color: rgba(0, 0,0,1);">#00bcd4 cyan</div>
                <div class="cyan darken-1" style="color: rgba(255, 255, 255, 0.901961);">#00acc1 cyan darken-1</div>
                <div class="cyan darken-2" style="color: rgba(255, 255, 255, 0.901961);">#0097a7 cyan darken-2</div>
                <div class="cyan darken-3" style="color: rgba(255, 255, 255, 0.901961);">#00838f cyan darken-3</div>
                <div class="cyan darken-4" style="color: rgba(255, 255, 255, 0.901961);">#006064 cyan darken-4</div>
                <div class="cyan accent-1" style="color: rgba(0, 0,0,1);">#84ffff cyan accent-1</div>
                <div class="cyan accent-2" style="color: rgba(0, 0,0,1);">#18ffff cyan accent-2</div>
                <div class="cyan accent-3" style="color: rgba(0, 0,0,1);">#00e5ff cyan accent-3</div>
                <div class="cyan accent-4" style="color: rgba(0, 0,0,1);">#00b8d4 cyan accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="teal lighten-5" style="color: rgba(0, 0,0,1);">#e0f2f1 teal lighten-5</div>
                <div class="teal lighten-4" style="color: rgba(0, 0,0,1);">#b2dfdb teal lighten-4</div>
                <div class="teal lighten-3" style="color: rgba(0, 0,0,1);">#80cbc4 teal lighten-3</div>
                <div class="teal lighten-2" style="color: rgba(0, 0,0,1);">#4db6ac teal lighten-2</div>
                <div class="teal lighten-1" style="color: rgba(0, 0,0,1);">#26a69a teal lighten-1</div>
                <div class="teal" style="color: rgba(0, 0,0,1);">#009688 teal</div>
                <div class="teal darken-1" style="color: rgba(255, 255, 255, 0.901961);">#00897b teal darken-1</div>
                <div class="teal darken-2" style="color: rgba(255, 255, 255, 0.901961);">#00796b teal darken-2</div>
                <div class="teal darken-3" style="color: rgba(255, 255, 255, 0.901961);">#00695c teal darken-3</div>
                <div class="teal darken-4" style="color: rgba(255, 255, 255, 0.901961);">#004d40 teal darken-4</div>
                <div class="teal accent-1" style="color: rgba(0, 0,0,1);">#a7ffeb teal accent-1</div>
                <div class="teal accent-2" style="color: rgba(0, 0,0,1);">#64ffda teal accent-2</div>
                <div class="teal accent-3" style="color: rgba(0, 0,0,1);">#1de9b6 teal accent-3</div>
                <div class="teal accent-4" style="color: rgba(0, 0,0,1);">#00bfa5 teal accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="green lighten-5" style="color: rgba(0, 0,0,1);">#e8f5e9 green lighten-5</div>
                <div class="green lighten-4" style="color: rgba(0, 0,0,1);">#c8e6c9 green lighten-4</div>
                <div class="green lighten-3" style="color: rgba(0, 0,0,1);">#a5d6a7 green lighten-3</div>
                <div class="green lighten-2" style="color: rgba(0, 0,0,1);">#81c784 green lighten-2</div>
                <div class="green lighten-1" style="color: rgba(0, 0,0,1);">#66bb6a green lighten-1</div>
                <div class="green" style="color: rgba(0, 0,0,1);">#4caf50 green</div>
                <div class="green darken-1" style="color: rgba(255, 255, 255, 0.901961);">#43a047 green darken-1</div>
                <div class="green darken-2" style="color: rgba(255, 255, 255, 0.901961);">#388e3c green darken-2</div>
                <div class="green darken-3" style="color: rgba(255, 255, 255, 0.901961);">#2e7d32 green darken-3</div>
                <div class="green darken-4" style="color: rgba(255, 255, 255, 0.901961);">#1b5e20 green darken-4</div>
                <div class="green accent-1" style="color: rgba(0, 0,0,1);">#b9f6ca green accent-1</div>
                <div class="green accent-2" style="color: rgba(0, 0,0,1);">#69f0ae green accent-2</div>
                <div class="green accent-3" style="color: rgba(0, 0,0,1);">#00e676 green accent-3</div>
                <div class="green accent-4" style="color: rgba(0, 0,0,1);">#00c853 green accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="light-green lighten-5" style="color: rgba(0, 0,0,1);">#f1f8e9 light-green lighten-5</div>
                <div class="light-green lighten-4" style="color: rgba(0, 0,0,1);">#dcedc8 light-green lighten-4</div>
                <div class="light-green lighten-3" style="color: rgba(0, 0,0,1);">#c5e1a5 light-green lighten-3</div>
                <div class="light-green lighten-2" style="color: rgba(0, 0,0,1);">#aed581 light-green lighten-2</div>
                <div class="light-green lighten-1" style="color: rgba(0, 0,0,1);">#9ccc65 light-green lighten-1</div>
                <div class="light-green" style="color: rgba(0, 0,0,1);">#8bc34a light-green</div>
                <div class="light-green darken-1" style="color: rgba(255, 255, 255, 0.901961);">#7cb342 light-green
                  darken-1</div>
                <div class="light-green darken-2" style="color: rgba(255, 255, 255, 0.901961);">#689f38 light-green
                  darken-2</div>
                <div class="light-green darken-3" style="color: rgba(255, 255, 255, 0.901961);">#558b2f light-green
                  darken-3</div>
                <div class="light-green darken-4" style="color: rgba(255, 255, 255, 0.901961);">#33691e light-green
                  darken-4</div>
                <div class="light-green accent-1" style="color: rgba(0, 0,0,1);">#ccff90 light-green accent-1</div>
                <div class="light-green accent-2" style="color: rgba(0, 0,0,1);">#b2ff59 light-green accent-2</div>
                <div class="light-green accent-3" style="color: rgba(0, 0,0,1);">#76ff03 light-green accent-3</div>
                <div class="light-green accent-4" style="color: rgba(0, 0,0,1);">#64dd17 light-green accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="lime lighten-5" style="color: rgba(0, 0,0,1);">#f9fbe7 lime lighten-5</div>
                <div class="lime lighten-4" style="color: rgba(0, 0,0,1);">#f0f4c3 lime lighten-4</div>
                <div class="lime lighten-3" style="color: rgba(0, 0,0,1);">#e6ee9c lime lighten-3</div>
                <div class="lime lighten-2" style="color: rgba(0, 0,0,1);">#dce775 lime lighten-2</div>
                <div class="lime lighten-1" style="color: rgba(0, 0,0,1);">#d4e157 lime lighten-1</div>
                <div class="lime" style="color: rgba(0, 0,0,1);">#cddc39 lime</div>
                <div class="lime darken-1" style="color: rgba(255, 255, 255, 0.901961);">#c0ca33 lime darken-1</div>
                <div class="lime darken-2" style="color: rgba(255, 255, 255, 0.901961);">#afb42b lime darken-2</div>
                <div class="lime darken-3" style="color: rgba(255, 255, 255, 0.901961);">#9e9d24 lime darken-3</div>
                <div class="lime darken-4" style="color: rgba(255, 255, 255, 0.901961);">#827717 lime darken-4</div>
                <div class="lime accent-1" style="color: rgba(0, 0,0,1);">#f4ff81 lime accent-1</div>
                <div class="lime accent-2" style="color: rgba(0, 0,0,1);">#eeff41 lime accent-2</div>
                <div class="lime accent-3" style="color: rgba(0, 0,0,1);">#c6ff00 lime accent-3</div>
                <div class="lime accent-4" style="color: rgba(0, 0,0,1);">#aeea00 lime accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="yellow lighten-5" style="color: rgba(0, 0,0,1);">#fffde7 yellow lighten-5</div>
                <div class="yellow lighten-4" style="color: rgba(0, 0,0,1);">#fff9c4 yellow lighten-4</div>
                <div class="yellow lighten-3" style="color: rgba(0, 0,0,1);">#fff59d yellow lighten-3</div>
                <div class="yellow lighten-2" style="color: rgba(0, 0,0,1);">#fff176 yellow lighten-2</div>
                <div class="yellow lighten-1" style="color: rgba(0, 0,0,1);">#ffee58 yellow lighten-1</div>
                <div class="yellow" style="color: rgba(0, 0,0,1);">#ffeb3b yellow</div>
                <div class="yellow darken-1" style="color: rgba(255, 255, 255, 0.901961);">#fdd835 yellow darken-1</div>
                <div class="yellow darken-2" style="color: rgba(255, 255, 255, 0.901961);">#fbc02d yellow darken-2</div>
                <div class="yellow darken-3" style="color: rgba(255, 255, 255, 0.901961);">#f9a825 yellow darken-3</div>
                <div class="yellow darken-4" style="color: rgba(255, 255, 255, 0.901961);">#f57f17 yellow darken-4</div>
                <div class="yellow accent-1" style="color: rgba(0, 0,0,1);">#ffff8d yellow accent-1</div>
                <div class="yellow accent-2" style="color: rgba(0, 0,0,1);">#ffff00 yellow accent-2</div>
                <div class="yellow accent-3" style="color: rgba(0, 0,0,1);">#ffea00 yellow accent-3</div>
                <div class="yellow accent-4" style="color: rgba(0, 0,0,1);">#ffd600 yellow accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="amber lighten-5" style="color: rgba(0, 0,0,1);">#fff8e1 amber lighten-5</div>
                <div class="amber lighten-4" style="color: rgba(0, 0,0,1);">#ffecb3 amber lighten-4</div>
                <div class="amber lighten-3" style="color: rgba(0, 0,0,1);">#ffe082 amber lighten-3</div>
                <div class="amber lighten-2" style="color: rgba(0, 0,0,1);">#ffd54f amber lighten-2</div>
                <div class="amber lighten-1" style="color: rgba(0, 0,0,1);">#ffca28 amber lighten-1</div>
                <div class="amber" style="color: rgba(0, 0,0,1);">#ffc107 amber</div>
                <div class="amber darken-1" style="color: rgba(255, 255, 255, 0.901961);">#ffb300 amber darken-1</div>
                <div class="amber darken-2" style="color: rgba(255, 255, 255, 0.901961);">#ffa000 amber darken-2</div>
                <div class="amber darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ff8f00 amber darken-3</div>
                <div class="amber darken-4" style="color: rgba(255, 255, 255, 0.901961);">#ff6f00 amber darken-4</div>
                <div class="amber accent-1" style="color: rgba(0, 0,0,1);">#ffe57f amber accent-1</div>
                <div class="amber accent-2" style="color: rgba(0, 0,0,1);">#ffd740 amber accent-2</div>
                <div class="amber accent-3" style="color: rgba(0, 0,0,1);">#ffc400 amber accent-3</div>
                <div class="amber accent-4" style="color: rgba(0, 0,0,1);">#ffab00 amber accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="orange lighten-5" style="color: rgba(0, 0,0,1);">#fff3e0 orange lighten-5</div>
                <div class="orange lighten-4" style="color: rgba(0, 0,0,1);">#ffe0b2 orange lighten-4</div>
                <div class="orange lighten-3" style="color: rgba(0, 0,0,1);">#ffcc80 orange lighten-3</div>
                <div class="orange lighten-2" style="color: rgba(0, 0,0,1);">#ffb74d orange lighten-2</div>
                <div class="orange lighten-1" style="color: rgba(0, 0,0,1);">#ffa726 orange lighten-1</div>
                <div class="orange" style="color: rgba(0, 0,0,1);">#ff9800 orange</div>
                <div class="orange darken-1" style="color: rgba(255, 255, 255, 0.901961);">#fb8c00 orange darken-1</div>
                <div class="orange darken-2" style="color: rgba(255, 255, 255, 0.901961);">#f57c00 orange darken-2</div>
                <div class="orange darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ef6c00 orange darken-3</div>
                <div class="orange darken-4" style="color: rgba(255, 255, 255, 0.901961);">#e65100 orange darken-4</div>
                <div class="orange accent-1" style="color: rgba(0, 0,0,1);">#ffd180 orange accent-1</div>
                <div class="orange accent-2" style="color: rgba(0, 0,0,1);">#ffab40 orange accent-2</div>
                <div class="orange accent-3" style="color: rgba(0, 0,0,1);">#ff9100 orange accent-3</div>
                <div class="orange accent-4" style="color: rgba(0, 0,0,1);">#ff6d00 orange accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="deep-orange lighten-5" style="color: rgba(0, 0,0,1);">#fbe9e7 deep-orange lighten-5</div>
                <div class="deep-orange lighten-4" style="color: rgba(0, 0,0,1);">#ffccbc deep-orange lighten-4</div>
                <div class="deep-orange lighten-3" style="color: rgba(0, 0,0,1);">#ffab91 deep-orange lighten-3</div>
                <div class="deep-orange lighten-2" style="color: rgba(0, 0,0,1);">#ff8a65 deep-orange lighten-2</div>
                <div class="deep-orange lighten-1" style="color: rgba(0, 0,0,1);">#ff7043 deep-orange lighten-1</div>
                <div class="deep-orange" style="color: rgba(0, 0,0,1);">#ff5722 deep-orange</div>
                <div class="deep-orange darken-1" style="color: rgba(255, 255, 255, 0.901961);">#f4511e deep-orange
                  darken-1</div>
                <div class="deep-orange darken-2" style="color: rgba(255, 255, 255, 0.901961);">#e64a19 deep-orange
                  darken-2</div>
                <div class="deep-orange darken-3" style="color: rgba(255, 255, 255, 0.901961);">#d84315 deep-orange
                  darken-3</div>
                <div class="deep-orange darken-4" style="color: rgba(255, 255, 255, 0.901961);">#bf360c deep-orange
                  darken-4</div>
                <div class="deep-orange accent-1" style="color: rgba(0, 0,0,1);">#ff9e80 deep-orange accent-1</div>
                <div class="deep-orange accent-2" style="color: rgba(0, 0,0,1);">#ff6e40 deep-orange accent-2</div>
                <div class="deep-orange accent-3" style="color: rgba(0, 0,0,1);">#ff3d00 deep-orange accent-3</div>
                <div class="deep-orange accent-4" style="color: rgba(0, 0,0,1);">#dd2c00 deep-orange accent-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="brown lighten-5" style="color: rgba(0, 0,0,1);">#efebe9 brown lighten-5</div>
                <div class="brown lighten-4" style="color: rgba(0, 0,0,1);">#d7ccc8 brown lighten-4</div>
                <div class="brown lighten-3" style="color: rgba(0, 0,0,1);">#bcaaa4 brown lighten-3</div>
                <div class="brown lighten-2" style="color: rgba(0, 0,0,1);">#a1887f brown lighten-2</div>
                <div class="brown lighten-1" style="color: rgba(0, 0,0,1);">#8d6e63 brown lighten-1</div>
                <div class="brown" style="color: rgba(0, 0,0,1);">#795548 brown</div>
                <div class="brown darken-1" style="color: rgba(255, 255, 255, 0.901961);">#6d4c41 brown darken-1</div>
                <div class="brown darken-2" style="color: rgba(255, 255, 255, 0.901961);">#5d4037 brown darken-2</div>
                <div class="brown darken-3" style="color: rgba(255, 255, 255, 0.901961);">#4e342e brown darken-3</div>
                <div class="brown darken-4" style="color: rgba(255, 255, 255, 0.901961);">#3e2723 brown darken-4</div>
              </div>
              <div class="col s12 m6 l4">
                <div class="grey lighten-5" style="color: rgba(0, 0,0,1);">#fafafa grey lighten-5</div>
                <div class="grey lighten-4" style="color: rgba(0, 0,0,1);">#f5f5f5 grey lighten-4</div>
                <div class="grey lighten-3" style="color: rgba(0, 0,0,1);">#eeeeee grey lighten-3</div>
                <div class="grey lighten-2" style="color: rgba(0, 0,0,1);">#e0e0e0 grey lighten-2</div>
                <div class="grey lighten-1" style="color: rgba(0, 0,0,1);">#bdbdbd grey lighten-1</div>
                <div class="grey" style="color: rgba(0, 0,0,1);">#9e9e9e grey</div>
                <div class="grey darken-1" style="color: rgba(255, 255, 255, 0.901961);">#757575 grey darken-1</div>
                <div class="grey darken-2" style="color: rgba(255, 255, 255, 0.901961);">#616161 grey darken-2</div>
                <div class="grey darken-3" style="color: rgba(255, 255, 255, 0.901961);">#424242 grey darken-3</div>
                <div class="grey darken-4" style="color: rgba(255, 255, 255, 0.901961);">#212121 grey darken-4</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>