HTML Hex-Colors

For some reason colors in HTML are specifyed using hexadecimal numbers.

Hexadecimal numbers are numbers that are based on the value of 16 rather than the classical numbers based on the value of 10.

DECIMAL vs. HEXADECIMAL NUMBERS
In classical numbers you have ten different figures whereas in hexadecimal numbers you have 16 different figures.

Below is a table showing how to write the numbers from 1 to 20 in both systems:

The highest hexadecimal number you can specify using one figure is F equalling 15.
With two figures the highest value is FF equalling 255.

Top of page

RGB-COLORS:
Screencolors are generated from three basic colors: Red, Green and Blue.

Therefore it is helpfull to specify screencolors in a system based on the amount of each of the three basic colors. Such a system is called a RGB-color-system.

Most graphic tools (photoshop, photopaint, paintshop pro etc.) offers to handle colors in a RGB-colorsystem. To define a certain color you simply enter the amount of each of the three colors Red, Green and Blue.

The same system is used in HTML.

Top of page

HEXADECIMAL VALUES IN HTML
A typical color-definition in HTML would look like this:

The color is defined in the "#FF8C67".
The # simply states that the following numbers are hexadecimal.
The first two digits are the amount of red.
Digit 3 and 4 specify the amount of green.
And finally digit 5 and 6 specify the desired amount of blue.

Below is an example showing how different colors are mixed to obtain the desired result:

Since there are two hexadecimal figures for each color you can specify 256 gradients of each basic color. This gives a total of 256*256*256 = 16.777.216 different combinations.

However not all of these colors will look the same on different browsers and operating systems.

Top of page

BROWSERSAFE COLORS

Only 216 colors are, what we refer to as "browser-safe".

Browsersafe colors are colors that looks the same no matter which browser you see them on.

The reason is that different browsers running on different platforms interpret the colors differently. The only 216 colors that looks the same no matter what, are the colors made out of pairs of 00, 33, 66, 99, CC and FF.

An example would be: "#990066".

You should always strive to limit your use of colors to these combinations. All colors that can be picked in the color-picker at the bottom of this screen are browsersafe.

Top of page

CONVERTING BETWEEN HEX AND DECIMAL VALUES
To calculate a hexadecimal value from the decimal value do this:

You can of course go the other way around to calculate decimal values from hex values.

NOTE: If you don't see the hex-option in the calculator, click the view-menu and choose scientific.

Top of page

NAMED COLORS
A few colors can be referred to using names rather than hex values.

Below is a listing of these colors and their names:

COLORSAMPLES:
Below you see 15 tables covering the entire rainbow.

All colors in the table are browser-safe.

Use the tables to pick the hexadecimal value of a desired color.

Each table shows 36 different colorcombinations.
In the upper left corner of the table is the fixed amount of either red, green or blue used for all samples in the table.
If the color of the upper left corner is red, for example, it means that all samples in this table has a fixed amount of red.
The fixed amount of this color is shown in the cell.

Depending on which color is fixed for the table, the two other colors can be read along the axis.

Or simply click on the desired color to see the hex-value.