Color Guide
Simplicity offers a wide range of colors. A full list is found below.
- red
- maroon
- magenta
- pink
- orange
- yellow
- gold
- green
- forest-green
- blue
- navy-blue
- teal
- purple
- brown
- saddle-brown
- olive
- black
- gray
- steel
- white
All of these colors can be used to set the background, text color, or hover color of an element in 7 different brightnesses.
- brightest
- brighter
- bright
- color
- dark
- darker
- darkest
Each color has 35 associated classes: 7 brightnesses with 5 options for each brightness. These allow you to control
- background color
- text color
- box shadow color
- hover color
- text hover color
For example, the bright yellow color has the following 5 classes.
.bright-yellow
.bright-yellow-hover
.bright-yellow-shadow
.bright-yellow-text
.bright-yellow-text-hover
Color visualization
brightest-red
brighter-red
bright-red
red
dark-red
darker-red
darkest-red
brightest-maroon
brighter-maroon
bright-maroon
maroon
dark-maroon
darker-maroon
darkest-maroon
brightest-magenta
brighter-magenta
bright-magenta
magenta
dark-magenta
darker-magenta
darkest-magenta
brightest-pink
brighter-pink
bright-pink
pink
dark-pink
darker-pink
darkest-pink
brightest-orange
brighter-orange
bright-orange
orange
dark-orange
darker-orange
darkest-orange
brightest-yellow
brighter-yellow
bright-yellow
yellow
dark-yellow
darker-yellow
darkest-yellow
brightest-gold
brighter-gold
bright-gold
gold
dark-gold
darker-gold
darkest-gold
brightest-green
brighter-green
bright-green
green
dark-green
darker-green
darkest-green
brightest-forest-green
brighter-forest-green
bright-forest-green
forest-green
dark-forest-green
darker-forest-green
darkest-forest-green
brightest-blue
brighter-blue
bright-blue
blue
dark-blue
darker-blue
darkest-blue
brightest-navy-blue
brighter-navy-blue
bright-navy-blue
navy-blue
dark-navy-blue
darker-navy-blue
darkest-navy-blue
brightest-teal
brighter-teal
bright-teal
teal
dark-teal
darker-teal
darkest-teal
brightest-purple
brighter-purple
bright-purple
purple
dark-purple
darker-purple
darkest-purple
brightest-brown
brighter-brown
bright-brown
brown
dark-brown
darker-brown
darkest-brown
brightest-saddle-brown
brighter-saddle-brown
bright-saddle-brown
saddle-brown
dark-saddle-brown
darker-saddle-brown
darkest-saddle-brown
brightest-olive
brighter-olive
bright-olive
olive
dark-olive
darker-olive
darkest-olive
brightest-black
brighter-black
bright-black
black
dark-black
darker-black
darkest-black
brightest-gray
brighter-gray
bright-gray
gray
dark-gray
darker-gray
darkest-gray
brightest-steel
brighter-steel
bright-steel
steel
dark-steel
darker-steel
darkest-steel
brightest-white
brighter-white
bright-white
white
dark-white
darker-white
darkest-white