RGB and RGBA in CSS - Mini Project: Build & Apply

Coloring a Box with RGB and RGBA

📖 Scenario: You want to create a colorful box on a webpage. You will use RGB and RGBA colors to style the box's background. RGB colors use red, green, and blue values. RGBA colors add transparency with an alpha value.

🎯 Goal: Build a simple webpage with a box that has a solid RGB background color and a semi-transparent RGBA background color on hover.

📋 What You'll Learn

Create a box with a fixed size

Use an RGB color for the box background

Add a hover effect that changes the background to an RGBA color with transparency

Use CSS variables for the colors

Make sure the box is centered on the page

💡 Why This Matters

🌍 Real World

Using RGB and RGBA colors is common in web design to create vibrant colors and add transparency effects for better visual appeal.

💼 Career

Web developers often use RGB and RGBA colors to style websites and create interactive elements that respond to user actions like hovering.

1

Create the HTML structure with a box

Write the HTML code to create a <div> with the class color-box. This will be the box you will style.

CSS

Hint

Use a <div> tag with class color-box inside the <body>.

2

Add CSS variables for RGB and RGBA colors

In a <style> tag inside the <head>, create CSS variables called --rgb-color with value rgb(255, 0, 0) and --rgba-color with value rgba(255, 0, 0, 0.5).

CSS

  
  
  RGB and RGBA Box
  
    :root {
      /* Define CSS variables for colors here */
    }
  


  

Hint

Use :root selector to define CSS variables with --rgb-color and --rgba-color.

3

Style the box with RGB background and size

In the <style> tag, add CSS for the .color-box class. Set the width and height to 10rem. Set the background color to the CSS variable --rgb-color. Center the box horizontally and vertically using Flexbox on the body.

CSS

  
  
  RGB and RGBA Box
  
    :root {
      --rgb-color: rgb(255, 0, 0);
      --rgba-color: rgba(255, 0, 0, 0.5);
    }
    body {
      /* Center the box horizontally and vertically using Flexbox */
    }
    .color-box {
      /* Set width, height, and background color here */
    }
  


  

Hint

Use Flexbox on body to center the box. Use var(--rgb-color) for the background color.

4

Add hover effect with RGBA background color

In the <style> tag, add a CSS rule for .color-box:hover. Change the background color to the CSS variable --rgba-color on hover.

CSS

  
  
  RGB and RGBA Box
  
    :root {
      --rgb-color: rgb(255, 0, 0);
      --rgba-color: rgba(255, 0, 0, 0.5);
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .color-box {
      width: 10rem;
      height: 10rem;
      background-color: var(--rgb-color);
    }
    /* Add hover effect here */
  


  

Hint

Use the :hover pseudo-class on .color-box to change the background color to var(--rgba-color).

Practice

1. What does the rgba(255, 0, 0, 0.5) color value represent in CSS?

easy

A. A solid black color

B. A fully opaque green color

C. A fully transparent blue color

D. A semi-transparent red color

Solution

1. Step 1: Understand RGBA components

   The first three numbers (255, 0, 0) represent red, green, and blue. Here, red is full (255), green and blue are zero.

2. Step 2: Interpret the alpha value

   The last number 0.5 means 50% transparency, so the color is semi-transparent.

3. Final Answer:

   A semi-transparent red color -> Option D

4. Quick Check:

   RGBA = red + transparency = semi-transparent red [OK]

Hint: RGBA adds transparency as the last number [OK]

Common Mistakes:

• Confusing RGB with RGBA
• Ignoring the alpha transparency value
• Mixing up color order (RGB)
• Thinking 0.5 means fully opaque

2. Which of the following is the correct syntax for a fully opaque blue color using RGB in CSS?

easy

A. rgb(255, 0, 0, 1)

B. rgb(0, 0, 255)

C. rgba(0, 0, 255)

D. rgba(255, 255, 0)

Solution

1. Step 1: Recall RGB syntax

   RGB uses three numbers for red, green, and blue. The format is rgb(red, green, blue).

2. Step 2: Check the options

   rgb(0, 0, 255) uses rgb with three values and sets blue to 255, which is correct for blue color.

3. Final Answer:

   rgb(0, 0, 255) -> Option B

4. Quick Check:

   RGB needs 3 values, no alpha [OK]

Hint: RGB uses exactly 3 numbers, no alpha [OK]

Common Mistakes:

• Using rgba without alpha value
• Adding extra values in rgb
• Mixing order of colors
• Using rgba with missing parameters

3. What color and transparency will the following CSS produce?

background-color: rgba(0, 128, 0, 0.3);

medium

A. A semi-transparent green color

B. A solid green color

C. A semi-transparent red color

D. A fully transparent color

Solution

1. Step 1: Identify RGB values

   The values (0, 128, 0) mean no red, medium green, no blue, so the color is green.

2. Step 2: Interpret alpha transparency

   The alpha value 0.3 means 30% opacity, so the color is mostly transparent but visible.

3. Final Answer:

   A semi-transparent green color -> Option A

4. Quick Check:

   RGBA = green + 30% opacity = semi-transparent green [OK]

Hint: Alpha less than 1 means some transparency [OK]

Common Mistakes:

• Assuming alpha 0.3 means fully opaque
• Mixing up RGB color order
• Confusing green with red or blue
• Ignoring alpha value

4. Find the error in this CSS color declaration:

color: rgba(255, 255, 255, 2);

medium

A. RGB values must be between 0 and 100

B. Missing semicolon after rgba

C. Alpha value cannot be greater than 1

D. RGBA requires 5 parameters

Solution

1. Step 1: Check alpha value range

   Alpha in rgba must be between 0 (transparent) and 1 (opaque). Here it is 2, which is invalid.

2. Step 2: Verify other parts

   RGB values 255 are valid, semicolon is present, and rgba takes 4 parameters, so no other errors.

3. Final Answer:

   Alpha value cannot be greater than 1 -> Option C

4. Quick Check:

   Alpha must be 0 to 1 [OK]

Hint: Alpha must be between 0 and 1 inclusive [OK]

Common Mistakes:

• Using alpha > 1
• Confusing RGB max values
• Forgetting semicolon (not error here)
• Adding extra parameters

5. You want a background color that is red with 40% opacity over a white page. Which CSS rule correctly achieves this effect?

hard

A. background-color: rgba(255, 0, 0, 0.4);

B. background-color: rgb(255, 0, 0, 0.4);

C. background-color: rgba(255, 255, 255, 0.4);

D. background-color: rgb(255, 0, 0); opacity: 0.4;

Solution

1. Step 1: Choose correct function for transparency

   Only rgba() supports alpha transparency as the fourth parameter. rgb() does not.

2. Step 2: Verify color and transparency

   background-color: rgba(255, 0, 0, 0.4); uses red (255, 0, 0) with alpha 0.4, which means 40% opacity (60% transparent), exactly what is needed.

3. Step 3: Check other options

   background-color: rgb(255, 0, 0, 0.4); uses rgb with 4 parameters (invalid). background-color: rgba(255, 255, 255, 0.4); uses white color, not red. background-color: rgb(255, 0, 0); opacity: 0.4; sets opacity on the whole element, which affects all content, not just background.

4. Final Answer:

   background-color: rgba(255, 0, 0, 0.4); -> Option A

5. Quick Check:

   RGBA with alpha = 0.4 for semi-transparent red [OK]

Hint: Use rgba() for color + transparency in one step [OK]

Common Mistakes:

• Using rgb() with alpha value
• Setting opacity on element instead of color
• Choosing wrong color values
• Confusing rgba parameters order