Adjust-hue for color rotation in SASS - Mini Project: Build & Apply

Adjust Hue for Color Rotation with Sass

📖 Scenario: You are creating a simple webpage with a colored box. You want to change the color of the box by rotating its hue using Sass. This will help you understand how to use the adjust-hue function to shift colors.

🎯 Goal: Build a Sass stylesheet that defines a base color variable and uses adjust-hue to create a rotated color. Apply these colors to two boxes so you can see the original and the hue-rotated colors side by side.

📋 What You'll Learn

Create a Sass variable called $base-color with the exact value #3498db.

Create a Sass variable called $rotated-color that uses adjust-hue to rotate $base-color by 90 degrees.

Write CSS rules for two classes: .box-original and .box-rotated.

Apply $base-color as the background color for .box-original.

Apply $rotated-color as the background color for .box-rotated.

Set both boxes to have width and height of 8rem and margin of 1rem.

💡 Why This Matters

🌍 Real World

Adjusting hues is useful in design systems to create color variations without picking new colors manually. It helps keep a consistent look with different moods or themes.

💼 Career

Web developers and designers often use Sass and color functions like adjust-hue to efficiently manage colors in websites and apps, improving maintainability and creativity.

1

Create the base color variable

Create a Sass variable called $base-color and set it to the exact hex color #3498db.

SASS

# Create the base color variable
# Your code here

Hint

Use the syntax $variable-name: value; to create a Sass variable.

2

Create the rotated color variable using adjust-hue

Create a Sass variable called $rotated-color that uses adjust-hue($base-color, 90deg) to rotate the hue of $base-color by 90 degrees.

SASS

$base-color: #3498db;
# Create the rotated color variable using adjust-hue
# Your code here

Hint

Use the adjust-hue(color, degrees) function to rotate the hue.

3

Write CSS rules for the original and rotated boxes

Write CSS rules for classes .box-original and .box-rotated. Set the background color of .box-original to $base-color and the background color of .box-rotated to $rotated-color. Also set width and height to 8rem and margin to 1rem for both classes.

SASS

$base-color: #3498db;
$rotated-color: adjust-hue($base-color, 90deg);

// Write CSS rules for .box-original and .box-rotated
// Your code here

Hint

Use the syntax .class-name { property: value; } to write CSS rules in Sass.

4

Add a container class for layout and complete the stylesheet

Add a CSS rule for a class called .container that uses Flexbox to display its children side by side with a gap of 1rem. This will help show the two boxes next to each other. Use display: flex; and gap: 1rem; inside the .container rule.

SASS

$base-color: #3498db;
$rotated-color: adjust-hue($base-color, 90deg);

.box-original {
  background-color: $base-color;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
}

.box-rotated {
  background-color: $rotated-color;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
}

// Add .container class with flex layout
// Your code here

Hint

Flexbox helps arrange items side by side. Use display: flex; and gap to add space between them.

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