Use this suite of background color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Background Colors

.bg-black
.bg-gray
.bg-silver
.bg-white
.bg-aqua
.bg-blue
.bg-navy
.bg-teal
.bg-green
.bg-olive
.bg-lime
.bg-yellow
.bg-orange
.bg-red
.bg-fuchsia
.bg-purple
.bg-maroon
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4
.bg-lighten-1
.bg-lighten-2
.bg-lighten-3
.bg-lighten-4
<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</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>
<div class="bg-black">
  <div class="center p1 white bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 white bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 white bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 white bg-lighten-4">.bg-lighten-4</div>
</div>

CSS Source

.bg-black  { background-color: var(--black) }
.bg-gray   { background-color: var(--gray) }
.bg-silver { background-color: var(--silver) }
.bg-white  { background-color: var(--white) }

.bg-aqua  { background-color: var(--aqua) }
.bg-blue  { background-color: var(--blue) }
.bg-navy  { background-color: var(--navy) }
.bg-teal  { background-color: var(--teal) }
.bg-green { background-color: var(--green) }
.bg-olive { background-color: var(--olive) }
.bg-lime  { background-color: var(--lime) }

.bg-yellow  { background-color: var(--yellow) }
.bg-orange  { background-color: var(--orange) }
.bg-red     { background-color: var(--red) }
.bg-fuchsia { background-color: var(--fuchsia) }
.bg-purple  { background-color: var(--purple) }
.bg-maroon  { background-color: var(--maroon) }

.bg-darken-1 { background-color: var(--darken-1) }
.bg-darken-2 { background-color: var(--darken-2) }
.bg-darken-3 { background-color: var(--darken-3) }
.bg-darken-4 { background-color: var(--darken-4) }

.bg-lighten-1 { background-color: var(--lighten-1) }
.bg-lighten-2 { background-color: var(--lighten-2) }
.bg-lighten-3 { background-color: var(--lighten-3) }
.bg-lighten-4 { background-color: var(--lighten-4) }

27 Rules
27 Selectors
80 Declarations
56 Properties