But some of the coolest and most commonly-used functions are for programmatically manipulating colors. They can generate a perfectly-complementary color for another color, lighten or darken a color, and more. Beyond being fun to use, these functions can save us time, keep code DRY, and make styles easier to reuse later. Let's check 'em out.
Before we dig into the list of available functions, let's watch the following two videos to familiarize ourselves with what these functions do, and where/how they're used in a basic Sass stylesheet:
Now that we've seen what these color functions are capable of, let's review some of the most common.
The following four are basic functions used to tweak existing colors, as seen in the videos above:
lighten(color, amount): Returns a lighter version of a given color.
darken(color, amount): Returns a darker version of a color.
saturate(color, amount): Returns a more saturated version of a color.
desaturate(color, amount): Returns a less saturated version of a color.
Each takes two arguments;
100%denoting how drastic the change should be.
We can see the result of these functions in online Sass color generators like this one. For instance, if we wrote a line of Sass like this:
$primary-color: #ef4422; $lighter-primary-accent: lighten($primary-color, 20%);
$lighter-primary-accent variable would contain the color
#f69481, as can be seen here:
adjust-hue(color, degrees) method can also tweak the hue of a color. It takes two arguments; a valid color, and a number of degrees between
360 followed by
deg (for instance,
adjust-hue(#811, 45deg), or
adjust-hue($secondary-color, 200deg)). These degrees refer to how far we want to move the color's hue along the color wheel.
The following are used to drastically manipulate provided color value(s), essentially creating a new shade:
grayscale(color): Returns a color's grayscale equivalent.
complement(color): Returns the mathematically-perfect complementary shade of a provided color.
invert(color): Returns the inverse of a color.
mix(color1, color2): Returns the result of mixing two provided colors together.
The following make a shade more or less opaque. They each take two arguments. The first represents a color value, and the second represents a number between
opacify(color, amount): Returns a more opaque version of a provided color.
transparentize(color, amount): Returns a more transparent version.
Like basic programming methods, any of these color functions can be chained together too. For instance, the following is totally valid Sass syntax:
$new-color: saturate(lighten($old-color, 50%), 10%);
Being able to programmatically manipulate our styles' color values like this is really powerful. Not only does it allow us to save time tracking down and manually inserting colors' hex or RGB values, it makes our styles really reusable and maintainable too.
If we define all colors as variables, minimize the number of hard-coded hex or RGB values, and programmatically define as many of those variables as possible based on these few hard-coded values, we can generate a whole stylesheet with a specific color scheme, then later drastically change its entire color scheme by editing only a few hardcoded values. No tracking down new hex values, using calculators and palettes to locate their complementary colors, or similar shades, and no re-writing large chunks of code.
The Sass Color Generator, mentioned above, allows us to insert any hex value to see what shades can be produced by using
desaturate() upon it.
Jim Nielson's SassMe color generator allows us to select any two valid hex colors to receive the necessary Sass logic to turn one into the other. For instance, the blue shade on the left of this image will transform into the pink shade on the right with this single line of code:
adjust_hue(desaturate(lighten(#04568b, 35), 38), 124).
Similar to the generator above, this generator on CodePen will output the Sass necessary to turn any provided shade into a programmatically-created color scheme.
Color functions are considered the most useful, and widely-used Sass functions. However, there are more too. Check out the Sass documentation on functions for the full list.
Interested in learning more about this topic? We recommend the following resources:
Hugo Giraudel's How to programmatically go from one color to another in Sass discusses some clever tricks for using built-in Sass functions to programmatically generate color schemes mathematically guaranteed to be complementary. Read through this resource, and give it a shot in a project of your own.
And, if the idea of creating functions to generate color schemes interests you, try the tips recommended in Sebastian Ekstroem's How to dynamically change text color based on a background color too!
Lesson 2 of 36
Last updated more than 3 months ago.