The simplest way to change font color in HTML

You change font color in HTML by adding a style attribute to the tag that wraps your text. The style attribute holds a CSS instruction that tells the browser what color to display. The most direct method is to write style="color: colorname" inside your opening tag.

For example, if you want red text, you write <p style="color: red">This text is red</p>. The browser reads "color: red" and displays the paragraph in red. You can use this same pattern on any tag that holds text — paragraphs, headings, links, list items, and spans.

The word after "color:" can be a color name (like red, blue, green, orange), a hex code (like #FF5733), or an RGB value (like rgb(255, 87, 51)). All three methods work the same way; they just describe the color differently.

Key Takeaways

  • Add style="color: colorname" inside the opening tag of any text element to change its color.
  • Color names (red, blue, green) work for common colors, but hex codes (#FF5733) and RGB values (rgb(255, 87, 51)) give you millions of color choices.
  • The style attribute works on paragraphs, headings, links, list items, spans, and any other tag that displays text.
  • If you want the same color on many elements, use a style block or external stylesheet instead of repeating the style attribute on every tag.

Using color names for quick changes

HTML recognizes about 140 standard color names. These are the easiest to remember and type because they use plain English words. Common ones include red, blue, green, orange, purple, pink, brown, gray, black, and white. If you are testing a page or making a quick change, color names are the fastest route.

To use a color name, type it exactly as it appears — lowercase, no spaces, no quotes inside the style attribute. For example: <h1 style="color: purple">This heading is purple</h1> or <p style="color: orange">This paragraph is orange</p>.

The limitation is that you only get those 140 names. If you need a specific shade — like a particular blue or a muted green — you will need to use a hex code or RGB value instead. But for learning or for pages where the exact shade does not matter, color names are the simplest choice.

Using hex codes for precise colors

A hex code is a six-character code that starts with a hash symbol and uses numbers and letters to describe a color. For example, #FF5733 is a shade of orange, #3498DB is a bright blue, and #2ECC71 is a green. Hex codes let you pick from 16 million possible colors, so you can match a brand color, a design mockup, or any shade you have in mind.

To use a hex code, type it inside the style attribute exactly as it appears: <p style="color: #FF5733">This text is orange</p>. The hash symbol is required. You do not need quotes around the hex code.

If you do not know the hex code for a color you want, you can use a color picker tool — search "hex color picker" in your browser and you will find free tools where you click on a color and it shows you the hex code. You can also use the color picker built into most code editors: in VS Code, for example, you can click on a color swatch next to a hex code and pick a new color visually.

Using RGB values for color mixing

An RGB value describes a color by mixing red, green, and blue light in different amounts. Each color gets a number from 0 to 255, where 0 means none of that color and 255 means full brightness. For example, rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, and rgb(0, 0, 255) is pure blue. Mixing them gives you any color you want.

To use an RGB value, type it inside the style attribute with the word "rgb" followed by three numbers in parentheses: <p style="color: rgb(255, 87, 51)">This text is orange</p>. The numbers must be separated by commas and spaces.

RGB is useful if you are working with a designer who gives you color values in RGB format, or if you want to understand how colors mix. For most everyday use, hex codes are simpler to copy and paste. But RGB works just as well and produces the same result.

Coloring multiple elements without repeating code

If you want the same color on many elements, typing style="color: red" on every single tag gets tedious and hard to maintain. If you later decide to change the color, you have to edit every tag. A better approach is to use a style block at the top of your HTML page, inside the <head> section.

A style block looks like this:

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

This tells the browser: "Make every paragraph red." Now you can write <p>This text is red</p> without any style attribute, and it will be red automatically. If you later want to change all paragraphs to blue, you only change the style block once.

You can also target specific elements by giving them a class or id. For example, if you write <p class="warning">Be careful</p> and then add .warning { color: red; } to your style block, only paragraphs with the class "warning" will be red. This gives you fine control without repeating code.

Common mistakes and how to fix them

The most common mistake is forgetting the hash symbol in a hex code. If you write style="color: FF5733" instead of style="color: #FF5733", the browser will not recognize it as a color and will ignore the instruction. Always include the hash.

Another mistake is misspelling a color name. If you write style="color: redd" or style="color: blu", the browser will not know what color you mean and will display the text in black (the default). Check that the color name is spelled exactly right — no extra letters, no capital letters.

If you use an RGB value, make sure the three numbers are separated by commas and are each between 0 and 255. Writing rgb(256, 0, 0) or rgb(255 0 0) (without commas) will not work. The browser needs the exact format: rgb(number, number, number).

Frequently Asked Questions

Can I change the color of a link?

Yes. Use the same style attribute on the <a> tag: <a href="page.html" style="color: blue">Click here</a>. By default, links are blue and underlined, but you can change the color to anything you want. If you want to change all links on a page, use a style block with a { color: blue; }.

What if I want to change both the text color and the background color?

Add both instructions to the style attribute, separated by a semicolon: <p style="color: white; background-color: black">White text on black</p>. You can combine as many style instructions as you need in one attribute.

Does the style attribute work on all HTML tags?

The style attribute works on any tag, but it only changes the color of text on tags that display text. Using style="color: red" on an <img> tag (which displays an image) will have no effect. It works on paragraphs, headings, links, list items, spans, buttons, and any other tag that contains words.

What is the difference between hex codes and RGB values?

They describe the same colors in different ways. Hex codes use letters and numbers (like #FF5733), while RGB uses three numbers from 0 to 255 (like rgb(255, 87, 51)). Both produce identical results in the browser. Use whichever format is easier for you or matches what your designer gave you.

Can I use a color that is not a standard name, hex code, or RGB value?

No. The browser only understands those three formats. If you have a color you want to use but do not know its code, use a color picker tool to find the hex code or RGB value, then use that in your style attribute.