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.