The simplest way to change text color in HTML

You change text color in HTML by adding a style attribute to any tag that contains text. The style attribute holds a CSS property called color, which takes a color value. The most common approach is to use the inline style method: add style="color: colorvalue" directly into your opening tag.

For example, to make a paragraph red, you write <p style="color: red;">This text is red</p>. To make a heading blue, you write <h1 style="color: blue;">Blue heading</h1>. The color name goes inside the quotation marks after color:, and you end with a semicolon.

HTML recognizes about 140 color names you can type directly — red, blue, green, orange, purple, pink, brown, gray, and many others. If you need a specific shade, you can use hex color codes (like #FF5733) or RGB values (like rgb(255, 87, 51)) instead of color names. Both methods work the same way: replace the color name with the code or RGB value.

Key Takeaways

  • Add style="color: colorname;" to any HTML tag to change the text color inside that tag.
  • You can use color names (red, blue, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)) — all three work the same way.
  • The inline style method works immediately but only affects that one tag; use a style sheet if you want to change many elements at once.
  • Hex codes and RGB values let you pick exact shades, while color names are faster for common colors.

Using color names versus hex codes and RGB

Color names are the fastest option when you need a standard color. Type the name directly: style="color: orange;" or style="color: navy;". This works for any of the 140 named colors that HTML recognizes. The downside is that you are limited to those preset names — you cannot fine-tune the exact shade.

Hex codes give you millions of color options. A hex code is a six-character code starting with a hash symbol, like #FF5733 or #1A2B3C. Each pair of characters controls red, green, and blue intensity. You can find hex codes for almost any color by searching "hex color picker" online, copying the code, and pasting it into your style attribute: style="color: #FF5733;".

RGB values work the same way but use three numbers between 0 and 255, one each for red, green, and blue. rgb(255, 0, 0) is pure red, rgb(0, 0, 255) is pure blue, and rgb(128, 128, 128) is gray. You type them like this: style="color: rgb(255, 87, 51);". RGB is useful if you are working with a designer who gives you color values in that format.

Changing color for a single element versus an entire page

The inline style method (adding style directly to a tag) works for one element at a time. If you have ten paragraphs and want them all blue, you would add style="color: blue;" to each <p> tag separately. This gets tedious fast.

A better approach for multiple elements is to use a style sheet — either in a <style> block in your HTML file or in a separate CSS file. Inside the style block, you write a rule that applies to all tags of one type. For example, this rule makes every paragraph blue:

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

Put this code in the <head> section of your HTML file, above the <body>. Now every <p> tag on the page will be blue without you having to add style to each one. You can also target specific elements by giving them a class or ID and then styling those. This method scales much better if you are building a real website.

Common mistakes when changing text color

The most common mistake is forgetting the semicolon at the end. style="color: red" without the semicolon will often still work in modern browsers, but it is not valid HTML and can cause problems. Always write style="color: red;" with the semicolon.

Another mistake is misspelling the color name. HTML recognizes color: red; but not color: redd; or color: Red; (color names are case-insensitive, so capitalization does not matter, but spelling does). If a color name does not work, switch to a hex code or RGB value instead.

A third mistake is putting the style attribute in the wrong place. The style attribute goes inside the opening tag, not after the closing tag. <p style="color: blue;">Text</p> is correct. <p>Text</p style="color: blue;"> is wrong and will not work.

Finally, do not confuse the color property (which changes text color) with the background-color property (which changes the background behind the text). If you want red text on a white background, you need both: style="color: red; background-color: white;".

Using hex codes and RGB when you need exact colors

Hex codes are the industry standard for web design. Every design tool — Figma, Photoshop, Adobe XD — outputs hex codes. If a designer gives you a color specification, it is almost always a hex code like #3498DB. You paste it directly into your style attribute without any changes: style="color: #3498DB;".

To find a hex code for a color you like, use a free hex color picker online. Upload an image or type a color name, and the tool will give you the hex code. Copy the entire code including the hash symbol and paste it into your HTML.

RGB is less common in web design but useful if you are working with a developer who codes in JavaScript or if you need to add transparency. RGBA is RGB with an alpha channel for transparency: style="color: rgba(255, 87, 51, 0.5);" makes the text semi-transparent. The fourth number (0.5) is the opacity, where 1 is fully opaque and 0 is fully transparent.

Testing your color changes in a browser

After you add a color style to your HTML, save the file and open it in a web browser to see the result. If the color does not appear, check three things: first, make sure you saved the file after making changes. Second, refresh the browser page (press Ctrl+R on Windows or Cmd+R on Mac). Third, open your browser's developer tools (press F12 or right-click and select "Inspect") and look at the HTML to confirm the style attribute is there and spelled correctly.

The developer tools will also show you if there is a conflict — for example, if a style sheet rule is overriding your inline style. In the Elements or Inspector panel, you can see which styles are actually being applied to each element. This is the fastest way to debug color problems.

Frequently Asked Questions

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

Yes, wrap the part you want to color in a <span> tag and add the style to that span. For example: <p>This is <span style="color: red;">red text</span> in a sentence.</p> The span tag does nothing by itself — it only exists to hold the style attribute. Everything outside the span stays the default color.

What is the difference between color and background-color?

color changes the text itself. background-color changes the background behind the text. You can use both together: style="color: white; background-color: black;" gives you white text on a black background. They are two separate properties.

Do I need to use a hex code or can I just type the color name?

Color names work fine for common colors like red, blue, green, and orange. Use a hex code or RGB only if you need a specific shade that is not in the 140 named colors, or if a designer gave you a hex code to match. For learning and simple projects, color names are simpler and faster.

Will my color changes work in all browsers?

Yes, the color property and all color formats (names, hex, RGB) work in every modern browser. Older browsers from the 1990s and early 2000s had issues, but if your visitors are using anything from the last ten years, you are fine.

What if I want to change the color of a link?

Links are trickier because they have multiple states — unvisited, visited, and hovered. Use a style sheet with pseudo-classes: a { color: blue; } a:visited { color: purple; } a:hover { color: red; }. This gives you control over the color in each state without adding style to every individual link.