HSL colors in CSS - Mini Project: Build & Apply

Using HSL Colors in CSS

📖 Scenario: You are creating a simple webpage with colorful sections. You want to use HSL colors to style the background and text colors because HSL lets you easily adjust hue, saturation, and lightness.

🎯 Goal: Build a CSS stylesheet that uses HSL colors to style a webpage with a header, main content, and footer. Each section should have a distinct background color using HSL, and the text color should also use HSL for good contrast.

📋 What You'll Learn

Use HSL color values for background colors in header, main, and footer sections.

Use HSL color values for text colors in each section.

Choose different hues for each section to show color variety.

Adjust saturation and lightness to ensure text is readable on backgrounds.

Write clean, valid CSS code.

💡 Why This Matters

🌍 Real World

Web designers often use HSL colors because they make it easy to adjust colors by changing hue, saturation, or lightness. This helps create consistent and accessible color schemes.

💼 Career

Knowing how to use HSL colors in CSS is important for front-end developers and designers to build visually appealing and accessible websites.

1

Create basic CSS selectors for page sections

Write CSS rules for the selectors header, main, and footer with no styles yet. Just create empty blocks for each selector.

CSS

header {
  /* Your code here */
}

main {
  /* Your code here */
}

footer {
  /* Your code here */
}

Hint

Start by writing the selectors header, main, and footer with curly braces.

2

Add HSL background colors to each section

Add a background-color property to header, main, and footer using these exact HSL values: header uses hsl(200, 70%, 50%), main uses hsl(120, 60%, 70%), and footer uses hsl(340, 80%, 60%).

CSS

header {
  /* Add background-color here */
}

main {
  /* Add background-color here */
}

footer {
  /* Add background-color here */
}

Hint

Use the background-color property with the exact HSL values given for each section.

3

Add HSL text colors for good contrast

Add a color property to header, main, and footer using these exact HSL values: header uses hsl(0, 0%, 95%), main uses hsl(0, 0%, 30%), and footer uses hsl(0, 0%, 10%).

CSS

header {
  background-color: hsl(200, 70%, 50%);
  /* Add color here */
}

main {
  background-color: hsl(120, 60%, 70%);
  /* Add color here */
}

footer {
  background-color: hsl(340, 80%, 60%);
  /* Add color here */
}

Hint

Use the color property with the exact HSL values given for each section's text color.

4

Add padding and font styles for better appearance

Add padding: 1.5rem and font-family: Arial, sans-serif to header, main, and footer to improve spacing and text style.

CSS

header {
  background-color: hsl(200, 70%, 50%);
  color: hsl(0, 0%, 95%);
  /* Add padding and font-family here */
}

main {
  background-color: hsl(120, 60%, 70%);
  color: hsl(0, 0%, 30%);
  /* Add padding and font-family here */
}

footer {
  background-color: hsl(340, 80%, 60%);
  color: hsl(0, 0%, 10%);
  /* Add padding and font-family here */
}

Hint

Add padding: 1.5rem and font-family: Arial, sans-serif inside each section's CSS block.

Practice

1. What does the hsl(120, 100%, 50%) color represent in CSS?

easy

A. A bright green color

B. A dark blue color

C. A light red color

D. A gray color

Solution

1. Step 1: Understand the HSL parameters

   The first value (120) is the hue, which represents green on the color wheel.

2. Step 2: Interpret saturation and lightness

   Saturation is 100%, meaning full color intensity, and lightness is 50%, meaning normal brightness.

3. Final Answer:

   A bright green color -> Option A

4. Quick Check:

   Hue 120° = green, full saturation and medium lightness = bright green [OK]

Hint: Hue 120° means green in HSL colors [OK]

Common Mistakes:

• Confusing hue degrees with RGB values
• Mixing up saturation and lightness effects
• Assuming 100% lightness means white

2. Which of the following is the correct syntax to set a background color using HSL in CSS?

easy

A. background-color: hsl(240, 100%, 50%);

B. background-color: hsl[240, 100%, 50%];

C. background-color: hsl{240, 100%, 50%};

D. background-color: hsl 240, 100%, 50%;

Solution

1. Step 1: Recall CSS function syntax

   CSS functions use parentheses () with comma-separated values inside.

2. Step 2: Check each option's syntax

   background-color: hsl(240, 100%, 50%); uses parentheses and commas correctly; others use brackets, braces, or missing parentheses.

3. Final Answer:

   background-color: hsl(240, 100%, 50%); -> Option A

4. Quick Check:

   HSL uses parentheses and commas in CSS [OK]

Hint: Use parentheses () with commas for HSL in CSS [OK]

Common Mistakes:

• Using square brackets or curly braces instead of parentheses
• Omitting commas between values
• Writing HSL values without parentheses

3. What color will the following CSS produce?

color: hsl(0, 0%, 50%);

medium

A. Bright red

B. Medium gray

C. Dark blue

D. Light green

Solution

1. Step 1: Analyze hue and saturation values

   Hue is 0°, but saturation is 0%, meaning no color saturation (gray scale).

2. Step 2: Interpret lightness value

   Lightness is 50%, which is medium brightness gray.

3. Final Answer:

   Medium gray -> Option B

4. Quick Check:

   Saturation 0% means gray, lightness 50% = medium gray [OK]

Hint: Saturation 0% always gives gray, lightness controls brightness [OK]

Common Mistakes:

• Ignoring saturation and assuming hue affects color
• Confusing lightness with saturation
• Thinking 0% saturation still shows color

4. Identify the error in this CSS rule:

p { color: hsl(360, 120%, 50%); }

medium

A. Missing semicolon after color property

B. Hue value cannot be 360

C. Lightness cannot be 50%

D. Saturation cannot be more than 100%

Solution

1. Step 1: Check hue value range

   Hue can be 0 to 360 degrees; 360 is valid (same as 0).

2. Step 2: Check saturation and lightness ranges

   Saturation must be between 0% and 100%; 120% is invalid.

3. Final Answer:

   Saturation cannot be more than 100% -> Option D

4. Quick Check:

   Saturation max is 100% in HSL [OK]

Hint: Saturation and lightness must be 0%-100% [OK]

Common Mistakes:

• Thinking hue cannot be 360
• Ignoring invalid saturation values
• Assuming missing semicolon causes error here

5. You want to create a smooth color transition from red to green using HSL. Which CSS snippet correctly animates the hue from 0° to 120° while keeping saturation and lightness constant?

hard

A. @keyframes colorChange { from { color: hsl(0, 50%, 100%); } to { color: hsl(120, 50%, 100%); } }

B. @keyframes colorChange { from { color: hsl(0, 100%, 0%); } to { color: hsl(120, 100%, 0%); } }

C. @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } }

D. @keyframes colorChange { from { color: hsl(0, 0%, 50%); } to { color: hsl(120, 0%, 50%); } }

Solution

1. Step 1: Understand the goal of smooth hue transition

   Hue should animate from 0° (red) to 120° (green) with saturation and lightness fixed.

2. Step 2: Check each option's saturation and lightness

   @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } } keeps saturation 100% and lightness 50%, which produces vivid colors. Others have incorrect saturation or lightness values causing dull or black colors.

3. Final Answer:

   @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } } -> Option C

4. Quick Check:

   Animate hue 0° to 120° with full saturation and medium lightness [OK]

Hint: Keep saturation and lightness constant for smooth hue animation [OK]

Common Mistakes:

• Changing saturation or lightness during hue animation
• Using 0% lightness which results in black
• Using 0% saturation which results in gray