Skip to content
Sass color library. The original repo seems to be abandoned so I'm taking it my own direction.
Branch: master
Clone or download
Pull request Compare This branch is 12 commits ahead of RichardBray:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Color Me Sass

A Sass color library.

Full site with colors, variable names and documentation here.


1. CSS Preprocessors

I'm not going to go into detail into what css preprocessors are or which one is better, both Sass and LESS are both pretty cool and I believe every web designer should at least have a play with one of them.

One thing you need to know if you're new to this, Sass uses Ruby and LESS uses JavaScript. That should help with your choice.

2. Setting Up

Use npm install color-me-sass to get a copy of the package. Alternatively download a copy.

If you're familiar with Sass or LESS this should be a walk in the park. Just import the main _color-me-sass.scss file anywhere -- it won't overwrite any color variables you already have.

3. Using the Colors

Now here's the fun part. If you want to use a color all you need to do is type in its variable name.

body{ background-color: $orangeDuller; color: $white; }

The cool thing about CSS pre-processors is you can make the color lighter or darker, desaturate or saturate colors, change the hue, or even mix two colors together and it will calculate the correct hexadecimal value and place it in the compiled CSS. Pretty neat right.


/*  LIGHTEN  */

  background-color: lighten($yellowDark, 25%);

/*  DARKEN  */

  background-color: darken($pinkCoral, 76%);



  background-color: desaturate($amberDull, 14%);

/*  SATURATE  */

  background-color: saturate($greenSea, 39%);


  background-color: adjust_hue($purplePlum, 78); /* between 0 - 360 */

More than one adjustment


  background-color: adjust_color($brownBronze, $hue: 11%, $saturation: -8%);


  background-color: adjust_color($blueLighter, $lightness: -10%, $hue: 11%, $saturation: -8%);

Mixing Colors

$cool_purple:  mix($red, $blue, 50%);

  background-color: $cool_purple;

The possibilities are pretty much endless. Have fun. Don't forget to hit me up on twitter if you end up using this for a site you work on.


Color Me Sass is licensed under the ☺ license.

You, the licensee, are hereby granted free usage in both personal and commerical environments, without any obligation of attribution or payment (monetary or otherwise). The licensee is free to use, copy, modify, publish, distribute, sublicence, and/or merchandise the work, subject to the licensee inflecting a positive message unto someone. This includes (but is not limited to): smiling, being nice, saying “thank you”, assisting other persons, or any similar actions percolating the given concept.

The above copyright notice serves as a permissions notice also, and may optionally be included in copies or portions of the work.

The work is provided “as is”, without warranty or support, express or implied. The author(s) are not liable for any damages, misuse, or other claim, whether from or as a consequence of usage of the given work.


v 1.0 Color Me Sass is born.

v 1.1 Added a few brand colors from to the library

v 1.2 25/04/13 Added some colors from preboot

v 1.3 04/06/13 Updated with over 90 dulux inspired colors

v 1.4 03/03/16 Added support for NPM packaging.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.