Colors

basscss-colors v1.0.5

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

Colors

.black .gray .silver .white .aqua .blue .navy .teal .green .olive .lime .yellow .orange .red .fuchsia .purple .maroon

<h3 class="center">
  <span class="black">.black</span>
  <span class="gray">.gray</span>
  <span class="silver">.silver</span>
  <span class="white">.white</span>
  <span class="aqua">.aqua</span>
  <span class="blue">.blue</span>
  <span class="navy">.navy</span>
  <span class="teal">.teal</span>
  <span class="green">.green</span>
  <span class="olive">.olive</span>
  <span class="lime">.lime</span>
  <span class="yellow">.yellow</span>
  <span class="orange">.orange</span>
  <span class="red">.red</span>
  <span class="fuchsia">.fuchsia</span>
  <span class="purple">.purple</span>
  <span class="maroon">.maroon</span>
</h3>

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

Border Colors

.border-black
.border-gray
.border-silver
.border-white
.border-aqua
.border-blue
.border-navy
.border-teal
.border-green
.border-olive
.border-lime
.border-yellow
.border-orange
.border-red
.border-fuchsia
.border-purple
.border-maroon
.border-darken-1
.border-darken-2
.border-darken-3
.border-darken-4
<div class="flex flex-wrap mxn1">
  <div class="flex-auto center m1 p1 border border-black">.border-black</div>
  <div class="flex-auto center m1 p1 border border-gray">.border-gray</div>
  <div class="flex-auto center m1 p1 border border-silver">.border-silver</div>
  <div class="flex-auto center m1 p1 border border-white">.border-white</div>
  <div class="flex-auto center m1 p1 border border-aqua">.border-aqua</div>
  <div class="flex-auto center m1 p1 border border-blue">.border-blue</div>
  <div class="flex-auto center m1 p1 border border-navy">.border-navy</div>
  <div class="flex-auto center m1 p1 border border-teal">.border-teal</div>
  <div class="flex-auto center m1 p1 border border-green">.border-green</div>
  <div class="flex-auto center m1 p1 border border-olive">.border-olive</div>
  <div class="flex-auto center m1 p1 border border-lime">.border-lime</div>
  <div class="flex-auto center m1 p1 border border-yellow">.border-yellow</div>
  <div class="flex-auto center m1 p1 border border-orange">.border-orange</div>
  <div class="flex-auto center m1 p1 border border-red">.border-red</div>
  <div class="flex-auto center m1 p1 border border-fuchsia">.border-fuchsia</div>
  <div class="flex-auto center m1 p1 border border-purple">.border-purple</div>
  <div class="flex-auto center m1 p1 border border-maroon">.border-maroon</div>
  <div class="flex-auto center m1 p1 border border-darken-1">.border-darken-1</div>
  <div class="flex-auto center m1 p1 border border-darken-2">.border-darken-2</div>
  <div class="flex-auto center m1 p1 border border-darken-3">.border-darken-3</div>
  <div class="flex-auto center m1 p1 border border-darken-4">.border-darken-4</div>
</div>

Opacity

To de-emphasize elements with lower opacity, use the .muted utility.

Normal Muted
<span class="blue">Normal</span>
<span class="blue muted">Muted</span>