Lighten and darken functions in SASS

Introduction

Lighten and darken functions help you make colors lighter or darker easily. This is useful to create different shades of the same color for your website design.

When you want to create a hover effect that changes the button color slightly.

When you need a lighter background color based on a main color.

When you want to make text color darker for better readability on a light background.

When designing a color palette with consistent shades for your site.

When adjusting colors to improve contrast for accessibility.

Syntax

SASS

lighten($color, $amount)
darken($color, $amount)

$color is the base color you want to change.

$amount is how much you want to lighten or darken, usually in percentages (e.g., 20%).

Examples

This makes the blue color 20% lighter.

SASS

$light-blue: lighten(#007BFF, 20%);

This makes the red color 15% darker.

SASS

$dark-red: darken(#FF0000, 15%);

Button background will be a lighter green than the base color.

SASS

button {
  background-color: lighten(#28a745, 10%);
}

Paragraph text will be much darker gray for better readability.

SASS

p {
  color: darken(#333333, 30%);
}

Sample Program

This code creates a button with a blue background that is lighter than the base color. When you hover over the button, the background becomes darker. This gives a nice visual effect showing interaction.

SASS

@use 'sass:color';

$base-color: #3498db;

.button {
  background-color: color.lighten($base-color, 20%);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: color.darken($base-color, 15%);
}

Important Notes

Always use percentages for the amount to control how much lighter or darker the color becomes.

Lighten and darken work best with colors in hex, rgb, or named color formats.

Use these functions to keep your color scheme consistent and easy to adjust.

Summary

Lighten and darken functions adjust colors by making them lighter or darker.

They take a color and a percentage amount as inputs.

Use them to create hover effects, improve readability, and build color palettes.

Practice

1. What does the lighten() function do in Sass?

easy

A. Changes a color to grayscale

B. Makes a color darker by decreasing its brightness

C. Inverts the color completely

D. Makes a color lighter by increasing its brightness

Solution

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

   The lighten() function increases the lightness of a color, making it appear lighter.

2. Step 2: Compare with other options

   Other options describe darkening, grayscale, or inversion, which are not what lighten() does.

3. Final Answer:

   Makes a color lighter by increasing its brightness -> Option D

4. Quick Check:

   lighten() = makes color lighter [OK]

Hint: Lighten means make color brighter or lighter [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Thinking lighten() changes color hue
• Assuming lighten() inverts colors

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

easy

A. darken(20%, #3498db)

B. darken(#3498db 20%)

C. darken(#3498db, 20%)

D. darken(#3498db; 20%)

Solution

1. Step 1: Recall function syntax

   The darken() function takes two arguments: a color and a percentage, in that order, separated by a comma.

2. Step 2: Check each option

   darken(#3498db, 20%) matches the correct syntax: darken(#3498db, 20%). Others have wrong order or missing comma/semicolon.

3. Final Answer:

   darken(#3498db, 20%) -> Option C

4. Quick Check:

   darken(color, percent) syntax [OK]

Hint: Function args: color first, then percentage with comma [OK]

Common Mistakes:

• Swapping argument order
• Omitting comma between arguments
• Using semicolon instead of comma

3. What color will be produced by this Sass code?

$base-color: #800000;
$light-color: lighten($base-color, 50%);
body { background-color: $light-color; }

medium

A. A very dark red color

B. A very light pinkish color

C. Pure white

D. Bright green

Solution

1. Step 1: Understand lighten effect on #800000

   The base color #800000 is a dark red. Lightening it by 50% will add a lot of white, making it much lighter and pinkish.

2. Step 2: Eliminate other options

   It won't be dark (B), pure white (C), or green (D) because lighten only adds lightness to the original red color.

3. Final Answer:

   A very light pinkish color -> Option B

4. Quick Check:

   lighten dark red by 50% = light pink [OK]

Hint: Lighten dark red by 50% = light pinkish color [OK]

Common Mistakes:

• Thinking lighten makes color darker
• Confusing lighten with color inversion
• Expecting pure white after lighten

4. Identify the error in this Sass code:

$color: #123456;
$dark: darken($color 30%);
.button { background: $dark; }

medium

A. Missing comma between arguments in darken()

B. Invalid color code #123456

C. darken() cannot be used inside variables

D. Percentage should be without % sign

Solution

1. Step 1: Check darken() function syntax

   The darken() function requires a comma between the color and percentage arguments.

2. Step 2: Identify the missing comma

   In the code, darken($color 30%) lacks a comma, causing a syntax error.

3. Final Answer:

   Missing comma between arguments in darken() -> Option A

4. Quick Check:

   darken(color, percent) needs comma [OK]

Hint: Remember comma separates arguments in functions [OK]

Common Mistakes:

• Omitting comma between function arguments
• Using invalid color codes
• Removing % sign from percentage

5. You want to create a button with a base blue color #007BFF. On hover, the button should become 15% darker. Which Sass code correctly achieves this with variables and hover style?

hard

A. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: darken($btn-color, 15%);
}
}

B. $btn-color: #007BFF;
.button {
background-color: darken($btn-color, 15%);
&:hover {
background-color: $btn-color;
}
}

C. $btn-color: #007BFF;
.button {
background-color: lighten($btn-color, 15%);
&:hover {
background-color: darken($btn-color, 15%);
}
}

D. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: lighten($btn-color, 15%);
}
}

Solution

1. Step 1: Set base color variable

   The variable $btn-color is set to the base blue color #007BFF.

2. Step 2: Apply base color and darken on hover

   The button background uses $btn-color normally, and on hover uses darken($btn-color, 15%) to make it 15% darker.

3. Step 3: Verify hover effect logic

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   correctly darkens on hover.

   $btn-color: #007BFF;
   .button {
     background-color: darken($btn-color, 15%);
     &:hover {
       background-color: $btn-color;
     }
   }

   reverses colors.

   $btn-color: #007BFF;
   .button {
     background-color: lighten($btn-color, 15%);
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   lightens base color incorrectly.

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: lighten($btn-color, 15%);
     }
   }

   lightens on hover instead of darkening.

4. Final Answer:

   Code with base $btn-color and darken on hover -> Option A

5. Quick Check:

   Hover darken 15% =

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   [OK]

Hint: Hover darker means darken() inside &:hover [OK]

Common Mistakes:

• Swapping lighten and darken functions
• Applying darken on base instead of hover
• Forgetting to use & for hover selector