Saturate and desaturate in SASS - Mini Project: Build & Apply

Saturate and Desaturate Colors with Sass

📖 Scenario: You are designing a simple webpage with colored boxes. You want to learn how to make colors more vivid or more muted using Sass color functions.

🎯 Goal: Create a Sass stylesheet that defines a base color and then uses saturate() and desaturate() functions to create two new colors. Apply these colors to three boxes in HTML to see the effect visually.

📋 What You'll Learn

Define a base color variable in Sass

Create a saturated color by increasing saturation of the base color

Create a desaturated color by decreasing saturation of the base color

Use semantic HTML with three section elements for the colored boxes

Apply the colors to the boxes using CSS classes

Include responsive design so boxes stack on small screens

Use accessible color contrast for text inside boxes

💡 Why This Matters

🌍 Real World

Designers and developers often need to adjust colors dynamically to create visually appealing and accessible websites. Using Sass functions like saturate and desaturate helps maintain consistent color schemes.

💼 Career

Understanding Sass color functions and responsive design is essential for front-end developers and UI designers to build modern, accessible, and maintainable web interfaces.

1

Set up base color variable in Sass

Create a Sass variable called $base-color and set it to #3498db (a blue shade).

SASS

$base-color: #3498db;
// Your code here

Hint

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

2

Create saturated and desaturated color variables

Create two new Sass variables: $more-saturated by saturating $base-color by 30%, and $less-saturated by desaturating $base-color by 30%. Use the saturate() and desaturate() functions.

SASS

$base-color: #3498db;
// Create $more-saturated by saturating $base-color by 30%
// Create $less-saturated by desaturating $base-color by 30%
// Your code here

Hint

Use saturate($color, 30%) and desaturate($color, 30%) to adjust saturation.

3

Write CSS classes to apply the colors

Write three CSS classes: .box-base with background $base-color, .box-saturated with background $more-saturated, and .box-desaturated with background $less-saturated. Set text color to white and add padding and margin for visibility.

SASS

$base-color: #3498db;
$more-saturated: saturate($base-color, 30%);
$less-saturated: desaturate($base-color, 30%);

// Write .box-base, .box-saturated, and .box-desaturated classes with background colors and styling
// Your code here

Hint

Use background-color: $variable; inside each class and add color: white; for text.

4

Add HTML structure and responsive layout

Write HTML with three section elements with classes box-base, box-saturated, and box-desaturated. Each box should have text describing the color. Add a container main with a CSS flex layout that stacks boxes vertically on narrow screens and horizontally on wider screens.

SASS

$base-color: #3498db;
$more-saturated: saturate($base-color, 30%);
$less-saturated: desaturate($base-color, 30%);

.box-base {
  background-color: $base-color;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}
.box-saturated {
  background-color: $more-saturated;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}
.box-desaturated {
  background-color: $less-saturated;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}

/* Add HTML and container styles below */
// Your code here

Hint

Use semantic section tags with the correct classes and a main container with flexbox and a media query for responsiveness.

Practice

1. What does the saturate() function do to a color in Sass?

easy

A. Makes the color darker

B. Makes the color more vivid and bright

C. Makes the color lighter

D. Makes the color more transparent

Solution

1. Step 1: Understand the purpose of saturate()

   The saturate() function increases the intensity of the color's saturation, making it look more vivid.

2. Step 2: Compare with other effects

   Unlike darkening or lightening, saturate specifically boosts color brightness and vividness.

3. Final Answer:

   Makes the color more vivid and bright -> Option B

4. Quick Check:

   saturate() = more vivid color [OK]

Hint: Saturate = boost color brightness and vividness [OK]

Common Mistakes:

• Confusing saturate() with lighten() or darken()
• Thinking saturate() changes transparency
• Assuming saturate() makes color dull

2. Which of the following is the correct syntax to desaturate a color by 20% in Sass?

easy

