Color with Code: Compass Colors Makes Picking Colors Easier!

This is Part 3 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”

Compass provides a huge array of built in functions for helping us get just the right look out of the colors we choose for our designs. The really neat thing about the functions is that they can be used anywhere in your stylesheet. background property definition, borders, shadow colors, font colors, you name it. You can pass either hex, RGBA, or even those old school color words like firebrick or goldenrod.

I love using the Compass color functions for doing hover states, getting just the right blend on a css gradient, and picking the perfect grays or yellows using darken, lighten, and saturate. You can even pass the color functions into each other!

You can even use the Sass color functions to extract color opacity from an RGBA color!

Learn all about the possible color function in Sass 3 here!