Using Colors – Hexadecimal and RGB

When building your website or blog you no doubt will want to use colors to highlight text, draw attention to certain information or perhaps separate out a section of a page. To accomplish this you will need to know how to work with colors in selecting and naming a color, as well as how colors relate to backgrounds, fonts, tables, etc. This is not hard to do if you are familiar with how to define a color and where to place the code.

First thing to know is that colors are defined in two ways:

  1. RGB (Red-Green-Blue) Value
  2. Hexadecimal Value

Example: For the color orange the RGB value = 192.63.0 while the hexadecimal value = #C03F00.

You will always use the # (hash mark) before the hexadecimal color. The hexadecimal name is broken down so that the first 2 hexadecimals represent the red component of the color; the second two represent the blue; and the last two represent the green component of the color. You will notice that the color components in a hexadecimal are not given in the same order as the RGB name.

Bit of  Background

The regular numbers we use everyday are based on the base 10 system (using numbers 0-9 and a combination of them to represent 10’s, 100’s, etc.), in the hexadecimal system we use a base 16 (numbers 0-9; letters a-f). There is a formula for calculating the conversion of RGB to hexadecimal, however, unless you just enjoy performing mathematical calculations – it is time consuming and I think unnecessary. You will find most all of the more professional graphics programs will give you both the RGB and hexadecimal name for colors. And, a good HTML editor will give you the option of selecting custom colors for certain actions and will then insert the correct hexadecimal code for you once you select the color you want.

Common uses of the hexadecimal colors are to:

  • Change the background color of a page or table
  • Change the color of a single table cell or single table row
  • Change the font color of a word, letter, or symbol
  • Change border color of a table
  • Change the color of a horizontal line inserted in a HTML document

We’ve discussed having to have both an opening tag < > and an closing tag in an HTML document; however, when you designate a color it is possible that the hexadecimal color might be included as part of the HTML page’s BODY code or part of another ‘open/close’ tag code and will not need to have it’s own open/close tag specifically for color.

Two examples:

You want the word ‘new’ to be red in the text: ‘Get our new book.’

The color code in this case would be part of the ‘font’ code being used to define the face as ‘arial’:

Get our new book.

However, if you wanted the text to read . . . 


where the whole sentence has a red background – the code might look like:

Get our new book

In this case the desired background color – red – is part of the code for the table itself. Therefore, while you do have to open and close the code for setting up the table – you do not have to do anything to ‘close’ the background color. The red background will automatically stop when the

tag is read for that table and will not carry over to anything else that follows.

If you wanted to change the font color but maintain the red background for


 the code would look like:

Get our new book

Once you learn the correct way to insert colors when using HTML, your possibilities are unlimited on what you can create.

October 12th, 2009 | Tags: , | Category: General Information

Comments are closed.

Shop Amazon for reference books, digital cameras, photography accessories, software

Affordable '800' Service

Search Engine News
Planet Ocean Unfair Advantage Book

Password Manager
RoboForm: Learn more...

Copyright © 2017 Basic lessons in HTML, CGI, SEO, domain registration, hosting – build an on line business! - All Rights Reserved
Powered by WordPress & the Atahualpa WP Theme by BytesForAll. Now with Tutorials & Support