Colors

Use this suite of 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 .color-inherit

<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>
  <span class="color-inherit">.color-inherit</span>
</h3>

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>

CSS Source

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

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

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

.color-inherit { color: inherit }
.muted { opacity: .5 }

21 Rules

21 Selectors

74 Declarations

57 Properties

Borders

Background Colors