Complement and invert functions in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the complement() function do in Sass?

The complement() function returns the opposite color on the color wheel. It helps create contrasting colors by flipping the hue by 180 degrees.

beginner

How does the invert() function work in Sass?

The invert() function reverses the red, green, and blue values of a color, producing its negative. It keeps the alpha (transparency) the same.

intermediate

What is the difference between complement() and invert() in Sass?

complement() changes the hue by 180° on the color wheel, creating a color opposite in tone. invert() flips the RGB values to create a photographic negative of the color.

beginner

Write a Sass code snippet to get the complement of #3498db.

$color: #3498db; $complement-color: complement($color); // $complement-color will be a color opposite to #3498db on the color wheel

beginner

What visual effect does using invert() on a color create?

Using invert() creates a color that looks like a photographic negative. Light colors become dark, and dark colors become light, but the transparency stays the same.

What does the Sass complement() function do?

A Inverts the RGB values of a color

B Changes the alpha transparency

C Returns the color opposite on the color wheel

D Lightens the color by 50%

complement() flips the hue by 180 degrees to get the opposite color on the color wheel.

Which Sass function creates a photographic negative of a color?

A invert()

B darken()

C lighten()

D complement()

invert() reverses the RGB values, producing a negative of the color.

If you apply invert() to a fully transparent color, what happens to the transparency?

A It becomes fully opaque

B It stays the same

C It becomes half transparent

D It becomes fully transparent black

The alpha (transparency) value remains unchanged when using invert().

Which function would you use to find a color that contrasts well with a given color?

A desaturate()

B invert()

C saturate()

D complement()

complement() gives a color opposite on the color wheel, which usually contrasts well.

What happens to the hue when you use complement() on a color?

A It shifts by 180 degrees

B It shifts by 90 degrees

C It stays the same

D It becomes grayscale

The hue shifts by 180 degrees to get the complementary color.

Explain in your own words how the complement() and invert() functions differ in Sass.

Think about color wheel vs RGB values.

Describe a real-life situation where you might use the complement() function in a web design project.

Think about how opposite colors catch attention.

Practice

1. What does the complement() function in Sass do to a color?

easy

A. It returns the opposite color on the color wheel.

B. It inverts the RGB values of the color.

C. It makes the color lighter by 50%.

D. It changes the color to grayscale.

Solution

1. Step 1: Understand the complement function

   The complement() function returns the color opposite on the color wheel, creating contrast.

2. Step 2: Differentiate from invert function

   The invert() function flips RGB values, not the color wheel position.

3. Final Answer:

   It returns the opposite color on the color wheel. -> Option A

4. Quick Check:

   Complement = opposite color on wheel [OK]

Hint: Complement = opposite color on wheel, invert = flips RGB [OK]

Common Mistakes:

• Confusing complement with invert function
• Thinking complement changes brightness
• Assuming complement makes grayscale

2. Which of the following is the correct syntax to complement a color $color in Sass?

easy

A. invert($color)

B. invert-color($color)

C. complement($color)

D. color-invert($color)

Solution

1. Step 1: Recall Sass complement function syntax

   The correct function to complement colors in Sass is complement() with the color as argument.

2. Step 2: Check other options

   invert() does not exist as built-in, others are invalid function names.

3. Final Answer:

   complement($color) -> Option C

4. Quick Check:

   complement() is the correct function name [OK]

Hint: Complement function is simply complement(color) in Sass [OK]

Common Mistakes:

• Using invert() instead of complement()
• Adding extra words like invert-color()
• Confusing function names

3. What color will be the result of complement(#000000) in Sass?

medium

A. #000000

B. #ff0000

C. #ffffff

D. #808080

Solution

1. Step 1: Understand complement function on black

   Black is #000000 (HSL 0, 0%, 0%). Complement adds 180° to hue but with 0% saturation and lightness, remains black.

2. Step 2: Confirm result

   Achromatic colors like black have complement as themselves: #000000.

3. Final Answer:

   #000000 -> Option A

4. Quick Check:

   Complement black = black (#000000) [OK]

Hint: Complement black (#000000) always gives black (#000000) [OK]

Common Mistakes:

• Thinking complement inverts to white
• Confusing complement with RGB invert
• Choosing gray (#808080) for achromatic

4. Consider this Sass code:

$color: #123456;
$comp: complement($color);
$inv: invert($color);

Which line will cause an error?

medium

A. None of the above

B. $inv: invert($color);

C. $comp: complement($color);

D. $color: #123456;

Solution

1. Step 1: Check variable assignment syntax

   $color: #123456; uses correct Sass syntax.

2. Step 2: Verify complement usage

   complement($color) is a valid built-in Sass function.

3. Step 3: Check invert

   invert($color) causes error: no built-in invert() function (requires @use 'sass:color' as color; color.invert($color)).

4. Final Answer:

   $inv: invert($color); -> Option B

5. Quick Check:

   invert() undefined without module [OK]

Hint: invert() not built-in like complement() [OK]

Common Mistakes:

• Thinking invert() is valid like complement()
• Assuming intuitive function names exist
• Overlooking module requirements for newer functions

5. You want to create a button with a background color $btn-color and text color that is the complement of $btn-color. Which Sass code correctly sets the text color?

hard

A. color: invert($btn-color);

B. color: darken($btn-color, 50%);

C. color: lighten($btn-color, 50%);

D. color: complement($btn-color);

Solution

1. Step 1: Identify the goal

   The text color should be the complement of the button background color for contrast.

2. Step 2: Choose the correct function

   complement() returns the opposite color on the color wheel, ideal for contrast.

3. Step 3: Exclude other options

   invert() not built-in; lighten/darken adjust brightness, not hue.

4. Final Answer:

   color: complement($btn-color); -> Option D

5. Quick Check:

   Complement gives opposite color for readable text [OK]

Hint: Use complement() for opposite color, perfect for text contrast [OK]

Common Mistakes:

• Using invert() expecting perfect contrast
• Lighten or darken changes brightness, not hue
• Confusing complement with invert