Quick Color with Sass

Over the past couple of years, I’ve stopped making pixel perfect mockups for website and app design. Instead I create style tiles to use as a guide, leaving a good deal of the actual designing to be done in the browser. With powerful tools like Foundation and Bootstrap, along with Sass, designing as you code feels much more natural than trying to replicate a static mockup in the browser. One issue I’ve had, however, is finding the right colors without having to go back to Photoshop. Luckily, Sass has some pretty amazing color functions that can automate your color choosing process.

The Complementary Color

Did you know that one of the Sass color functions is ‘complement’? It only accepts one argument, the color or variable to complement, and only returns one color. But to be fair, it’s usually a really, really nice color.

Sass manipulates the hue of a color to acheive this effect. Color hue can be adjusted manually with the ‘adjust-hue’ function. It allows for two arguments, the color or variable being adjusted and the degree of adjustment (0°-360°). The ‘complement’ function divides the hue in half. So another way to get the same exact color is to adjust the hue by 180°.

Color Triads

Obviously, one complementary color is not always gonna be exactly what you need. Another common color pattern is triads. We can use this same function, adjusting hue, to quickly create a triad with your base color. Just divide your color into thirds.

Combination Functions

By now you can see how DRY and automated color pallete would be. Updating your base color could give you an entirely new color scheme. Taking this concept a bit further, combining color functions could create a super robust, adaptable, and reusable color scheme.

More on Sass and Colors

• A Visual Guide to Sass & Compass Color Functions
• Putting the FUN in Sass Color Functions
• Controlling Color with Sass Color Functions

More About Designing in the Browser

• Designing in the Browser, Pro Tips to Make it Work for You
• Styletil.es