The Perfect Sunset, Part I: Better Colors With Sass

Posted

Sass is a great tool for making web design much easier. It can take away a lot of the complexity and banality of styling a site, and this is especially evident when it comes to managing your site’s colors. Before I get too far into this, just know that my code examples may not be complete, but just a little experience with Sass will go a long way. Other than that, I hope that this is easy to digest.

The most obvious way to manage colors is to map your pesky hexadecimal, rgb(a), or hsl(a) color declarations to key words that are easy to remember. You can do this with so-called variables (though in this case they are actually constants, because they don’t vary). I’ve seen a couple naming conventions come out of this:

  • Name your colors literally after the color. For example if your primary brand color was #c00d48, maybe you could call it $scarlet.
  • Name your colors after the role they play. In this case, you might name your color $brand-primary. This way, if your brand color ever changed to something distinctly not scarlet, like, say emerald, you wouldn’t have to find-and-replace all of the instances of $scarlet in your stylesheets (or, alternatively, bear that cognitive dissonance).

I personally prefer the former, because

  • It’s easier to think about.
  • It’s unrealistic to assume you can just wholesale replace one color for a completely different color in most instances.
  • Gosh darn it, it just feels more human.

The latter is particularly good with frameworks, however, so that might be something to consider.

Let’s pick some colors and map them to some Sass constants now. I’m using HSL, because I want to be explicit about the lightness value, which will come up later.

Hulkberry Crunch Color Palette
$hulk $berry $crunch
hsl(113, 100%, 70%); hsl(267, 100%, 35%); hsl(38, 100%, 50%);

Now, we might be able to do something cool with this vibrant color scheme, but chances are we’re going to be using a lot of variations on these colors. Sometimes we might want a very light version of a color, and sometimes we might want a very dark version. As it turns out, we don’t have to do any work, because Sass can do this for us.

Using Sass To Lighten And Darken Colors

If we want to lighten $hulk, all we have to do is pass that value into a Sass function called lighten(), along with the amount that we’d like to lighten the color in percent. For example, if we wanted to lighten $hulk by 10%, we’d write lighten($hulk, 10%);. Done and done. Darken works the same way, but in reverse. Let’s go ahead and lighten each of our colors from 10% to 100%, and do the same with darkening.

I’ve indicated the resulting luminosity value in each cell.

Lightening Hulkberry Crunch
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
70% 80% 90% 100% 100% 100% 100% 100% 100% 100% 100%
35% 45% 55% 65% 75% 85% 95% 100% 100% 100% 100%
50% 60% 70% 80% 90% 100% 100% 100% 100% 100% 100%
Darkening Hulkberry Crunch
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
70% 60% 50% 40% 30% 20% 10% 0% 0% 0% 0%
35% 25% 15% 5% 0% 0% 0% 0% 0% 0% 0%
50% 40% 30% 20% 10% 0% 0% 0% 0% 0% 0%

You might have spotted a problem. We don’t exactly have an even range of colors. As the colors get lighter, they eventually top out at white, which makes lightening them any further a moot point. Likewise, when darkening our colors, eventually they reach a point of being perfect black, and after that they can’t get any darker.

How do you know how far you need to push your colors before they max out? In order to figure that out, you need to know the luminosity value of each of your colors. Three colors isn’t that hard to memorize, but imagine if you had five colors, or seven, or more? Wouldn’t it be nice to not have to know the luminosity of any color at all?

Using Sass To Tint And Shade Colors

Now let’s think about lightening a color with paint. Straight out of the bottle, you have no way of knowing what the luminosity of that color is. Instead, if you’re going to take your color and make it lighter, you tint it with white paint. And that’s just what we’re going to do with Sass’s mix() function. mix() is only just slightly more complicated than lighten: it accepts two color values and a percentage. If we wanted to tint $hulk by half (or what we expect lightening to look like), you would write mix(white, $hulk, 50%);.

If you were going to darken $crunch almost to black, called shading, you would write mix(black, $crunch, 95%);. With this way, you always know that 95% black is almost-but-not-quite black, no matter which color you’re mixing in. Only when you hit 100% black will it become actual black.

The benefit here is that you now get full color tables for each one of your colors, which gives you a lot more flexibility to play around, and a lot more confidence that you’re not going to blow out your colors. In the example below, I have indicated the luminosity values, but the main takeaway here is that you don’t need to know them at all!

Tinting Hulkberry Crunch
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
70% 73% 76% 79% 82% 85% 88% 91% 94% 97% 100%
35% 41% 48% 54% 61% 67% 74% 80% 87% 93% 100%
50% 55% 60% 65% 70% 75% 80% 85% 90% 95% 100%
Shading Hulkberry Crunch
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
70% 63% 56% 49% 42% 35% 28% 21% 14% 7% 0%
35% 32% 28% 25% 21% 17% 14% 10% 7% 3% 0%
50% 45% 40% 35% 30% 25% 20% 15% 10% 5% 0%

I believe that in most cases, designers will want to default to tinting and shading their colors and not using the lighten() and darken() functions that Sass natively provides. You can write your own tint() and shade() mixins, but in the end it doesn’t save you a lot of typing. However, with new technology like this, there comes new territory to explore, so continue to part two: Luminous Colors With Sass, where I’ll show you how to take your colors to the next level.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →