The Palette

Introducing colors-saturated.css. A collection of skin classes to use while prototyping. Minified and gzipped it's a whopping 644 Bytes of cascading stylesheet awesomeness.

NAVY

#002B75

BLUE

#0050d4

AQUA

#00d9f7

TEAL

#00a6a6

OLIVE

#00b562

GREEN

#00d942

LIME

#b4d900

YELLOW

#ebcf00

ORANGE

#eb7700

RED

#eb0012

MAROON

#790009

FUCHSIA

#ff00c3

PURPLE

#8d00ff

BLACK

#000000

GRAY

#333333

SILVER

#777777

WHITE

#ffffff

Borders

The code

 
/* 
  To be used in combination with a base border class 
  i.e something like

  .border { border-style: solid; border-width: 1px; }
*/ 

.border--aqua {    border-color:#7FDBFF;}
.border--black {   border-color:#000000;}
.border--blue {    border-color:#0074D9;}
.border--fuchsia { border-color:#F012BE;}
.border--green {   border-color:#2ECC40;}
.border--lime {    border-color:#01FF70;}
.border--maroon {  border-color:#85144B;}
.border--navy {    border-color:#001F3F;}
.border--olive {   border-color:#3D9970;}
.border--orange {  border-color:#FF851B;}
.border--purple {  border-color:#B10DC9;}
.border--red {     border-color:#FF4136;}
.border--silver {  border-color:#DDDDDD;}
.border--gray {    border-color:#AAAAAA;}
.border--teal {    border-color:#39CCCC;}
.border--white {   border-color:#FFFFFF;}
.border--yellow {  border-color:#FFDC00;}

SVG Fills

Easily set the color of inline svg elements by tacking on a skin class as illustrated below.

SVG Strokes

Easily set the color of the stroke on inline svg elements by tacking on a skin class as illustrated below.

Get Saturated

Want to use this in a project?

Download Source View on Github

Install with npm

npm install --save-dev css-colors-saturated

SATURATED

Skin classes for rapid prototyping in the browser