There are several ways in which color is represented on the Internet and in its underlying source code. This article takes a detailed look at the original web safe color palette, Webhex or Html color codes and the Html color naming standard.
The Early Years of the Internet
When the Internet was first released to the public in the 1990s, computers were more primitive than they are today. Back then it was fairly common to have computer systems which only displayed 256 colors on-screen.
In 1993 the Mosaic graphical web browser was released by the National Center for Supercomputing Applications (NCSA). A year later the Netscape Navigator web browser was released. Microsoft would follow in 1995 with the release of their Internet Explorer web browser which was bundled with Windows 95. All of these early browsers shared a color palette known as the web safe color palette which consisted of 216 colors.
The web safe color palette standard allowed web pages to be viewed consistently, in terms of colors, regardless of the web browser you were using. As long as you had a graphics display capable of 256 on-screen colors, you would not experience color dithering unless the web page content itself strayed from this palette.
If you were lucky enough to have a graphics card capable of displaying more than 256 colors (such as 16 or 24 bit color), you were safe from the undesirable effects of color dithering even when straying from the web safe 216 color palette.
The Web Safe Color Palette
The 216 colors for the web safe color palette were decided upon in a way which allows each color component (red, green and blue) to be selected from 6 different intensity levels. Because this arrangement only requires or represents a total of 216 unique colors, there are 40 colors left over on a 256 color display. This enables the computer’s operating system to maintain a consistent color scheme for it’s graphical user interface components.
There are clearly limitations to this color palette. Many designers were not thrilled with it. It does however provide the widest range of possible colors given that there are only 216 colors in total.
With a 256 color display it becomes difficult to represent 16 million colors without introducing dithering or noise. Color dithering is a way to mix pixels of various colors from a limited color palette (such as the 216 color web-safe palette) to provide the illusion of colors that could not otherwise be directly displayed.
Color dithering can be noticeable in photo-realistic images. However, it can be downright difficult to read colored text on colored backgrounds which have been dithered. Large areas of solid colors, when dithered, can become altogether unattractive and messy compared to their originally intended colors.
By sticking to the web-safe colors, designers could be certain that in most cases they could produce pure colors without dithering on all web browsers. There are exceptions of course such as when the computer was only capable of 16 on-screen colors or worse black and white only like the original Macintosh. These systems introduced heavy amounts of dithering in their attempts to display more simultaneous colors than they were natively capable of doing. The results were often ugly.
There are no strong reasons to work with this palette today unless the audience for your web sites are using older computers. Modern computers have no trouble displaying more than enough colors. They also do not require any form of visually noticeable dithering to do so.
Below is a table which displays the web safe 216 color palette. The webhex or html color code (see definition below) is also provided for each color.
Webhex or Html color codes
Webhex is simply a hexadecimal representation of a 24 bit color. Webhex colors are also known as Html color codes.
Webhex consists of a hexadecimal triplet. That is to say it is built up from three separate hexadecimal values, each of which represents the red, green and blue component of a color.
In 24 bit color, each of these components are described with a single byte. This means that each of the red, green and blue color components are defined with 8 bits each (8 x 3 = 24 bits) which allows for 256 unique values. This enables you to support red, green a blue decimal values from 0 to 255.
As an example, a bright purple with a maximum amount of red and blue but with no green intensity at all could be defined like so :
Next we will need to convert the decimal values into their hexadecimal equivalents. One decimal byte (which in itself can contain one to three decimal digits) converts to one or two hexadecimal digits. If the result is only a single digit we must precede it with a zero so that we always have two hexadecimal digits representing one byte. The end results is that a webhex value contains a total of 6 hexadecimal digits.
Converting the decimal values of the color above (255, 0 and 255) into their Hexadecimal equivalents (and adding a zero to the beginning of our single hexadecimal green value) we arrive at the following :
Again, it is important that the single zero is padded with another zero in order to make two hexadecimal digits. In total we now have 6 hexadecimal digits and can bring these together into the form that web hex is usually presented in. Notice the number sign (#) preeceding the end result which simply indicates that the value which follows is hexadecimal rather than simply a decimal value.
The table below shows how a hexadecimal pair is made. The first digit is the number of 16s in the color value, and the second digit is the number of ones. The decimal equivalents are also detailed for your reference.
|Color value x 16||Decimal||Color value x 1||Decimal|
Converting Decimal Bytes into Hexadecimal
If we wanted to convert a decimal value of 173 into hexadecimal we could use the table above to help us. First we would find the closest value on the left (number of 16s) without exceeding our value of 173. This happens to be 160 which gives us our first hexadecimal digit of A.
Next we would then subtract the 160 from our 173 which results in a remainder of 13. From the table above we can see that 13 in decimal is the same as D in hexadecimal. Bring these hexadecimal values together and we find that :
Performing this process on all three color components allows us to build up a complete web hex or html color code that was originally based on decimal byte values. Just remember to pad any single digit hexadecimal results with a zero and precede the end result with a number sign.
12 Bit Color Web Hex
Although not supported by all applications, 12 bit RGB Web Hex is an alternative for describing a color by using 4 bits per color component. As 4 bits can represent 16 unique values, this means that we are able to use 16 different intensities of red, green and blue. This allows us to define our color from a color gamut of exactly 4,096 colors.
A 12 bit web hex color is comprised of only 3 hexadecimal digits in total. The pink color that we defined earlier (see above) would translate to :
This is a shorter way to define colors, requiring only half the number of characters as compared to 24 bit webhex. If you are just getting started with webhex (or hexadecimal numerals in general) it might be easier and faster to work with 12 bit webhex at first before you move on to 24 bit webhex.
12 bit webhex is useful for a few different reasons. First, it’s easier to work with. Second, it requires less characters to define a color. Finally, sometimes a color really only needs 12 bits to be described. In other words (as with our demonstration color above) we are not loosing any information in the color’s components when we convert it to and from 24 bit color.
In the table for 24 bit webhex (above) you will see that the left-hand hexadecimal digit supports values up to 240 (decimal). With 12 bit Web Hex it is assumed that the right-hand digit is the same as the left-hand digit. The table below takes this into consideration and allows you to find the closest match between a 12 bit webhex value and it’s decimal equivalent.
If you do not mind loosing a little accuracy with your colors (in some cases), you could convert them to 12 bit webhex easily by using the table above. As an example let’s take the following 24 bit color (described in decimal RGB) and convert it into the closest 12 bit webhex equivalent :
Simply find the closest match in the table above for each color component byte value. We only need to keep the first hexadecimal digit. The converted value becomes :
As you can see, 12 bit webhex certainly does make things easier. Of course you sacrifice the ability to display some colors in the process. Your particular application of webhex will help you determine if the convenience of 12 bit webhex doesn’t interfere with the color accuracy that you require.
Html Color Names
The Mosaic and Netscape Navigator web browsers both started out as Unix X Window applications. They simply borrowed the X11 color names which would later be standardized as the official Html color names.
There are 147 colors in total and these can be referred to by name rather then defining colors using webhex. The Html color names are supported by most web browsers.
It may appear that there are some duplicate colors below. However, colors which have Gray in the names are repeated with the alternate spelling of Grey.
|Color Name||WEB HEX||Color|
We have learned a little bit of history in regards to the use of color on the Internet. As well we have looked at three different ways of describing colors : 24 bit webhex, 12 bit webhex and Html color names. Below is a quick example which demonstrates these various ways of describing color.
color = #F8B136 color = #A7F color = Thistle