HEX Colors

In the last lesson you learned about CSS Colors and easy color names like red and blue. Now let’s look at HEX colors. These let you pick from millions of colors, not just the few that have names.

🎨 What is a HEX Color?

A HEX color is a code that starts with a # and then has six letters or numbers. It looks like #ff0000 for red or #0000ff for blue.

So why do we even need this? Color names are nice. But there are only about 140 of them. Now say a designer wants one exact shade of blue that has no name. What then? This is where a HEX code helps. It is a short code that points to one exact color out of millions. Think of it like a phone number for a color. Every color has its own number.

You write it like this.

p {
  color: #ff0000; /* bright red */
}

🤔 How does the code work?

Think of a HEX code like mixing paint. You have three paint cans: red, green, and blue. You take some amount from each can and mix them. That mix gives you your final color. This mixing of red, green, and blue is called RGB, which just means Red, Green, Blue.

The six characters after the # are really three pairs. Each pair controls one color.

/* #RRGGBB */
/*  RR = red   */
/*  GG = green */
/*  BB = blue  */
color: #ff8800;

Here is what each pair means.

• The first pair ff is how much red you want.
• The middle pair 88 is how much green you want.
• The last pair 00 is how much blue you want.

Each pair goes from 00 up to ff. So 00 means none of that color. And ff means the most of that color. The letters a to f are just a way to count past 9. So the counting goes 0 to 9, then a, b, c, d, e, f.

🧩 Some colors to remember

You do not need to memorize many codes. But a few are very common and good to know.

See the pattern? When all three pairs are the same, you get black, white, or a shade of grey. When one pair is high and the other two are 00, you get a strong red, green, or blue.

✏️ A real example

Let’s make a simple box with a HEX color background and HEX color text. This is the kind of thing you do on almost every web page.

<div class="card">
  <h2 class="title">Hello!</h2>
  <p>Welcome to my page.</p>
</div>

Now the CSS. We give the box a soft blue background and dark text.

.card {
  background-color: #e8f0fe; /* soft light blue */
  color: #202124;            /* almost black text */
  padding: 20px;
}

.title {
  color: #1a73e8; /* a clear medium blue */
}

The background-color is the fill color behind everything in the box. The color sets the text color. And padding adds some space inside the box so the text does not touch the edges.

✂️ The short three-digit form

There is a shorter way to write some HEX codes. When both characters in a pair are the same, you can write just one of them.

So #ffffff can become #fff. And #ff0000 can become #f00. The browser just doubles each character back for you.

This first pair of lines means the exact same white. And the next pair means the exact same red.

/* These two mean the same white */
background-color: #ffffff;
background-color: #fff;

/* And these mean the same red */
color: #ff0000;
color: #f00;

This short form only works when each pair has two matching characters. So #ab12cd can not be shortened. The characters in those pairs do not match.

⚠️ Common Mistakes

A few small slips trip up almost every beginner. Watch out for these.

• Forgetting the # at the start. color: ff0000; does nothing. It must be color: #ff0000;.
• Using the wrong number of characters. A HEX code needs either 3 or 6 characters after the #. Five characters like #ff000 will not work.
• Mixing up the order. It is always red, then green, then blue. If your color looks wrong, check which pair you changed.
• Adding spaces inside the code. Write #ff0000, not # ff0000 or #ff 0000.

✅ Best Practices

These habits keep your color codes clean and easy to read.

• Pick your HEX codes with a color picker tool instead of guessing. Most code editors and design apps have one built in.
• Use lowercase letters like #ffaa00. It is not required, but most people do it and it reads cleaner.
• Use the short 3-character form when you can, like #fff. It is quicker to type and read.
• Keep all your colors in one place so your whole site matches. You will learn a tidy way to do this later with variables.

🧩 What You’ve Learned

Here is a quick look back at what we covered.

• ✅ A HEX color is a # followed by 6 characters that point to one exact color.
• ✅ The 6 characters are three pairs: red, then green, then blue (RRGGBB).
• ✅ Each pair goes from 00 (none) to ff (full).
• ✅ #000000 is black, #ffffff is white, and equal pairs give grey.
• ✅ You can shorten codes like #ffffff to #fff when each pair has matching characters.

🚀 What’s Next?

Now you know how to pick exact colors with HEX codes. Next you will learn another way to write the same red, green, and blue mix, but with plain numbers instead of letters.

RGB Colors