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>
Markup
Copy

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>
Markup
Copy