A. desaturate(#ff0000, 0.2)

B. desaturate(#ff0000 20%)

C. desaturate(#ff0000, 20%)

D. desaturate(#ff0000; 20%)

Solution

1. Step 1: Recall the function syntax

   The desaturate() function takes two arguments separated by a comma: the color and the percentage to reduce saturation.

2. Step 2: Identify correct punctuation and units

   The percentage must have a percent sign (%) and be separated by a comma, so desaturate(#ff0000, 20%) is correct.

3. Final Answer:

   desaturate(#ff0000, 20%) -> Option C

4. Quick Check:

   Correct syntax uses comma and percent sign [OK]

Hint: Use comma and % for saturation amount [OK]

Common Mistakes:

• Omitting the comma between arguments
• Using decimal instead of percentage
• Using semicolon instead of comma

3. What color will this Sass code produce?

$color: #6699cc;
$new-color: saturate($color, 30%);

medium

A. A more vivid blue than #6699cc

B. #6699cc (unchanged)

C. A duller, grayer blue than #6699cc

D. A lighter blue than #6699cc

Solution

1. Step 1: Understand saturate effect on #6699cc

   The color #6699cc is a medium blue. Applying saturate($color, 30%) increases its saturation, making it more vivid.

2. Step 2: Compare options

   A more vivid blue than #6699cc correctly describes the result. The unchanged option is incorrect because the color changes. The duller, grayer option is incorrect because saturate increases vividness. The lighter blue option is incorrect because saturate does not lighten the color.

3. Final Answer:

   A more vivid blue than #6699cc -> Option A

4. Quick Check:

   saturate() = more vivid color [OK]

Hint: Saturate makes colors brighter, not lighter or duller [OK]

Common Mistakes:

• Thinking saturate lightens the color
• Assuming saturate makes color duller
• Believing color stays unchanged

4. Identify the error in this Sass code:

$color: #00ff00;
$new-color: desaturate $color 50%;

medium

A. Function name should be saturate, not desaturate

B. Incorrect color format

C. Percentage value should be a decimal

D. Missing parentheses around function arguments

Solution

1. Step 1: Check function call syntax

   In Sass, functions require parentheses around their arguments. The code misses parentheses around $color and 50%.

2. Step 2: Verify other parts

   The color format #00ff00 is valid, and the percentage is correctly given as 50%. The function name desaturate is correct for reducing saturation.

3. Final Answer:

   Missing parentheses around function arguments -> Option D

4. Quick Check:

   Functions need parentheses [OK]

Hint: Always use parentheses for Sass functions [OK]

Common Mistakes:

• Omitting parentheses in function calls
• Confusing saturate and desaturate functions
• Using decimal instead of percentage

5. You want to create a button style that uses a base color #ff6600 but looks less intense on hover by reducing saturation by 40%. Which Sass code correctly achieves this?

hard

A. $base-color: #ff6600;
button {
background-color: $base-color;
&:hover {
background-color: desaturate($base-color, 40%);
}
}

B. $base-color: #ff6600;
button {
background-color: $base-color;
&:hover {
background-color: saturate($base-color, 40%);
}
}

C. $base-color: #ff6600;
button {
background-color: $base-color;
&:hover {
background-color: desaturate($base-color 40%);
}
}

D. $base-color: #ff6600;
button {
background-color: $base-color;
&:hover {
background-color: lighten($base-color, 40%);
}
}

Solution

1. Step 1: Identify the goal

   The button's hover state should have the base color with 40% less saturation, so desaturate($base-color, 40%) is needed.

2. Step 2: Check syntax and logic

   $base-color: #ff6600; button { background-color: $base-color; &:hover { background-color: desaturate($base-color, 40%); } } uses correct syntax with parentheses and comma, and applies desaturate correctly on hover. $base-color: #ff6600; button { background-color: $base-color; &:hover { background-color: saturate($base-color, 40%); } } incorrectly saturates instead of desaturates. $base-color: #ff6600; button { background-color: $base-color; &:hover { background-color: desaturate($base-color 40%); } } misses the comma between arguments. $base-color: #ff6600; button { background-color: $base-color; &:hover { background-color: lighten($base-color, 40%); } } uses lighten, which changes brightness, not saturation.

3. Final Answer:

   Code with desaturate($base-color, 40%) and correct syntax -> Option A

4. Quick Check:

   Desaturate with parentheses and comma [OK]

Hint: Use desaturate(color, %) with parentheses and comma [OK]

Common Mistakes:

• Using saturate instead of desaturate
• Omitting comma between arguments
• Using lighten instead of desaturate