How to Change Font Color in HTML

The Simplest Way to Change Font Color

The fastest way to change font color in HTML is to use the style attribute with the color property. Add style="color: colorname" directly to any tag that holds text — usually a paragraph, heading, or span.

For example, to make a paragraph red, write: This text is red.. The browser reads the style attribute and displays the text in that color. You can use color names (red, blue, green), hex codes (#FF0000 for red), or RGB values (rgb(255, 0, 0)).

This method works in every browser and requires no setup. It is the method most people reach for when they need to color a single piece of text or a small section of a page.

Key Takeaways

The style attribute with the color property is the quickest way to change one piece of text: Text here.
Color names (red, blue, green), hex codes (#FF0000), and RGB values (rgb(255, 0, 0)) all work in the color property.
CSS in a style tag or external stylesheet is better when you want to color many elements or reuse the same color across a page.
The color property changes text only; use background-color to change the background behind text.

Using Color Names, Hex Codes, and RGB Values

HTML recognizes about 140 named colors you can type directly: red, blue, green, orange, purple, navy, teal, and many others. Type the name in lowercase and the browser will display that color. This is the easiest method if you know the color name you want.

Hex codes give you millions of colors. A hex code is a # followed by six characters: #FF0000 is red, #0000FF is blue, #00FF00 is green. The first two characters control red, the next two control green, and the last two control blue. You can find hex codes for almost any color on a color picker website — search "hex color picker" and paste in a color you like to see its code.

RGB values work the same way but use the format rgb(red, green, blue), where each number goes from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 0, 255) is blue, and rgb(128, 128, 128) is gray. RGB is useful if you are already working with RGB values in a design tool.

All three formats work in the style attribute: , , and all produce red text.

Using CSS in a Style Tag for Multiple Elements

If you want to color many elements the same way, write CSS rules in a style tag in the head of your HTML document. This keeps your color rules in one place instead of scattered through the page.

Put this in the head section of your HTML:

<style> p { color: blue; } h2 { color: green; } </style>

Now every paragraph on the page will be blue, and every h2 heading will be green. You write the rule once and it applies to all matching tags. If you later decide paragraphs should be purple instead, change the rule once and the whole page updates.

You can also target specific elements by giving them a class or id. For example, add class="highlight" to a paragraph, then write .highlight { color: orange; } in your style tag. Only paragraphs with that class will turn orange.

Using an External CSS File

For a website with many pages, put all your color rules in a separate CSS file and link it from every page. This way you change a color once and it updates everywhere.

Create a file called styles.css and write your rules in it:

p { color: blue; } h2 { color: green; } .highlight { color: orange; }

Then link it in the head of your HTML:

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

Now every page that links to styles.css will use those colors. This is the standard method for real websites because it keeps HTML and styling separate and makes updates much faster.

Changing Background Color Instead of Text Color

The color property changes the text itself. If you want to change the background behind the text, use background-color instead.

For example: This text has a yellow background.. You can combine both: makes blue text on a yellow background. Use the same color names, hex codes, and RGB values for background-color as you do for color.

Common Mistakes and How to Fix Them

The most common mistake is misspelling the property name. It is color, not colour (even if you spell it that way in English). It is also background-color, not background_color or backgroundcolor. Hyphens matter in CSS.

Another mistake is forgetting the colon or semicolon. The format is always property: value;. If you write style="color red" without the colon, the browser will ignore it. If you write style="color: red" without the semicolon and add another property after it, the second property may not work.

If a color does not appear, check that you closed the style attribute with a quote mark. is missing the closing quote and will break. The correct format is .

Frequently Asked Questions

Can I use color names I make up, or do they have to be standard HTML colors?

You must use colors the browser recognizes. The 140 standard HTML color names (red, blue, green, etc.) always work. Hex codes and RGB values work for any color. If you type a made-up name like "brightpurple", the browser will ignore it and display the default color instead.

What is the difference between color and font-color?

There is no property called font-color in HTML or CSS. The property is color. If you write font-color: red, it will not work. Use color: red instead.

How do I change the color of a link?

Links are styled with the a tag. Write <a href="page.html" style="color: purple">Link text</a> to make a single link purple. To color all links on a page, use CSS: a { color: purple; } in your style tag.

Can I make text fade from one color to another?

straightforward color changes cannot fade. That requires CSS gradients or animations, which are more advanced. For a basic page, pick one color per element and stick with it.

Do I need to close a color tag, or does it explore to the whole page?

Color only applies to the tag it is in. Red text makes that paragraph red, but the next paragraph will be the default color unless you add style to it too. The closing tag ends the color rule.

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.