How to Change Font Color in HTML

The simplest way to change font color in HTML

The most direct way to change font color is to use the style attribute with the color property inside any text tag. Write it like this:

Replace blue with any color name HTML recognizes — red, green, orange, purple, black, white, and about 140 others. The text inside the tag will display in that color. This method works on any tag that holds text: paragraphs, headings, links, list items, and spans.

If you want to color only part of a sentence, wrap that part in a span tag and add the style to the span:

<p>This is normal text, but <span style="color: red;">this part is red</span>.</p>

Key Takeaways

Use style="color: colorname;" inside any text tag to change that text's color.
HTML recognizes about 140 color names like blue, red, green, and orange, or you can use hex codes like #FF5733 for exact colors.
Wrap a span tag around part of a sentence if you want to color only some words, not the whole paragraph.
CSS classes and stylesheets let you reuse the same color across many tags without repeating the style attribute each time.

Using hex codes for exact colors

Color names work fine for basic colors, but if you need a specific shade, use a hex code — a six-digit code that represents any color a screen can display. Hex codes start with a hash mark and look like this: #FF5733.

You write it the same way as a color name:

<p style="color: #FF5733;">This text is a specific shade of orange.</p>

You can find hex codes for any color using a free color picker tool online — search "hex color picker" and click on the color you want. The tool will show you the hex code to copy and paste. This method gives you far more control than color names alone.

Changing color with CSS classes

If you want to use the same color in many places, writing style="color: blue;" over and over gets tedious. Instead, create a CSS class in a <style> tag at the top of your HTML file:

Then use that class name on any tag:

<p class="highlight">This text is red.</p> <h2 class="highlight">This heading is also red.</h2>

Now if you decide red should be orange instead, you only change it once in the style block, and every tag using that class updates automatically. This saves time and keeps your code cleaner.

Using an external stylesheet

For larger projects, move all your color rules into a separate CSS file instead of putting them in the HTML file itself. Create a file called styles.css and write your color rules there:

.highlight { color: red; } .warning { color: orange; } .success { color: green; }

Then link that file at the top of your HTML file, inside the <head> tag:

Now every HTML page that links to styles.css uses the same colors. If you run a website with many pages, this approach means you can change your color scheme everywhere at once.

RGB and RGBA colors

Another way to specify color is RGB (red, green, blue), which mixes three numbers between 0 and 255 to create any color:

The first number is red, the second is green, the third is blue. rgb(255, 0, 0) is pure red. rgb(0, 255, 0) is pure green. rgb(128, 128, 128) is gray.

If you want to make text semi-transparent, use RGBA, which adds a fourth number called the alpha channel (a value between 0 and 1, where 1 is fully opaque and 0 is invisible):

<p style="color: rgba(255, 0, 0, 0.5);">This text is red and semi-transparent.</p>

Most people find hex codes easier to remember than RGB, but RGB is useful when you are working with transparency.

Common mistakes to avoid

The most common error is forgetting the colon after color or the semicolon at the end. Write color: blue;, not color blue or color: blue. The colon separates the property name from the value, and the semicolon ends the rule.

Another mistake is misspelling the color name. HTML recognizes blue but not blu or light blue (use lightblue instead, with no space). If a color name does not work, switch to a hex code instead — hex codes never fail because they represent the exact color you want.

Do not confuse the color property (which changes text color) with background-color (which changes the background behind the text). If you want a blue background, write style="background-color: blue;", not style="color: blue;".

Frequently Asked Questions

Can I change the color of a link?

Yes. Use style="color: red;" on the link tag itself: <a href="page.html" style="color: red;">Click here</a>. You can also use CSS to style all links at once by creating a rule for the a tag in your stylesheet.

What if my color does not show up?

Check that you spelled the color name correctly, or that your hex code has six digits after the hash mark. Also make sure the text is not the same color as the background — white text on a white background will be invisible. If you are using a class, verify that the class name in your HTML matches the class name in your CSS exactly.

How do I change the color of just one word in a paragraph?

Wrap that word in a span tag: <p>This is <span style="color: blue;">one</span> word.</p>. The span tag does not create a line break — it just lets you explore a style to part of the text.

Is there a difference between color names and hex codes?

No — they produce the same result. Color names are easier to read and remember, but hex codes let you pick exact shades. If you need a specific color, use hex. If you are just testing or using basic colors, names are fine.

Can I use color names I make up myself?

No. HTML only recognizes the 140 standard color names. If you try to use a made-up name like style="color: skyblue2;", the browser will ignore it. Use a hex code or one of the recognized names instead.

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.