A Sass color library.
Full site with colors, variable names and documentation here.
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.
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.
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.
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 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.