Sass Colors

Published on Jul 21, 2013
I started using Sass about a year ago and have been learning a lot of cool and interesting features about what it can do. With Sass you can create variables that help alleviate what I like to call the find and replace issue. Have you ever had a bunch of complicated stylesheets, interconnected in a spider web and needed to change a color. Yes. Don't worry we all have at some point. Well, with Sass you can create color variables to make sure that the same color is used in multiple different areas and with one change it can be updated. Want to change your site color from blue to orange? Change the one variable and your done. However, this still leaves one problem. If you have multiple variations of the same color then updating becomes difficult even with all those colors as variables. This is where another feature of Sass comes in. Most colors for a site are shades or tints of a single color value. If we changed one color we'd have to figure out all those other shades in order to keep the site in sync. Let us use Sass to figure this second problem out. Let us start with a color variable: `$site-color: #FFA84C` ## Darken or Lighten Using darken or lighten in Sass will parse your original hex value to an HSL value in order to make the adjustments. The reason for this I am not entirely familiar with, but for now that isn't as important. A general rule when I have worked with designers on a site design they generally like to stay within 5%-20% of the original color since things can get a little weird with the colors beyond that point.
darken($site-color, 10%)
lighten($site-color, 15%)
The rest of these options work essentially the same way as the darken or lighten mentioned above. I would try them out on your own to see if what values will work for you. ## Saturate or Desaturate Makes a color either more saturated or less saturated.
saturate($site-color, 10%)
desaturate($site-color, 10%)
## Adjust Hue Adjusts the hue of the color.
adjust-hue($site-color, 10%)
## Grayscale Takes a color and converts it to its grayscale equivalent.
 grayscale($site-color)
## Complement Returns a complementary color.
 complement($site-color)
## Invert Returns the inverse of the color.
 invert($site-color)
## Alpha Transparency In the past I have used RGBA color values in my CSS to change color transparency, because it is much harder to figure out a lighter color from a HEX value that will do the same. With Sass you can essentially do the same thing, but use the original HEX value and parse it into a RGBA value with a transparency.
rgba($site-color, .5)
## In The End With a few of these tricks you should be able to start building some relatively complex stylesheets and add some advanced skills to your own repertoire. You can use any number of these options to change gradients, create button backgrounds, and alter inset color values for framed boxes. If you're interested in what you can do with colors in Sass check out their [documentation](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html). At this point you can change a few base color variables and let Sass do all the heavy lifting. If you're a designer you might end up tweaking some of the percentages to fine tune your designs, but then again that usually happens in most redesigns.
Justin Hough author picture
Justin Hough

Chief Development Officer at Hounder. He is a Christian, husband, father, writer, developer, designer, and a digital carpenter crafting amazing web experience. Also, created the Centurion Framework many moons ago.