Color palette
Comprise and show what colors are available for a component.
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>