Adding Color

Inline Styles

To change more options about the text, you must use the style attribute within a heading or paragraph tag. This tag allows you to specify the size, color, and other attributes of the text in your document.


<p style="color:color code;font-family:font name”font-size:12px">...</p>size is in pixels without a space. color code is a code specifying the text color.

Example 1
    <title>My Web Page</title>
    <p style="color:#00ff00">This text appears in green.</p></p>
    <p style="color:#0000ff;font-family:arial">This text appears in blue and arial font.</p></p>
    <p style="color:#ff0000;font-family:georgia;font-size:20px">This text appears in red, georgia font, and size 20 pixels.</p></p>

In Example 1, the text inside the first <p> tag is set to the color #00ff00, which is a code for green. Note: When closing a tag, do not ever include anything more than just the tag. Continue to learn more about how to use color codes.

Understanding Color Codes

Color codes are always composed of six Hexadecimal (uses digits from 0-F, like 0, 1, 2… 9, A, B, C, D, E, F) digits. The first two digits specify how much red should be included in the color mix. 00 would be no red, and FF means the brightest possible red in the mixture. The next two digits specify how much green is in the mixture, and the last two digits specify how much blue enters in the mix.

Simple colors are easy to make. For example, the brightest green would be #00FF00 (no red, all green, no blue). A bright blue would be #0000FF (no red or green, strong blue).

Colors can also be made darker by reducing the amount of color. To make a dark red, use the code #990000. It includes only about half of the regular brightness of red. Similarly, a dark blue would be produced by the code #000099.

As you probably already guessed, the primary colors can be mixed to produce secondary colors. Mixing colors takes place using the rules of light color, not paint color. The primary colors of light are red, green and blue (not red, yellow and blue).

Light Color Mixing
Mix these… Get this…
Red and Green Yellow
Red and Blue Purple
Green and Blue Turquoise
Red, Green and Blue White

HTML Color Chart

Mixing other combinations and varying the brightness of each of the three primary colors produces a wide range of colors. The following chart shows how colors may be mixed and lists the code for each mixture for your reference.

Red, Green and Blue
330000 660000 990000 CC0000 FF0000
003300 006600 009900 00CC00 00FF00
000033 000066 000099 0000CC 0000FF
Red and Green Combinations
333300 336600 339900 33CC00 33FF00
663300 666600 669900 66CC00 66FF00
993300 996600 999900 99CC00 99FF00
CC3300 CC6600 CC9900 CCCC00 CCFF00
FF3300 FF6600 FF9900 FFCC00 FFFF00
Red and Blue Combinations
330033 330066 330099 3300CC 3300FF
660033 660066 660099 6600CC 6600FF
990033 990066 990099 9900CC 9900FF
CC0033 CC0066 CC0099 CC00CC CC00FF
FF0033 FF0066 FF0099 FF00CC FF00FF
Green and Blue Combinations
003333 003366 003399 0033CC 0033FF
006633 006666 006699 0066CC 0066FF
009933 009966 009999 0099CC 0099FF
00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF33 00FF66 00FF99 00FFCC 00FFFF
333333 999999 FFFFFF 333399 CC6633
000000 666666 CCCCCC 3366FF FF3366


Spend some time understanding how the above colors were created. You should see a connection between the hexadecimal digit combinations and the actual color produced. Now, without looking at the chart, try to guess what code was used for the following colors.

Background Color

You have already learned how to change the color of the text. Now, let’s look at how to change the background color of your web page. On simple web pages, only one color may be used for the whole background. It can be specified as part of the <body> tag. Here is the syntax (proper way to use it) of the <body> tag:


<body style="background-color:#color code">...</body>color code is a code specifying the text color.


  1. Open Notepad and create a file in your practice folder called bgcolor.html.
  2. Create a simple web page. Set the title to Color Demo.
  3. Create a level-1 heading with the text Background colors.
  4. In the <body> tag, add the style="background-color:# property and set it to #ffccaa.
  5. Save the modified file and view it in Internet Explorer.
  6. Try guessing and trying out the color codes for the following colors:
    • Light green
    • Light blue
    • Yellow
    • Sea green
  7. Play this color mixing game

Color Names

HTML also has 17 standard color names that may be used by simply using their names. These are:

red green blue
fuchsia lime aqua
maroon olive navy
orange yellow teal purple
silver black white gray


There are other colors that are named. A list can be found here.