How to Change the Color of Your Text Using HTML & CSS

This wikiHow teaches you how to change font color in your HTML document. While the HTML font tag is obsolete in HTML5, you can use CSS to add color to your HTML page's text. If you're working with an older version of HTML, you can use the HTML font color tag as needed.

Changing Font Color in HTML

The only way to change font color in HTML is to use another language called CSS. The font color tag is obsolete in HTML5. However, if you are working with an older version of HTML, the tag should still work.

Section 1 of 4:

Using CSS Classes

Download Article

1
Pick a color for your text. While you can use basic colors (e.g., "red") to color your text, you'll need to use hex codes for more nuanced shades:
- Go to w3school's hex code list in your computer's web browser.
- Select the base color you want to use in the hexagon at the top of the page.
- Scroll to the shade you want to use on the right side of the page.
- Note the six-character code to the right of the shade. Make sure to include the hashtag (#) when copying the color.
2
Open your HTML document. This should be the document for which you want to change the font color.
- If you don't yet have an HTML document, create one before proceeding.
Advertisement
Scroll through your document until you find the paragraph, header, or other form of text that you want to color.
4
Note the text's tags. For example, if the text is a header, you'll see "<h1>" in front of it.
- If the code doesn't have a container tag, you'll have to add one yourself. You can do this by wrapping the text in tags. Place
  before the text, and
  after the text.
5
Add the "head" and "style" sections to the top of the document. You'll do this by typing <head> below the "<html>" tag, pressing ↵ Enter, typing <style> below the "<head>" tag, pressing ↵ Enter twice, and typing in the closing tags for both. Your end result should look like this:
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>

<body>
```
6
Enter the "color" style tag. Click the space between the "<style></style>" tags, then enter the following code (making sure to replace red with your hex code and "h1" with the tag for the text you want to color).
```
h1 {
       color: red;
}
```
- If you had to add your own container tag, give the container a class. Make sure it's a unique class name that isn't used anywhere else in the document. For example, you could name the class "text-color." Place that class between the quotation marks in <div class=""></div>.
- Then, when adding the CSS code, follow the steps above. However, instead of writing "h1," write .text-color. Make sure to include the leading period, or the code won't understand that you're referencing the text-color CSS class you created.
7
Review your document. Your page header should look something like this:
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
       color: red;
}
</style>
</head>
<body>
</body>
```
8
Unify the body text color. If you want to make all of your document's body text the same color, enter the following code with your preferred color substituted for black:
```
body {
       color: black;
}
```

Section 2 of 4:

Using Inline CSS

Download Article

1
Pick a color for your text. While you can use basic colors (e.g., "red") to color your text, you'll need to use hex codes for more nuanced shades:
- Go to w3school's hex code list in your computer's web browser.
- Select the base color you want to use in the hexagon at the top of the page.
- Scroll to the shade you want to use on the right side of the page.
- Note the six-character code to the right of the shade. Make sure to include the hashtag (#) when copying the color.
2
Open your HTML document. This should be the document for which you want to change the font color.
- If you don't yet have an HTML document, create one before proceeding.
Scroll through your document until you find the paragraph, header, or other form of text that you want to color.
If the code doesn't have a container tag, you'll have to add one yourself. You can do this by wrapping the text in <div></div> tags. Place <div> before the text, and </div> after the text.
To do this, add style="" to your opening tag. If you're editing an <h1> tag, the opening tag will look like <h1 style="">. If you're editing a <div> tag, the opening tag will look like <div style="">.
6
Add your inline CSS. To change the color of your text, you'll use the "color" property. Here's what your code should look like after you've added the inline CSS (making sure to replace "red" with the hex code you want to use):
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: red;">Header here</h1>
</body>
```

Section 3 of 4:

Using HTML Tags

Download Article

1
Pick a color for your text. While you can use basic colors (e.g., "red") to color your text, you'll need to use a hex code list for more nuanced shades:
- Go to w3school's hex code list in your computer's web browser.
- Select the base color you want to use in the hexagon at the top of the page.
- Scroll to the shade you want to use on the right side of the page.
- Note the six-character code to the right of the shade. Make sure to include the hashtag (#) when copying the color.
2
Open your HTML document. This should be the document you want to change the font color in.
- If you don't yet have an HTML document, create one before proceeding.
Scroll through your document until you find the paragraph, header, or other form of text that you want to color.
4
Add the open "font" tag. Click immediately left of the text you want to color, then type in the following (making sure to replace red with your preferred hex code):^{[1]
X
Research source}
```
<font color="red">
```
5
Close the "font" tag. Click the space to the right of the end of the text you're coloring, then type </font> there.
```
<font color="red">This text is red!</font>
```

Sample HTML Code

HTML Font Color Code

Section 4 of 4:

Hex Codes

Download Article

HTML Color Chart
Color	Color Name	HTML Hex Code
	maroon	#800000
	dark red	#8B0000
	brown	#A52A2A
	firebrick	#B22222
	crimson	#DC143C
	red	#FF0000
	tomato	#FF6347
	coral	#FF7F50
	indian red	#CD5C5C
	light coral	#F08080
	dark salmon	#E9967A
	salmon	#FA8072
	light salmon	#FFA07A
	orange red	#FF4500
	dark orange	#FF8C00
	orange	#FFA500
	gold	#FFD700
	dark goldenrod	#B8860B
	goldenrod	#DAA520
	pale goldenrod	#EEE8AA
	dark khaki	#BDB76B
	khaki	#F0E68C
	olive	#808000
	yellow	#FFFF00
	yellow green	#9ACD32
	dark olive green	#556B2F
	olive drab	#6B8E23
	lawn green	#7CFC00
	chartreuse	#7FFF00
	green yellow	#ADFF2F
	dark green	#006400
	green	#008000
	forest green	#228B22
	lime	#00FF00
	lime green	#32CD32
	light green	#90EE90
	pale green	#98FB98
	dark sea green	#8FBC8F
	medium spring green	#00FA9A
	spring green	#00FF7F
	sea green	#2E8B57
	medium aqua marine	#66CDAA
	medium sea green	#3CB371
	light sea green	#20B2AA
	dark slate gray	#2F4F4F
	teal	#008080
	dark cyan	#008B8B
	aqua	#00FFFF
	cyan	#00FFFF
	light cyan	#E0FFFF
	dark turquoise	#00CED1
	turquoise	#40E0D0
	medium turquoise	#48D1CC
	pale turquoise	#AFEEEE
	aqua marine	#7FFFD4
	powder blue	#B0E0E6
	cadet blue	#5F9EA0
	steel blue	#4682B4
	corn flower blue	#6495ED
	deep sky blue	#00BFFF
	dodger blue	#1E90FF
	light blue	#ADD8E6
	sky blue	#87CEEB
	light sky blue	#87CEFA
	midnight blue	#191970
	navy	#000080
	dark blue	#00008B
	medium blue	#0000CD
	blue	#0000FF
	royal blue	#4169E1
	blue violet	#8A2BE2
	indigo	#4B0082
	dark slate blue	#483D8B
	slate blue	#6A5ACD
	medium slate blue	#7B68EE
	medium purple	#9370DB
	dark magenta	#8B008B
	dark violet	#9400D3
	dark orchid	#9932CC
	medium orchid	#BA55D3
	purple	#800080
	thistle	#D8BFD8
	plum	#DDA0DD
	violet	#EE82EE
	magenta / fuchsia	#FF00FF
	orchid	#DA70D6
	medium violet red	#C71585
	pale violet red	#DB7093
	deep pink	#FF1493
	hot pink	#FF69B4
	light pink	#FFB6C1
	pink	#FFC0CB
	antique white	#FAEBD7
	beige	#F5F5DC
	bisque	#FFE4C4
	blanched almond	#FFEBCD
	wheat	#F5DEB3
	corn silk	#FFF8DC
	lemon chiffon	#FFFACD
	light goldenrod yellow	#FAFAD2
	light yellow	#FFFFE0
	saddle brown	#8B4513
	sienna	#A0522D
	chocolate	#D2691E
	peru	#CD853F
	sandy brown	#F4A460
	burly wood	#DEB887
	tan	#D2B48C
	rosy brown	#BC8F8F
	moccasin	#FFE4B5
	navajo white	#FFDEAD
	peach puff	#FFDAB9
	misty rose	#FFE4E1
	lavender blush	#FFF0F5
	linen	#FAF0E6
	old lace	#FDF5E6
	papaya whip	#FFEFD5
	sea shell	#FFF5EE
	mint cream	#F5FFFA
	slate gray	#708090
	light slate gray	#778899
	light steel blue	#B0C4DE
	lavender	#E6E6FA
	floral white	#FFFAF0
	alice blue	#F0F8FF
	ghost white	#F8F8FF
	honeydew	#F0FFF0
	ivory	#FFFFF0
	azure	#F0FFFF
	snow	#FFFAFA
	black	#000000
	dim gray / dim grey	#696969
	gray / grey	#808080
	dark gray / dark grey	#A9A9A9
	silver	#C0C0C0
	light gray / light grey	#D3D3D3
	gainsboro	#DCDCDC
	white smoke	#F5F5F5
	white	#FFFFFF

Community Q&A

Search

Add New Question

Question

How do I use a color codes?

Community Answer

You can use hex codes (e.g. #ff00ff), rgb codes (e.g. rgb(255,100,309) ), or web safe colors (colors that are just their name like 'red' or 'black'). You can use colorhexa.com to get color codes.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 9
Question

How do I change color:red to color:blue?

Community Answer

As long as you are using a normal editor such as notepad, you can just go in and replace the word 'red' with the word 'blue'.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 7

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Tips

Old computer displays are limited to about 65,000 colors, and very old displays are limited to 256. However, over 99% of internet users will be able to see any color you specify.^{[2]
X
Research source}

Thanks
Helpful 0 Not Helpful 0
Hex codes are broken up as follows: the first two characters refer to red hues, the second two refer to green, and the last two refer to blue. You can use anything from "00" to "99" to indicate how much of each color you want; using "FF" instead of a number calls the maximum amount of that color (for example, "0000FF" would be as blue as possible).

Thanks
Helpful 0 Not Helpful 0
Try to make your page easy to read. Bright colors are hard to read on a white background, and dark colors are hard to read on a black background.

Thanks
Helpful 0 Not Helpful 0