Use this suite of color and background color utilities to directly style elements.
<h3 class="center">
<span class="dark-gray">.dark-gray</span>
<span class="mid-gray">.mid-gray</span>
<span class="light-gray">.light-gray</span>
<span class="lighter-gray">.lighter-gray</span>
<span class="white">.white</span>
<span class="blue">.blue</span>
<span class="red">.red</span>
<span class="yellow">.yellow</span>
<span class="green">.green</span>
</h3>
<div class="center p1 white bg-dark-gray">.bg-dark-gray</div>
<div class="center p1 bg-mid-gray">.bg-mid-gray</div>
<div class="center p1 bg-light-gray">.bg-light-gray</div>
<div class="center p1 bg-lighter-gray">.bg-lighter-gray</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>