• Around The HomeToggle Menu

    • Entertainment
    • Productivity
    • Smart Home
  • FamilyToggle Menu

    • Parenting
    • Toys
    • Pets
    • Travel
  • Product ReviewsToggle Menu

    • Phones
    • Tablets
    • Laptops
    • Desktops
    • Wearables
    • Audio
    • Cameras
    • Headphones
    • Printers
    • Smart Home
    • TVs
    • Gaming and Video
  • One Cool ThingToggle Menu

    • Frugal Tech
    • Kickstarters
    • Videos
Techwalla
  1. Home
  2. Around The Home
  3. Productivity
  4. How to Use HTML Color Codes

How to Use HTML Color Codes

March 31, 2015
By: Melanie L. Marten
  • Share
  • Share on Facebook

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.

Video of the Day

...
Adding colors to your website design is easy with HTML color codes.

Step

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.

Step

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

Choose one color to be the background of your website. In order to turn the background this color, use the HTML code "" 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 "" tag.

Step

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 "" to the code. For example, to change the color of a large heading, simply add "

Heading

" to your website code.

Step

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 "" and "" tags in your website code. Every time you code an "

" 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

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 "

" and "

" tags. Link colors can be changed by using a "{color:#336699;}" and the "" 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.

Show Comments

Related Articles

Differences Between JavaScript & HTML

Differences Between JavaScript & HTML

Around The Home
Productivity
By: Lysis
How to Use HTML to Find Passwords

How to Use HTML to Find Passwords

Family
Parenting
By: Jeffrey Ober
How to Use Javascript to Play an MP3 File

How to Use Javascript to Play an MP3 File

Around The Home
Productivity
By: Michael Carroll
How to Use Line Breaks in HTML

How to Use Line Breaks in HTML

Around The Home
Productivity
By: Carol Finch
How to Embed HTML in an Email

How to Embed HTML in an Email

Around The Home
Productivity
By: Brandy Alexander
How to Create an HTML Login Page

How to Create an HTML Login Page

Around The Home
Productivity
By: Tim Searles
  • HOW WE SCORE
  • ABOUT US
  • CONTACT US
  • TERMS
  • PRIVACY POLICY
  • COPYRIGHT POLICY
  • Advertise

An error occurred. Try again later.

Thanks for signing up!
© 2018 Leaf Group Ltd. Leaf Group Media

Get great tech advice delivered to your inbox.

Keep your family productive, connected, entertained, and safe.

Please enter a valid email.