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.647 Bytesminified 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
Utilities
Borders & Text
Includes classes to set text and or border color.
Navy
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
Link to the file in the head of your document
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 responsiblyCheck out these90 examplesofA11Ycompliant color combos.
Made byMRMRS
Some other tools for designing in the browser
v2.2.0
Dedicated toHK