How to Change Text Color in HTML

The Three Ways to Set Text Color in HTML

You change text color in HTML using the color property in CSS. There are three main ways to do this: inline styles (written directly in the tag), internal stylesheets (written in the page's head section), or external stylesheets (written in a separate .css file). Most people start with inline styles because they work when ready, but external stylesheets are easier to manage if you have many pages.

The simplest method is to add style="color: colorname;" directly to any text tag. For example, <p style="color: red;">This text is red</p> will display the paragraph in red. You can use color names (red, blue, green), hex codes (#FF0000 for red), or RGB values (rgb(255, 0, 0) for red). All three produce the same result — the choice is personal preference.

Key Takeaways

Inline styles use style="color: colorname;" inside the opening tag and work on any text element like paragraphs, headings, or spans.
Hex codes like #FF0000 and color names like "red" both work; hex codes give you more precise control over exact shades.
Internal stylesheets let you define colors once in a <style> block and reuse them across multiple elements on the same page.
External stylesheets are best for websites with many pages because you change the color in one file and it updates everywhere.

Using Inline Styles for Single Elements

Inline styles are the fastest way to change one piece of text. You write the style directly inside the opening tag of any element that holds text. The structure is always style="color: value;" where the value can be a color name, hex code, or RGB value.

Here are real examples that work in any browser:

<p style="color: blue;">This paragraph is blue</p>
<h1 style="color: #FF6600;">This heading is orange</h1>
<span style="color: rgb(0, 128, 0);">This text is green</span>

The advantage is simplicity: you see the color rule right next to the text. The disadvantage is that if you have ten paragraphs and want to change them all from blue to purple, you have to edit each one separately. That is why inline styles work best for one-off color changes.

Color Names, Hex Codes, and RGB Values

HTML recognizes 147 named colors. Common ones include red, blue, green, black, white, gray, orange, purple, and pink. You type the name directly: style="color: purple;". Named colors are straightforward to remember and read, but they give you only 147 options.

Hex codes start with a # and use six characters (numbers 0–9 and letters A–F) to describe a color. #FF0000 is red, #00FF00 is green, and #0000FF is blue. The first two characters control red, the middle two control green, and the last two control blue. Hex codes let you create millions of colors. A hex color picker tool (search "hex color picker" in any browser) shows you the code for any color you want.

RGB values work the same way but use three numbers from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(0, 0, 255) is blue. RGB is useful if you are working with a designer who gives you color values in that format. All three methods produce identical results on screen — pick whichever format you have or prefer.

Using Internal Stylesheets to Color Multiple Elements

An internal stylesheet lives in the <head> section of your HTML page and lets you define colors once, then explore them to many elements. This saves time if you have multiple paragraphs, headings, or other elements that should be the same color.

Here is the structure:

<head> <style> p { color: navy; } h1 { color: #FF6600; } .highlight { color: red; } </style> </head> <body> <p>All paragraphs are navy</p> <p>This one too</p> <h1>All headings are orange</h1> <span class="highlight">This text is red</span> </body>

The p { color: navy; } rule colors every paragraph on the page navy. The h1 { color: #FF6600; } rule colors every heading orange. The .highlight { color: red; } rule creates a class you can add to any element with class="highlight" to make it red. Internal stylesheets are cleaner than inline styles when you have many elements to color, but they only work on the single page where you write them.

Using External Stylesheets for Entire Websites

An external stylesheet is a separate file (usually named style.css) that holds all your color rules and other styling. You link to it from every page on your website, so one change updates the color everywhere at once.

First, create a file called style.css and save it in the same folder as your HTML files. Inside it, write your color rules:

p { color: navy; } h1 { color: #FF6600; } .highlight { color: red; }

Then, in the <head> section of every HTML page, add this line:

<link rel="stylesheet" href="style.css">

Now every page linked to that stylesheet will use the same colors. If you decide all paragraphs should be green instead of navy, you change it once in style.css and every page updates when ready. External stylesheets are the standard for websites with more than a few pages.

Common Mistakes and How to Fix Them

The most common mistake is misspelling the color name or forgetting the # in a hex code. style="color: blu;" will not work because "blu" is not a recognized color — it must be "blue". Similarly, style="color: FF0000;" will not work; it must be style="color: #FF0000;" with the # symbol.

Another mistake is using the wrong property name. The property is color, not text-color or font-color. If your text is not changing color, check that you typed color: exactly.

If you use an internal or external stylesheet and the color does not appear, make sure you are using the correct selector. If you wrote p { color: red; } but your text is in a <span> tag, the rule will not explore. Either change the selector to span or add a class to the span and target that class instead.

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> The span tag does not create a line break or add extra space — it just marks a section of text so you can style it.

What is the difference between color and background-color?

The color property changes the text itself. The background-color property changes the background behind the text. For example, style="color: white; background-color: black;" creates white text on a black background. Both can be used together on the same element.

Do I need to use hex codes or can I always use color names?

You can use color names for common colors, but hex codes give you millions of options. If your designer gives you a specific shade like "ocean blue" or you need an exact match to a logo, hex codes are more precise. For basic colors like red, blue, and green, names are fine.

Will my text color show up the same on every device?

Colors look slightly different on different screens because monitors and phones have different brightness and color settings. A red on one screen might look slightly darker or brighter on another. This is normal and not something you can control with HTML or CSS — it is a hardware difference.

What if I want different colors for links?

Links have their own color rules. Use a { color: blue; } in your stylesheet to color all links, or a:hover { color: red; } to change the color when someone hovers over a link. The :hover part is called a pseudo-class and lets you style elements based on user interaction.

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.