Adjust-hue for color rotation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to rotate the hue of the color by 90 degrees using adjust-hue.

SASS

$new-color: adjust-hue($base-color, [1]);

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

A90

Bhue(90)

Cdeg90

D90deg

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'deg' unit to the hue rotation value.

Using a string like 'hue(90)' instead of a number.

The adjust-hue function takes the hue rotation as a number in degrees without the unit. So 90 is correct.

2fill in blank

medium

Complete the code to rotate the hue of the color by -45 degrees using adjust-hue.

SASS

$rotated-color: adjust-hue($color, [1]);

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

A45

B-45deg

C-45

Ddeg-45

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'deg' unit in the value.

Using a positive number instead of negative.

Use a negative number without units to rotate the hue backward by 45 degrees.

3fill in blank

hard

Fix the error in the code to correctly rotate the hue by 180 degrees.

SASS

$final-color: adjust-hue($input-color, [1]);

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

A180deg

Bhue(180)

Cdeg180

D180

Attempts:

3 left

💡 Hint

Common Mistakes

Using '180deg' instead of '180'.

Adding extra text like 'hue(180)'.

The adjust-hue function requires a number without units. So 180 is correct.

4fill in blank

hard

Fill both blanks to create a map of colors with hue rotated by 30 and 60 degrees.

SASS

$colors: ("light": adjust-hue($base, [1]), "dark": adjust-hue($base, [2]));

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

A30

B60

C30deg

D-60

Attempts:

3 left

💡 Hint

Common Mistakes

Using '30deg' or '60deg' instead of just numbers.

Using negative values where positive are needed.

Use numbers without units for both hue rotations: 30 and 60.

5fill in blank

hard

Fill all three blanks to create a map with hue rotated by 15, -15, and 45 degrees.

SASS

$palette: ("warm": adjust-hue($color, [1]), "cool": adjust-hue($color, [2]), "neutral": adjust-hue($color, [3]));

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

A15

B-15

C45

D15deg

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'deg' units in the values.

Using positive instead of negative for the second blank.

Use numbers without units for all hue rotations: 15, -15, and 45.