Color values and manipulation in SASS

Introduction

Colors make websites look nice and easy to understand. Using color values and changing them helps you create beautiful designs.

You want to set the background color of a button.

You need to make text lighter or darker for better reading.

You want to create a hover effect by changing a color slightly.

You want to use the same color but with different brightness in different parts.

You want to mix two colors to get a new shade.

Syntax

SASS

$color-name: #rrggbb;

// Manipulate colors
lighten($color, 20%)
darken($color, 15%)
rgba($color, 0.5)
mix($color1, $color2, 50%)

Colors can be written as hex codes like #ff0000 for red.

Functions like lighten() and darken() change brightness by a percentage.

Examples

Set a variable for a blue color and use it as a button background.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}

Make the button color lighter when hovered by 20%.

SASS

.button:hover {
  background-color: lighten($primary-color, 20%);
}

Use red color with 70% opacity for an alert background.

SASS

.alert {
  background-color: rgba(231, 76, 60, 0.7);
}

Mix blue and red equally to get a purple shade.

SASS

.mixed-color {
  background-color: mix(#3498db, #e74c3c, 50%);
}

Sample Program

This example shows a green button that becomes lighter when hovered. It also shows an alert box with semi-transparent red background and a box with a mix of green and blue colors.

SASS

@use 'sass:color';

$base-color: #2ecc71;

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

.alert {
  background-color: color.change(#e74c3c, $alpha: 0.6);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  max-width: 300px;
}

.mixed {
  background-color: color.mix(#2ecc71, #3498db, 40%);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  max-width: 300px;
}

Important Notes

Use @use 'sass:color'; to access color functions in modern Sass.

Percentages in lighten/darken control how much brighter or darker the color becomes.

RGBA lets you add transparency to colors, useful for overlays or subtle effects.

Summary

Colors in Sass can be set using hex codes or named variables.

You can change colors easily with functions like lighten(), darken(), rgba(), and mix().

Manipulating colors helps create interactive and visually appealing web designs.

Practice

1. Which Sass function would you use to make a color lighter?

easy

A. rgba()

B. darken()

C. lighten()

D. mix()

Solution

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

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

2. Step 2: Compare with other functions

   darken() makes colors darker, rgba() changes transparency, and mix() blends two colors.

3. Final Answer:

   lighten() -> Option C

4. Quick Check:

   Make color lighter = lighten() [OK]

Hint: Lighten means increase brightness, so use lighten() [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Using rgba() to change brightness
• Mixing colors instead of lightening

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

easy

A. darken(#ff0000, '20%')

B. darken(#ff0000 20%)

C. darken(#ff0000; 20%)

D. darken(#ff0000, 20%)

Solution

1. Step 1: Check function syntax

   The darken() function takes two arguments separated by a comma: a color and a percentage without quotes.

2. Step 2: Validate each option

   darken(#ff0000, 20%) uses a comma and percentage without quotes, which is correct. Options B and C miss the comma or use wrong separators. darken(#ff0000, '20%') uses quotes around percentage, which is invalid.

3. Final Answer:

   darken(#ff0000, 20%) -> Option D

4. Quick Check:

   Correct syntax uses comma and percentage without quotes [OK]

Hint: Use comma between color and percentage, no quotes on percent [OK]

Common Mistakes:

• Omitting comma between arguments
• Putting percentage in quotes
• Using semicolon instead of comma

3. What color will this Sass code produce?

$base: #0000ff;
$mix-color: #ff0000;
$result: mix($base, $mix-color, 50%);

medium

A. #ff0000 (red)

B. #800080 (purple)

C. #0000ff (blue)

D. #808000 (olive)

Solution

1. Step 1: Understand mix() function

   The mix() function blends two colors by a given weight. 50% means equal parts of both colors.

2. Step 2: Mix blue and red equally

   Mixing pure blue (#0000ff) and pure red (#ff0000) equally results in purple (#800080).

3. Final Answer:

   #800080 (purple) -> Option B

4. Quick Check:

   Mix blue + red equally = purple [OK]

Hint: Mix equal red and blue = purple [OK]

Common Mistakes:

• Thinking mix returns original color
• Confusing olive with purple
• Ignoring the 50% weight in mix()

4. Identify the error in this Sass code:

$color: lighten(#123456 10%);

medium

A. Missing comma between color and percentage

B. Percentage should be negative

C. Color hex code is invalid

D. lighten() cannot take percentages

Solution

1. Step 1: Check lighten() function syntax

   The lighten() function requires two arguments separated by a comma: a color and a percentage.

2. Step 2: Identify missing comma

   The code uses a space instead of a comma between #123456 and 10%, causing a syntax error.

3. Final Answer:

   Missing comma between color and percentage -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between function arguments [OK]

Common Mistakes:

• Using space instead of comma between arguments
• Thinking percentage must be negative
• Believing lighten() can't take percentages

5. You want to create a button background color that is 30% lighter than a base color $primary: #0066cc; and add 50% transparency. Which Sass code correctly does this?

hard

A. $button-bg: rgba(lighten($primary, 30%), 0.5);

B. $button-bg: lighten(rgba($primary, 0.5), 30);

C. $button-bg: lighten($primary, 30%, 0.5);

D. $button-bg: rgba($primary, lighten(30%, 0.5));

Solution

1. Step 1: Lighten the base color first

   Use lighten($primary, 30%) to increase brightness by 30%.

2. Step 2: Add transparency with rgba()

   Wrap the lightened color in rgba(..., 0.5) to set 50% opacity.

3. Step 3: Check other options

   $button-bg: lighten(rgba($primary, 0.5), 30); uses amount without % unit, which is invalid. $button-bg: lighten($primary, 30%, 0.5); uses wrong argument count. $button-bg: rgba($primary, lighten(30%, 0.5)); misuses rgba() arguments.

4. Final Answer:

   $button-bg: rgba(lighten($primary, 30%), 0.5); -> Option A

5. Quick Check:

   Lighten first, then add transparency [OK]

Hint: Lighten color first, then wrap with rgba() for transparency [OK]

Common Mistakes:

• Adding transparency before lightening
• Passing wrong number of arguments
• Misordering function calls