How to Change the Color of Text in HTML: 4 Steps (with Pictures)

Table of contents:

How to Change the Color of Text in HTML: 4 Steps (with Pictures)
How to Change the Color of Text in HTML: 4 Steps (with Pictures)

HyperText Markup Language, or in abbreviated form, HTML, is the foundation for all those web pages we use on the Internet. Whatever you see in your browser is coded in some version of HTML. The same goes for the font colors. Here are a few simple examples to guide you in learning how to use some basic HTML tags to change the color of text using the tag.


Change Text Color to HTML Step 1

Step 1. Select a color you want to use for the font

HTML fonts are usually identified with hexadecimal codes that translate into RGB colors. There are 6 characters for each possible color.

  • For example, red = ff0000, green = 00ff00 and blue = 0000ff. In hex, 00 = zero and ff = 255, the maximum value of RGB color definitions. The higher the number, the brighter the color. For example, ffffff = white, and 000000 = black.
  • All colors are made up of different combinations of the above numbers and letters.
Change Text Color to HTML Step 2

Step 2. Add a color tag to your HTML

The syntax for adding the hexadecimal color values ​​to your font is simple. We'll use the text "Lorem ipsum dolores sit amet" as an example. We're going to make the word "dolores" turquoise. For this we use the tag, as follows:

  • Lorem ipsum dolores sit amet.
  • Note that this has no effect yet. When we add a color variable to it it gets a bit more interesting:
  • Lorem ipsum dolores sit amet.
  • Note that if you try this in practice, you won't see the font tag in your text. Instead, your text will look like this:
  • Lorem ipsum dolores sit amet.
Change Text Color to HTML Step 3

Step 3. Examine every part of the tag

Each part of the font tag serves a specific purpose, so it's important to know where to place each part and what it does.

  • The tag itself specifies that the text that follows must follow the rules specified in the declaration. When we add "color" to it, it means that whatever comes after the tag will be the color we specified. In this case a turquoise color, as indicated by the HTML value "40E0D0", not forgetting quotes.
  • To restore the default color, close the font tag with a forward slash:. In our example, the word "dolores" is the only word colored turquoise.
Change Text Color to HTML Step 4

Step 4. Use names instead of hexadecimal codes

There are 256 colors in the standard HTML spectrum and while you can use something like Photoshop or a website like HTML color codes as a source to pick your desired color, you can also use a color name like 147. The standard colors are all there: red, green, blue, yellow, black and white, and many more.

  • For example, instead of using "40E0D0", you could just say "Lorem ipsum dolores sit amet.
  • For a full list of color names used in HTML code, go to


  • Don't overdo it with color tags. Early websites that overused font attributes looked awful even in the early days of the internet. They remain uglier than ugly, to this day!
  • If you know how to deal with CSS (Cascading Style Sheets), you're better off using it. The tag dates back to HTML 3.2 and is not widely used anymore. For example, an example of the color red, indicated by CSS, is:.highlighted { color: red; } in the CSS file and your text goes here in the HTML file, or if you prefer, your text goes here, which is usually much easier to use than the tag indicated above, especially when it comes to other functions, such as changing the font or font size.

Popular by topic