Pin Me

All You Need to Know About Web Safe Colors

written by: S. R. Obbayi•edited by: Christian Cawley•updated: 10/10/2011

The knowledge of using web safe colors has always been the key to the difference between a good and a great designed web page. The question then begs. Is it the case that web designers still need to worry about using web safe colors these days?

  • slide 1 of 4

    What Are Web Safe Colors?

    Web Safe Color Chart To answer this question in one sentence is simple. Web safe colors, also known as browser safe colors, are colors that are deeply encoded into the browsers and display uniform, consistent and in a non-dithered manner on any computer monitor that supports 8 bit colors and above.

    To elaborate more, we would add that web safe colors consist of a palette of 216 colors encoded in 8-bit (single byte) memory. Interesting enough, eight bits of memory can actually accommodate 256 colors so it may be interesting to wonder why there are 216 colors regarded as web safe.

    The reason is that colors beyond the initial 216 do not meet the criteria of being solid, consistent and non-dithered on any computer monitor and therefore are not regarded as web safe. Basically colors beyond the first 216 may appear slightly different on different monitors of different operating systems.

  • slide 2 of 4

    A Case for Web Safe Colors

    The need to be concerned about web safe colors back in the nineties and early two thousands was very necessary as there were limitations on the range of colors the computer graphics card was capable of displaying at any one time.

    Due to the high costs of video memory, it was not practical to have memory beyond the 512 K limit. Most video graphics memory at the time had between 128 K and 512 K memory. This was barely sufficient to process the 256 8-bit colors.

    This meant that any color beyond the web safe palette that had to be displayed on a monitor had to be altered using various techniques such as replacing the existing color with the closest matching web safe color or simply using color dithering to get the best match.

    Altering the original color intended by the web designer could bring some embarrassing results when viewed on different graphics hardware or operating systems from what the designer intended.

    The other set-back comes when using GIF images. GIF images are commonly used for creating logos, banners and GIF animations. The GIF image format is restricted to a palette of 256 colors. By restricting your use of color options on GIF images to web safe colors, you stand to get the best results out of your design.

  • slide 3 of 4

    Are We Saying Web Safe Colors Are All That Important?

    HTML Named Web Color Chart A quick answer would be, yes! Traditionally as mentioned above, web safe colors were important based primarily on the limitations you would encounter within a wide selection of the video cards used in the early days of the Internet.

    You would argue that there were quite a number of high quality publications out there in the past that made use of True Color (24-bit color) spectrum especially in desktop publishing. This is true. The reason being, the final product was not targeted at the web browser. Remember web safe colors were primarily found within the web browser targeting video displays.

    It gets worse as web browsers at the time somewhat subscribed to the HTML 4.01 or less and CSS 2.0 or less standards. According to the standards mentioned above, there are only 16 named colors in the specification.

    The other thing that made web safe colors important was when dealing with GIF images with a transparent background. The color marked as transparent produced a cleaner result if it was a web safe color and the image it was used in was placed in a region bearing the same color as its background.

    For example, if I had a GIF with red text on a white background, then I go ahead and set the white background as transparent and place the GIF on a orange region, you would see some white specs bordering the letters of the red text caused by the anti aliasing effect applied by the web browser. Placing the image on a white background would solve this problem.

  • slide 4 of 4

    Do We Really Need to Keep Using Web Safe Colors Today?

    We can see from the reasons presented above, There is a case to justify the use of web safe colors. Sticking to the 216 web safe colors is traditionally seen a good web design practice.

    So how does the situation today as well as the technology advances affect the need to use web safe colors? We start off by looking at the video cards. Today many computers come with a built-in hardware Graphics Processing Unit (GPU) or hardware accelerated graphics card.

    Even if to say most computers do not come with built-in hardware graphics accelerators, the built-in video cards still come with significant memory ranging upwards from 64 MB. With this sort of memory, you are capable of handling colors that range in the tens of millions.

    Today we have better options for image formats with JPG and PNG being the most common formats as well as SVG graphics which is gaining more wide-spread use. These image formats support millions of colors and therefore do not subscribe to the same limitations that GIF images have.

    Computer monitors today are also capable of displaying millions of colors at great resolutions. So is the case with a lot of the latest smartphones and other mobile devices in the market today.

    Web browsers also have improved web content rendering engines that can process a larger color palette and larger chunks of memory more efficiently.

    With all these factors in place where does that leave the web designer as far as their choice of colors go. Web designers today have the freedom to move past the web safe color restriction and can use a greater choice of colors to create great looking web pages with better looking graphics and effects such as shadows and smoother gradients.

    So do web designers still need to worry about using web safe colors? Absolutely not. All they need to worry about is having an eye for the right choice and contrast of colors.