Adjust-hue for color rotation in SASS - Browser Rendering Trace

Render Flow - Adjust-hue for color rotation

Read SCSS file

↓

Parse adjust-hue function

↓

Calculate new hue angle

↓

Convert color to HSL

↓

Rotate hue by given degrees

↓

Convert back to RGB

↓

Apply new color to element

↓

Render updated color on screen

Sass compiles the SCSS, calculates the new hue by rotating the original color's hue angle, then the browser applies the updated color from the CSS to the element for rendering.

Render Steps - 3 Steps

Code Added:background-color: $base-color;

Before

[__________]
|          |
|          |
|          |
|          |
|__________|
(Color box with no background color, appears transparent or default)

→

After

[##########]
|########||
|########||
|########||
|########||
|########||
(Color box filled with blue color #3498db)

The box now has a solid blue background color, making it visible and distinct.

🔧 Browser Action:Paint background color, trigger reflow and repaint

Code Sample

A square box with a blue background color that changes to a purplish color when the hue is rotated by 90 degrees.

SASS

<div class="color-box">Color Box</div>

SASS

$base-color: #3498db;
.color-box {
  width: 10rem;
  height: 10rem;
  background-color: $base-color;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 1rem;
}
.color-box.adjusted {
  background-color: adjust-hue($base-color, 90deg);
}

Render Quiz - 3 Questions

After applying step 2, what color change do you see in the box?

A The background turns red

B The background becomes lighter blue

C The blue background changes to a purplish color

D The background disappears

Common Confusions - 2 Topics

Why does the color look different but the brightness stays the same?

Adjust-hue only changes the hue angle, not the saturation or lightness, so brightness and intensity remain constant.

💡 Hue rotation changes color tone but keeps brightness and saturation unchanged.

Why does rotating hue by 360 degrees look the same?

A 360-degree rotation brings the hue full circle back to the original color, so visually it looks unchanged.

💡 Hue rotation is circular; 360 degrees equals no change.

Property Reference

Property	Value Applied	Effect on Color	Common Use
adjust-hue	adjust-hue($color, 0deg)	No change to hue	Keep original color
adjust-hue	adjust-hue($color, 90deg)	Rotate hue by 90 degrees	Shift color to a different hue
adjust-hue	adjust-hue($color, -45deg)	Rotate hue by -45 degrees	Shift color to a different hue in opposite direction
background-color	$color	Sets element background color	Color backgrounds of elements

Concept Snapshot

adjust-hue($color, degrees) rotates the hue angle of a color. Hue rotation changes the color tone but keeps brightness and saturation. 0deg means no change; 360deg returns to original color. Used to create color variations easily. Works by converting color to HSL, rotating hue, then back to RGB.

Practice

1.

What does the adjust-hue function do in Sass?

easy

A. It adjusts the saturation of a color.

B. It changes the brightness of a color.

C. It rotates the hue of a color by a specified degree on the color wheel.

D. It converts a color to grayscale.

Solution

1. Step 1: Understand the purpose of adjust-hue

   The function changes the hue angle of a color, moving it around the color wheel.

2. Step 2: Compare with other color functions

   Brightness, grayscale, and saturation are different properties; adjust-hue specifically rotates hue.

3. Final Answer:

   It rotates the hue of a color by a specified degree on the color wheel. -> Option C

4. Quick Check:

   adjust-hue rotates hue = D [OK]

Hint: Remember: adjust-hue changes color angle, not brightness or saturation [OK]

Common Mistakes:

• Confusing hue rotation with brightness or saturation changes
• Thinking it converts colors to grayscale
• Assuming it changes color opacity

2.

Which of the following is the correct syntax to rotate the hue of #ff0000 by 90 degrees using adjust-hue in Sass?

?

easy

A. adjust-hue(#ff0000, 90deg)

B. adjust-hue(#ff0000, 90)

C. adjust-hue(#ff0000 90deg)

D. adjust-hue(#ff0000; 90deg)

Solution

1. Step 1: Check the function syntax

   adjust-hue takes two arguments separated by a comma: the color and the degree number (without unit).

2. Step 2: Identify correct argument format

   Degrees are passed as a number, not with deg unit in Sass.

3. Final Answer:

   adjust-hue(#ff0000, 90) -> Option B

4. Quick Check:

   Use number degrees without unit in adjust-hue = B [OK]

Hint: Use number only for degrees, no 'deg' unit in adjust-hue [OK]

Common Mistakes:

• Adding 'deg' unit to degree argument
• Missing comma between arguments
• Using semicolon instead of comma

3.

What color will be produced by this Sass code?

$color: #00ff00;
$new-color: adjust-hue($color, 120);

Choose the closest hex color output for $new-color.

medium

A. #ffff00

B. #ff0000

C. #00ffff

D. #0000ff

Solution

1. Step 1: Identify the original color hue

   #00ff00 is pure green, which is at 120° on the color wheel.

2. Step 2: Rotate hue by 120 degrees

   Adding 120° to green (120°) gives 240°, which is blue.

3. Step 3: Correct hue calculation

   Green is 120°, adding 120° gives 240°, which corresponds to blue (#0000ff).

4. Step 4: Re-examine options

   Since 120 + 120 = 240°, the color is blue (#0000ff), so #0000ff is correct.

5. Final Answer:

   #0000ff -> Option D

6. Quick Check:

   Green + 120° hue rotation = Blue = #0000ff [OK]

Hint: Add degrees to hue; green(120°) +120° = blue(240°) [OK]

Common Mistakes:

• Confusing hue degrees and resulting colors
• Not wrapping hue around 360 degrees
• Mixing RGB hex with hue values

4.

Identify the error in this Sass code snippet:

$base-color: #ff00ff;
$new-color: adjust-hue($base-color 60deg);

medium

A. Missing comma between arguments and incorrect degree unit.

B. Using an invalid color code.

C. adjust-hue cannot be used with variables.

D. The function requires three arguments.

Solution

1. Step 1: Check argument separation

   Arguments in adjust-hue must be separated by a comma; here, comma is missing.

2. Step 2: Check degree argument format

   Degrees should be passed as a number without deg unit in Sass.

3. Final Answer:

   Missing comma between arguments and incorrect degree unit. -> Option A

4. Quick Check:

   Comma and number-only degrees needed = C [OK]

Hint: Always separate args with comma and use number for degrees [OK]

Common Mistakes:

• Omitting comma between function arguments
• Adding 'deg' unit to degree argument
• Assuming adjust-hue needs three arguments

5.

You want to create a color palette by rotating the hue of #336699 by increments of 45 degrees four times. Which Sass code correctly generates the list of rotated colors?

?

hard

A. $base: #336699;
$palette: (
adjust-hue($base, 45),
adjust-hue($base, 90),
adjust-hue($base, 135),
adjust-hue($base, 180)
);

B. $base: #336699;
$palette: (
adjust-hue($base 45),
adjust-hue($base 90),
adjust-hue($base 135),
adjust-hue($base 180)
);

C. $base: #336699;
$palette: (
adjust-hue($base, 45deg),
adjust-hue($base, 90deg),
adjust-hue($base, 135deg),
adjust-hue($base, 180deg)
);

D. $base: #336699;
$palette: (
adjust-hue($base, 45),
adjust-hue($base, 90),
adjust-hue($base, 135),
adjust-hue($base, 225)
);

Solution

1. Step 1: Verify argument syntax for adjust-hue

   Degrees must be numbers without units and arguments separated by commas.

2. Step 2: Check the increments and values

   Rotations are 45, 90, 135, and 180 degrees, which are correct increments of 45.

3. Step 3: Compare options

   $base: #336699; $palette: ( adjust-hue($base, 45), adjust-hue($base, 90), adjust-hue($base, 135), adjust-hue($base, 180) ); uses correct syntax and increments. $base: #336699; $palette: ( adjust-hue($base 45), adjust-hue($base 90), adjust-hue($base 135), adjust-hue($base 180) ); misses commas. $base: #336699; $palette: ( adjust-hue($base, 45deg), adjust-hue($base, 90deg), adjust-hue($base, 135deg), adjust-hue($base, 180deg) ); uses invalid 'deg' units. $base: #336699; $palette: ( adjust-hue($base, 45), adjust-hue($base, 90), adjust-hue($base, 135), adjust-hue($base, 225) ); has wrong last increment (225 instead of 180).

4. Final Answer:

   code with correct syntax and increments -> Option A

5. Quick Check:

   Correct syntax + increments = A [OK]

Hint: Use commas and number degrees; check increments carefully [OK]

Common Mistakes:

• Using 'deg' units in degrees
• Missing commas between arguments
• Incorrect increment values in rotation