Adjust-hue for color rotation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the adjust-hue function do in Sass?

It changes the hue of a color by rotating it around the color wheel by a specified number of degrees.

beginner

How do you use adjust-hue to make a color 90 degrees more blue?

Use adjust-hue($color, 90deg) to rotate the hue 90 degrees on the color wheel, shifting the color towards blue.

intermediate

What happens if you pass a negative value to adjust-hue?

The hue rotates backward on the color wheel by that many degrees, shifting the color in the opposite direction.

intermediate

Example: adjust-hue(#ff0000, 120deg) results in which color?

It results in a green color because red rotated 120 degrees on the hue wheel moves to green.

beginner

Why is adjust-hue useful in web design?

It helps create color variations easily by shifting hues without manually picking new colors, keeping harmony in design.

What unit should you use with the adjust-hue function in Sass?

A Degrees (deg)

B Pixels (px)

C Percent (%)

D Em (em)

The adjust-hue function rotates the hue by degrees on the color wheel, so degrees (deg) is the correct unit.

If you want to make a color more yellow by rotating its hue, which value might you use?

A Adjust hue by +60deg

B Adjust hue by -60deg

C Adjust hue by +180deg

D Adjust hue by 0deg

Yellow is about 60 degrees from red on the hue wheel, so adding +60deg shifts the color towards yellow.

What color do you get if you adjust the hue of pure blue (#0000ff) by 180 degrees?

A Red

B Yellow

C Green

D Cyan

Rotating blue by 180 degrees on the hue wheel lands on yellow.

Which Sass function would you use to rotate a color's hue?

A lighten()

B darken()

C adjust-hue()

D saturate()

adjust-hue() is the function designed to rotate the hue of a color.

What happens if you use adjust-hue($color, 360deg)?

A Color becomes white

B Color becomes black

C Color becomes transparent

D Color stays the same

Rotating hue by 360 degrees brings the color back to its original hue.

Explain how the adjust-hue function works and give an example of when you might use it.

Think about how colors change when you move around the color wheel.

Describe the difference between using a positive and a negative value in adjust-hue.

Consider the direction you turn a wheel clockwise or counterclockwise.