Download Article
Download Article
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.
Steps
-
Pick a color for your text. While you can use basic colors (e.g., "red") to color your text, you'll need to use an HTML color generator for more nuanced shades:
- Go to https://www.w3schools.com/colors/colors_picker.asp 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.
-
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 -
Find the text you want to color. Scroll through your document until you find the paragraph, header, or other form of text that you want to color.
-
Note the text's tags. For example, if the text is a header, you'll see "<h1>" in front of it.
-
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 >
-
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 color code and "<h1>" with the tag for the text you want to color):
< h1 > { color : red ; }
-
Review your document. Your page header should look something like this:
<!DOCTYPE html> < html > < head > < style > < h1 > { color : red ; } </ style > </ head > < body >
-
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 ; }
Advertisement
-
Pick a color for your text. While you can use basic colors (e.g., "red") to color your text, you'll need to use an HTML color generator for more nuanced shades:
- Go to https://www.w3schools.com/colors/colors_picker.asp 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.
-
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.
-
Find the text you want to color. Scroll through your document until you find the paragraph, header, or other form of text that you want to color.
-
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 color): [1] X Research source
< font color = "red" >
-
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 >
Advertisement
Sample HTML Code
Community Q&A
Search
-
QuestionHow do I use a color codes?Community AnswerYou 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.
-
QuestionHow do I change color:red to color:blue?Community AnswerAs 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'.
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
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 sourceThanks
- 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
- HTML color 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
Submit a Tip
All tip submissions are carefully reviewed before being published
Thanks for submitting a tip for review!
Advertisement
Warnings
- The font element is not supported in XHTML 1.0 Strict DTD.Thanks
Advertisement
References
About This Article
Article Summary
X
1. Select a color.
2. Find the code for the color.
3. Open the HTML code.
4. Find the tag for the text you want to color.
5. Enter the "color" style for that tag.
6. Unify the body text color.
Did this summary help you?
Thanks to all authors for creating a page that has been read 631,195 times.
Reader Success Stories
- "Really good explanations of each step in the tutorials makes it so much easier for people like me who are just beginning to learn any type of computer language." ..." more
Advertisement
"Really good explanations of each step in the tutorials makes it so much easier for people like me who are just beginning to learn any type of computer language."
..."
more
"Perfect, thanks. I needed to know for a school assignment."
"Very informative! "
