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 between0
and255
$hue
: The hue value should be a plus or minus number for degrees on a color wheel between0
and359
$saturation
,$lightness
: Saturation and lightness should be a percentage as a plus or minus between0
and100
$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...