Location via proxy:   
[Report a bug]   [Manage cookies]                

COLORS

A nicer color palette for the web.

The New Defaults

Skinning your prototypes just got easier - colors.css is a collection of skin classes to use while prototyping in the browser. 647B minified and gzipped.

Navy #001f3f
Blue #0074D9
Aqua #7FDBFF
TEAL #39CCCC
PURPLE #B10DC9
FUCHSIA #F012BE
MAROON #85144b
RED #FF4136
ORANGE #FF851B
YELLOW #FFDC00
OLIVE #3D9970
GREEN #2ECC40
LIME #01FF70
BLACK #111111
GRAY #AAAAAA
SILVER #DDDDDD
WHITE #FFFFFF
Customize these colors Create your own defaults

The Old Defaults

For comparison

Navy

Blue

Aqua

Teal

Olive

Green

Lime

Yellow

Orange

Red

Maroon

Fuchsia

Purple

Silver

Gray

White

Black

Utilities

Borders & Text

Includes classes to set text and or border color.

Navy
Blue
Aqua
Teal
Purple
Fuchsia
Maroon
Olive
Green
Lime
Yellow
Orange
Red
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?

Download Source View on Github

Install with npm

npm install --save-dev colors.css

Install the gem

gem install clrs

Link to the file in the head of your document

<link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">

Swatches

Want to use these colors in Photoshop, Illustrator, Gimp or Inkscape? Download one of these swatches.

colors-css.aco (Photoshop) colors-css.ase (Illustrator) colors-css.gpl (Gimp/Inkscape)

A11Y (accessibility)

Use colors responsibly Check out these 90 examples of A11Y compliant color combos.