The adjust-hue
function can produce exactly the same effect as complement:
background-color: adjust-hue($color1, 180deg);
However, with adjust-hue
, it's possible to vary the color produced by varying the degree of hue (it can be a positive or negative value). Let's use this on the third list item:
background-color: adjust-hue($color1, 90deg);
Here is the generated CSS:
.chapter-summary:nth-child(3) a { background-color: #80ff00; }
The following screenshot shows what that gives us in the browser:
The adjust-hue
function can be applied to any color value. It can accept a degree range from 0 to 360 (in CSS the degree is written as 20deg
or 290deg
for example).