COLORS

A nicer color palette for the web.

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

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

Borders & Text

Blue
Aqua
Teal
Olive
Green
Lime
Yellow
Orange
Red
Maroon
Fuchsia
Purple
Black
Silver
Gray
White

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

Please help rid the world of sad colors

Tweet