Manipulating Sass Colors With Operators And RGB Functions

Posted: 26 Jul 2016 05:30 AM PDT

It's been a few years since I started working with Sass and while there are a lot of reasons why I continue to use it, the built-in color functions are easily among my favorite features of the language. You can use them to mix two colors or lighten or darken another color. You can even use them to build complex color schemes from a single color.

The last few weeks, I've been talking about data types in Sass. I began with an overview and the last few weeks I've dug into the number and string data types.

You might have found those posts a little dry and wondered where you might make use of all the things you could do with numbers and strings. I suspect you won't feel the same when it comes to the color data type and the the functions Sass provides for working with color.

Colors in Sass

When you set color values, you probably use hexadecimal or RGB values most of the time based on whichever you prefer using. CSS actually provides a number of ways to specify colors and you can use any valid CSS color expression in Sass.

For example here are a few ways to set something as red.

1  2  3  4  5  6  7

color: red;    color: #f00;    color: #ff0000;    color: rgb(255, 0, 0);    color: rgba(255, 0, 0, 1);    color: hsl(0, 100, 50);    color: hsla(0, 100, 50, 1);

All of the above ways to set the color red work fine. However, written in Sass they may not all output the way you would expect. Sass prefers to output the smallest CSS representation of a color, especially when output in compressed mode.

In compressed mode all of the above will compile to color: red;. Even in expanded mode, which I've been using, the majority of the above colors will output as red. The exceptions are the two hexadecimal colors, which output as hexadecimal.

In general that's not going to be a big deal as the color will still be the same, but it's something to be aware of, since it probably goes against your expectation.

In some cases there's nothing smaller than what's been specified and Sass will output exactly what you've written:

1	color: rgba(255, 0, 0, 0.5);

compiles to:

1	color: rgba(255, 0, 0, 0.5);

Aside from the compressing of color values to their smallest possible value, you'll likely set colors the same way you do now as either a hexadecimal value or an RGB(a) value, with an occasional named color. Don't dismiss setting colors as HSL(a), though.

Sass Color Operations

You can use any arithmetic operation on color values. However, know that the operation will be performed on each of the color components separately. For example the red channel of one color is added to the red channel of another color, green is added to green, and blue is addd to blue.

1  2  3

h1 {      color: #020406 + #020406;    }

compiles to:

1  2  3

h1 {     color: #04080c;    }

Red: 02 + 02 = 04
Green: 04 + 04 = 08
Blue: 06 + 06 = 0c

Odds are you won't use arithmetic operations on colors and will instead use Sass color functions to manipulate them. I'll cover some functions momentarily and more next week.

You can combine colors and numbers in arithmetic operations.

1  2  3

h1 {      color: #020406 * 2;    }

which compiles to:

1  2  3

h1 {     color: #04080c;    }

The important thing to remember is the operation occurs over one component of color at a time.

Colors with alpha channels must have the same alpha value if you want to perform arithmetic operations on them. However, no math is done on the alpha component of the colors, only the red, green, and blue components.

1  2  3

h1 {      color: rgba(137, 0, 255, 0.9) + rgba(0, 90, 0, 0.9);    }

compiles to:

1  2  3

h1 {     color: rgba(137, 90 255, 0.9);    }

The above works because the alpha channels are the same. That's not the case for the next example.

1  2  3

h1 {      color: rgba(137, 0, 255, 0.9) + rgba(0, 90, 0, 0.8);    }

With this example you would receive an error on compile because one alpha channel is 0.9 while the other is 0.8.

You can manipulate the alpha components of different colors, but you need to work with Sass color functions to do so. And since the functions are the best part about working with color in Sass, let's start talking about them.

Sass Color Functions

Sass offers four different groups of color functions.

RGB Functions
HSL Functions
Opacity Functions
Other Color Functions

I'll walk through the RGB functions today and then I'll cover the remaining functions next week.

RGB Color Functions

Sass includes six built-in functions for working with RGB color. The first two functions enable you to set colors with rgb values.

You can set a color in rgb using either rgb($red, $green, $blue) or rgba($red, $green, $blue, $alpha) if you want to include an alpha component. These work the same was as in CSS where you'd provide a value between 0 and 255 for each of the three color channels and then a value between 0.0 and 1.0 for the alpha component, if you want to include one.

1  2  3  4

p {     color: rgb(255, 0, 0);     background: rgb(0, 255, 0, 0.5)    }

The above would leave the text in paragraphs as a bright red on a 50% opaque green background and I don't recommend using this color combination as it would cause accessibility issues even if the colors did look good together.

What's perhaps more interesting than using rgb to set a color value, is getting the red, green, or blue component of a color that hasn't been set in rgb using the red($color), green($color), and/or blue($color) functions

1  2  3

red(#906bc0) => 144    green(#906bc0) => 107    blue(#906bc0) => 192

In other words #906bc0 and rgb(144, 107, 192) are the same color written in different color notations.

You can also get the color component from an HSL value.

1	red(hsl(0, 100%, 50%)) => 255

Which makes sense as hsl(0, 100%, 50%) is pure red.

The last RGB function, mix($color1, $color2, [$weight]), might be the most interesting as it allows you to mix two colors and even weight how much of each to use in the mix.

The weight is optional. When not present the function takes the average of each of the rgb components from the different colors. When the weight is present, the opacity of the colors is also considered in the mixing process

1  2  3

h1 {     color: mix(#f00, #00f);    }

compiles to:

1  2  3

h1 {     color: purple; // #800080    }

In hexadecimal notation 8 is half of f and so the average of f and 0 is 8 and the result of mixing is #800080 or the named color purple.

When a weight is included in the function it's given as a percentage and it tells the function how much of the first color to include in the mix. Setting the weight to 25% says mix 25% of the first color with 75% of the second color.

1  2  3

h1 {     color: mix(#f00, #00f, 25%);    }

which compiles to:

1  2  3

h1 {     color: #4000bf;    }

Note that I set the weight as 25% and not 0.25 which would be interpreted as 0.25% and not 25% as you might expected. The default weight is 50% so if it's not included you'll get an equal amount of each color in the mix.

Closing Thoughts

You can use the same colors you use in CSS with Sass. You can set your colors in hex, rgb(a), hsl(a) notation or use named colors like red, green, and blue.

Sass let's you perform mathematical operations on colors, though be aware these operations are done on a per color channel basis and as long as all the colors involved have the same alpha value.

The built-in RGB functions allow you to set colors in rgb, get the rgb components from a color no matter how it's set, and perhaps most interesting of all, mix two colors together equally or using more of one than the other.

Next week I'll walk you through the rest of the Sass color functions, including my favorite, the HSL color functions.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.