University of Botswana History Department

Colour in HTML

HTML Index Page || Site Index

Contents


Back to contents || Back to top

Introduction

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: #
00
00
00

(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:

  1. Basic hex values: The colours using only the values 00, 33, 66, 99, CC, and FF for each of red, green and blue
  2. Netscape colour names: The 140 colour names originally defined by Netscape when they introduced them as an "extended" (non-standard) feature.

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.


Using colours:

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

Hex values colour table

#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

Netcape colour names

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