The simplest way to change font color in HTML

The fastest way to change a font color is to use the style attribute directly on the text element. Add style="color: colorname" to any tag that wraps your text — usually a paragraph, heading, or span. For example, <p style="color: red">This text is red</p> will display that paragraph in red.

You can name the color by its English word (red, blue, green, purple) or use a hex code, which is a six-character code that starts with a hash symbol. Hex code #FF0000 is red, #0000FF is blue, and #00FF00 is green. The style attribute works on any HTML tag that contains text, so you can color a single word by wrapping it in a <span> tag.

This method works when ready in any browser and requires no setup. The downside is that if you have many colored sections, you will repeat the same code over and over. For a page with lots of color changes, a CSS stylesheet is cleaner and faster to edit.

Key Takeaways

  • Use style="color: colorname" inside any HTML tag to change the text color of that element.
  • You can use English color names (red, blue, green) or hex codes (#FF0000, #0000FF) — both work the same way.
  • Wrap a single word in a <span> tag if you want to color only part of a sentence.
  • For pages with many color changes, a CSS stylesheet in the <head> section is faster to write and easier to update later.

Using a CSS stylesheet for multiple colors

If you are coloring many sections of text, write a style block in the <head> section of your HTML file instead of repeating the style attribute everywhere. Inside the <head>, add <style> tags and then write rules for each color you want to use.

For example, add this to your <head>:

<style> .red-text { color: red; } .blue-text { color: blue; } </style>

Then in your HTML body, use <p class="red-text">This is red</p> instead of writing the style attribute each time. This method saves typing and makes it much easier to change all red text to a different color later — you only edit one line in the style block instead of hunting through your whole page.

Hex codes and RGB values for precise colors

English color names work for basic colors, but if you need a specific shade, use a hex code or RGB value. A hex code is six characters: the first two control red, the next two control green, and the last two control blue. #FF0000 is pure red (red all the way up, no green, no blue). #FF6600 is orange (red and some green, no blue).

RGB values do the same thing with three numbers between 0 and 255. rgb(255, 0, 0) is red. rgb(255, 102, 0) is orange. Both methods produce the same colors — use whichever one you find easier to read. Many color picker tools online will show you the hex code or RGB value for any color you want, so you do not have to memorize them.

You can use hex or RGB in the style attribute the same way you use color names: <p style="color: #FF6600">Orange text</p> or <p style="color: rgb(255, 102, 0)">Orange text</p>.

Changing text color inside links and headings

The style attribute works on any HTML tag, including links and headings. A link inside an <a> tag is normally blue by default, but you can override that color. Use <a href="page.html" style="color: green">Click here</a> to make a link green instead of blue.

Headings like <h1>, <h2>, and <h3> inherit the color of the page text by default, but you can change them too. <h1 style="color: purple">My Heading</h1> will display that heading in purple. If you have many headings and want them all the same color, use a CSS rule in your style block: .heading-color { color: purple; } and then add class="heading-color" to each heading tag.

Common mistakes and how to avoid them

The most common mistake is misspelling the color name or forgetting the hash symbol on a hex code. style="color: red" works, but style="color: rd" does not — the browser will ignore the typo and show the default text color instead. Hex codes must start with #, so style="color: #FF0000" works but style="color: FF0000" does not.

Another mistake is putting the style attribute in the wrong place. It must go inside the opening tag, not after it: <p style="color: red">Text</p> is correct, but <p> style="color: red" Text</p> is wrong. If your text is not changing color, check that the style attribute is inside the tag's angle brackets.

If you use a CSS stylesheet, make sure the class name in your HTML matches the class name in your style block exactly. class="red-text" in your HTML must match .red-text in your CSS — if one says "red-text" and the other says "redtext", the color will not explore.

When to use inline styles versus a stylesheet

Use the inline style attribute (the style="color: red" method) for a single colored word or phrase, or for a quick test. It is fast and requires no setup. Use a CSS stylesheet when you have more than three or four color changes on a page, or when you might want to change those colors later.

A stylesheet also keeps your HTML cleaner and easier to read — your HTML file contains only the structure and content, while your CSS file contains all the styling. If you are building a website with many pages, put your CSS in a separate file and link to it from every page. Then you can change the color of every heading on every page by editing one line in one CSS file.

Frequently Asked Questions

Can I use color names like "lightblue" or "darkgreen"?

Yes. HTML recognizes about 140 named colors, including variations like lightblue, darkgreen, lightcoral, and steelblue. If you are not sure whether a color name exists, try it — if the browser does not recognize it, the text will stay the default color and you will know to use a hex code instead.

What is the difference between hex codes and RGB values?

They produce identical colors — hex codes use base-16 numbers (0-9 and A-F) while RGB uses base-10 numbers (0-255). #FF0000 and rgb(255, 0, 0) are both pure red. Use whichever format feels easier to you. Hex codes are more common in web design, but RGB is easier to understand if you are new to color codes.

Will changing font color work in all browsers?

Yes. The color property is one of the oldest and most widely supported CSS features. Every browser — Chrome, Firefox, Safari, Edge — will display colored text correctly whether you use the style attribute or a stylesheet.

Can I change the color of text inside a table or list?

Yes. The style attribute works on any HTML tag, including table cells (<td>), list items (<li>), and table headers (<th>). Wrap the text in a <span> tag if you want to color only part of a cell or list item.