Adjust-hue for color rotation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the adjust-hue function do in Sass?

Choose the best description of what adjust-hue does to a color in Sass.

A It rotates the color's hue angle by a specified number of degrees on the color wheel.

B It changes the brightness of the color by a given percentage.

C It changes the saturation of the color by a given percentage.

D It converts the color to grayscale.

💡 Hint

Think about how colors are represented on a wheel and what rotating the hue means.

The adjust-hue function rotates the hue of a color by the specified degrees, moving it around the color wheel. It does not affect brightness or saturation.

📝 Syntax

intermediate

What is the output color of this Sass code?

Given the Sass code below, what is the resulting color in hex format?

$base-color: #ff0000;
$result: adjust-hue($base-color, 120deg);

SASS

$base-color: #ff0000;
$result: adjust-hue($base-color, 120deg);

A #0000ff

B #ffff00

C #ff00ff

D #00ff00

💡 Hint

Red rotated by 120 degrees on the color wheel becomes which primary color?

Rotating red (#ff0000) by 120 degrees on the hue wheel results in green (#00ff00).

❓ rendering

advanced

Which Sass code snippet produces a blue color by rotating red's hue?

You want to create a blue color by rotating the hue of red (#ff0000). Which code snippet correctly does this?

A $color: adjust-hue(#ff0000, 60deg);

B $color: adjust-hue(#ff0000, 120deg);

C $color: adjust-hue(#ff0000, 240deg);

D $color: adjust-hue(#ff0000, -120deg);

💡 Hint

Blue is 240 degrees away from red on the hue wheel.

Rotating red (#ff0000) by 240 degrees on the hue wheel results in blue (#0000ff).

❓ selector

advanced

Which CSS selector targets elements with a background color adjusted by adjust-hue in Sass?

Given this Sass code, which CSS selector will match the elements styled with the adjusted hue background?

.btn {
  background-color: adjust-hue(#ff0000, 180deg);
}

A .btn:hover

B .btn

C #btn

D button.btn

💡 Hint

Look at the class name used in the Sass code.

The Sass code styles elements with the class btn. So the selector .btn matches those elements.

❓ accessibility

expert

How does using adjust-hue affect color contrast for accessibility?

If you use adjust-hue to rotate a color's hue, what should you check to maintain good accessibility?

A Ensure the rotated color still has sufficient contrast ratio against the background for readability.

B Only check the hue angle; contrast is not affected by hue changes.

C Adjust-hue automatically improves contrast, so no checks are needed.

D Use adjust-hue only on text colors, not backgrounds.

💡 Hint

Think about how color contrast affects people with vision impairments.

Rotating hue changes the color but may reduce contrast. Always verify contrast ratios to keep text readable and accessible.