0
0
CSSmarkup~5 mins

RGB and RGBA in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

RGB and RGBA let you pick colors by mixing red, green, and blue light. RGBA adds transparency so you can see through colors.

When you want to set a background color on a webpage.
When you want a button color that is partly see-through.
When you want to create color overlays on images.
When you want to match colors exactly by mixing red, green, and blue values.
Syntax
CSS
rgb(red, green, blue)
rgba(red, green, blue, alpha)

Red, green, and blue values go from 0 to 255.

Alpha in rgba is a number from 0 (fully transparent) to 1 (fully opaque).

Examples
This sets a bright red background color.
CSS
background-color: rgb(255, 0, 0);
This sets a green text color that is half see-through.
CSS
color: rgba(0, 128, 0, 0.5);
This sets a blue border color.
CSS
border-color: rgb(0, 0, 255);
This sets an orange background with 30% opacity.
CSS
background-color: rgba(255, 165, 0, 0.3);
Sample Program

This page shows three colored boxes. The first uses rgb for a solid red color. The second uses rgba for a green color that is half see-through. The third uses rgba for a blue color that is mostly see-through. Each box has some padding and rounded corners for a neat look.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>RGB and RGBA Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
    }
    .box1 {
      background-color: rgb(255, 0, 0);
      color: white;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
    }
    .box2 {
      background-color: rgba(0, 128, 0, 0.5);
      color: black;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
    }
    .box3 {
      background-color: rgba(0, 0, 255, 0.3);
      color: black;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <section class="box1" aria-label="Bright red background">
    This box has a bright red background using rgb(255, 0, 0).
  </section>
  <section class="box2" aria-label="Semi-transparent green background">
    This box has a semi-transparent green background using rgba(0, 128, 0, 0.5).
  </section>
  <section class="box3" aria-label="Light transparent blue background">
    This box has a light transparent blue background using rgba(0, 0, 255, 0.3).
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use rgb when you want solid colors without transparency.

Use rgba when you want to add see-through effects to colors.

Values outside 0-255 for rgb or 0-1 for alpha will be ignored or cause unexpected colors.

Summary

RGB mixes red, green, and blue light to create colors.

RGBA adds an alpha value for transparency.

Use these to control colors and see-through effects in your webpage design.