COLORS

A nicer color palette for the web.

THE OLD DEFAULTS

Ugh. Never get stuck with these again.

Navy

Blue

Aqua

Teal

Olive

Green

Lime

Yellow

Orange

Red

Maroon

Fuchsia

Purple

Silver

Gray

Black

The New Defaults

Introducing colors.css. A collection of several css skin classes to use while prototyping. Minified and gzipped it's a whopping 647 Bytes.

NAVY

#001f3f

BLUE

#0074d9

AQUA

#7fdbff

TEAL

#39cccc

OLIVE

#3d9970

GREEN

#2ecc40

LIME

#01ff70

YELLOW

#ffdc00

ORANGE

#ff851b

RED

#ff4136

MAROON

#85144b

FUCHSIA

#f012be

PURPLE

#b10dc9

BLACK

#111111

GRAY

#aaaaaa

SILVER

#dddddd

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 Colors

Want to use this in a project?

Install with npm

npm install --save-dev colors.css

There is even a gem for rails apps

gem install clrs