Colour in HTML |
Back to contents || Back to top
For technical reasons, the primary colours for computer screens are not red, yellow and blue but red, green and blue. colours are defined by the mixture of these three, that is, their Red-Green-Blue (RGB) values.
For each of the three colours, the possible values range from zero to 255. This is because each is represented by one byte, that is, eight bits, and 28 = 256. This is why colours defined to this precision is called "24-bit colour" (3 colours at 8 bits each).To complicate things just a little more, the values are written in
base sixteen, or hexadecimal.
Why? Well, it is a computer programmer habit because
base sixteen is much more convenient than decimal for representing
the binary numbers used by computers. Each hexadecimal digit
represents a neat four bits (24 = 16),
which is half a byte.
The digits in base sixteen are
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,.A, B, C, D, E and F. ("A" is ten,
"B" is eleven, etc.) In this system, any number from 0 to 255 is
written by two hexadecimal digits. "00" = 0, of course, while
"FF" = 255.
"F3" = (F x 16) + 3 = (15 x 16) + 3 = 243.
Note: the characters A - F are not case sensitive for this purpose: i.e. you can write either "FF" or "ff" (or "Ff") without altering the meaning.
Colours can be written, for purposes of HTML and style sheets, by six hexadecimal digits. The first two represent red, the second two green, and the last two blue. The six digits are preceded by a "#" to indicate a hexadecimal colour value.
Red | | Green | | Blue | |
---|---|---|---|
A colour value has three parts: # |
(Don't forget the # !)
Thus, consider #FF0000. The red value is FF, 255, the maximum. The green and blue values are both zero. Thus, this produces bright red.
This background is #FF0000 |
In the above example, a TABLE has been used, with only one
call. The background colour of the cell has been defined by
the BGCOLOR attribute. The code is
<TD BGCOLOR="#FF0000">text in cell</TD>
#FFFFFF is white (all colours equally at maximum), and #000000 is black (all colours zero). If we made the "FF" in the last example a little lower, say CC, we would get a darker red:
This background is #CC0000 |
If we combine red and blue, with no green, we will get purple:
This background is #FF00FF |
Obviously, there are a very large number of possible colours which can be defined in this system: 224 = 16,777,216. However, not all computers are capable of actually producing all these. This is less of a problem than it was in the early days of the web. To avoid problems, you can use so-called "browser-safe" colours. The colours in which the values for each colour are limited to 00, 33, 66, 99, CC, or FF are generally safe. Also, there are a number of other standard colours defined.
As an alternative to using hexadecimal values, you can use
a list of pre-defined names such as "yellow". Thus:
<TD BGCOLOR="yellow">text in cell</TD>
Notice that there is no "#" as this is not a hex value.
This background is yellow |
To get an idea of how the combination of red, green and blue works, consider the table below. This shows the possible combinations of the basic values (00, 33, 66, 99, CC, & FF) for red and for green. Going across the table, the green values go up from zero to maximum; going down the table, the red values go from zero to maximum. (The blue values are all zero.)
Green values 00 - FF | ||||||
---|---|---|---|---|---|---|
Red values 00 - FF |
000000 000000 |
003300 003300 |
006600 006600 |
009900 009900 |
00CC00 00CC00 |
00FF00 00FF00 |
330000 330000 |
333300 333300 |
336600 336600 |
339900 339900 |
33CC00 33CC00 |
33FF00 33FF00 |
|
660000 660000 |
663300 663300 |
666600 666600 |
669900 669900 |
66CC00 66CC00 |
66FF00 66FF00 |
|
990000 990000 |
993300 993300 |
996600 996600 |
999900 999900 |
99CC00 99CC00 |
99FF00 99FF00 |
|
CC0000 CC0000 |
CC3300 CC3300 |
CC6600 CC6600 |
CC9900 CC9900 |
CCCC00 CCCC00 |
CCFF00 CCFF00 |
|
FF0000 FF0000 |
FF3300 FF3300 |
FF6600 FF6600 |
FF9900 FF9900 |
FFCC00 FFCC00 |
FFFF00 FFFF00 |
Below you will find two tables of colours. In each cell the colour value or name is written both in black and in white to ensure legibility. The tables show:
The names appear to originate in paint-manufacturing usage. Recent versions of both Netscape and Internet Explorer recognize all these names, but earlier Internet Explorer versions only recognized sixteen of them. (Act9a still had this limitation, but Act10 recognizes them all.) We recommend using hex values, because they give you complete control and the assurance that the colour will be recognized.
Colours can be used either for background or for text colour.
For background colour, you can set the background of some
elements (notably BODY, i.e. the entire document) and TD
(table cell) using the BGCOLOR attribute. E.g.
<BODY BGCOLOR="#FFFF00">
For text, the color can be set using the FONT element with
a COLOR attribute, e.g.
<FONT COLOR="#FF0000">
Text to appear in colour #FF0000
</FONT>
The general consensus now is that these methods should be phased
out in favour of style sheets. The BGCOLOR and COLOR attributes
are technically "deprecated" and may become obsolete in future
versions of HTML, although browsers should still be able to
deal with them. In fact, the entire FONT element is deprecated.
Unfortunately, a lot of browsers still cannot render style sheet
formatting correctly. Even Netscape 4 has problems. Consequently
we recommend that, for the present, you should continue to use
BGCOLOR and FONT COLOR for all essential colour formatting.
Back to contents || Back to top
#000000 #000000 |
#000033 #000033 |
#000066 #000066 |
#000099 #000099 |
#0000CC #0000CC |
#0000FF #0000FF |
#003300 #003300 |
#003333 #003333 |
#003366 #003366 |
#003399 #003399 |
#0033CC #0033CC |
#0033FF #0033FF |
#006600 #006600 |
#006633 #006633 |
#006666 #006666 |
#006699 #006699 |
#0066CC #0066CC |
#0066FF #0066FF |
#009900 #009900 |
#009933 #009933 |
#009966 #009966 |
#009999 #009999 |
#0099CC #0099CC |
#0099FF #0099FF |
#00CC00 #00CC00 |
#00CC33 #00CC33 |
#00CC66 #00CC66 |
#00CC99 #00CC99 |
#00CCCC #00CCCC |
#00CCFF #00CCFF |
#00FF00 #00FF00 |
#00FF33 #00FF33 |
#00FF66 #00FF66 |
#00FF99 #00FF99 |
#00FFCC #00FFCC |
#00FFFF #00FFFF |
#330000 #330000 |
#330033 #330033 |
#330066 #330066 |
#330099 #330099 |
#3300CC #3300CC |
#3300FF #3300FF |
#333300 #333300 |
#333333 #333333 |
#333366 #333366 |
#333399 #333399 |
#3333CC #3333CC |
#3333FF #3333FF |
#336600 #336600 |
#336633 #336633 |
#336666 #336666 |
#336699 #336699 |
#3366CC #3366CC |
#3366FF #3366FF |
#339900 #339900 |
#339933 #339933 |
#339966 #339966 |
#339999 #339999 |
#3399CC #3399CC |
#3399FF #3399FF |
#33CC00 #33CC00 |
#33CC33 #33CC33 |
#33CC66 #33CC66 |
#33CC99 #33CC99 |
#33CCCC #33CCCC |
#33CCFF #33CCFF |
#33FF00 #33FF00 |
#33FF33 #33FF33 |
#33FF66 #33FF66 |
#33FF99 #33FF99 |
#33FFCC #33FFCC |
#33FFFF #33FFFF |
#660000 #660000 |
#660033 #660033 |
#660066 #660066 |
#660099 #660099 |
#6600CC #6600CC |
#6600FF #6600FF |
#663300 #663300 |
#663333 #663333 |
#663366 #663366 |
#663399 #663399 |
#6633CC #6633CC |
#6633FF #6633FF |
#666600 #666600 |
#666633 #666633 |
#666666 #666666 |
#666699 #666699 |
#6666CC #6666CC |
#6666FF #6666FF |
#669900 #669900 |
#669933 #669933 |
#669966 #669966 |
#669999 #669999 |
#6699CC #6699CC |
#6699FF #6699FF |
#66CC00 #66CC00 |
#66CC33 #66CC33 |
#66CC66 #66CC66 |
#66CC99 #66CC99 |
#66CCCC #66CCCC |
#66CCFF #66CCFF |
#66FF00 #66FF00 |
#66FF33 #66FF33 |
#66FF66 #66FF66 |
#66FF99 #66FF99 |
#66FFCC #66FFCC |
#66FFFF #66FFFF |
#990000 #990000 |
#990033 #990033 |
#990066 #990066 |
#990099 #990099 |
#9900CC #9900CC |
#9900FF #9900FF |
#993300 #993300 |
#993333 #993333 |
#993366 #993366 |
#993399 #993399 |
#9933CC #9933CC |
#9933FF #9933FF |
#996600 #996600 |
#996633 #996633 |
#996666 #996666 |
#996699 #996699 |
#9966CC #9966CC |
#9966FF #9966FF |
#999900 #999900 |
#999933 #999933 |
#999966 #999966 |
#999999 #999999 |
#9999CC #9999CC |
#9999FF #9999FF |
#99CC00 #99CC00 |
#99CC33 #99CC33 |
#99CC66 #99CC66 |
#99CC99 #99CC99 |
#99CCCC #99CCCC |
#99CCFF #99CCFF |
#99FF00 #99FF00 |
#99FF33 #99FF33 |
#99FF66 #99FF66 |
#99FF99 #99FF99 |
#99FFCC #99FFCC |
#99FFFF #99FFFF |
#CC0000 #CC0000 |
#CC0033 #CC0033 |
#CC0066 #CC0066 |
#CC0099 #CC0099 |
#CC00CC #CC00CC |
#CC00FF #CC00FF |
#CC3300 #CC3300 |
#CC3333 #CC3333 |
#CC3366 #CC3366 |
#CC3399 #CC3399 |
#CC33CC #CC33CC |
#CC33FF #CC33FF |
#CC6600 #CC6600 |
#CC6633 #CC6633 |
#CC6666 #CC6666 |
#CC6699 #CC6699 |
#CC66CC #CC66CC |
#CC66FF #CC66FF |
#CC9900 #CC9900 |
#CC9933 #CC9933 |
#CC9966 #CC9966 |
#CC9999 #CC9999 |
#CC99CC #CC99CC |
#CC99FF #CC99FF |
#CCCC00 #CCCC00 |
#CCCC33 #CCCC33 |
#CCCC66 #CCCC66 |
#CCCC99 #CCCC99 |
#CCCCCC #CCCCCC |
#CCCCFF #CCCCFF |
#CCFF00 #CCFF00 |
#CCFF33 #CCFF33 |
#CCFF66 #CCFF66 |
#CCFF99 #CCFF99 |
#CCFFCC #CCFFCC |
#CCFFFF #CCFFFF |
#FF0000 #FF0000 |
#FF0033 #FF0033 |
#FF0066 #FF0066 |
#FF0099 #FF0099 |
#FF00CC #FF00CC |
#FF00FF #FF00FF |
#FF3300 #FF3300 |
#FF3333 #FF3333 |
#FF3366 #FF3366 |
#FF3399 #FF3399 |
#FF33CC #FF33CC |
#FF33FF #FF33FF |
#FF6600 #FF6600 |
#FF6633 #FF6633 |
#FF6666 #FF6666 |
#FF6699 #FF6699 |
#FF66CC #FF66CC |
#FF66FF #FF66FF |
#FF9900 #FF9900 |
#FF9933 #FF9933 |
#FF9966 #FF9966 |
#FF9999 #FF9999 |
#FF99CC #FF99CC |
#FF99FF #FF99FF |
#FFCC00 #FFCC00 |
#FFCC33 #FFCC33 |
#FFCC66 #FFCC66 |
#FFCC99 #FFCC99 |
#FFCCCC #FFCCCC |
#FFCCFF #FFCCFF |
#FFFF00 #FFFF00 |
#FFFF33 #FFFF33 |
#FFFF66 #FFFF66 |
#FFFF99 #FFFF99 |
#FFFFCC #FFFFCC |
#FFFFFF #FFFFFF |
Back to contents || Back to top
In the following table, the cells on the left side have their background colour (BGCOLOR) defined by the colour name, e.g. <TD BGCOLOR="aliceblue">, whereas the cells on the right side have the same colours defined by RGB hex values (e.g. <TD BGCOLOR="#F0F8FF">. If you do not see the same colours in left and right, then your browser does not recognize the colour name.
(That is: in the right-hand column the browser is being given the colour in RGB, such as #F0F8FF, and should display it if it can display colours at all. But in the left column the browser is being given a name, such as "aliceblue". If it knows that "aliceblue" means #F0F8FF then it will dipslay that colour. But if it does not recognize "aliceblue", then it will ignore the colour instruction and display the cell in the same colour as the background used for the rest of the page. Thus if the colours are different, then your browser does not recognize the colour name; whereas if it does show the same colour in both, then it does recognize the name.)
Colour defined by name | Colour defined by RGB hex value |
---|---|
aliceblue aliceblue |
F0F8FF F0F8FF |
antiquewhite antiquewhite |
FAEBD7 FAEBD7 |
aqua aqua |
00FFFF 00FFFF |
aquamarine aquamarine |
7FFFD4 7FFFD4 |
azure azure |
F0FFFF F0FFFF |
beige beige |
F5F5DC F5F5DC |
bisque bisque |
FFE4C4 FFE4C4 |
black black |
000000 000000 |
blanchedalmond blanchedalmond |
FFEBCD FFEBCD |
blue blue |
0000FF 0000FF |
blueviolet blueviolet |
8A2BE2 8A2BE2 |
brown brown |
A52A2A A52A2A |
burlywood burlywood |
DEB887 DEB887 |
cadetblue cadetblue |
5F9EA0 5F9EA0 |
chartreuse chartreuse |
7FFF00 7FFF00 |
chocolate chocolate |
D2691E D2691E |
coral coral |
FF7F50 FF7F50 |
cornflowerblue cornflowerblue |
6495ED 6495ED |
cornsilk cornsilk |
FFF8DC FFF8DC |
crimson crimson |
DC143C DC143C |
cyan cyan |
00FFFF 00FFFF |
darkblue darkblue |
00008B 00008B |
darkcyan darkcyan |
008B8B 008B8B |
darkgoldenrod darkgoldenrod |
B8860B B8860B |
darkgray darkgray |
A9A9A9 A9A9A9 |
darkgreen darkgreen |
006400 006400 |
darkkhaki darkkhaki |
BDB76B BDB76B |
darkmagenta darkmagenta |
8B008B 8B008B |
darkolivegreen darkolivegreen |
556B2F 556B2F |
darkorange darkorange |
FF8C00 FF8C00 |
darkorchid darkorchid |
9932CC 9932CC |
darkred darkred |
8B0000 8B0000 |
darksalmon darksalmon |
E9967A E9967A |
darkseagreen darkseagreen |
8FBC8F 8FBC8F |
darkslateblue darkslateblue |
483D8B 483D8B |
darkslategray darkslategray |
2F4F4F 2F4F4F |
darkturquoise darkturquoise |
00CED1 00CED1 |
darkviolet darkviolet |
9400D3 9400D3 |
deeppink deeppink |
FF1493 FF1493 |
deepskyblue deepskyblue |
00BFFF 00BFFF |
dimgray dimgray |
696969 696969 |
dodgerblue dodgerblue |
1E90FF 1E90FF |
firebrick firebrick |
B22222 B22222 |
floralwhite floralwhite |
FFFAF0 FFFAF0 |
forestgreen forestgreen |
228B22 228B22 |
fuchsia fuchsia |
FF00FF FF00FF |
gainsboro gainsboro |
DCDCDC DCDCDC |
ghostwhite ghostwhite |
F8F8FF F8F8FF |
gold gold |
FFD700 FFD700 |
goldenrod goldenrod |
DAA520 DAA520 |
gray gray |
808080 808080 |
green green |
008000 008000 |
greenyellow greenyellow |
ADFF2F ADFF2F |
honeydew honeydew |
F0FFF0 F0FFF0 |
hotpink hotpink |
FF69B4 FF69B4 |
indianred indianred |
CD5C5C CD5C5C |
indigo indigo |
4B0082 4B0082 |
ivory ivory |
FFFFF0 FFFFF0 |
khaki khaki |
F0E68C F0E68C |
lavender lavender |
E6E6FA E6E6FA |
lavenderblush lavenderblush |
FFF0F5 FFF0F5 |
lawngreen lawngreen |
7CFC00 7CFC00 |
lemonchiffon lemonchiffon |
FFFACD FFFACD |
lightblue lightblue |
ADD8E6 ADD8E6 |
lightcoral lightcoral |
F08080 F08080 |
lightcyan lightcyan |
E0FFFF E0FFFF |
lightgoldenrodyellow lightgoldenrodyellow |
FAFAD2 FAFAD2 |
lightgreen lightgreen |
90EE90 90EE90 |
lightgrey lightgrey |
D3D3D3 D3D3D3 |
lightpink lightpink |
FFB6C1 FFB6C1 |
lightsalmon lightsalmon |
FFA07A FFA07A |
lightseagreen lightseagreen |
20B2AA 20B2AA |
lightskyblue lightskyblue |
87CEFA 87CEFA |
lightslategray lightslategray |
778899 778899 |
lightsteelblue lightsteelblue |
B0C4DE B0C4DE |
lightyellow lightyellow |
FFFFE0 FFFFE0 |
lime lime |
00FF00 00FF00 |
limegreen limegreen |
32CD32 32CD32 |
linen linen |
FAF0E6 FAF0E6 |
magenta magenta |
FF00FF FF00FF |
maroon maroon |
800000 800000 |
mediumaquamarine mediumaquamarine |
66CDAA 66CDAA |
mediumblue mediumblue |
0000CD 0000CD |
mediumorchid mediumorchid |
BA55D3 BA55D3 |
mediumpurple mediumpurple |
9370DB 9370DB |
mediumseagreen mediumseagreen |
3CB371 3CB371 |
mediumslateblue mediumslateblue |
7B68EE 7B68EE |
mediumspringgreen mediumspringgreen |
00FA9A 00FA9A |
mediumturquoise mediumturquoise |
48D1CC 48D1CC |
mediumvioletred mediumvioletred |
C71585 C71585 |
midnightblue midnightblue |
191970 191970 |
mintcream mintcream |
F5FFFA F5FFFA |
mistyrose mistyrose |
FFE4E1 FFE4E1 |
moccasin moccasin |
FFE4B5 FFE4B5 |
navajowhite navajowhite |
FFDEAD FFDEAD |
navy navy |
000080 000080 |
oldlace oldlace |
FDF5E6 FDF5E6 |
olive olive |
808000 808000 |
olivedrab olivedrab |
6B8E23 6B8E23 |
orange orange |
FFA500 FFA500 |
orangered orangered |
FF4500 FF4500 |
orchid orchid |
DA70D6 DA70D6 |
palegoldenrod palegoldenrod |
EEE8AA EEE8AA |
palegreen palegreen |
98FB98 98FB98 |
paleturquoise paleturquoise |
AFEEEE AFEEEE |
palevioletred palevioletred |
DB7093 DB7093 |
papayawhip papayawhip |
FFEFD5 FFEFD5 |
peachpuff peachpuff |
FFDAB9 FFDAB9 |
peru peru |
CD853F CD853F |
pink pink |
FFC0CB FFC0CB |
plum plum |
DDA0DD DDA0DD |
powderblue powderblue |
B0E0E6 B0E0E6 |
purple purple |
800080 800080 |
red red |
FF0000 FF0000 |
rosybrown rosybrown |
BC8F8F BC8F8F |
royalblue royalblue |
4169E1 4169E1 |
saddlebrown saddlebrown |
8B4513 8B4513 |
salmon salmon |
FA8072 FA8072 |
sandybrown sandybrown |
F4A460 F4A460 |
seagreen seagreen |
2E8B57 2E8B57 |
seashell seashell |
FFF5EE FFF5EE |
sienna sienna |
A0522D A0522D |
silver silver |
C0C0C0 C0C0C0 |
skyblue skyblue |
87CEEB 87CEEB |
slateblue slateblue |
6A5ACD 6A5ACD |
slategray slategray |
708090 708090 |
snow snow |
FFFAFA FFFAFA |
springgreen springgreen |
00FF7F 00FF7F |
steelblue steelblue |
4682B4 4682B4 |
tan tan |
D2B48C D2B48C |
teal teal |
008080 008080 |
thistle thistle |
D8BFD8 D8BFD8 |
tomato tomato |
FF6347 FF6347 |
turquoise turquoise |
40E0D0 40E0D0 |
violet violet |
EE82EE EE82EE |
wheat wheat |
F5DEB3 F5DEB3 |
white white |
FFFFFF FFFFFF |
whitesmoke whitesmoke |
F5F5F5 F5F5F5 |
yellow yellow |
FFFF00 FFFF00 |
yellowgreen yellowgreen |
9ACD32 9ACD32 |
Back to contents || Back to top
Copyright © 2000 University of Botswana History Department
Last updated 26 February 2008