Color scale generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a color scale in web design?

A color scale is a set of colors that gradually change in shade or tint, used to create visual harmony and hierarchy in designs.

beginner

How can you generate a color scale in Sass?

You can generate a color scale in Sass by using functions like lighten() and darken() to adjust a base color step by step.

beginner

What does the Sass function lighten($color, $amount) do?

It makes the given color lighter by increasing its lightness by the specified amount (percentage).

beginner

Why is it important to use a color scale instead of random colors?

Using a color scale ensures consistent and accessible color choices that look good together and improve user experience.

intermediate

Show a simple Sass loop example to create a 5-step color scale from a base color.

$base-color: #3498db; @for $i from 1 through 5 { .color-step-#{$i} { color: lighten($base-color, $i * 10%); } } <br>This creates 5 classes with colors getting lighter by 10% each step.

Which Sass function makes a color darker?

A darken()

B lighten()

C saturate()

D desaturate()

The darken() function reduces the lightness of a color, making it darker.

What does the lighten($color, 20%) function do?

A Changes the color to 20% blue

B Makes the color 20% darker

C Adds 20% opacity

D Makes the color 20% lighter

It increases the lightness of the color by 20%, making it lighter.

Why use a loop to generate a color scale in Sass?

A To create multiple color steps efficiently

B To write less code for unrelated styles

C To make colors random

D To avoid using variables

Loops help create many color variations quickly and consistently.

Which property is commonly changed to create a color scale?

A Border style

B Lightness

C Margin

D Font size

Lightness is adjusted to make colors lighter or darker in a scale.

What is the benefit of using a color scale in UI design?

A Randomizes colors

B Makes text unreadable

C Creates visual harmony and hierarchy

D Increases page load time

Color scales help users understand importance and structure visually.

Explain how you would create a 7-step color scale from a base color using Sass.

Think about using a for loop and changing the color brightness step by step.

Why is it important to maintain consistent color scales in web design?

Consider how colors affect how users feel and navigate a website.