Skip to content
master
Switch branches/tags
Code
This branch is up to date with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

Color Me Sass

A Sass color library.

Full site with colors, variable names and documentation here.

Usage

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.

Lightness

/*  LIGHTEN  */

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

/*  DARKEN  */

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

Saturation

/*  DESATURATE  */

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

/*  SATURATE  */

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

Hue

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

More than one adjustment

/*  HS (HUE & SATURATION)  */

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

/*  HSL (HUE, SATURATION & LIGHTNESS)  */

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

Mixing Colors

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

body{
  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.

License

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.

Changelog

v 1.0 Color Me Sass is born.

v 1.1 Added a few brand colors from http://brandcolors.net/ 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.

About

Sass color library. The original repo seems to be abandoned so I'm taking it my own direction.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages