Pin Me

Adding Color to an HTML Web Page

written by: •edited by: Rebecca Scudder•updated: 6/30/2010

In this guide, we take a look at how to add color to an HTML web page. We cover all the basics of applying color to a web page and its various elements , such as text, tables, input buttons, and so forth. We also give tips on finding HTML color codes.

  • slide 1 of 4

    Working with Colors in HTML

    HTML is the basic language used to design web pages. Whether you develop a web site in PHP or ASP.NET, it all boils down to HTML when the browser actually renders the page. HTML, along with CSS and JavaScript, are the most basic and necessary tools to shape up the look and feel of a web page.

    When dealing with the look and feel of a web page, most of the times all we need is HTML and CSS (even if the site is being developed in PHP, Java or Setting up a background image or color, setting up a particular font and the font style, and so on can be (and is done) with HTML and CSS. In this guide, we focus on how to add colors to different elements in an HTML page.

    Adding Color to the Page Background

    Let’s start with the background of the web page. Adding color to the background of a page is very easy with HTML. To add color to the page background we use the HTML tag “bgcolor”. For example, the HTML code <body bgcolor="Green"> will set the background color for the webpage as green. Alternatively you can also use the code <body bgcolor="#397D02"> where instead of defining the color green as we know it, we have defined it in its hexadecimal equivalent also widely known as the HTML color code.

    Adding Color to Text

    While adding color to text is as easy as setting up the “color” tag, you may want to make use of CSS to define a CSS class if the text style you are using is going to be used more than just once. This way, it will save you some time. So, you can just define a style in your CSS, such as:

    .style1 {

    color: #FF0000;


    And then apply it in your HTML with the following code.

    <p class ="style1">Example Text</p>

    Adding Background (Highlight) Color to Text

    If you want to highlight any text by applying a background color to it, you can do so by using the background-color tag in a font style. For example,

    <P>Some sample <font style="background-color: aqua">text </font></P>

    Will output "Some sample text" with an aqua background around "text". You can also use HTML color codes instead of the word "aqua" to have more control over the look of your final text.

    Adding Color to Tables

    <table bgcolor="blue" border="1">

    This code will output a table with a blue background and a border of 1px thickness.

    In a similar way, using CSS you can add color to other elements like input buttons, text area, etc. For example, the following CSS, if applied to an input button, will result in an input button with white text and red background.

    .style1 {

    color: white;

    background-color: red;


    How to Get HTML Color Codes

    HTML and CSS make use of a color code to define a color. We can always define primary colors like red, blue etc., literally. But what if we want to define a particular shade of red or green or may be yellow. Well, color code is our preferred option. Let's see how to find out the color code of a particular color.

    Color Codes with Adobe Photoshop

    Perhaps the easiest way to find out the HTML color code is to use Adobe Photoshop if you have access to it. In Photoshop all you need to do is to bring up the color palette and select the color you need and then look for its HTML equivalent. Alternatively, if you don't have Photoshop, you can use one of several free web color matching tools.

  • slide 2 of 4
  • slide 3 of 4

    Color Codes using Expression Web

    If you use Expression Web to author webpages, then you have access to an easy way to find the HTML equivalent of a color. While applying color to any page background or text, just bring up the "More Colors" dialog and select the color you need. The HTML color code will be displayed at the top of the dialog.

  • slide 4 of 4