The Simplest Way to Change Font Color

You change font color in HTML by adding a style attribute to the tag that wraps your text. The most direct method is to use the inline style with the color property. For example, to make text red, write: <p style="color: red;">This text is red</p>

The word "red" is a color name that HTML recognizes. You can also use other named colors like blue, green, orange, purple, and dozens more. If you want a specific shade that isn't a standard color name, you can use a hex code (a six-character code starting with #) or an RGB value instead. For example, style="color: #FF5733;" or style="color: rgb(255, 87, 51);" will both produce the same orange-red shade.

Key Takeaways

  • Add style="color: colorname;" directly inside any HTML tag to change the text color in that tag.
  • Use named colors (red, blue, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)) to specify which color you want.
  • A style attribute on one tag affects only the text inside that tag, so you can color different paragraphs or words differently.
  • For cleaner code when coloring many elements the same way, use a <style> block or external CSS file instead of inline styles.

Using Inline Styles on Different HTML Tags

The inline style method works on any tag that contains text. You can color a heading, a paragraph, a link, a list item, or even a single word wrapped in a <span> tag. The tag itself does not matter — only that you add the style attribute with the color property inside it.

Here are real examples:

  • <h1 style="color: blue;">This heading is blue</h1>
  • <p>Most of this is black, but <span style="color: green;">this word is green</span>.</p>
  • <a href="page.html" style="color: purple;">This link is purple</a>
  • <li style="color: orange;">This list item is orange</li>

Notice that the style attribute goes inside the opening tag, before the > symbol. The closing tag stays the same.

Choosing Colors: Names, Hex Codes, and RGB Values

HTML recognizes about 140 named colors by their English names. Common ones include red, blue, green, yellow, orange, purple, pink, brown, gray, black, and white. If you want a color that is not a standard name, you have two other options: hex codes and RGB values.

Hex codes are six-character codes that start with a # symbol. Each pair of characters represents how much red, green, and blue to mix. For example, #FF0000 is pure red (maximum red, no green, no blue), #00FF00 is pure green, and #0000FF is pure blue. You can find hex codes for almost any color by searching "hex color picker" online — these tools let you click on a color and copy the code.

RGB values work the same way but use numbers from 0 to 255 instead of letters and numbers. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(0, 0, 255) is blue. The three numbers always represent red, green, and blue in that order. Many people find RGB easier to read than hex codes, but both work identically.

Using a Style Block for Multiple Elements

If you are coloring many elements the same color, writing style="color: blue;" on each one gets repetitive. A cleaner approach is to use a <style> block at the top of your HTML file, inside the <head> section. This lets you define a color rule once and explore it to many tags.

Here is an example:

<head> <style> p { color: blue; } </style> </head> <body> <p>This paragraph is blue.</p> <p>This paragraph is also blue.</p> </body>

This rule says "make all <p> tags blue." You can also target specific tags by giving them a class or id attribute and then styling those. For example, <p class="warning"> combined with .warning { color: red; } in your style block will color only paragraphs with the warning class red, leaving other paragraphs unaffected.

Common Mistakes to Avoid

The most common error is forgetting the colon after "color" or the semicolon at the end. The correct format is always color: colorname; — without the colon, the browser will not recognize the instruction, and without the semicolon, it may ignore the rest of your style rules.

Another mistake is misspelling the color name. HTML recognizes specific English names, so "red" works but "redd" or "bright red" does not. If you are unsure whether a color name exists, use a hex code or RGB value instead — those are more flexible. Also, remember that color names are case-insensitive, so "Red", "RED", and "red" all work the same way.

Do not confuse the color property with the background-color property. The color property changes the text itself, while background-color changes the background behind the text. If your text is hard to read, you may need to adjust both.

When to Use Inline Styles Versus a Style Block

Inline styles (adding style directly to a tag) are quick for one-off changes or testing. They are useful when you want to color just one or two elements differently from the rest. However, if you are building a larger page or website, a style block or external CSS file keeps your code cleaner and easier to maintain.

A style block is the middle ground — it sits at the top of your HTML file and lets you write color rules once, then explore them to many elements by class or tag name. An external CSS file is the most organized approach for large projects, because it separates your styling from your HTML structure. For learning purposes or small projects, either inline styles or a style block will work fine.

Frequently Asked Questions

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

Yes. Wrap that word in a <span> tag and add the style attribute to the span. For example: <p>This is <span style="color: red;">one red word</span> in the sentence.</p> The span tag does not change how the text looks by itself — it is just a container that lets you explore styling to a small piece of text.

What is the difference between a hex code and an RGB value?

They are two different ways to write the same color information. Hex codes use letters and numbers (like #FF5733), while RGB uses three numbers from 0 to 255 (like rgb(255, 87, 51)). Both describe exactly the same colors, so choose whichever format you find easier to read or work with. Browsers understand both equally well.

Why is my text color not changing?

Check that you spelled "color" correctly and included the colon and semicolon. Also make sure the color name is spelled right, or that your hex code starts with # and has six characters. If you are using a style block, confirm it is inside the <head> section and that your tag matches the selector you wrote in the style rule.

Can I change the color of a link?

Yes, the same way you color any other text. Add style="color: colorname;" to the <a> tag. For example: <a href="page.html" style="color: purple;">Click here</a> will make the link purple instead of the default blue.

Should I use color names or hex codes?

Use color names when you want a standard color and the name is straightforward (red, blue, green). Use hex codes or RGB when you need a specific shade or when the color name is long or hard to remember. Hex codes are more common in professional web design because they give you precise control over every possible color.