How to Use Text Color Tags in HTML

X

This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.

The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.

This post has been viewed 148,083 times.

This is an article on how to change the text color in HTML documents. Although the HTML typography tag is obsolete in HTML5, you can use CSS to color the content on an HTML page. If you’re using an earlier version of HTML, you can use the HTML font color tag as needed.

Table of Contents

Using CSS

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/86/122247-1-1.jpg/v4-728px-122247-1-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/8/86/122247-1-1.jpg/v4-728px-122247-1-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Choose a color for the content. While you can use primary colors (such as “red”) to color your text, you’ll still need to use the HTML color generator to create more tones:

Go to https://www.w3schops.com/cpors/cpors_picker.asp using your computer’s browser.
Select the background color you want to use in the hexagon at the top of the page.
Drag down the color tone you want to use on the right side of the page.
Record the 6-character code to the right of the tone.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/35/122247-2-1.jpg/v4-728px-122247-2-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/35/122247-2-1.jpg/v4-728px-122247-2-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML text. This is the text for which you want to change the font color.

If you don’t have HTML text already, create one before continuing.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/dc/122247-3-1.jpg/v4-728px-122247-3-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/dc/122247-3-1.jpg/v4-728px-122247-3-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Find the content you want to color. Browse the text until you find the paragraph, heading, or other content you want to color.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c5/122247-4-1.jpg/v4-728px-122247-4-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/c/c5/122247-4-1.jpg/v4-728px-122247-4-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Note the tags of the content. For example, if the body is a heading, you’ll see “<h1>” in front of it.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/48/122247-5-1.jpg/v4-728px-122247-5-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/4/48/122247-5-1.jpg/v4-728px-122247-5-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add “head” and “style” sections to the top of the text. You would do this by typing <head> below the “<html>” tag, pressing Enter , typing <style> below the “<head> tag”, pressing Enter twice, and entering the closing tag for both two. The final result will look something like this:

 <!DOCTYPE html> < html > < head > < style > </ style > </ head > < body >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d6/122247-6-1.jpg/v4-728px-122247-6-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/d6/122247-6-1.jpg/v4-728px-122247-6-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Enter the “cpor” (color) style tag. Click in the space between the “<style></style>” tags, then enter the following code (remember to replace red with the color code and “<h1>” with the tag for the content you want to color):

 < h1 > { cpor : red ; }

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/71/122247-7-1.jpg/v4-728px-122247-7-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/71/122247-7-1.jpg/v4-728px-122247-7-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Review the text. The page heading should look like this:

 <!DOCTYPE html> < html > < head > < style > < h1 > { cpor : red ; } </style> < / head > < body > _

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/68/122247-8-1.jpg/v4-728px-122247-8-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/68/122247-8-1.jpg/v4-728px-122247-8-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Content color merge. If you want the content of the text to be the same color, enter the following code with black replaced with your favorite color:

 body { cpor : black ; }

Use HTML tags

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/08/122247-9-1.jpg/v4-728px-122247-9-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/08/122247-9-1.jpg/v4-728px-122247-9-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Choose a color for the content. While you can use primary colors (such as “red”) to color your text, you’ll still need to use the HTML color generator to create more tones:

Go to https://www.w3schops.com/cpors/cpors_picker.asp using your computer’s browser.
Select the background color you want to use in the hexagon at the top of the page.
Drag down the color tone you want to use on the right side of the page.
Record the 6-character code to the right of the tone.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/80/122247-10-1.jpg/v4-728px-122247-10-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/8/80/122247-10-1.jpg/v4-728px-122247-10-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML text. This is the text for which you want to change the color of the content.

If you don’t have HTML text already, create one before continuing.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a1/122247-11-1.jpg/v4-728px-122247-11-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/a/a1/122247-11-1.jpg/v4-728px-122247-11-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Find the content you want to color. Browse the text until you find a paragraph, heading, or other content that needs coloring.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/be/122247-12-1.jpg/v4-728px-122247-12-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/be/122247-12-1.jpg/v4-728px-122247-12-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add the opening tag “font” (typeface). Click to the left of the content that you want to color, and then enter the following code (remember to replace red with your favorite color): ^{[1] X Research Source}

 < font cpor = "red" >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/33/122247-13-1.jpg/v4-728px-122247-13-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/33/122247-13-1.jpg/v4-728px-122247-13-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Close the “fonts” tag. Click to the right of the text to color and enter </font> there.

 < font cpor = "red" > This is the red content! </ fonts >

Advice

Try to make the page easy to read. Light colors are often difficult to read on a white background, and dark colors are difficult to read on a black background.
The HTML color code has the following meaning: the first two characters are used to indicate the red tint, the next two characters the green tint, and the last two characters the blue tint. You can use any number from “00” to “99” to specify the color amount of each shade; using “FF” instead of a number is the way to specify the maximum amount of color (for example, “0000FF” will give the color with the highest blue tint).
Older computer monitors can only display up to 65,000 colors, and older monitors only have 256 colors. However, more than 99% of internet users can see the colors you choose. ^{[2] X Research Source}

Warning

The typeface element is not supported in XHTML 1.0 Strict DTD.

Steps

Using CSS

Use HTML tags

Advice

Warning

Related Posts