COLORS

A nicer color palette for the web.

Tweet

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?

Download SourceView 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

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

• tachyons

• gradients

• basscss

• colorable

• shade

• pesticide

• mnml

• cssstats

• type.css

• btns

• links

• fluidity

• loading

• fitter happier text

• geomicons

• GitHub

• Twitter

• Dribbble

• Vimeo

• Instagram

• Exposure

• Soundcloud

v2.2.0                  Dedicated toHK