This is a file I wrote to a person once to try to explain how the colours in computers work.
Parallell to reading the page you might want to try the different example colours as you read. For this purpose I have prepared a frames version of this page with a colour mixer in one frame and the text in the other.
How the colours work
There is logic behind the colour codes! (yes really!)
Basic Colours
There are three basic colours RED, GREEN and BLUE!
(If you have once been taught that the three basic colours are red, yellow and blue and that you make green by mixing blue and yellow - FORGET IT! That does not apply to computers! Just forget everything you already know about colours and numbers and accept and use what I describe below)
Again: There are three basic colours RED, GREEN and BLUE!
The code is called RGB! (which of course means Red, Green, Blue)
The code consists of three numbers, one for each colour, in the order Red, Green, Blue.
Each of these numbers are in the range 0 to 255, where 0 means that there is 0% of that component in the colour and 255 means that there is 100% of that component in the colour.
You get different colours by mixing the three components (quite similar to mixing water paint - except that the basic colours are different and the result of mixing may seem a little bit strange at first)
The basic colours red, green and blue have the codes:
RED GREEN BLUE RESULT 255 0 0 red 0 255 0 green 0 0 255 blue
That is you black the other colours out and let that particular basic component dominate. If you want a darker version you just let the number for that colour be a little smaller (eg a nice dark blue can be R=0, G=0, B=127).
Greyscale
Black, white and grey have the codes:
RED GREEN BLUE RESULT 0 0 0 black 1 1 1 very dark grey (almost black) 2 2 2 still very dark grey (almost black) . . . . . . . . . . . . 127 127 127 medium grey . . . . . . . . . . . . 254 254 254 very light grey (almost white) 255 255 255 white
That is black and white are just special cases of grey and grey is what you get when all three components have the same number.
Easy to Mix
Some colours that are easy to mix are:
RED GREEN BLUE RESULT 0 255 255 turquoise (or "cyan") 255 0 255 hot pink (or "magenta") 255 255 0 yellow
Again you can get a darker colour by using a smaller number (eg R=0, G=127, B=127 is a nice dark turquoise). What is important here is that two of the components have the same number and the third is 0. (Following this recipe for "Dark hot pink" you get a nice plum colour and "Dark yellow" becomes puke green)
Other Mixes
Following this logic, can I figure out how to make new colours? Well I can try! (Some of the logic of old fashioned colour mixing does still apply and I can use that as a starting point)
orange
In ordinary colour mixing you get orange by mixing red and yellow and I would try something similar here. I would make yellow by mixing equal parts red and green and then "mix in" some red by making the red number a little bit bigger than the green. A guess would be R=200, G=150, B=0. I tried this number with a paint program and got a brownish yellow, not exactly what I was hoping for but I am definitely on the right track. It is too dark so I would brighten it up by using higher numbers. A little experimenting gives a good orange colour at R=255, G=180, B=0.
violet/purple (I'm not sure about the word)
In ordinary colour mixing you get violet by mixing red and blue and I would try something similar here. I know that equal parts red and blue makes hot pink or plum colour so what I would do is to use a little more blue than red in the mix. My guess: R=220, G=0, B=240. I like the result but I after experimenting I found that R=200, G=0, B=255 was even more like what I aimed at.
brown
This is a difficult one. Most likely I would need to use all three colours in the mix. I won't try to make a guess here, instead I will go straight into the painting program and start mixing and see what I can come up with.
RED GREEN BLUE RESULT 127 0 0 dark red looks quite brown to me. 127 50 0 more of a chocolate colour 187 105 35 dark orange with a little blue in it is ok
cream white
This is white with a little bit of beige in it, a warm tone. I would start with white and reduce the blue and maybe also reduce the green. I think I got a rather good result with R=255, G=246, B=233.
etc etc
(When I wrote the explanation above it was as a part of a discussion about colours in images. However, many people are interested in another variation on this theme - colours on web pages. For that one needs a little bit more information.)
Hexadecimal numbers
I think I can guess what you are thinking right now: "What has this got to do with the strange codes consisting of numbers and letters that I am supposed to use in my html documents?"
The answer is that that is just another way of writing the same thing! It has to do with how computers work - ones and zeros you know :)
Information in a computer is stored in bytes.
One byte consists of eight bits.
One bit is either one or zero - nothing else!
If you make every possible combination of ones and zeros that is possible with eight bits (or a byte) you will end up with 256 different combinations. That is why the colour code consists of numbers between 0 and 255. Among computer people it is very popular to use so called hexadecimal numbers. These are numbers that fit very nicely into a byte. They "have the base 16", which means that they use 16 different digits instead of ten (0 to 9). In order to write something you need a symbol and instead of inventing six new charac- ters they simply used the first six letters in the alphabet.
The first hexadecimal numbers are:
hexadecimal ordinary (or decimal) numbers 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 A 10 B 11 C 12 D 13 E 14 F 15 10 16 11 17 12 18 13 19 14 20 15 21 16 22 17 23 18 24 19 25 1A 26 1B 27 1C 28 1D 29 1E 30 1F 31 20 32 21 33 ... ...
The advantage is that if you use hexadecimal numbers you can write the contents of a byte with two digits instead of three as you would have to with ordinary numbers.
A more complete table:
(hex is short for hexadecimal and dec is short for decimal)
dec hex dec hex dec hex dec hex dec hex dec hex dec hex dec hex 0 00 32 20 64 40 96 60 128 80 160 A0 192 C0 224 E0 1 01 33 21 65 41 97 61 129 81 161 A1 193 C1 225 E1 2 02 34 22 66 42 98 62 130 82 162 A2 194 C2 226 E2 3 03 35 23 67 43 99 63 131 83 163 A3 195 C3 227 E3 4 04 36 24 68 44 100 64 132 84 164 A4 196 C4 228 E4 5 05 37 25 69 45 101 65 133 85 165 A5 197 C5 229 E5 6 06 38 26 70 46 102 66 134 86 166 A6 198 C6 230 E6 7 07 39 27 71 47 103 67 135 87 167 A7 199 C7 231 E7 8 08 40 28 72 48 104 68 136 88 168 A8 200 C8 232 E8 9 09 41 29 73 49 105 69 137 89 169 A9 201 C9 233 E9 10 0A 42 2A 74 4A 106 6A 138 8A 170 AA 202 CA 234 EA 11 0B 43 2B 75 4B 107 6B 139 8B 171 AB 203 CB 235 EB 12 0C 44 2C 76 4C 108 6C 140 8C 172 AC 204 CC 236 EC 13 0D 45 2D 77 4D 109 6D 141 8D 173 AD 205 CD 237 ED 14 0E 46 2E 78 4E 110 6E 142 8E 174 AE 206 CE 238 EE 15 0F 47 2F 79 4F 111 6F 143 8F 175 AF 207 CF 239 EF 16 10 48 30 80 50 112 70 144 90 176 B0 208 D0 240 F0 17 11 49 31 81 51 113 71 145 91 177 B1 209 D1 241 F1 18 12 50 32 82 52 114 72 146 92 178 B2 210 D2 242 F2 19 13 51 33 83 53 115 73 147 93 179 B3 211 D3 243 F3 20 14 52 34 84 54 116 74 148 94 180 B4 212 D4 244 F4 21 15 53 35 85 55 117 75 149 95 181 B5 213 D5 245 F5 22 16 54 36 86 56 118 76 150 96 182 B6 214 D6 246 F6 23 17 55 37 87 57 119 77 151 97 183 B7 215 D7 247 F7 24 18 56 38 88 58 110 78 152 98 184 B8 216 D8 248 F8 25 19 57 39 89 59 121 79 153 99 185 B9 217 D9 249 F9 26 1A 58 3A 90 5A 122 7A 154 9A 186 BA 218 DA 250 FA 27 1B 59 3B 91 5B 123 7B 155 9B 187 BB 219 DB 251 FB 28 1C 60 3C 92 5C 124 7C 156 9C 188 BC 220 DC 252 FC 29 1D 61 3D 93 5D 125 7D 157 9D 189 BD 221 DD 253 FD 30 1E 62 3E 94 5E 126 7E 158 9E 190 BE 222 DE 254 FE 31 1F 63 3F 95 5F 127 7F 159 9F 191 BF 223 DF 255 FF
Here are some of the colour codes in hexadecimal:
COLOUR RGB CODE black 000000 grey XYXYXY white FFFFFF red FF0000 orange FFB400 yellow FFFF00 yellow green B8FF00 puke green 7F7F00 green 00FF00 dark green 007F00 light green BEFF7F cyan 00FFFF blue 0000FF dark blue 00007F light blue AAC1FF magenta FF00FF plum 7F007F violet C800FF red brown 7F0000 chocolate brown 7F3200 brown BB6923 cream white FFF6E9
and I am sure that you can now add to this list yourself :)
HTML
Somebody wrote to me and asked:
"heeeeelp, i understand the whole hexidecimal thinger, but what do i put on my page to make the colors go there?? how do i type it on??"
Here is a quick-and-dirty answer:
You write the six-digit hexadecimal code for a colour, e.g. red FF0000 in quote marks with a # character in front, like this: "#FF0000"
Examples:
-
in the <body> tag:
<body bgcolor="#cccccc" text="#000000" link="#0000FF" vlink="000099">
will give you a page with light grey background, black text, blue links and darker blue visited links.
-
or in a <font> tag:
<font color="#FFFF00">this text will be yellow</font>
-
Similarly, in CSS:
<span style="color: #ff00ff; background: #000000;">hot-pink text on black "highlight" background</span>
