Color values and manipulation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the common color formats supported in Sass?

Sass supports several color formats including named colors (like red), hexadecimal (like #ff0000), RGB (like rgb(255, 0, 0)), RGBA (with alpha transparency), HSL (hue, saturation, lightness), and HSLA (HSL with alpha).

beginner

How does the lighten() function work in Sass?

The lighten($color, $amount) function makes a color lighter by increasing its lightness by the given percentage amount. For example, lighten(#0000ff, 20%) makes blue 20% lighter.

beginner

What does the rgba() function do in Sass?

The rgba() function creates a color with red, green, blue, and alpha (opacity) values. Alpha controls transparency from 0 (fully transparent) to 1 (fully opaque). Example: rgba(255, 0, 0, 0.5) is semi-transparent red.

intermediate

Explain the difference between darken() and desaturate() in Sass.

darken($color, $amount) reduces the lightness of a color, making it darker. desaturate($color, $amount) reduces the saturation, making the color less intense or more gray.

intermediate

How can you mix two colors in Sass?

Use the mix($color1, $color2, $weight) function. It blends two colors together. The optional $weight (0% to 100%) controls how much of $color1 is in the mix. For example, mix(red, blue, 50%) creates purple.

Which Sass function would you use to make a color more transparent?

A lighten()

B saturate()

C rgba()

D darken()

The rgba() function allows you to set the alpha (opacity) value, making a color more transparent.

What does the desaturate($color, 30%) function do?

A Reduces the color's saturation by 30%

B Makes the color 30% lighter

C Makes the color 30% darker

D Increases the color's saturation by 30%

Desaturate reduces the saturation, making the color less intense.

If you want to blend 70% red and 30% blue, which function and weight would you use?

A mix(red, blue, 70%)

B mix(blue, red, 70%)

C lighten(red, 70%)

D darken(blue, 30%)

The weight parameter controls how much of the first color is in the mix.

Which color format includes transparency in Sass?

A HSL

B named colors (like red)

C hexadecimal (#rrggbb)

D RGBA

RGBA includes an alpha channel for transparency.

What happens if you use darken($color, 50%)?

A The color becomes 50% lighter

B The color becomes 50% darker

C The color becomes 50% more saturated

D The color becomes 50% less saturated

Darken reduces the lightness, making the color darker.

Describe how you can change a color's brightness and transparency in Sass.

Think about functions that adjust lightness and opacity.

Explain how to blend two colors in Sass and control the mix ratio.

Consider how to combine colors with a function.