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.
#001f3f
#0074D9
#7FDBFF
#39CCCC
#B10DC9
#F012BE
#85144b
#FF4136
#FF851B
#FFDC00
#3D9970
#2ECC40
#01FF70
#111111
#AAAAAA
#DDDDDD
#FFFFFF
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.
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
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.