Saturate and desaturate in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to increase the saturation of the color by 20%.

SASS

$color: #6699cc;
$new-color: saturate($color, [1]);

Drag options to blanks, or click blank then click option'

A20%

B50%

C10%

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value without the percentage sign.

Using a value too high like 100% which might be too strong.

The saturate function increases the saturation of a color by the given percentage. Here, 20% increases the color's saturation moderately.

2fill in blank

medium

Complete the code to decrease the saturation of the color by 30%.

SASS

$color: #ff6600;
$new-color: desaturate($color, [1]);

Drag options to blanks, or click blank then click option'

A30%

B10%

C50%

D70%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value too small to see a difference.

Confusing saturate and desaturate functions.

The desaturate function reduces the saturation of a color by the specified percentage. Here, 30% reduces the saturation noticeably.

3fill in blank

hard

Fix the error in the code to correctly saturate the color by 40%.

SASS

$color: #00cc99;
$new-color: saturate($color[1]40%);

Drag options to blanks, or click blank then click option'

A.

B,

C;

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using a colon or semicolon instead of a comma.

Omitting the comma entirely.

The saturate function requires a comma between the color and the percentage value.

4fill in blank

hard

Fill both blanks to create a color that is first saturated by 25% and then desaturated by 10%.

SASS

$color: #336699;
$step1: saturate($color, [1]);
$final-color: desaturate($step1, [2]);

Drag options to blanks, or click blank then click option'

A25%

B10%

C15%

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the percentages between saturate and desaturate.

Using values that are too large causing unexpected colors.

First, the color is saturated by 25%, then the result is desaturated by 10% to adjust the saturation stepwise.

5fill in blank

hard

Fill all three blanks to create a map of colors with keys as uppercase color names and values as colors desaturated by 20%.

SASS

$colors: ([1]: desaturate(red, [2]), [3]: desaturate(blue, 20%));

Drag options to blanks, or click blank then click option'

ARED

B20%

CBLUE

D30%

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase keys instead of uppercase.

Using wrong percentages causing inconsistent desaturation.

The keys are uppercase color names RED and BLUE. The values are the colors desaturated by 20%. The second blank is the desaturation percentage for red.