How to Change Font Color in HTML

The simplest way to change font color in HTML

You change font color in HTML using the style attribute with the color property. The most direct method is to add style="color: colorname" directly to any text tag. For example, <p style="color: red">This text is red</p> makes that paragraph red.

You can specify colors three ways: by name (like red, blue, green), by hex code (like #FF5733), or by RGB values (like rgb(255, 87, 51)). Hex codes and RGB give you millions of color options, while named colors are simpler but limited to about 140 standard names.

If you want to change color for multiple elements without repeating the style attribute everywhere, use CSS in a <style> tag in your document's <head> section, or link to an external CSS file. This is cleaner and easier to maintain as your page grows.

Key Takeaways

Add style="color: colorname" directly to any HTML tag to change that element's text color immediately.
Use hex codes like #FF5733 or RGB values like rgb(255, 87, 51) for precise color control beyond the 140 named colors.
For multiple elements, write CSS rules in a <style> tag or external stylesheet instead of repeating the style attribute.
The color property only affects text; use background-color if you want to change the background behind the text instead.

Using inline styles for single elements

Inline styles work fastest when you need to color just one or two pieces of text. Write the style attribute directly inside the opening tag of any element that holds text: paragraphs, headings, list items, links, or spans.

Here are real examples that work in any browser:

<h1 style="color: navy">My Heading</h1> — the heading appears in navy blue
<p style="color: #2E7D32">Green text</p> — the paragraph is dark green (hex code)
<a style="color: rgb(200, 50, 100)">Link text</a> — the link is a dusty rose color (RGB)
<span style="color: orange">Just this word</span> — only the text inside the span changes color

Inline styles override any other color rules, so they always win. This makes them useful for one-off changes, but if you find yourself adding the same color to many elements, switch to CSS instead — it saves time and keeps your HTML cleaner.

Writing color rules in CSS

CSS lets you set colors for whole groups of elements at once. Add a <style> tag in your document's <head> section and write rules that target the elements you want to color.

Here is a working example:

<head> <style> p { color: darkblue; } h2 { color: #C41E3A; } .highlight { color: gold; } </style> </head> <body> <p>All paragraphs are now dark blue</p> <p>This one too</p> <h2>All h2 headings are crimson</h2> <p class="highlight">This paragraph is gold</p> </body>

The p { color: darkblue; } rule colors every paragraph on the page. The .highlight { color: gold; } rule colors only elements with class="highlight". This approach scales well — change the color once in CSS and it updates everywhere that rule applies.

Understanding color formats: names, hex, and RGB

HTML and CSS accept three color formats, and each has a purpose. Named colors like red, blue, green, purple, and orange are easiest to read and remember. There are about 140 standard names that all browsers recognize. Use them when you need a basic color and readability matters more than precision.

Hex codes start with a hash symbol and six characters: #FF5733. Each pair of characters represents red, green, and blue intensity on a scale from 00 (none) to FF (full). Hex codes give you 16 million possible colors and are the standard in web design. Tools like Google's color picker or Coolors.co generate hex codes for you — just copy and paste.

RGB values use the format rgb(255, 87, 51), where each number is 0 to 255. They work identically to hex codes but are easier to understand if you think in decimal numbers. Some designers prefer them; others prefer hex. Both work equally well in modern browsers.

A fourth format, HSL (hue, saturation, lightness), exists but is less common. It works like hsl(9, 100%, 60%) and is useful if you think about color in terms of brightness and saturation rather than RGB mixing. All four formats are valid; pick whichever makes sense to you.

Changing text color versus background color

The color property changes the text itself. If you want to color the area behind the text instead, use background-color. Both work the same way — same syntax, same color formats.

Here is the difference:

<p style="color: white">White text</p> — the letters are white, background stays default
<p style="background-color: navy">Text on navy</p> — the text stays black (or default), but the background is navy
<p style="color: white; background-color: navy">Both</p> — white text on a navy background

You can combine both in the same style attribute. This is useful for highlighting important text or creating button-like elements. Make sure the text color and background color have enough contrast so people can read it — white text on yellow background is hard to read, but white text on navy is clear.

Common mistakes and how to fix them

The most common error is misspelling the color name or forgetting the hash in a hex code. color: red works, but color: redd does not — the browser ignores the invalid color and uses the default instead. Similarly, color: FF5733 fails; it must be color: #FF5733.

Another mistake is putting the style attribute in the wrong place. It goes inside the opening tag, not after the closing tag: <p style="color: blue">Text</p> is correct, but <p>Text</p style="color: blue"> does not work.

If you write CSS in a <style> tag, remember that the tag must be in the <head> section of your document, not in the body. The browser reads the head first and applies those rules before displaying the page. CSS in the body still works in most browsers, but it is not standard practice.

If a color is not showing up, check the browser's developer tools. Right-click the element, select "Inspect" or "Inspect Element", and look at the Styles panel. It will show you which rules are applied and which are overridden. This is the fastest way to debug color problems.

Frequently Asked Questions

Can I use color names like "lightblue" or do I have to use hex codes?

Named colors work fine. lightblue, darkgreen, and lightcoral are all valid. The browser recognizes about 140 standard color names. Hex codes give you more precision, but named colors are simpler and perfectly acceptable for most projects.

What is the difference between color and font-color?

There is no font-color property in HTML or CSS. The correct property is color. If you use font-color, the browser ignores it and the text stays the default color. Always use color for text.

How do I change the color of a link?

Use the same color property on the <a> tag: <a style="color: purple">Link</a>. In CSS, you can target all links with a { color: purple; }. Links have special states (visited, hover, active), so you may want to use CSS selectors like a:hover { color: darkpurple; } to change color when someone hovers over the link.

Do I need to close the style tag?

Yes. The <style> tag must have a closing </style> tag. Everything between them is CSS. If you forget to close it, the browser may apply your CSS rules to the rest of the page in unexpected ways.

What if the color I want is not in the named colors list?

Use a hex code or RGB value instead. Search "color picker" online, click on the color you want, and copy the hex code or RGB value it gives you. Paste it into your style attribute. This gives you access to millions of colors beyond the 140 named ones.

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.