Color Schemes & SCSS

New project, new website, which means new stylesheets. These resources will help you find a suitable color palette, and then use it with SCSS.

Color Scheme Resources

Color Scheme Designer – Hands down, the best feature is the ability to quickly preview a new color scheme in mocked up dark & light preview pages. Schemes can be generated from a color that you have, or generated randomly, by placing constraints. The utility exports to a variety of formats including hexidecimal, html/css, and Photoshop palette.

Adobe Kuler – Similar to the above utility, however Kuler will create color palettes from a photo, as well as provide searchable access to tons of palettes.

ColourCode – Probably the simplest utility to use, without lacking needed features.

SCSS Resources

SassMe – Great visual representation of the SASS operators [Darken/Lighten], [Desaturate/Saturate] and [Adjust Hue]. Begin with a color, and experiment.

Sass & Compass Color Functions – Complete explanations for all SASS & Compass color functions. Code & visual representations included.

Controlling color with Sass color functions – Thoughtbot wrote a short, but well written article detailing SASS color transformations, complete with code & resulting color examples.

Compass – Framework that leverages SCSS.