COLORS

A nicer color palette for the web.

The New Defaults

Introducing colors.css. A collection of skin classes to use while prototyping in the browser. 647 Bytes minified and gzipped.

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

For comparison

Navy

Blue

Aqua

Teal

Olive

Green

Lime

Yellow

Orange

Red

Maroon

Fuchsia

Purple

Silver

Gray

Black

Borders & Text

Includes classes to set text and or border color.

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 these in a project?

Install with npm

npm install --save-dev colors.css

Install the gem

gem install clrs

Please help rid the world of sad colors

Tweet