How to Change a Background Color in HTML

The simplest way to change a background color

The fastest way to change a background color in HTML is to add a style attribute to the tag you want to color. For a whole page, put the style on the <body> tag. For a single section, put it on a <div> or <p> tag. The syntax is always the same: style="background-color: colorname;" or style="background-color: #hexcode;"

Here is a working example for a full page background:

<body style="background-color: lightblue;"> Your page content goes here. </body>

The page will display with a light blue background. You can replace lightblue with any color name that HTML recognizes, or use a hex code like #3498db for more precise control.

Key Takeaways

Add style="background-color: colorname;" to any HTML tag to color just that element.
Color names like red, blue, and lightgreen work without quotes inside the style attribute.
Hex codes like #FF5733 give you millions of color choices and work the same way as color names.
A style on the <body> tag colors the entire page background; a style on a <div> colors only that box.
Inline styles (written directly in the tag) override any background color set in a separate CSS file.

Using color names versus hex codes

HTML recognizes about 140 named colors you can type directly: red, green, navy, coral, gold, tomato, and many others. Named colors are easiest when you want a common shade and do not need precision. Type the name in lowercase inside the quotes, with no special characters.

Hex codes start with a # followed by six characters (numbers 0–9 and letters A–F). Each pair of characters controls one color channel: red, green, and blue. #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. #FFFFFF is white and #000000 is black. Hex codes let you pick from 16 million colors, so use them when you need a specific shade that does not have a named color.

Both work identically in the style attribute. This colors a box orange using a name: style="background-color: orange;" This colors the same box using hex: style="background-color: #FFA500;"

Coloring a whole page versus a single element

To color the entire page background, place the style attribute on the opening <body> tag. This tag wraps all the visible content on your page, so any background color you set here shows behind everything.

<body style="background-color: #f0f0f0;"> <h1>My Page</h1> <p>This text sits on a light gray background.</p> </body>

To color only one section, use a <div> tag (a box that holds other content) or style the specific tag directly. This example colors only a paragraph:

<p style="background-color: yellow;">This paragraph has a yellow background.</p>

And this example uses a <div> to color a whole section:

<div style="background-color: lightcyan;"> <h2>Section Title</h2> <p>All content inside this div has a light cyan background.</p> </div>

Common mistakes and how to avoid them

The most frequent error is forgetting the colon after background-color. The correct format is background-color: with a colon, not background-color without one. Your browser will ignore the style if the colon is missing.

Another common mistake is misspelling the color name or using uppercase letters. style="background-color: Red;" will not work; it must be lowercase: style="background-color: red;" Hex codes are not case-sensitive, so #ff0000 and #FF0000 both work, but color names must be lowercase.

Do not put quotes around color names inside the style attribute. This is wrong: style="background-color: 'red';" This is correct: style="background-color: red;" The quotes around the entire style value are enough.

If your background color does not appear, check that you closed the opening tag with a > and that the closing tag matches (for example, </div> closes <div>). A missing closing tag can break the layout and hide the color.

Using CSS in a separate file for cleaner code

Inline styles (written directly in the tag) work quickly for testing, but when you have many elements to color, a separate CSS file keeps your HTML cleaner and easier to update. Create a file called style.css and link it in the <head> section of your HTML.

In your HTML file, add this line inside the <head> tag:

<link rel="stylesheet" href="style.css">

Then in your style.css file, write rules like this:

body { background-color: #e8f4f8; } .highlight { background-color: yellow; }

In your HTML, add class="highlight" to any tag you want to color yellow. This method scales better than inline styles because you can change the color in one place and it updates everywhere.

Testing your background color on different devices

After you set a background color, open your page in a web browser and check how it looks. Most browsers display colors consistently, but phone screens and older monitors may show slightly different shades. Light colors like #f0f0f0 (light gray) work well for readability on most devices, while very bright colors can strain the eyes.

If you use a background color, make sure the text on top of it is still readable. Dark text on a light background and light text on a dark background are the easiest to read. Avoid putting dark text on a dark background or light text on a light background, because the contrast will be too low and readers will struggle to see the words.

Frequently Asked Questions

Can I use RGB values instead of hex codes or color names?

Yes. RGB stands for red, green, blue, and uses numbers 0–255 for each channel. The syntax is style="background-color: rgb(255, 0, 0);" for red. This works identically to hex codes and color names, so use whichever format you find easiest to read.

What happens if I set a background color on both the body tag and a div inside it?

The div's color takes priority. If the body has a blue background and a div inside it has a yellow background, that div will show yellow and the rest of the page will show blue. The more specific style (the one closer to the element) wins.

How do I make a background color transparent or see-through?

Use rgba() instead of rgb() or a color name. The fourth number is opacity, from 0 (invisible) to 1 (solid). For example, style="background-color: rgba(255, 0, 0, 0.5);" is red at 50% transparency. You can also use transparent as a value to remove a background color entirely.

Will my background color work in all web browsers?

Yes. Background colors are one of the oldest HTML features and work in every browser on every device. Hex codes, color names, and RGB values all work everywhere, so you do not need to worry about compatibility.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.