How to Change Background Colour in HTML

The simplest way to change background colour in HTML

The fastest way is to add a style attribute to the body tag at the top of your HTML file. Open your file, find the line that says <body>, and change it to <body style="background-color: blue;">. Replace "blue" with any colour name (red, green, yellow, purple) or a hex code like #FF5733. The background of your entire page will change when ready.

If you want to change the background of just one section — a paragraph, a box, a heading — add the same style attribute to that specific tag instead. For example, <p style="background-color: lightgray;">Your text here</p> puts a light gray background behind only that paragraph.

Key Takeaways

Add style="background-color: [colour];" to the opening tag of any HTML element to change its background.
Use colour names (blue, red, green) or hex codes (#FF5733) — both work the same way.
Put the style on the <body> tag to change the whole page background, or on individual tags to change just that element.
A CSS file or <style> block in your HTML head keeps your code cleaner if you are changing many colours at once.

Using colour names versus hex codes

HTML recognises about 140 standard colour names: blue, red, green, orange, purple, pink, brown, gray, black, white, and many others. Type the name directly into the style attribute and it works. This is the easiest method if you know what colour you want and do not need exact control.

Hex codes give you millions of colour choices. A hex code is a # followed by six characters, like #FF5733 (a shade of orange) or #000000 (black). You can find hex codes for almost any colour by searching "colour picker" online — paste the code into your style attribute the same way you would a colour name. Hex codes are more precise but take longer to find.

RGB values work too: style="background-color: rgb(255, 87, 51);" produces the same orange as #FF5733. Most people stick with either colour names for simplicity or hex codes for precision.

Changing background colour for the whole page

To change the background of your entire page, edit the opening <body> tag. Find this line near the top of your HTML file:

<body>

Change it to:

Every element on the page will now sit on a light blue background. This method works for any colour name or hex code. If your page has a closing </body> tag at the end (it should), leave it as is — only the opening tag needs the style attribute.

Changing background colour for specific elements

You can put a background colour on any HTML tag: paragraphs, headings, divs, buttons, lists. The syntax is always the same — add style="background-color: [colour];" to the opening tag.

A few common examples:

<h1 style="background-color: yellow;">My Heading</h1> — yellow background behind a heading
<div style="background-color: #E8F4F8;">Content here</div> — light blue background behind a box of content
<button style="background-color: green;">Click me</button> — green background on a button

Each element keeps its own background colour independently. You can have a yellow heading, a blue paragraph, and a green button all on the same page.

Using a style block for cleaner code

If you are changing the background colour of many elements, writing style="background-color:" over and over gets messy. A cleaner approach is to add a style block in the <head> section of your HTML file.

Add this between your <head> and </head> tags:

Now every <body> tag has a light blue background, every <h1> heading has yellow, and every <p> paragraph has white — without writing the style attribute on each one. This method scales better as your page grows.

Using a separate CSS file

For larger projects, move all your colour rules into a separate CSS file. Create a new file called styles.css and add your colour rules there:

body { background-color: lightblue; }h1 { background-color: yellow; }p { background-color: white; }

Then link to that file in your HTML <head> with this line:

Your HTML stays clean and readable, and you can reuse the same CSS file across multiple HTML pages. This is the standard approach for websites with more than a few pages.

Frequently Asked Questions

What if I type a colour name and it does not work?

You may have misspelled it or used a colour name that HTML does not recognise. Stick to common names: red, blue, green, yellow, orange, purple, pink, brown, gray, black, white. If you are unsure, use a hex code instead — search "colour picker" online and paste the code into your style attribute.

Can I use RGB values instead of hex codes?

Yes. style="background-color: rgb(255, 0, 0);" produces red, the same as #FF0000. RGB stands for red, green, blue, and each number ranges from 0 to 255. Hex codes and RGB values produce identical results — use whichever you find easier to remember.

How do I make the background transparent?

Use style="background-color: transparent;". The element will have no background colour and you will see through to whatever is behind it. This is useful when you want to remove a background colour you set earlier.

Does background colour work on all HTML tags?

Yes, you can add a background colour to any tag: body, div, p, h1, button, span, table, list items, and more. The syntax is always the same — add the style attribute to the opening tag.

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.