Who wants a boring black and white website? Learning to use HTML color codes not only makes your website look better, it can increase the chances that visitors will use it. HTML color codes can be used for aesthetic design and focusing the visitor's attention on what you want them to see.
Step 1
Open a Web-safe HTML color code chart and examine the colors available. While most computers can display any colors, using Web-safe colors only is a more accessible option. Besides, there are many colors to choose from. Pick colors for your project that match the theme and design of your website. A good rule of thumb is to choose two complimentary colors and one accent color. A neutral such as black, white, gray or tan is another good choice.
Video of the Day
Step 2
Copy the 6-character HTML color codes for the colors you wish to use on your website. These consist of the numbers 0, 3, 6 and 9, and the letters C and F in various combinations. These 6-character codes will be used in your HTML website code wherever you want to create a colorful accent.
Step 3
Choose one color to be the background of your website. In order to turn the background this color, use the HTML code "<body bgcolor="#336699">" and replace the 6-character code with your desired color code. Since this is the color for the entire Web page body background, this HTML code snippet replaces the normal "<body>" tag.
Step 4
Change the color of any text, headings or links on your website page by including color codes and the proper HTML code within the page of your website code. Any text can be colored by adding the HTML attribute "<font-color="#336699">" to the code. For example, to change the color of a large heading, simply add "<h1><font color="#336699">Heading</font></h1>" to your website code.
Step 5
Change the color of all headings on your website by using cascading style sheets (CSS) instead. Use the code the code "h1 {color:#336699;}" in between the "<head>" and "</head>" tags in your website code. Every time you code an "<h1>" in your website, it will be that color. CSS is the standard method of styling websites. It also makes it easier to go in and make changes if you want to redesign.
Step 6
Change the color of your fonts, links and other things in CSS. Use the CSS code snippet "p {color:#336699;}" for fonts. The HTML for each text block must be bounded by the "<p>" and "</p>" tags. Link colors can be changed by using a "{color:#336699;}" and the "<a href>" tag in your HTML website code. Other HTML tags, such as image borders, horizontal rules and table cells can also be changed by using the basic "{color:#336699;}" CSS code snippet.
Things You'll Need
Web-safe color chart
Website hosting
Text editor program
Tip
Match the colors to the theme of your website: green for gardening, pastel shades for babies. CSS is the preferred method of adding color to your website with HTML color codes.
Warning
Pick three or four colors only to avoid making your website look tacky. Keep in mind that the tags in the steps above are in quotes for clarity purposes. When inserting the code to your HTML, don't use the quotes that are around the outside of the tags.