Web Colour Charts Introduction

Introduction

For the past couple of decades whenever you bought a computer, printer, scanner or digital camera you probably encountered some advertising about the thousands or millions of colours the device was capable of capturing, displaying or printing. What you did not hear was a salesperson giving you a guarantee that all of the other computer hardware owned by people around the world would capture or display exactly the same millions of colours as your new device. That becomes a problem. The colours you see and try to capture with a digital camera or scanner may not look exactly the same on your computer screen as they did in real life. When you try to print something the colours may turn out slightly different on paper from what you saw on your computer screen. When you create something colourful on your computer and then later see it on someone else's computer screen or printed by their printer the colours may look slightly different from what you saw on your machine.

This is basically a problem of there being a lack of coordination and standardization between manufacturers regarding those millions of colours they like to advertise. Gradually the situation has been improving over the years but it has taken time to try to synchronize all of those millions of colours so they will appear the same on all of the various hardware devices.

On the internet the solution was to first define 16 standard colours as listed in Hypertext Markup Language (HTML) version 4 that should appear the same on all computers. Each of the 16 colours was given a name that webmasters could use in their programming code. Then the list was expanded to 216 numbered web safe colours that webmasters could use. Netscape originally defined the 216 numbered colours for its web browser but now all popular web browsers use the same standardized list.

Recently a new list in Cascading Style Sheets version 3 (CSS3) has appeared of 140 colours that each have their own name. The original 16 colours with names are included in the new list of 140 colours with names. Two of the colours somehow managed to get named twice so there really is only 138 actual colours but 140 colour names that webmasters can use in their programming code.

To complicate things a bit one of the original 16 named colours has two spellings, grey and gray. One of my charts contains a test to make sure the two spellings grey and gray are displayed as the same colour by your computer. The list of 140 CSS3 colours allows you to use both spellings for the colour grey and the six colours that include grey as part of their name.

As a computer teacher and webmaster I am well aware of the many colour charts that have been made of the original 16 named colours, 216 numbered web safe colours and the new 140 CSS3 colour names. The problem with many of the charts is that the colour samples are so small you do not really know what the colour will look like on your web page. How do you pick a background colour for your computer screen when you are looking at colour samples measuring only a few pixels by a few pixels in size?

Another problem is that your perspective of any individual colour sample in a chart is effected by the surrounding colour samples. Some colours may look great in a colour chart and others may look terrible simply because of how they complement or clash with their neighbouring colour samples.

To overcome these problems I have created some colour charts with fairly large colour samples (size depends on the width of your computer screen). Some of my colour charts contain a lot of colour samples while other colour charts contain only a few colour samples. Many of the individual colours are repeated many times among the various charts often with different combinations of neighbouring colours.

The Technical Details

Now before I proceed any further I should mention that there are three basic operations involving colour that people are likely to encounter when using computers.

1. Printers typically mix various amounts of cyan, magenta, yellow and black ink to print all of the colours of the rainbow, black and grey. White is often the default colour of the paper so no ink is required to print white.
2. Digital cameras and scanners use three sensors to capture an image by measuring the light intensity of red, green and blue light for each little dot they see called a pixel.
   • This is very similar to how the human eye works with our eyes having three sensors that each capture the light intensity of a different colour of light for each little dot we can see. Our brain then combines the light we detect with the three individual colour sensors so that we see the image using all of the colours of the rainbow, black, grey and white. Colour blindness is when one or more of the light sensors in our eye is not working correctly.
3. Computer screens are the reverse operation of digital cameras and scanners. Computer screens use miniature red, green and blue light bulbs that can be individually set at different light intensities (think of them as each having a dimmer switch). By changing the light intensity of the red, green and blue light bulbs for each little dot called a pixel a computer screen can create black, white, many shades of grey, and all of the colours of the rainbow.

Webmasters generally use RGB (red-green-blue) numbers like #33CC99 to specify a colour in their programming code. The number sign is followed by a two digit hexadecimal number representing the light intensity of red, then a two digit hexadecimal number for the light intensity of green, and finally a two digit hexadecimal number for the light intensity of blue. All 256 of the hexadecimal numbers from 00 to FF are available to create different colours.

Alternative RGB numbering systems use base 10 decimal numbers or percentages to specify the light intensity of the individual pixels of red, green and blue light. The ranged used for the base 10 decimal numbers is from zero to 255.

All possible combinations of the hexadecimal numbers 00, 33, 66, 99, CC and FF are used to create the 216 web safe colours. Only eight of the 16 standard named colours are included in the list of 216 web safe colours.

The 16 standard named colours use the hexadecimal numbers 00, 80 and FF. A special case is C0 that is only used once to create the colour silver. The use of C0 prompts the question of why the hexadecimal number 40 was not used to complete the mathematical pattern? None of the possible combinations of 80 with FF were used to create a named colour.

All of these questions naturally piqued my mathematical curiosity so I tried using all possible combinations of the hexadecimal numbers 00, 40, 80, C0 and FF to created 125 colours. One of the bonuses of my effort was that I discovered the missing colours orange and brown.

Orange and brown should have been included with the original 16 named colours as any kindergarten child will tell you. A standard box of crayons that the children use in kindergarten and the primary grades has the eight colours of red, orange, yellow, green, blue, purple, black and brown.

I have never considered myself to be a hyper colour sensitive artist so my colour charts are based on mathematical patterns I created with the hexadecimal numbers just to see what would happen. I will include a few notes but I am largely leaving it up to your observation skills to see what happens.