WEB PAGE COLOURS (COLORS)
NOT ENOUGH PAGE DESIGNERS KNOW ANYWHERE NEAR ENOUGH ABOUT THEM
PAGE INDEX
Why colours need to be chosen carefully and completely. AVOID GOING AS BLIND AS ME.
HOW DOES YOUR COMPUTER DECIDE WHAT COLOUR TO DISPLAY SOMETHING?
Colours can be set in several tags either global or local. Here is where and how in simple HTML.
NAMED COLOURS AND WHAT IS #DDDDDD ALL ABOUT
Named colors for use with HTML. Set colours the easy way and how to set them exactly to 1,6777,216 possibilities.
Setting colours the mathematical way and HOW DOES YOUR COMPUTER DECIDE WHAT COLOUR TO DISPLAY SOMETHING.
THE NEED FOR THIS PAGE
Even though this site is about radio I had to put this in. I have a lot of trouble with my eyes. I can not look at bright screens and so the brightness level of this site is much lower than most others. I keep it dark but not too dark out of consideration for users who move from these pages to those horrible bright white things. Plain black is just as bad as white because of this contrast. Off topic as little too is that the font size was set so you don't need a microscope to read it.
The foreground and background colours were chosen to be as soft a contrast as possible and still remain readable. There are many schemes that will do this, this one is just my favourite.
HOW DOES YOUR COMPUTER DECIDE WHAT COLOUR TO DISPLAY SOMETHING
The first place a browser will look is at the page itself unless you have chosen to ignore colours from web pages. This is not worth doing because then there are many pages you can't read. There is also an ACCESSABILITY option in Windows itself but again this is worthlessbecause it can't be used to set link colors and you end up with blue writing on black or dark background pages.
Unfortunately, if a web page designer chooses to use a slightly off white color for the background and assumes you also use black for the background, you are in trouble because they won't bother setting the foreground colour. They will assume it is black like theirs.
For the average backyarder or small business making their own web pages, a lack of knowledge or experience is understandable. The following situation from the big sites is totally sloppy. Microsoft® is the biggest offender.
Your browser will display the background but if you MUST use colors similar to this page for Windows itself you might have to read something that looks like the image to the right. |  |
EVEN WORSE: I am amazed. I have had to change the following statement. Microsoft has seen the light and fixed it. It is also possible for web page designers to set the foreground colour as they did in the Bing search window and assume the background colour will be the same as theirs. |  |
Microsoft® are not alone. Yahoo® and Google® at least set both the foreground and background colors but insists on a bright white background and black foreground. That is at least better than displaying pages with examples like this above. If was Microsoft® who allowed people to use their own colours in the first place and even provided HIGH CONTRAST colour schemes.
I don't think Microsoft® have ever tested their own pages properly.
The solution is easy, set all colours on a web page or software or set none and leave them all up to your windows or internet specific defaults.
Now how hard it that?
Well, as it turns out, not too hard at all. There are two main ways to do it. There are 16 basic colors which can be named but any one of 16 777 216 colours can be selected.
HOW AND WHERE CAN COLOURS BE SET
In HTML the background color is usually set in a <body> tag like this <body bgcolor=#123456> This sets the background to this → 
. The foreground color and link colours can also be set in the <body> tag like this:-
<body bgcolor=#300010 text=#cccc77 link=#aaaaff vlink=#aaaacc>
If you use VIEW SOURCE from your browser menu, you should see this is the <body> tag on this page.
And if that's too hard like this:-
<body bgcolor="fuchsia" text="green" link="red" vlink="blue">
"text" is the colour used for text of course and "bgcolor" the background. The others, "link" and "vlink" are the colours used for hyperlinks and visited hyperlinks respectively.
The other way to set a color is in a <font> tag like this
<font color="lime"> then text becomes lime until the end </font> tag. You can't set any other colours like background though, only the font colour.
Setting colors for hyperlinks is also possible within the <A HREF="URL"> tag by using the font tag inside it
<A HREF="URL"><font color="lime"> like this</font></a> but <font bgcolour="lime"> will be ignored.
It is possible to set the background colour separately but its a pain. |
COLORS WITH NAMES
There are sixteen colours that can be used by name. They are simply:-
WHAT IS #NNNNNN ALL ABOUT
Firstly, the "#" character simply says - here comes 6 characters describing a color in detail. There are shortcuts such as bgcolor="red" and "#" distinguishes the method of stating the colour.
There must always be 6 valid digits or the color tag, whatever it may be, will be ignored. The primary colors used on a computer screen are RED, GREEN and BLUE. The first two digits are the red level, the second green and the last two the blue level.
VALID DIGITS
The colour levels can range from 0 to 255. They are expressed as hexadecimal digits using the characters 0 1 2 3 4 5 6 7 8 9 A B C D E F. (or lower case a b c d e f). This sounds complicated but it doesn't take long to master. Once you see how it works the question of WHY is also generally answered.
So what, may you ask is hexadecimal. "Hex" means 6 and "decimal" 10 so add them together and you get 16. It is a number system based on the number 16. Because humans have 10 fingers, our number system is based on ten. Hexadecimal is probably what we would use if we had 8 fingers on each hand.
THE HEXADECIMAL SYSTEM - HOW IT WORKS - HISTORY - OCTAL
Hexadecimal works the same way as normal counting. To count in base ten (what we normally use) we count one finger at a time until we have used them all up and then count one in the tens column so we can start again in the units. It is the same with hexadecimal except we count to 16. There is no "tens" column but a "sixteens" column.
Because we don't have numerals for 10-15 we use the first 6 letters of the alphabet for counts of ten, eleven, twelve, thirteen, fourteen and fifteen. We do not have a numeral for a count of "ten" in normal numbers because, when we get there, we start again and count one in the next column. The same for hexadecimal. There is no sixteen numeral required.
There is nothing magical about sixteen so you would be asking a good question if you asked "WHY 16?". It started general use only after the development of computers. Computers can only have two numerals "0" and "1" and use a number system based on two first thought of by Gottfried Leibniz in 15th-16th century. Computers have no idea of what 3 is. Nevertheless, it still works the same.
Suppose you use your arms instead of your fingers for counting. Both arms down represents "0" while left arm up represents "1". Since you have used up all possibilities in the first column, to count one more you need to raise your right arm but you can start again with the left to count 2 and then both arms to count 3. Two arms, two possibilities for each thus 4 possibilities that are 0, 1, 2 and 3.
Computers do the same. They only have two numerals so instead they have LOTS of columns.
That still doesn't answer why 16. During the development of computers, people had trouble remembering sequences like 10110101 so instead started to use a number system based on 8 or Octal. This was because nobody had thought yet of using letters although the idea of different number bases has been around for a long time. This allowed the sequence 10110101 to be represented as 265 Octal. This is a lot easier to remember than 10110101. It is also easy to translate. Each Octal digit converts directly into 3 binary digits (the system based on two numerals only) so 10 binary = 2 octal, 110 binary = 6 Octal and 101 binary = 5 Octal. The three digit translation is because 2 x 2 x 2 = 8 or 23=8.
This had its drawbacks though. Instead of a 3 column translation, the four column translation of hexadecimal is much more convenient. Each four bits (binary digits) translates to one hexadecimal digit because 2 x 2 x 2 x 2 = 16 or 24=16.
This means the numbers up from 0 - 255 decimal are represented as to hexadecimal digits. This also means there are 256 levels of red (0-255 includes 0), 256 levels of green and 256 levels of blue. 256 x 256 x 256 = 16777216 possible colours. Some displays use 32 bit colour but, honestly, I can't tell if my monitor is using 16 bit, 24 bit, 32 bit or more color levels.
| Base 10 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 11 | 12 | 13 | 14 | 15 |
| Base 16 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
| Base 2 | 0000 | 0001 | 0010 | 0011 | 0100 | 0101 | 0110 | 0111 | 1000 | 1001 | 1010 | 1011 | 1100 | 1101 | 1110 | 1111 |
This is just a small sample of the colors available. Each SQUARE represents increasing levels of BLUE across the page. Each COLUMN represents increasing levels of RED and each ROW increasing lavels of GREEN.
The lowest value is 0 followed by 3f (63), 7f (127), bf (191) and finally ff (255).
Pages served from this site for 2012 - 82618
All text and images on this site are Copyright to John Langsford (vk5ajl).
You may provide links on other sites or use the information and pictures for your own personal use.
You may use the text or images for redisplay or quotation provided you acknowledge the source ie. vk5ajl.com.
I think that's pretty fair, don't you?