Saturate and desaturate in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the saturate() function do in Sass?

It increases the color's saturation, making the color look more vivid or intense.

beginner

What effect does the desaturate() function have on a color in Sass?

It decreases the color's saturation, making the color look more gray or dull.

beginner

How do you use saturate() in Sass? Provide a simple example.

Example: <br>color: saturate(#6699cc, 20%); <br>This makes the blue color 20% more saturated.

intermediate

What happens if you saturate a fully saturated color in Sass?

The color stays the same because it cannot get more saturated than 100%.

intermediate

Why is controlling saturation useful in web design?

It helps create mood and focus by making colors more vivid or muted, improving user experience and visual hierarchy.

What does desaturate(#ff0000, 50%) do to the color?

A Makes it 50% less saturated (more gray)

B Makes it 50% lighter

C Makes it 50% more red

D Makes it 50% darker

desaturate() reduces the saturation, so the red becomes less vivid and more gray.

Which Sass function increases color intensity?

A lighten()

B desaturate()

C darken()

D saturate()

saturate() increases the saturation, making colors more vivid.

If a color is fully desaturated, what color is it?

A Black

B Gray

C Original color

D White

A fully desaturated color loses all color and becomes gray.

What unit is used to specify saturation change in saturate() and desaturate()?

A Percent (%)

B Pixels

C Degrees

D Em units

Saturation changes are given as percentages.

Which Sass function would you use to make a color less vivid?

A lighten()

B saturate()

C desaturate()

D adjust-hue()

desaturate() reduces saturation, making colors less vivid.

Explain how saturate() and desaturate() affect colors in Sass and why you might use them.

Think about how colors look more bright or dull.

Describe a real-life example where you would use desaturate() in a website design.

Consider how dull colors can help focus on important content.