<ul class="cl-palette">
    <li>
        <h3>Primary</h3>
        <div style="background-color: #428BCA;" class="color"><span>#428BCA</span></div>
        <div style="background-color: #3874A9;" class="color"><span>#3874A9</span></div>
    </li>
    <li>
        <h3>Success</h3>
        <div style="background-color: #5CB85C;" class="color"><span>#5CB85C</span></div>
        <div style="background-color: #4D984D;" class="color"><span>#4D984D</span></div>
    </li>
    <li>
        <h3>Info</h3>
        <div style="background-color: #5BC0DE;" class="color"><span>#5BC0DE</span></div>
        <div style="background-color: #59A4C4;" class="color"><span>#59A4C4</span></div>
    </li>
    <li>
        <h3>Warning</h3>
        <div style="background-color: #F0AD4E;" class="color"><span>#F0AD4E</span></div>
        <div style="background-color: #BA8540;" class="color"><span>#BA8540</span></div>
    </li>
    <li>
        <h3>Danger</h3>
        <div style="background-color: #D9534F;" class="color"><span>#D9534F</span></div>
        <div style="background-color: #B04341;" class="color"><span>#B04341</span></div>
    </li>
</ul>