photo credit: Wooden colours via photopin (license)

A small SCSS function to help you with your colors

Tags: ,

When I am templating a website, I use colors. A lot of those colors have different shades. For example, the color red can also come in dark- or in light red. Usually I solved this by creating different variables like this:

Later on, I changed to sass maps and a corresponding function:

Today I wrote a small SCSS function that added some steroids to the get-color()  function to make it more awesome. Let’s have a look:

The function

Take a look at this function:

Now we only have to declare our base color once, and we can automatically calculate the darker and lighter variants, just by requesting them by name:

Easy huh?

In conclusion

Now this function is pretty clear and straight-forward, but I thought it would be fun to share this with you guys. Of course there are always some limitations. For example: the colors calculated might not match your original design 100%, and you might want to tweak the values in get-color()  a bit, but in my opinion it makes managing your colors (and your templates’ consistency) a lot easier. Most of the time when projects get bigger and bigger, the color swatches also grow exponentially and your pallet starts to look like 50 shades of … well anything actually. A nifty method like this could help with keeping it clever and clean.

Visitors give this article an average rating of 2.5 out of 5.

How would you rate this article?

Leave a Reply