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" to any text tag. For example, <p style="color: red">This text is red</p> will display that paragraph in red. You can use color names (red, blue, green), hex codes (#FF0000 for red), or RGB values (rgb(255, 0, 0) also for red).

This inline style method works when ready and requires no setup. It is the fastest way to change a single piece of text. However, if you want to change the color of many elements across your page, using a CSS stylesheet is cleaner and easier to maintain.

Key Takeaways

  • The style attribute with the color property changes text color directly: style="color: red" works on any text tag.
  • You can specify colors by name (red, blue), hex code (#FF0000), or RGB value (rgb(255, 0, 0)).
  • For multiple elements, define colors in a <style> block in the head section instead of repeating the style attribute.
  • The color property changes text only; use background-color to change the background behind the 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. Named colors are easiest to read and remember, but your options are limited to those 140 preset names.

Hex codes give you millions of colors. A hex code is a six-character code starting with #, like #FF0000 (red), #0000FF (blue), or #00FF00 (green). Each pair of characters controls red, green, and blue intensity from 00 (none) to FF (full). You can find hex codes for almost any color using an online color picker.

RGB values work the same way but use numbers 0 to 255 instead of hex. rgb(255, 0, 0) is red, rgb(0, 0, 255) is blue. RGB is useful if you are already working with color values in another program. All three methods work identically in the browser—choose whichever you find easiest to use.

Inline styles versus stylesheets

An inline style is written directly in the tag: <p style="color: blue">Blue text</p>. This works for one or two elements, but if you have ten paragraphs that should all be blue, typing the style attribute ten times is repetitive and hard to update later. If you decide to change all those paragraphs to green, you have to edit each one separately.

A stylesheet solves this. Add a <style> block in the <head> section of your HTML and write rules once. For example:

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

Now every <p> tag on the page is blue automatically. If you change your mind, edit the rule once and all paragraphs update. This is why stylesheets are standard practice for anything larger than a single test page.

Changing color for specific elements only

If you want only some paragraphs to be blue and others to be red, use a class or id to target them. Add a class name to the tags you want to style, then write a rule for that class in your stylesheet.

For example, add class="warning" to certain paragraphs: <p class="warning">This is a warning</p>. Then in your <style> block, write:

.warning { color: red; }

Only paragraphs with the warning class will be red. Other paragraphs stay their default color (usually black). You can reuse the same class on many elements, and you can explore multiple classes to one element if needed.

Headings, links, and other text elements

The color property works on any text element: headings (<h1>, <h2>), links (<a>), list items (<li>), and more. The syntax is always the same. <h1 style="color: purple">My Heading</h1> makes a purple heading.

Links have a special behavior: by default, unvisited links are blue and visited links are purple. If you change a link's color with the color property, it overrides that default. You can also style links differently when someone hovers over them using the :hover pseudo-class in a stylesheet: a:hover { color: orange; } makes links turn orange when the mouse is over them.

Background color versus text color

The color property changes the text itself. The background-color property changes the background behind the text. They work the same way and accept the same color formats.

For example, <p style="color: white; background-color: black">White text on black</p> creates white text with a black background. You can use both together to make text stand out. Background color applies to the entire element, so it extends across the full width of the container, not just behind the letters.

Common mistakes and how to avoid them

The most common mistake is misspelling the property name. It is color, not colour (even if you spell it that way in English). HTML and CSS use American spelling. If your color is not changing, check that you typed color: correctly.

Another mistake is forgetting the colon or semicolon. The syntax is style="color: red;"—there is a colon after the property name and a semicolon at the end. If you have multiple properties, separate them with semicolons: style="color: red; background-color: yellow;".

If a color name does not work, you probably used a name that is not in the 140 standard colors. Switch to a hex code or RGB value instead. If you are not sure whether a color name is valid, use a hex code—it always works.

Frequently Asked Questions

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

Yes, use a <span> tag around the words you want to color. <p>This is <span style="color: red">red text</span> in a sentence.</p> makes only the middle words red. The <span> tag does nothing on its own—it is just a container for styling.

What is the difference between hex codes and RGB?

They produce the same colors; hex and RGB are just two ways to write the same values. Hex uses base-16 numbers (0-9, A-F), while RGB uses base-10 (0-255). Use whichever format you find easier. Modern browsers also support HSL (hue, saturation, lightness) if you prefer that system.

Why is my color not showing up?

Check that you spelled color correctly (not colour), included the colon and semicolon, and closed the style attribute with a quote mark. If the syntax is correct, the color name or code may be invalid. Try a different color or switch to a hex code to test.

Can I make text transparent or invisible?

You can set color: transparent to hide text, but the text still takes up space on the page. For truly invisible text, use display: none instead, which removes it from the layout entirely. Transparent is useful when you want the space reserved but the text hidden.