The simplest way to change font color in HTML

Use the style attribute with the color property inside any tag that holds text. The most direct method is to write style="color: red;" directly in the opening tag. For example, <p style="color: blue;">This text is blue.</p> will display the paragraph in blue. This approach works when ready and requires no setup — the browser reads the style attribute and applies the color right away.

You can use color names (red, blue, green, orange), hexadecimal codes (#FF5733), or RGB values (rgb(255, 87, 51)). The browser understands all three formats the same way. Color names are easiest to read when you are learning; hex codes give you the most control over exact shades. RGB values sit in the middle — they are more precise than names but easier to understand than hex if you think in terms of brightness levels.

Key Takeaways

  • The style="color:" attribute works on any HTML tag that contains text, from <p> to <h1> to <span>.
  • You can write color as a name (blue), a hex code (#0000FF), or an RGB value (rgb(0, 0, 255)) — all three mean the same thing to the browser.
  • For colors used across many elements, a CSS stylesheet is faster and cleaner than adding style attributes to each tag individually.
  • The <font> tag is outdated and no longer supported in modern HTML; use the style attribute or CSS instead.

Using inline styles on individual elements

An inline style is a style attribute written directly inside an HTML tag. This method works when ready and requires no setup. Write the color property and value between the quotation marks of the style attribute: <h2 style="color: purple;">This heading is purple.</h2> The browser applies the color as soon as it reads that tag.

Inline styles are useful for one-off changes or when you are testing how a color looks on your page. They are not efficient if you need the same color on many elements across your page, because you have to type the style attribute into every single tag. For that situation, a stylesheet is faster and easier to maintain. If you later decide to change that color, you only have to edit it in one place instead of dozens.

Color formats: names, hex codes, and RGB

HTML accepts three ways to specify a color. Color names are words the browser recognizes: red, blue, green, orange, purple, navy, teal, and about 140 others. Type them exactly as written, with no quotes or special characters. Example: <p style="color: coral;"> Color names are the easiest to remember and read, but they are limited to the colors the browser knows.

Hexadecimal codes (hex codes) start with a hash symbol and six characters: #FF5733. The first two characters control red, the next two control green, and the last two control blue. Each pair ranges from 00 (none of that color) to FF (full intensity). Hex codes let you create any color you can see on a screen. Example: <p style="color: #FF5733;"> Hex codes are the standard in web design because they give you precise control.

RGB values use the format rgb(red, green, blue), where each number ranges from 0 to 255. RGB(255, 0, 0) is pure red; rgb(0, 0, 255) is pure blue; rgb(0, 255, 0) is pure green. This format is easier to understand than hex if you think in terms of intensity. Example: <p style="color: rgb(255, 87, 51);"> All three formats produce identical results — choose whichever one makes sense to you.

Using a stylesheet for colors across your whole page

When you need the same color on many elements, write a CSS rule in a <style> tag inside the <head> section of your HTML. This rule applies to every matching element on the page without repeating the style attribute. A stylesheet is more efficient than inline styles because you write the color once and it updates everywhere automatically.

For example, to make all paragraphs blue, add this to your <head>:

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

Now every <p> tag on the page will be blue. You can also target specific elements by giving them a class or id. For example, to color only paragraphs with the class "warning" in red, write:

<style> .warning { color: red; } </style>

Then use <p class="warning"> on the paragraphs you want red. This approach scales better than inline styles because you change the color once in the stylesheet, and it updates everywhere at once. If you have 50 paragraphs and decide to change the warning color from red to orange, you only edit one line.

Changing link colors with CSS

Links have special color rules. By default, unvisited links are blue and visited links are purple. To change these colors, use the :link and :visited pseudo-classes in your stylesheet. These are special selectors that target links in different states.

<style> a:link { color: green; } a:visited { color: orange; } </style>

This makes all unvisited links green and visited links orange. You can also use :hover to change the color when someone moves their mouse over a link: a:hover { color: red; } This gives users visual feedback that the link is clickable. You can combine all three states in your stylesheet to control exactly how links look at every stage.

Frequently Asked Questions

Can I change the color of just part of a sentence?

Yes. Wrap the text you want to color in a <span> tag and add a style attribute to it. For example: <p>This is normal text and <span style="color: red;">this part is red.</span></p> The span tag does nothing on its own — it is just a container for styling.

What is the difference between color and background-color?

The color property changes the text itself. The background-color property changes the color behind the text. You can use both together: style="color: white; background-color: black;" creates white text on a black background.

Why is the <font> tag not working?

The <font> tag was removed from HTML5 and modern browsers no longer support it. Use the style attribute or CSS instead. If you see old code using <font color="red">, replace it with style="color: red;"

How do I know which hex code makes which color?

Use an online color picker tool — search "hex color picker" and you will find interactive tools where you click on a color and it shows you the hex code. You can also search "hex color chart" to see a list of common hex codes and what they look like.

Can I use color names I make up myself?

No. The browser only recognizes about 140 standard color names. If you type a name it does not know, it will ignore the style and display the text in black. Use hex codes or RGB values instead if you need a color that does not have a standard name.