HSL colors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does HSL stand for in CSS colors?

HSL stands for Hue, Saturation, and Lightness. It is a way to describe colors based on these three components.

beginner

Explain the 'Hue' component in HSL colors.

Hue is the color type and is represented as a degree on the color wheel from 0 to 360. For example, 0° is red, 120° is green, and 240° is blue.

beginner

What does 'Saturation' control in HSL colors?

Saturation controls the intensity or purity of the color. 0% means a gray color, and 100% means full color intensity.

beginner

Describe the 'Lightness' value in HSL colors.

Lightness controls how light or dark the color is. 0% is black, 50% is the normal color, and 100% is white.

beginner

How do you write a CSS rule using HSL to set a background color to a bright red?

You can write: background-color: hsl(0, 100%, 50%); This means hue 0° (red), full saturation, and medium lightness.

In HSL, what does a saturation of 0% mean?

A The color is fully dark

B The color is fully bright

C The color is fully gray

D The color is fully transparent

Saturation at 0% means no color intensity, resulting in a shade of gray.

What hue value represents green in HSL?

A 0°

B 360°

C 240°

D 120°

Hue 120° corresponds to green on the color wheel.

Which lightness value in HSL gives pure white?

A 100%

B 50%

C 0%

D 75%

Lightness at 100% means the color is white.

How would you write a CSS color for half-light blue using HSL?

A hsl(0, 100%, 50%)

B hsl(240, 100%, 50%)

C hsl(120, 100%, 50%)

D hsl(240, 50%, 100%)

Hue 240° is blue, 100% saturation is full color, and 50% lightness is normal brightness.

What happens if you set lightness to 0% in HSL?

A The color becomes black

B The color becomes white

C The color becomes gray

D The color becomes transparent

Lightness at 0% means the color is black regardless of hue or saturation.

Describe how the three parts of HSL (Hue, Saturation, Lightness) work together to create a color.

Think of mixing paint: color type, how strong it is, and how light or dark it looks.

Explain how you would change a color from bright red to a pale pink using HSL values.

Adjust saturation and lightness while keeping the hue the same.