Difference between complement and invert in SASS?

Question

I was going through SASS documentation and found that complement and invert have the same output, Can you tell me what is the difference between these two?

//SASS Code
$color:#ff0099;
$complement:complement($color);
//Returns the complement of a color.
$invert:invert($color);//Returns the inverse of a color.
.complement{background:$complement;}
.invert{background:$invert;}

//CSS
.complement {
    background: #00ff66;//Same Color Code
}

.invert {
    background: #00ff66;//Same Color Code
}

Answer 1

For some reason, many online examples for complement/invert use color values resulting in the same output for both functions.

While the complement/invert of many color values are the same, there are also many values that result in different colors.

Example:

$color: #ff6699;

complement($color)    = #66ffcc;
invert($color)        = #009966;

To re-word the Sass documentation:

Complement

Returns the color that is 180 degrees opposite on the HSL color wheel.

To calculate the complement of a color:

1. Convert the color value to RGB

   #ff6699 = RGB 255, 102, 153

2. Add the highest and lowest RGB values

   255 + 102 = 357

3. Subtract each of the original RGB values from the number in step #2

   (357-255) (357-102) (357-153)
102 255 204

4. This corresponds to #66ffcc

Invert

Returns the inverted red, green, and blue values of the color.

To calculate the invert of a color:

1. Convert the color value to RGB

   #ff6699 = RGB 255, 102, 153

2. Flip the values by subtracting the original RGB values from 255

   (255-255) (255-102) (255-153)
0 153 102

3. This corresponds to #009966