How to Change Font Color in HTML

The simplest way to change font color in HTML

To change the color of text in HTML, use the style attribute with the color property inside any tag that holds text. The most direct method is to add style="color: colorname;" to a paragraph, heading, span, or div. For example, <p style="color: red;">This text is red</p> will display that paragraph in red.

You can specify color three ways: by name (like red, blue, green), by hexadecimal code (like #FF0000 for red), or by RGB values (like rgb(255, 0, 0) for red). Hex codes and RGB give you exact control over thousands of shades, while color names work for common colors and are easier to read in your code.

This inline style method works when ready and requires no setup. It is the fastest way to test a color change or style a single element. However, if you want to change the color of many elements at once, a CSS class or stylesheet is more efficient.

Key Takeaways

Add style="color: colorname;" directly to any HTML tag to change text color without any other setup.
Use color names for common colors, hex codes for precise control, or RGB values for fine-tuned shades.
A CSS class or stylesheet lets you change the color of many elements at once by editing one rule instead of many tags.
The color property changes text only; use background-color to change the background behind the text.

Using hex codes and RGB for exact colors

Hex codes are six-digit codes that start with a hash symbol and represent red, green, and blue values in pairs. #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Each pair ranges from 00 (none of that color) to FF (full brightness). For example, <p style="color: #FF6600;">This text is orange</p> mixes red and green to create orange.

RGB notation does the same thing but uses decimal numbers from 0 to 255 instead of hex. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(255, 165, 0) is orange. RGB is easier to understand if you think in numbers rather than hex, but both produce identical results. Use whichever feels more natural to you or matches the color system your design tool uses.

Changing color with a CSS class

If you want to reuse the same color across many elements, create a CSS class in a <style> tag in the head of your HTML document. Write the class once, then explore it to as many tags as you need. For example:

Then use the class on any element: <p class="highlight">This text is orange</p> and <h2 class="highlight">This heading is also orange</h2>. Both will display in the same orange color. If you later decide to change the color, edit the class once and every element using that class updates automatically.

This method scales well when you have many elements to style. It also keeps your HTML cleaner and easier to read because the tags themselves do not carry long style attributes.

Using an external stylesheet

For larger projects, move your CSS into a separate file and link it in the head of your HTML. Create a file called styles.css and write your color rules there:

p { color: #333333; } h1 { color: #0066CC; } .warning { color: #CC0000; }

Then link it in your HTML head with <link rel="stylesheet" href="styles.css">. All pages that link to this stylesheet will use the same colors, making it straightforward to keep your site consistent. If you need to change a color across your entire site, you edit it once in the stylesheet and every page updates.

External stylesheets also load once and are cached by browsers, so pages load faster than if every page had its own embedded styles. This method is standard practice for any site with more than a few pages.

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: <p style="color: white; background-color: #000000;">White text on black background</p>. This creates contrast and makes text easier to read.

Use the same syntax for background-color as you do for color — names, hex codes, or RGB all work. style="background-color: yellow;" puts a yellow background behind the text without changing the text color itself. Combine them to highlight important text or create visual sections on your page.

Common color names and their hex equivalents

HTML recognizes about 140 named colors. The most common are red, blue, green, black, white, gray, yellow, orange, purple, and pink. You can also use variations like darkblue, lightgreen, and lightgray. For exact control, use hex codes instead: #FF0000 (red), #0000FF (blue), #008000 (green), #FFFF00 (yellow), and #FFA500 (orange).

Color names are useful for quick tests and straightforward projects. Hex codes are better when you need a specific shade or want to match a brand color. Many design tools and color pickers output hex codes automatically, so you can copy and paste them directly into your HTML.

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. For example, <p>This is normal text, but <span style="color: red;">this part is red</span>.</p> colors only the middle portion. A span is an inline tag that does not create a line break, so it works inside paragraphs and sentences.

What if my color does not show up?

Check that you spelled the color name correctly or that your hex code has six digits after the hash. Also make sure the text color has enough contrast with the background — white text on a light background will be invisible. If you are using a class, verify that the class name in your CSS matches the class name in your HTML tag.

Can I use color names I make up, like "skyblue" or "darkred"?

Some made-up names work because HTML recognizes variations like darkred, lightblue, and skyblue. However, not all combinations are valid. Use hex codes or RGB if you are unsure whether a name will work — they always work and give you exact control.

Does the color property work on links?

Yes, but links have their own default colors. Use style="color: #0066CC;" on a link tag just like any other element. To style all links at once, use CSS: a { color: #0066CC; } in your stylesheet. You can also style visited links differently with a:visited { color: #663399; }.

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.