Colors

Let me ask you something.

Close your eyes for a second and think about Netflix. What is the first thing that comes to mind visually?

Black background. Red logo. White text.

That is it. Three colors. And yet it feels instantly recognizable. Instantly professional. Instantly Netflix.

Colors are that powerful. They set the mood, they guide the eye, they make something feel cheap or premium in a split second. And in CSS you have complete control over every single color on your page.

Let us learn how to use them.

How You Set a Color in CSS

In CSS there are two main things you will color constantly.

• The text itself — using the color property
• The background — using the background-color property

We will cover background-color in its own lesson. Right now let us focus on text color.

Here is how it looks:

That is it. You pick the element, you write color, you give it a value. The heading turns red.

There are four different ways to write that color value in CSS. Let us go through each one.

CSS Colors Using Names

The simplest way to set a color is to just type its name.

CSS has 140 built-in color names. Things like red, blue, green, black, orange, purple, tomato, coral, salmon, skyblue, gold.

Yes, tomato and salmon are real CSS color names. I smiled the first time I found that out too.

Color names are great for quick testing or when you just need something basic. But in real projects you will rarely use them. The reason is simple — they are not precise enough. There are hundreds of shades of blue. Which blue do you want exactly? Color names cannot answer that. The next method can.

CSS Colors Using Hex Codes

This is what you will see in almost every real project. Every design tool, every color palette, every handoff from a designer to a developer — they all use hex codes.

That sharp symbol followed by six characters. That is a hex code. And that specific one — #E50914 — is the exact red Netflix uses for their logo.

Here is how it works. Those six characters are split into three pairs. The first pair controls how much red is in the color. The second pair controls green. The third pair controls blue. Each pair goes from 00 which means none of that color all the way to FF which means the maximum amount.

So #E50914 means a lot of red, almost no green, a tiny bit of blue. Which gives you that deep Netflix red.

You do not need to memorize any of this. You will never sit there calculating hex codes by hand. You just pick a color from a color picker and copy the hex code. But understanding what those characters mean helps you read other people's code confidently.

CSS Colors Using RGB

RGB stands for Red Green Blue. It works on the same idea as hex codes — you mix three colors together to get your final color. But instead of characters you use numbers from 0 to 255.

That is the exact same Netflix red written as RGB. 229 red, 9 green, 20 blue.

0 means none of that color. 255 means the full amount.

So pure red is rgb(255, 0, 0). Pure white is rgb(255, 255, 255). Pure black is rgb(0, 0, 0).

RGB and hex codes do the exact same thing. Most developers just prefer hex codes because they are shorter to write. But RGB is worth knowing because it leads us directly to the next one which you will use all the time.

CSS Colors Using RGBA

RGBA is RGB with one extra value — opacity. That A stands for alpha which just means how transparent the color is.

That last number goes from 0 to 1. 1 means fully visible. 0 means completely invisible. 0.5 means half transparent.

Why does this matter? Think about text sitting on top of a background image. Sometimes full solid text feels too harsh. Dropping the opacity slightly makes it feel softer and more elegant. Small difference, big visual impact.

You will use RGBA a lot when we start building the hero section of the Netflix clone.

Which One Should You Use

Here is my honest take after building a lot of projects.

• Use hex codes for most colors. They are precise, they are what designers give you, they are what every color tool outputs. Make them your default.
• Use RGBA when you need transparency. Hex codes cannot do transparency. RGBA can.
• Use color names only when you are quickly testing something and do not care about the exact shade.