Hitmill.com - RGB Hexadecimal Color Tutorial

hitmill.com

RGB Hexadecimal Color Tutorial

Introduction to Page Color with the BODY Element

Page color is achieved using the BODY HTML element and coding the BGCOLOR attribute like this: <BODY BGCOLOR="thistle">
or else by coding a specific RGB Hexadecimal Color value like this: <BODY BGCOLOR="#D8BFD8">
Notice that the "#" pound sign (correctly called an octothorp) preceeds the hexadecimal number. Instead of saying hexadecimal, many people shorten the name to "hex value" or "rgb hex" and it means hexadecimal value. If you are using only the name of a color be sure to use quotes and do not allow spaces. Even if the name normally has a space, when used in HTML code there is no space in a named color. Light Blue becomes "lightblue".
Note: Code the background color of a page, even if you are using an image for the background. When the image cannot be viewed on a user's computer for any reason, the background color will show instead. If you do not specify your background Web page color, the color shown will be the default color setting in the user's browser.

Finding Hexadecimal Values Online

Where do you go to find the values... there are many online references. I use the Hexadecimal Color Values Reference which also has a good color scheme picker tool on the page.

A Word About Hexadecimal Color

RGB refers to the Red, Green, Blue (RGB) format. Each RGB color is also represented by a hexadecimal number that varies from 00 to FF as well as a decimal number from 0 to 255 decimal. There are a total of 256 x 256 x 256 = 16,777,216 possible color combinations. Since 1998, the use of HTML elements and attributes for color has been deprecated in favor of the style sheets, such as the CSS or Cascading Style Sheets Rules technology for HTML or the XSL which is NOW used for formatting and describing XML documents.

What does a CSS rule look like?

The <STYLE> element is coded in the HEAD section of the HTML document.
Peek at this code box:

<LINK REL="stylesheet" TYPE="text/css" HREF="../style/nueva1.css">
<STYLE TYPE="text/css">
H4{font-size:12pt;font-color:blue;}
</STYLE>

There are CSS tutorials at the Cascading Style Sheets Rules link, above. Inside the code box above, the first line says that there is a stand-alone "external style sheet" located in a folder named style, which first governs all of the formatting rules mentioned in the external style sheet.
The third line of code is the rule for all titles using the <H4> element. This rule overrides and cancels any duplicate H4 information of the external style sheet -- you can override the external style sheet rule by making a rule on the internal style sheet.
The second line of code states that this is an "internal" style sheet of type "text/css" and is only information for the browser to use, so the browser knows what to do with the CSS rules.
Please go to the linked tutorial about CSS and also use other online CSS tutorials to get up to par if you are wanting to format HTML documents with the Cascading Style Sheets Rules. http://www.w3c.org/ is also a good place to look for more HTML and CSS information as well as XML and XSL information.

How to Manipulate Font Color

Note: The use of HTML elements and attributes for color has been deprecated in favor of using the CSS or Cascading Style Sheets rules, so read the tutorial linked to above and try some CSS rules of your own... font-type, font-size, font-color, etc. would be inside something like this in the HEAD section:
<STYLE type="text/css">
.mystyle{font-color:blue;font-size:12pt;font-type:Helvetica,"Times New Roman",sans-serif;}
</STYLE>

Then whenever you want to use the rules in "mystyle" in the BODY section, simply code a DIV tag by that name:
<DIV CLASS="mystyle"> This font will have style rules
</DIV>

H E L L O !
The code for font color:

<H1>
<FONT COLOR="#C4ABFE">H</FONT>
<FONT COLOR="red">E</FONT>
<FONT COLOR="orange">L</FONT>
<FONT COLOR="green">L</FONT>
<FONT COLOR="blue">O</FONT>
<FONT COLOR="purple">!</FONT>
</H1><BR>

I do not believe that the purple exclamation point looks very purple on my computer, nor do I like the green. Not all colors look the same from one computer to another. In order to get the color to appear the same on all computers, you have to use the 216 color safe Web palette's non-dithering colors.

The BGCOLOR Attribute of the Table Element

Read this tutorial: background color attribute for the table element.