The adjust-color function

The adjust-color function allows manipulation of any color property. It's possible to adjust the red, green, and blue (properties that make up colors in RGB color space) or the hue, saturation, or lightness of a color (properties that make up colors in HSL color space). The alpha layer of a color can also be adjusted. It's not the simplest color function, but it does provide an amazing amount of granularity.

Each adjustable color property has a relevant keyword argument:

• $red, $green, $blue: The values for red, green, and blue should be a number between 0 and 255

• $hue: The hue value should be a plus or minus number for degrees on a color wheel between 0 and 359

• $saturation, $lightness: Saturation and lightness should be a percentage as a plus or minus between 0 and 100

• $alpha: A number between 0 and 1

That's a lot to take in, so let's consider some examples:

background-color: adjust-color($color1, $hue:40);

The preceding code takes the color and adjusts the hue property...