CSS Colors: Hex, RGB, and Named Colors
When you first start learning web design, colors can feel confusing. What are #ff0000, rgb(0, 0, 255), and names like tomato or skyblue?
In this beginner-friendly guide, you’ll learn how to use three common ways to set colors in CSS:
- Hex colors (like
#ff0000) - RGB colors (like
rgb(255, 0, 0)) - Named colors (like
red)
By the end, you’ll be able to style text and backgrounds with confidence and start making your pages look the way you imagine.
Getting Set Up: Your First Colorful Page
To follow along, you only need:
- A web browser (Chrome, Firefox, Edge, etc.)
- A basic text editor (Notepad, VS Code, etc.)
Step 1: Create an HTML file
- Open your text editor.
- Create a new file and save it as
colors.html. - Paste this starter code inside:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Colors Practice</title>
<style>
/* We'll add our CSS colors here */
</style>
</head>
<body>
<h1>My First Color Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
- Double-click
colors.htmlto open it in your browser.
You should see a simple page with a heading and a paragraph.
Named Colors: The Easiest Place to Start
Named colors are color names that the browser already understands, like red, blue, and green. There are 140 standard named colors in CSS.
Example 1: Using Named Colors
Add this CSS inside the <style> tag in your HTML file, right under the comment:
<style>
/* We'll add our CSS colors here */
h1 {
color: red; /* Text color for the heading */
background: yellow; /* Background behind the heading */
}
p {
color: blue; /* Text color for the paragraph */
}
</style>
What this does:
h1 { ... }targets the<h1>heading.color: red;makes the heading text red.background: yellow;gives the heading a yellow background.p { ... }targets the paragraph, making its text blue.
Expected result:
- Your heading text is red with a yellow background.
- Your paragraph text is blue.
Try it yourself
Change the named colors to others, like:
greenorangepurpletomatoskyblue
Save the file and refresh your browser each time to see the change.
Named colors are great for quick experiments, but you’ll soon want more control. That’s where hex and RGB come in.
Hex Colors: Understanding the # Codes
Hex colors look like this: #ff0000, #00ff00, #0000ff.
A hex color:
- Always starts with
# - Has 6 characters after it
- Uses numbers
0–9and lettersa–f
It’s made of 3 parts:
- First 2 characters = Red
- Middle 2 characters = Green
- Last 2 characters = Blue
Each part goes from 00 (none of that color) to ff (the maximum amount).
Common hex examples
#ff0000= Red#00ff00= Green#0000ff= Blue#000000= Black#ffffff= White
Example 2: Using Hex Colors
Replace your CSS with this:
<style>
h1 {
/* Pure red text using hex */
color: #ff0000;
/* Light gray background using hex */
background: #f0f0f0;
}
p {
/* Dark gray text using hex */
color: #333333;
}
</style>
What this does:
#ff0000is bright red.#f0f0f0is a very light gray (almost white).#333333is a dark gray (softer than pure black).
Expected result:
- Your heading text is bright red on a light gray background.
- Your paragraph text is dark gray.
Try it yourself
Experiment with these hex colors:
#ff6600(orange)#0099ff(bright blue)#66cc66(soft green)#ff00ff(magenta)
Change both color and background values to see which combinations you like.
Don’t worry about memorizing hex codes. Most code editors and design tools give you a color picker that outputs the hex value for you.
RGB Colors: Think in Red, Green, Blue
RGB stands for Red, Green, Blue.
RGB colors look like this: rgb(255, 0, 0).
Each of the three numbers can be between 0 and 255:
- The first number = Red amount
- The second number = Green amount
- The third number = Blue amount
Some examples:
rgb(255, 0, 0)= Redrgb(0, 255, 0)= Greenrgb(0, 0, 255)= Bluergb(0, 0, 0)= Blackrgb(255, 255, 255)= White
Example 3: Using RGB Colors
Update your CSS again:
<style>
h1 {
/* A teal-like color: more green and blue, less red */
color: rgb(0, 150, 150);
/* Soft yellow background: lots of red and green, little blue */
background: rgb(255, 255, 200);
}
p {
/* A purple color: mix of red and blue, no green */
color: rgb(150, 0, 150);
}
</style>
What this does:
rgb(0, 150, 150)gives a teal color.rgb(255, 255, 200)gives a pale yellow background.rgb(150, 0, 150)gives a purple color.
Expected result:
- Your heading is teal on a pale yellow background.
- Your paragraph text is purple.
Try it yourself
Change the numbers and watch what happens:
- Increase red to make colors warmer.
- Increase blue to make colors cooler.
- Add green to move toward lime or teal.
For example, try:
color: rgb(200, 50, 50); /* Reddish */
color: rgb(50, 200, 50); /* Greenish */
color: rgb(50, 50, 200); /* Bluish */
Remember: 0 = none, 255 = full strength.
Putting It All Together: Mixed Color Styles
Now let’s combine named, hex, and RGB colors on one page so you can see them side by side.
Example 4: Three Colored Boxes
Replace the <body> content and CSS with this more complete example.
HTML (inside <body>):
<body>
<h1>CSS Color Examples</h1>
<div class="box named">Named Color Box</div>
<div class="box hex">Hex Color Box</div>
<div class="box rgb">RGB Color Box</div>
</body>
CSS (inside <style>):
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.box {
padding: 20px; /* Space inside the box */
margin: 10px; /* Space outside the box */
color: white; /* Text color (white) */
font-weight: bold; /* Bold text */
}
.named {
/* Using a named color */
background: tomato;
}
.hex {
/* Using a hex color */
background: #0099ff;
}
.rgb {
/* Using an RGB color */
background: rgb(0, 150, 0);
}
</style>
What this does:
.boxis a class used for all three boxes..named,.hex, and.rgbadd different background colors to each box using the three color methods.
Expected result:
You’ll see:
- A heading at the top.
- Three wide boxes:
- One with a
tomatobackground (named color). - One with a bright blue background (
#0099ff, hex). - One with a green background (
rgb(0, 150, 0), RGB).
- One with a
Try it yourself
Change each box to use a different color format:
- Make the
.namedbox use hex instead. - Make the
.hexbox use RGB. - Make the
.rgbbox use a named color.
This is great practice for switching between formats.
When Should You Use Each Color Type?
Here are some simple guidelines:
Named colors
- Best for: quick tests, simple demos, or when you don’t care about exact shades.
- Limit: only 140 standard choices.
Hex colors
- Best for: design work, matching brand colors, copying from design tools.
- Common in CSS files, widely used in tutorials and templates.
RGB colors
- Best for: when you think in terms of red/green/blue amounts.
- Also useful when you use transparency with
rgba()(a more advanced topic).
You don’t have to pick just one. You can mix them on the same page without any problems.
Quick Recap and What’s Next
You’ve just learned three key ways to use color in CSS:
- Named colors like
red,blue, andtomatoare easy to remember and great for quick experiments. - Hex colors like
#ff0000and#0099ffgive you precise control over shades. - RGB colors like
rgb(255, 0, 0)let you mix red, green, and blue amounts directly.
If you’ve followed along and edited the examples, you’ve already written real CSS. That’s a big win—keep going!
Next steps you can try:
- Look up a CSS color picker online and generate your own hex or RGB values.
- Add more elements (like buttons or links) and style their colors.
- Explore
rgba()to add transparency to your colors.
The more you experiment, the more comfortable you’ll feel. Keep playing with colors—you’re well on your way to designing beautiful web pages.
