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. HTML itself has no color attribute — you must write a style rule that targets the text you want to change. The three methods are inline styles (written directly on the tag), internal stylesheets (written in the page's head), and external stylesheets (written in a separate .css file). Most pages use external stylesheets because they let you reuse the same colors across many pages, but inline styles work when ready if you are testing or fixing one element.

All three methods use the same color values: hex codes like #FF5733, RGB values like rgb(255, 87, 51), or color names like red, blue, or darkgreen. The browser understands all three formats the same way.

Key Takeaways

Inline styles use the style attribute directly on a tag: <p style="color: blue;"> makes that paragraph blue.
Internal stylesheets go in the page's head section and use selectors to target multiple elements at once without repeating code.
External stylesheets are separate .css files linked in the head, letting you reuse the same colors across your whole website.
Hex codes (#FF5733), RGB values (rgb(255, 87, 51)), and color names (red, blue) all work — use whichever you prefer.
The color property changes text only; use background-color to change the background behind the text.

Inline Styles: Changing One Element Right Now

An inline style is the fastest way to change one piece of text. Write the style attribute directly on the opening tag, then set the color property inside it. Here is the structure:

Replace blue with any color name, hex code, or RGB value. The semicolon at the end is required. If you want to add more properties (like making the text bold or changing the font size), separate them with semicolons:

<p style="color: #FF5733; font-weight: bold; font-size: 18px;">This text is bold, large, and orange-red.</p>

Inline styles work on any tag that holds text: <p>, <h1>, <span>, <a>, <li>, and others. The downside is that you must repeat the style attribute on every tag you want to color, so inline styles are best for one-off changes or quick tests.

Internal Stylesheets: Coloring Multiple Elements at Once

An internal stylesheet sits in the <head> section of your HTML page and uses selectors to target elements without repeating code. Write a <style> tag in the head, then list the rules inside it:

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

This rule makes every <p> tag on the page blue and every <h1> tag dark green. You write the selector (the tag name), then the property and value in curly braces. If you want to color only certain paragraphs, give them a class name and target that class instead:

Then use the class on the tags you want to color: <p class="highlight">This paragraph is red.</p>. Internal stylesheets are cleaner than inline styles when you have multiple elements to color, but they only affect the one page they are written on.

External Stylesheets: Reusing Colors Across Your Whole Site

An external stylesheet is a separate file with a .css extension that you link to from your HTML page. Create a new file called styles.css (or any name you choose), write your color rules in it, then link it in the head of your HTML:

Inside styles.css, write the same rules you would write in an internal stylesheet:

p { color: blue; }h1 { color: darkgreen; }.highlight { color: red; }

Now every HTML page that links to styles.css will use those colors. This is the standard way to style a website because you set the colors once and they explore everywhere. If you later decide all your paragraphs should be purple instead of blue, you change it in one place and the change appears on every page.

Understanding Color Values: Hex, RGB, and Names

HTML accepts three ways to write colors, and they all work the same way. Color names are the simplest: red, blue, green, darkgreen, lightblue, orange, purple, and about 140 others. Use them when you want a basic color and do not need precision.

Hex codes start with a hash mark and use six characters: #FF5733. Each pair of characters represents red, green, and blue intensity on a scale from 00 (none) to FF (full). #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #FFFFFF is white. Hex codes let you specify any color precisely and are the most common choice in professional work.

RGB values use the same red-green-blue system but write the numbers as decimals from 0 to 255: rgb(255, 0, 0) is red, rgb(0, 255, 0) is green. Some people find RGB easier to read than hex, but both do the same thing. You can also use rgba(255, 0, 0, 0.5) to add transparency — the fourth number (called alpha) ranges from 0 (invisible) to 1 (fully visible).

Common Mistakes and How to Avoid Them

The most common mistake is forgetting the semicolon at the end of a style property. color: blue without a semicolon will not work. Always end each property with a semicolon, even if it is the last one in the list.

Another mistake is confusing color (text color) with background-color (the background behind the text). If you write style="color: blue;", the text turns blue. If you write style="background-color: blue;", the background behind the text turns blue. Both are useful, but they do different things.

Misspelling color names also breaks the rule. The browser recognizes darkgreen but not dark-green or dark green. Hex codes and RGB values are safer because they use numbers, not spelling. If a color name does not work, switch to a hex code instead.

Finally, remember that inline styles override internal and external stylesheets. If you set a color in your external stylesheet but then add an inline style to one tag, the inline style wins. This is useful for exceptions, but it can be confusing if you forget you added an inline style and wonder why the external stylesheet is not working.

Frequently Asked Questions

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. You can use both together: style="color: white; background-color: blue;" makes white text on a blue background.

How do I find the hex code for a specific color I want?

Use a color picker tool online — search "hex color picker" and you will find many free tools. You can also use your browser's developer tools: right-click on any colored element on a website, click Inspect, and look for the color property in the styles panel. The hex code will be shown there.

Can I use color names like "lightblue" or do I have to use hex codes?

Color names work fine for basic colors. The browser recognizes about 140 named colors like red, blue, lightblue, darkgreen, and orange. Use hex codes or RGB when you need a color that does not have a standard name, or when you want to match a specific shade from a design.

Do I have to put the style tag in the head, or can it go in the body?

The style tag should go in the head section, but it will work in the body too. Putting it in the head is the standard practice because the browser reads the head first and applies the styles before displaying the page. This prevents a flash of unstyled content.

What happens if I link to an external stylesheet that does not exist?

The browser will ignore the missing link and display the page without those styles. No error message appears — the page just looks unstyled. Check that the file path in the href attribute is correct and that the .css file actually exists in that location.

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.