Colors

Usage info is given below

Get the code here

Greens

color-upbeatmint

color-dustygreen

color-palemint

color-dustyteal

color-graygreen

Blues

color-babyblue

color-pensiveaqua

color-duskydenim

color-cleverblue

color-palesea

Yellows and Browns

color-warmbrown

color-warmdesert

color-mesa

color-bestbutter

color-warmbeige

Reds and Oranges

color-redpink

color-coralbrick

color-orangebrick

Purples

color-happyplum

color-palepurple

color-softpurple

color-duskypurple


Usage

Use these as follows. Text color will be automatically applied as seen in colors shown above.

Typical use case

This code:

<div class="color-dustygreen">
<h3>Heading</h3>
<p>Paragraph content</p>
</div>

Produces:

Heading

Paragraph content


Hover option

Besides standard usage, all of these colors are also available in a hover version. This means that the color will be applied only on hover.

This code:

<div class="color-hover-mesa">
<h3>Hover over this!</h3>
</div>

Produces:

Hover over this!

You can apply both a regular color and a hover color as shown below:

This code:

<div class="color-bestbutter color-hover-redpink">
<h3>Hover over this!</h3>
</div>

Produces:

Hover over this!