Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-colors v0.0.2

# Colors

NPM Github

basscss.com

Use this suite of color and background color utilities to directly style elements.

### .dark-gray .mid-gray .light-gray .lighter-gray .white .blue .red .yellow .green

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

.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4

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