Palette

Display a set of colors which is available in your product.

Circular

By default, text color is white. You may need to change it based on your background-color and their contrast. You can use either classes or inline style to set background-colors.

#968eee
#5fd79a
#89c1e4
#fe6060
#f8f9fb


<ul class="color-palette-circular">
  <li style="background-color: #968eee">#968eee</li>
  <li style="background-color: #5fd79a">#5fd79a</li>
  <li style="background-color: #89c1e4">#89c1e4</li>
  <li style="background-color: #fe6060">#fe6060</li>
  <li style="background-color: #f8f9fb; color: #666">#f8f9fb</li>
</ul>

Stacked

Just changing a class name!

#0D47A1
#1565C0
#1976D2
#1E88E5
#2196F3
#42A5F5
#64B5F6
#90CAF9
#BBDEFB

#4A148C
#6A1B9A
#7B1FA2
#8E24AA
#9C27B0
#AB47BC
#BA68C8
#CE93D8
#E1BEE7


<div class="row">
  <div class="col-sm-6">
    <ul class="color-palette-stacked">
      <li style="background-color: #0D47A1">#0D47A1</li>
      <li style="background-color: #1565C0">#1565C0</li>
      <li style="background-color: #1976D2">#1976D2</li>
      <li style="background-color: #1E88E5">#1E88E5</li>
      <li style="background-color: #2196F3">#2196F3</li>
      <li style="background-color: #42A5F5">#42A5F5</li>
      <li style="background-color: #64B5F6">#64B5F6</li>
      <li style="background-color: #90CAF9">#90CAF9</li>
      <li style="background-color: #BBDEFB">#BBDEFB</li>
    </ul>
  </div>

  <div class="col-sm-6">
    <ul class="color-palette-stacked">
      <li style="background-color: #4A148C">#4A148C</li>
      <li style="background-color: #6A1B9A">#6A1B9A</li>
      <li style="background-color: #7B1FA2">#7B1FA2</li>
      <li style="background-color: #8E24AA">#8E24AA</li>
      <li style="background-color: #9C27B0">#9C27B0</li>
      <li style="background-color: #AB47BC">#AB47BC</li>
      <li style="background-color: #BA68C8">#BA68C8</li>
      <li style="background-color: #CE93D8">#CE93D8</li>
      <li style="background-color: #E1BEE7">#E1BEE7</li>
    </ul>
  </div>
</div>