Manipulating Sass Colors With HSL And Opacity Functions

Posted: 02 Aug 2016 05:30 AM PDT

One of my favorite aspects of Sass is how easy the functions make it to work with colors. When I've studied color as a designer I learned color in HSL. When I've worked with color in CSS, it's been either hexadecimal or rgb(a) values. The color functions in Sass helped me to bridge the gap between the different notations.

For the last few weeks, I've been talking about data types in Sass. I started with an overview before digging into the number data type and the string data type. Last week I began looking at colors in Sass and I'll finish today covering the remaining color functions I didn't get to last time.

I covered the RGB functions last week. This week I'll walk you through the HSL functions, the opacity functions, and a few other functions that don't fall under any of the other groups.

HSL Color Functions

Sass includes a larger set of HSL functions than it does RGB functions, though don't worry if you don't work with HSL colors much. Aside from the functions for setting HSL colors, you can use any type of color notation with these functions.

You can set an HSL color using either the hsl($hue, $saturation, $lightness) or hsla($hue, $saturation, $lightness, $alpha) functions.

1  2  3  4

p {     color: hsl(0, 100%, 50%);     background: hsl(120, 100%, 25%, 0.5)    }

This would lead to the same horrible red on green combination for paragraphs as in my example from last week.

The same way Sass provides functions to get the red, green, or blue component of RGB colors, it provides three functions for getting each of the three components of HSL colors. Use the hue($color), saturation($color), and/or lightness($color) functions to determine the specific component you want to know. I used all three myself a moment ago to determine the HSL value for green.

1  2  3

hue(green) => 120deg    saturation(green) => 100%    lightness(green) => 25.0980392157%

Where the RGB functions give you one way to actually manipulate an existing color, the HSL functions give you eight.

You can adjust the hue of any color using the adjust-hue($color, $degrees) function. You can specify the color using any notation and you can add the deg unit or not to the $degrees value. Sass will ignore whatever units you add and use degrees instead. Try adjusting a hue by 120px and 120% to see what I mean.

1  2  3

h1 {     color: adjust-hue(red, 120deg);    }

compiles to:

1  2  3

