Once upon a time, a Visual Display Unit (VDU) (as they are historically known, now called monitors) would display two colours, one for the background, typically black, and another for the foreground, which was green, white or yellow (or a contrasting colour from the background).
As colour television sets became popular in the 1970s, there was obviously scope for the signal from a computer to synchronise different colours to make things a bit more visually interesting. One of the first video games consoles to do this was the Atari VCS-2600, which had a sophisticated enough video chip to display a wide range of colours: up to 128 on a NTSC screen, and a slightly lesser amount on a PAL screen. For a piece of technology from 1977, this was a glimpse into the future! Consider that the 1982 Commodore 64 had a default palette of 16(1) and the Sinclair ZX Spectrum (of the same year) managed just 15(2), and other machines of a similar vintage had just eight.
What all old personal computer and consoles have in common is that they used light colours, which we still use for today’s generation of technologies.
This Venn diagram should give us a clue to how RGB light colours work (and if not, I’ll explain):
Every colour on this page is composed of a mixture of red, green and blue. Where each level is at maximum (full red, full green and full blue), you should see white, and were each level is at minimum (or off), you’ll see black. The colour of this text is a very dark grey, (which in CSS is #333 - using a short code, which would be #030303, there’s a reason why this is shortened which I will discuss in another blog). The difference between this shade of grey and black is quite subtle and some people (including myself) probably won’t notice it. I have switched to RGB black in this sentence to show the difference.
As discussed elsewhere on this blog, all modern PCs use a 24-bit RGB colour palette(3). Each eight bits, or byte, represents a colour level from zero to 255, or in hexadecimal #00 to #FF inclusive, meaning 256 possibilities per level (as we count the zero as a possibility).
If each colour level for Red, Green and Blue is set equally, then they cancel each other out and will show a shade of grey. This will range from black (#000000) to white (#FFFFFF). We therefore know that there are 256 shades of grey in a 24-bit colour palette.
As attractive as grey scale may be, we will probably want something a bit more aesthetically pleasing. A 24-bit(3) palette would give you over 16,000,000 (16 million) colours to play with. According to some studies(4), the human eye can only distinguish between 10m, I will therefore state with some confidence that 16m colours ought to be enough for anyone.
Using Cascading Style Sheets (CSS), and in some programming languages, there are default colours defined with appropriate nouns to make things more human readable, such as black, green, orange etc.
Let’s assume you want to find a unique shade of red that is not pre-defined for you. The principles will be the same with Java and other programming languages (although the syntax will be different), but I’ll use CSS to demonstrate.
The default (primary) red colour will be set as full red, no green and no blue, as follows:
Please note the American/international spelling of ‘color’ here. All programming languages that I can think of use the color spelling as standard, so although it may be flagged up by your UK spell checker, the American will be correct. Using the British English spelling [in programming] will most likely cause a syntax error of some description.
Now let’s say we want something a little more subtle that the default red. Let’s take the red setting down by about 20% and, just to see what happens, add a small amount of blue. 20% of #FF (255) will be 51 in decimal, but as we’re dealing in hexadecimal, we need to work out the equivalent hex number, which happens to be #33. If this is confusing, read my ‘What is binary’ and ‘What is hexadecimal’ blog linked at the bottom of the page as CSS colours (or ‘colors’ if you prefer) use hexadecimal.
So the number for the red in hexadecimal ends up as #CC (which is #FF minus #33). We’ll now add a hint of blue, so let’s say we want to set the level at about 10%; as 10% of 255 is 25.5, and we can only use whole numbers, we may as well round this up to 26; the hex value will therefore be #1A for the blue. We don’t want any green so we’ll leave that at zero. Now we have:
This is the colour that we end up with in the above example.
As there are so many colours to choose from, and as the human eye can only distinguish between about 70% of the total number of colours typically available to us, I’ll leave you to play with the different levels in CSS or whatever yourself.
To demonstrate further, I am developing a learning tool aimed at children which has cut down the range of available colours to 4,096. It’s called RGB Workshop and will be available soon.
RGB Workshop will allow children to learn some basic principles on computer programming by drawing and colouring shapes on a canvas. It has its own scripting language (currently and unimaginatively called RGB Workshop Script). Importantly, I’ve used the English spelling of colour to please English teachers. It is still in alpha stages, but if you are interested in seeing a demonstration then contact me through the ‘ask’ facility provided by Tumblr, or Tweet me about it.
(1) - The Commodore 64 is able to display more colours than this, at least on CRT television sets, by imperfections in the display that allows certain colours to be mixed if set closely enough together.
(2) - The Sinclair ZX Spectrum was advertised as having 16 colours in some literature because it had two brightness levels, however ‘bright’ black and normal black were exactly the same shade. More recently, the ULA+ hardware has increased the number of colours available on a Spectrum screen which is supported by some emulators and by some clones.
(3) - A 24-bit palette on a modern personal computer would actually be a 32-bit palette as there is an alpha channel, which deals with the opacity which allows one to set the transparency from 0 (which would be invisible to the eye but the object will still exist in the computer’s memory) to 255 (which would be a solid object). I will talk about the alpha channel on another blog.
(4) - source: Number of Colors Distinguishable by the Human Eye