RGB Colors

Table of Contents +

In the last lesson you learned about HEX Colors. HEX is great, but those codes like #ff0000 can feel like a secret code. Now let’s look at another way to write color that reads more like plain numbers. It is called RGB.

🎨 What is RGB?

RGB is a way to write a color using three numbers. Each number says how much of one base light to mix in.

The three base lights are Red, Green, and Blue. That is where the name RGB comes from. You mix these three lights together and you get any color you want on a screen.

Think of it like this. Each number can go from 0 to 255.

0 means none of that light. It is switched off.
255 means full of that light. It is fully on.

So rgb(255, 0, 0) means full red, no green, no blue. That gives you pure red.

🧩 A real-life analogy

Imagine you have three water taps. One pours red paint, one pours green, one pours blue. You hold a cup under them.

Turn only the red tap on full and you get red paint.
Turn red and green on full and you get yellow.
Turn all three on full and the cup fills with white.
Turn all three off and the cup stays black.

RGB works the same way. The three numbers are just how far you open each tap.

🤔 Why use RGB instead of HEX?

Both HEX and RGB give you the same colors. So why learn RGB too?

Here is the real reason. HEX mixes letters and numbers together, like #3c9d8f. That is hard to read and hard to change in your head.

RGB uses normal numbers from 0 to 255. So you can read them and guess the color.
It is easy to nudge a color. Want a bit more red? Just raise the first number.
And RGB has a special friend called RGBA. It lets you make a color see-through, which HEX cannot do as easily. You will meet RGBA soon.

✍️ The syntax

You write RGB with the word rgb, then three numbers inside round brackets. The numbers go in the order red, green, blue.

This rule sets the text color of a paragraph to pure blue.

p {
  color: rgb(0, 0, 255);
}

Read it out loud. Red is 0, green is 0, blue is 255. So you get full blue and nothing else.

Here is the shape you always follow.

selector {
  color: rgb(red, green, blue);
}

Each of the three slots takes a number from 0 to 255. A slot is just one spot where a number goes. Nothing more, nothing less.

🎨 A simple example

Let’s color a few headings so you can see how the numbers map to real colors.

h1 {
  color: rgb(255, 0, 0);    /* full red */
}

h2 {
  color: rgb(0, 128, 0);    /* medium green */
}

h3 {
  color: rgb(128, 128, 128); /* grey */
}

Look at the last one. When red, green, and blue are all the same number, you get a shade of grey. Low numbers give dark grey. High numbers give light grey.

What you see

The first heading is bright red. The second is a calm green, not too bright. The third is a plain grey, halfway between black and white.

🌗 RGBA: adding see-through color

Now meet the bonus. RGBA is RGB with one extra number on the end. That extra number is called alpha. Alpha controls how see-through the color is.

Alpha goes from 0 to 1.

0 means fully see-through. The color is invisible.
1 means fully solid. You cannot see through it.
0.5 means half see-through. So whatever is behind shows through a little.

This rule gives a box a black background that is half see-through.

.box {
  background-color: rgba(0, 0, 0, 0.5);
}

So the first three numbers pick the color, just like always. Then the fourth number, 0.5, makes it half see-through.

What you see

The box looks like a dark grey glass over the page. You can still see whatever sits behind it, but it is darkened.

Good to know

Modern browsers also let you add alpha right inside rgb, like rgb(0, 0, 0, 0.5). Both work. Use whichever feels clearer to you.

⚠️ Common Mistakes

A few small slips trip up most beginners. So watch out for these.

❌ Going past 255. Writing rgb(300, 0, 0) is wrong. The top is 255, not higher.
❌ Using a % or px. The numbers are plain, like 255, not 255px.
❌ Forgetting a number. RGB needs all three. So rgb(255, 0) will not work.
❌ Making alpha bigger than 1. For RGBA the last number stays between 0 and 1, like 0.3, not 30.

This shows the wrong way and the right way side by side.

/* ❌ Avoid */
p { color: rgb(300, 0, 0); }

/* ✅ Good */
p { color: rgb(255, 0, 0); }

✅ Best Practices

Keep these habits and your colors will stay clean and easy to change.

✅ Use RGB when you want to read or change a color by eye. Plain numbers are friendly.
✅ Reach for RGBA when you need a see-through color, like a dark layer over an image.
✅ Keep the same number in all three slots when you want a clean grey.
✅ Pick one style across your project. Mixing HEX and RGB everywhere makes the code harder to follow.

🧩 What You’ve Learned

You now know a friendlier way to write color. Here is the quick recap.

✅ RGB mixes Red, Green, and Blue light to make any color.
✅ Each of the three numbers goes from 0 (off) to 255 (full).
✅ Equal numbers in all three slots give you grey.
✅ RGBA adds a fourth number, alpha, from 0 to 1, to make a color see-through.
✅ HEX and RGB give the same colors, so pick the one that feels clearer to you.

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

🚀 What’s Next?

Next you will learn one more way to describe color. This one makes picking shades even easier.

HSL Colors

Previous HEX Colors Next HSL Colors

Share & Connect

Share on LinkedIn