h1 {     color: lime; // hsl(120, 100%, 50%)    }

Sass offers two functions to manipulate the saturation of a color. saturate($color, $amount) will increase the saturation by $amount and desaturate($color, $amount) will reduce the saturation by $amount.

With either function $color can be a named color, a hexadecimal color, an rgb color or an hsl color. $amount must be a number

1  2  3  4

h1 {     color: saturate(hsl(0, 50%, 50%), 20%);     background: desaturate(hsl(0, 50%, 50%), 20%);    }

compiles to:

1  2  3  4

h1 {     color: hsl(0, 70%, 50%);     background: hsl(0, 30%, 50%);    }

There are also two functions to manipulate the lightness value of a color. lighten($color, $amount) increase the lightness by $amount and darken($color, $amount) decreases the lightness by $amount.

1  2  3  4

h1 {     color: lighten(hsl(0, 50%, 50%), 20%);     background: darken(hsl(0, 50%, 50%), 20%);    }

which compiles to:

1  2  3  4

h1 {     color: hsl(0, 50%, 70%);     background: hsl(0, 50%, 30%);    }

Even though I used hsl() colors in the last few examples, you can work with a named color, hex colors, or rgb colors if you prefer. I used hsl to make it clearer what value is being changed.

You can covert any color to grayscale using the grayscale($color) function

1  2  3

h1 {     color: grayscale(#97809c);    }

compiles to:

1  2  3

h1 {     color: #8e8e8e;    }

The grayscale function works by removing all saturation from the color so it's equivalent to using desaturate(color, 100%) if you prefer the desaturate function. Either can be a great way to test the accessibility of your color scheme.

You can find the complement of a color using the complement($color) function.

1  2  3

h1 {     color: complement(red);    }

which compiles to:

1  2  3

h1 {     color: cyan;    }

Since the complement of any color is 180 degrees away on the color wheel, you could use adjust-hue(color, 180deg) to do the same thing. I think the complement function makes it clearer what you're doing, but you can certainly use either.

Finally you can use the invert($color) function to find the inverse of a color, which is the color that most contrasts with the initial color. Sometimes this will be the same as the complementary color as in the case of red and cyan, but not always.

1  2  3  4

h1 {     color: invert(green);     background: complement(green);    }

which compiles to:

1  2  3  4

h1 {     color: #ff7fff;     background: purple;    }

Opacity Functions

Sass provides seven opacity functions. The first two functions get the alpha component of a color and the five others allow you to manipulate the alpha component or a color.

To get the alpha component use either the alpha($color) or opacity($color) functions. Both do the same thing. Each takes a color (in any notation) and returns the alpha component

1  2  3  4

alpha((rgba(255, 0, 0, 0.25));) => 0.25    opacity(rgba(255, 0, 0, 0.55)); => 0.55    alpha(green) => 1    opacity(#3399cc) => 1

The first function to change the alpha component, rgba($color, $alpha), might look like the RGB function to set a color, but note the parameters, $color and $alpha as opposed to parameters for the red, green, and blue color components.

1  2  3

h1 {     color: rbga(blue, 0.5);    }

which compiles to:

1  2  3

h1 {     color: rgba(0, 0, 255, 0.5);    }

You can make a color more opaque using either the opacify($color, $amount) or fade-in($color, $amount) functions. Both functions take a color in any notation and an amount between 0.0 and 1.0 and increase the opacity.

1 2	opacify(rgba(0, 0, 255, 0.5), 0.2); => rgba(0, 0, 255, 0.7); fade-in(rgba(255, 0, 0, 0.4), 0.1); => rgba(255, 0, 0, 0.5);

You can do the reverse and make a color more transparent using either the transparentize($color, $amount) or fade-out($color, $amount) functions.

1 2	transparentize(rgba(0, 0, 255, 0.5), 0.2); => rgba(0, 0, 255, 0.3); fade-out(rgba(255, 0, 0, 0.4), 0.1); => rgba(255, 0, 0, 0.3);

Other Color Functions

Sass also comes with four built-in functions for manipulating color that don't fall under one of the previous categories so they're grouped together as other functions.

The adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) function increases or decreases one or more components of a color. It takes a lot of optional parameters as you can see.

$color is the color you want to manipulate.
$red, $green, and $blue adjust the color channels and they can accept values between –255 and 255.
$hue adjusts the hue of the specified color. It's value must be in degrees, either positive or negative.
$saturation and $lightness adjust the saturation and lightness of the specified color. Both take values between –100% and 100%
$alpha adjusts the alpha component of the specified color and it takes a value between –1.0 and 1.0.

The function is a one stop function to adjust all the different components of a color.

1  2  3

adjust-color(#3399cc, $red: 3) => #3699cc    adjust-color(#3399cc, $red: -3, $blue: 9) => #3099d5    adjust-color(hsl(100, 50%, 70%), $lightness: 20%, $alpha: -0.5) => hsla(100, 50%, 90%, 0.5)

The change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) function looks similar to adjust-color() and it takes the same parameters however it works a little differently in that it doesn't adjust the color component, but resets it to the specified value.

$color is again the color to manipulate
$red, $green, and $blue take values between 0 and 255
$hue accepts any degree
$saturation and $lightness accept values between 0% and 100%
$alpha accepts values between 0.0 and 1.0

You can see the difference comparing the adjust-color examples above to the change-color examples below. Note that because change-color() sets the color, negative values aren't allowed, except for the hue which can be a negative number.

1  2  3

change-color(#3399cc, $red: 3) => #0399cc    change-color(#3399cc, $red: 5, $blue: 9) => #059909    change-color(hsl(100, 50%, 70%), $lightness: 20%, $alpha: 0.5) => hsla(100, 50%, 20%, 0.5)

The scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) is another similar looking function, that does something different.

The idea with scale-color() is to adjust the colors in a more fluid way. Where adjust-color alters color components by a fixed amount, scale-color() adjusts them based on how high or low they already are.

For example:

1	scale-color(hsl(0, 75%, 40%), $lightness: 50%) => hsl(0, 75%, 70%)

The lightness was 40% in the initial color and the $lightness parameter is set to 50%. That tells the function that the resulting lightness value should be 50% of the way between the initial value of 40% and it's maximum value of 100%

All the parameters, other than the color being manipulated accept only values between –100% and 100%.

1 2	scale-color(hsl(100, 50%, 60%), $lightness: 50%) => hsl(100, 50%, 80%) scale-color(hsl(100, 50%, 60%), $saturation: -80%, $alpha: -40%) => hsla(100, 20%, 60%, 0.6)

Because of the way it works, scale-color has a gradation effect where adjust-color has a step effect.

The final function ie-hex-str($color) converts a color into a format understood by Internet Explorer filters.

1  2  3

ie-hex-str(#abc) => #FFAABBCC    ie-hex-str(#3322BB) => #FF3322BB    ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

It's probably not the most useful function unless you find yourself working with a lot of IE filters. I've never used it myself and don't expect I will any time soon.

Closing Thoughts

Adding or subtracting colors might be a nice thing to do, I suspect the main way you'll manipulate colors in Sass is through the different color functions.

When I first learned about Sass' color functions my use of Sass immediately increased. I now often create color schemes using one to three different values and then use different functions to create variations of the initial colors. If you want you can create color schemes based on mathematical proportions, taking one color and lightening it or darkening by 10%, 20%, 30%, etc.

Next week I want to continue and talk about the list data type. Lists are similar to arrays and they're how Sass represents any series of values regardless of the data type of the values.

Download a free sample from my book Design Fundamentals.

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