Using colour in web pages
Colour properties
Colour can be applied to nearly all HTML elements using the global style attribute. We can specify a colour for text, backgrounds, borders, and other features of HTML elements. We can even specify the opacity of the colours used for an HTML element (i.e. the degree of transparency). In this page, we will be looking at the colour-related properties of HTML elements, and the various ways in which we can assign values to them.
The style attribute can be used to set the foreground and background colours of an HTML element. The foreground colour is specified using the color property (note that the U.S. spelling must be used here). The background colour is specified using the background-color property. The values assigned to the color or background-color properties can be specified in a variety of formats, as we shall see. The following HTML code demonstrates how colour can be specified for an HTML element:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colour Demo</title>
</head>
<body>
<section style="background-color: bisque;">
<h1 style="color: crimson;">The Gettysburg Address</h1>
<p style="color: chocolate;">
"Fourscore and seven years ago our fathers brought forth, on this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting-place for those who here gave their lives, that that nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate—we cannot hallow—this ground. The brave men, living and dead, who struggled here, have consecrated it far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they here gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth."
</p>
</section>
</body>
</html>
Copy and paste this code into a new file in your HTML editor, save the file as colour-demo.html, and open the file in a web browser. You should see something like the following:
An example of the use of colour in an HTML document
Note that we have specified the colours using colour names taken from the SVG 1.0 specification (more about this later) in our HTML code. This is perhaps a more intuitive way of specifying colours than using numeric values; the disadvantage of this approach is that only one hundred and forty named colours are recognised by popular web browsers, whereas using numeric values we can specify well over sixteen million different colours.
To give you an idea of the different possible approaches you can take to specifying colours, all of the style declarations listed below produce the same result:
style="color: red;"
style="color: #ff0000;"
style="color: #f00;"
style="color: rgb(255,0,0);"
style="color: hsl(0, 100%, 50%);"
How colours are specified
All colours displayed on a computer screen are created by combining the three primary colours red, green and blue (RGB) in different ratios. The intensity of each colour is specified using an 8-bit unsigned integer value in the range 0 to 255, where 0 represents zero intensity and 255 represents full intensity. If all three colours (red, green and blue) are set to full intensity, the colour produced will be white; if all three colours are set to zero intensity, it will be black.
Note that for any colour other than black or white, if all three colours are set to the same intensity, the resulting colour will be some shade of grey. The total number of colours that can be created using this scheme is 16,777,216 (256 3) - the maximum number that can be created using 3 bytes (24 bits).
To put this into perspective, consider that one of the highest resolutions available for a commercially available and half-way affordable computer monitor is (at the time of writing) 3840 × 2160 pixels. The total number of pixels at this resolution is 8,294,400 - which is less than half the number of available colours. Every pixel on the screen could be a different colour, and we would have used less than half of the colours available to us!
A Dell S2817Q 28" 4K Ultra HD Monitor with a resolution of 3840 × 2160 pixels
Transparency and opacity
As we saw above, we can specify any one of over sixteen million colours using just three bytes (twenty-four bits). Each eight-bit byte represents one of three colour channels that represent the primary colours red, green and blue. For each pixel displayed, a value will be assigned to the byte representing each of its three colour channels. The combination of these three values will precisely determine the pixel's colour.
Sixteen million colours should be more than adequate for virtually any application. Estimates as to the number of different colours the human eye can distinguish between vary considerably, but even the most optimistic assessment limits the number to around ten million colours, while more conservative sources give a figure closer to one million.
Most computer graphics systems now store the colour information for each pixel using thirty-two bits. The extra eight bits can be used as an alpha channel that represents the pixel's opacity - the degree to which the pixel can be said to be transparent. The eight bits are used to represent values between 0.0 (fully transparent) and 1.0 (fully opaque).
The following HTML code demonstrates how both the colour and the degree of transparency can be specified for an HTML element:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alpha Demo</title>
</head>
<body>
<section style="text-align: center;">
<h1 style="color: rgba(255,0,0,1.0);">A fully opaque heading.</h1>
<h1 style="color: rgba(255,0,0,0.5);">A semi-transparent heading.</h1>
<h1 style="color: rgba(255,0,0,0.1);">An almost transparent heading.</h1>
<br>
<h1 style="color: #0000ffff;">A fully opaque heading.</h1>
<h1 style="color: #0000ff7f;">A semi-transparent heading.</h1>
<h1 style="color: #0000ff1a;">An almost transparent heading.</h1>
</section>
</body>
</html>
Copy and paste this code into a new file in your HTML editor, save the file as alpha-demo.html, and open the file in a web browser. You should see something like the following:
An example of the use of transparency in an HTML document
We have specified the colours for the first three headings using the rgba() function, which has the following syntax:
rgba(red, green, blue, alpha)
The red, green and blue values are specified using integer values in the range 0 to 255. The alpha value must be specified using a decimal value in the range 0.0 to 1.0.
For the last three headings, we have used the hexadecimal notation for colours with an alpha channel assignment, which is now supported by the majority of browsers. This notation uses eight hexadecimal digits (as opposed to six in a standard RGB representation). The first six digits are interpreted in exactly the same way as for the six-digit notation. The last two digits specify the value for the alpha channel, where 00 represents a fully transparent colour and ff represent a fully opaque colour.
The transparent colour keyword can be used with the style attribute in HTML to specify that any property that can accept a colour value (e.g. background-color, border-color etc.) will be fully transparent. This is equivalent to setting the property's colour value using the rgba() function, and setting the alpha value to zero. The following HTML code fragments both produce the same result, i.e. a fully transparent heading:
<h1 style="color: transparent;">A transparent heading</h1>
<h1 style="color: rgba(0,0,0,0);">A transparent heading</h1>
RGB and RGBA colours
As we have seen, all web colours may be specified as combinations of three primary colours (red, green and blue) in which the intensity of each colour is represented using an integer value in the range 0 to 255. A colour is represented as an RGB triplet made up of these three values, although various formats can be used. This approach has one major advantage over the use of standard colour names, which is that all 16,777,216 RGB colours can be represented as opposed to just two hundred and forty named colours (see below).
The most universally recognised and widely-used format for specifying a colour is the hexadecimal RGB format. This takes the form of a six-digit hexadecimal (base 16) number, prefixed with a hash sign (#). Each hexadecimal digit requires 4 bits of storage, so an 8-bit byte can store any two-digit hexadecimal value from 00 to ff (ff16 is the hexadecimal equivalent of 25510). The three pairs of hexadecimal digits - collectively called a hex triplet -are used to specify the intensity of the red, green, and blue components of a colour.
The following HTML code demonstrates the use of hexadecimal numbers to specify background and foreground colours for HTML elements:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RGB hex Demo</title>
</head>
<body>
<h1>RGB Hex Demo - Basic HTML Colours</h1>
<pre style="color: #ffffff; background-color: #000000">#000000 - Black</pre>
<pre style="color: #ffffff; background-color: #ff0000">#ff0000 - Red</pre>
<pre style="color: #000000; background-color: #00ff00">#00ff00 - Lime</pre>
<pre style="color: #ffffff; background-color: #0000ff">#0000ff - Blue</pre>
<pre style="color: #000000; background-color: #ffff00">#000000 - Yellow</pre>
<pre style="color: #000000; background-color: #ff00ff">#000000 - Fuchsia</pre>
<pre style="color: #000000; background-color: #00ffff">#000000 - Aqua</pre>
<pre style="color: #000000; background-color: #ffffff">#000000 - White</pre>
</body>
</html>
We have used the <pre> tag, which specifies preformatted text, for convenience. It forces the use of a fixed-width font, and each <pre> ... </pre> element appears on its own line. Copy and paste this code into a new file in your HTML editor, save the file as rgb-hex-demo.html, and open the file in a web browser. You should see something like the following:
HTML colours can be specified using six-digit hexadecimal numbers
An abbreviated form of the hexadecimal notation may be used if the two digits representing each colour are the same. If so, the colour can be represented by just three hexadecimal digits (one from each pair). The following lines of HTML code are equivalent to one another:
<h1 style="color: #0000ff;">This heading is blue</h1>
<h1 style="color: #00f;">This heading is blue</h1>
The advantage of using the abbreviated notation is that it reduces the size of the HTML document or stylesheet file (depending on where the style information is actually defined). It does however reduce the number of available colours from well over sixteen million to just over four thousand. Whether the trade-off is actually worthwhile is the subject of some debate. We leave it to the reader to draw their own conclusions.
Another way of specifying an RGB triplet is to use the rgb() function, which has the following syntax:
rgb(red, green, blue)
The comma-separated red, green and blue values are specified using either decimal integer values in the range 0 to 255, or percentages (where 100% corresponds to 255). The following code fragments all specify the same background colour (red):
style="background-color: #ff0000;"
style="background-color: rgb(255,0,0);"
style="background-color: rgb(100%,0,0);"
RGBA is an extension of RGB that includes an "alpha" value that specifies the opacity of a colour. We saw an example of how RGBA is used when we looked at transparency and opacity, above. RGBA colours are specified using the same formats as RGB colours, the only difference being that in each case a fourth value, a hexadecimal value in the range 00 to ff or a decimal value in the range 0.0 to 1.0, is used to specify the degree of transparency.
The following code fragments all specify a blue, semi-transparent background:
style="background-color: #0000ff7f;"
style="background-color: rgba(255,0,0,0.5);"
style="background-color: rgba(100%,0,0,0.5);"
The only other difference between RGB and RGBA colour specifications, as you might have noticed, is that for RGBA colours the rgb() function is replaced by the rgba() function.
HSL and HSLA colours
HSL stands for hue-saturation-lightness. Hue is represented as an angle (typically measured in degrees) that determines its position on a colour circle. By definition, red = 0 (or 360) degrees, green = 120 degrees, and blue = 240 degrees; other colours are dispersed around the circle. Saturation and lightness are represented as percentages: 100% is full saturation, 0% is a shade of grey; 0% lightness is black, 100% lightness is white, and 50% lightness is "normal". The concept of HSL can be represented using a three-dimensional model, as illustrated below.
Hue, Saturation and Lightness, represented as a three-dimensional model
Image: Sarah Drasner (CSS-Tricks)
Whereas the RGB representation of colour is easy for a machine to interpret, it is not particularly intuitive from a human perspective. HSL allows you to approximately determine the colour you want relatively easily; you can then tweak it to get it just right. Furthermore, most modern browsers support HSL.
The main disadvantage of using HSL is probably that, because it is not so widely used as RGB, there is not so much help available when it comes to questions such as how to find the HSL values for a particular colour, or deciding which colours work best together when you are trying to create a colour scheme for your pages.
The following HTML code demonstrates the use of HSL to specify background colours for HTML elements (note that this code will produce exactly the same output as the rgb-hex-demo.html file we created earlier - we have simply substituted HSL notation for the RGB notation used previously to specify the background colours):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HSL Demo</title>
</head>
<body>
<h1>HSL Demo - Basic HTML Colours</h1>
<pre style="color: #ffffff; background-color: hsl(0, 100%, 0%)">hsl(0, 100%, 0%) - Black</pre>
<pre style="color: #ffffff; background-color: hsl(0, 100%, 50%)">hsl(0, 100%, 50%) - Red</pre>
<pre style="color: #ffffff; background-color: hsl(120, 100%, 50%)">hsl(120, 100%, 50%) - Lime</pre>
<pre style="color: #ffffff; background-color: hsl(240, 100%, 50%)">hsl(240, 100%, 50%) - Blue</pre>
<pre style="color: #000000; background-color: hsl(60, 100%, 50%)">hsl(60, 100%, 50%) - Yellow</pre>
<pre style="color: #000000; background-color: hsl(300, 100%, 50%)">hsl(300, 100%, 50%) - Fuchsia</pre>
<pre style="color: #000000; background-color: hsl(180, 100%, 50%)">hsl(180, 100%, 50%) - Aqua</pre>
<pre style="color: #000000; background-color: hsl(0, 100%, 100%)">hsl(0, 100%, 100%) - White</pre>
</body>
</html>
Copy and paste this code into a new file in your HTML editor, save the file as hsl-demo.html, and open the file in a web browser. You should see something like the following:
HTML colours can be specified using HSL (hue, saturation and lightness)
HSLA is an extension of HSL (in the same way that RGBA is an extension of RGB) that includes an "alpha" value that specifies the opacity of a colour. HSLA colours are specified using the same formats as HSL colours, the only difference being that in each case a fourth value - a decimal value in the range 0.0 to 1.0 - is used to specify the degree of transparency.
The following code fragments both specify a fully opaque green background:
style="background-color: hsl(120,100%,50%);"
style="background-color: hsla(120,100%,50%,1.0);"
The obvious difference between the two statements is the additional parameter in the second statement that explicitly specifies an opacity of 1.0. The only other difference between HSL and HSLA colour specifications, as you might have noticed, is that for HSLA colours the hsla() function replaces the hsl() function.
Each of the tables below represents one of twelve HSL hues, spaced at 30° intervals around the colour circle, starting at 0° with red, and ending at 330° with the intermediate colour between magenta and red. Each table row represents the hue's degree of lightness, with the bottom row having a lightness of 0% (i.e. completely black) and the top row a lightness of 100% (i.e. completely white). A lightness of 50% is considered to be "normal".
Each table column represents the hue's saturation, with the left-most column having a saturation of 100%, and the right-most column having a saturation of 0%. In other words, a particular hue can be most easily identified as such in the left-most column (lightness or darkness notwithstanding); by the time we reach the right-hand column, the hues have become various shades of grey.
HSL Colours
Reds (0°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Red-Yellows (30°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Yellows (60°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Yellow-Greens (90°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Greens (120°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Green-Cyans (150°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Cyans hsl(180(180°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Cyan-Blues (210°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Blues (240°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Blue-Magentas (270°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Magentas (300°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Magenta-Reds (330°) |
||||||
| S | ||||||
| 100% | 75% | 50% | 25% | 0% | ||
| L | 100% | |||||
| 88% | ||||||
| 75% | ||||||
| 63% | ||||||
| 50% | ||||||
| 38% | ||||||
| 25% | ||||||
| 13% | ||||||
| 0% | ||||||
Basic colour keywords
The W3C HTML 4.01 Recommendation, published in 1999, defined sixteen named colours - essentially the sixteen standard colours used for the Microsoft Windows default 16-color palette (colour names are not case sensitive). These colour keywords now form a subset of the extended colour keywords defined in W3C's Scaleable Vector Graphics (SVG) specification (see below).
| Colour | Name | Hex RGB | Decimal RGB |
|---|---|---|---|
| Black | #000000 | 0,0,0 | |
| Silver | #C0C0C0 | 192,192,192 | |
| Gray | #808080 | 128,128,128 | |
| White | #FFFFFF | 255,255,255 | |
| Maroon | #800000 | 128,0,0 | |
| Red | #FF0000 | 255,0,0 | |
| Purple | #800080 | 128,0,128 | |
| Fuchsia | #FF00FF | 255,0,255 | |
| Green | #008000 | 0,128,0 | |
| Lime | #00FF00 | 0,255,0 | |
| Olive | #808000 | 128,128,0 | |
| Yellow | #FFFF00 | 255,255,0 | |
| Navy | #000080 | 0,0,128 | |
| Blue | #0000FF | 0,0,255 | |
| Teal | #008080 | 0,128,128 | |
| Aqua | #00FFFF | 0,255,255 |
Extended colour keywords
One hundred and forty named colours* are currently supported by virtually all web browser versions released since 2005 (the actual number of colours listed below is one hundred and forty-seven, but there are seven shades of grey/gray that have been duplicated to accommodate the different spellings used ("gray" in the U.S., and "grey" in most other English-speaking countries). Most of the colours, and their names, are derived from a set of RGB colour values defined by the creators of the X Window operating system.
The X Window system (often referred to as X11 because version 11, issued in 1987, was the last official version to be given a number) is a windowing system for bitmap displays that is widely used on Unix-like computer operating systems. It was first developed at the Massachusetts Institute of Technology (MIT) in 1984. As of version 10, the operating system was distributed with a simple text file that defined a set of RGB colour values and associated each with a unique text string.
The X11 colours were subsequently used as the basis for the web colours list used by the Mosaic web browser (the first graphical web browser) developed by the National Center for Supercomputing Applications (NCSA). The list was subsequently adopted for the Netscape Navigator web browser, developed by Netscape (known originally as the Mosaic Communications Corporation), who employed many of the personnel formerly involved in the development of Mosaic.
W3C eventually adopted the X11 colour list, with a few changes and additions, for its Scaleable Vector Graphics (SVG) specification. The table below provides a list of the X11/SVG 1.0 colors supported by most browsers, including the duplicated entries for the gray/grey variants. The list is a superset of the basic colour keywords list (see above) and shows the colours in alphabetical order according to the SVG 1.0 keyword assigned to each. It also provides both the standard hexadecimal and decimal RGB representation for each colour listed.
| Colour name | Sample | Hex RGB | Decimal RGB |
|---|---|---|---|
| AliceBlue | #F0F8FF | 240,248,255 | |
| AntiqueWhite | #FAEBD7 | 250,235,215 | |
| Aqua | #00FFFF | 0,255,255 | |
| Aquamarine | #7FFFD4 | 127,255,212 | |
| Azure | #F0FFFF | 240,255,255 | |
| Beige | #F5F5DC | 245,245,220 | |
| Bisque | #FFE4C4 | 255,228,196 | |
| Black | #000000 | 0,0,0 | |
| BlanchedAlmond | #FFEBCD | 255,235,205 | |
| Blue | #0000FF | 0,0,255 | |
| BlueViolet | #8A2BE2 | 138,43,226 | |
| Brown | #A52A2A | 165,42,42 | |
| BurlyWood | #DEB887 | 222,184,135 | |
| CadetBlue | #5F9EA0 | 95,158,160 | |
| Chartreuse | #7FFF00 | 127,255,0 | |
| Chocolate | #D2691E | 210,105,30 | |
| Coral | #FF7F50 | 255,127,80 | |
| CornflowerBlue | #6495ED | 100,149,237 | |
| Cornsilk | #FFF8DC | 255,248,220 | |
| Crimson | #DC143C | 220,20,60 | |
| Cyan | #00FFFF | 0,255,255 | |
| DarkBlue | #00008B | 0,0,139 | |
| DarkCyan | #008B8B | 0,139,139 | |
| DarkGoldenRod | #B8860B | 184,134,11 | |
| DarkGray | #A9A9A9 | 169,169,169 | |
| DarkGreen | #006400 | 0,100,0 | |
| DarkGrey | #A9A9A9 | 169,169,169 | |
| DarkKhaki | #BDB76B | 189,183,107 | |
| DarkMagenta | #8B008B | 139,0,139 | |
| DarkOliveGreen | #556B2F | 85,107,47 | |
| DarkOrange | #FF8C00 | 255,140,0 | |
| DarkOrchid | #9932CC | 153,50,204 | |
| DarkRed | #8B0000 | 139,0,0 | |
| DarkSalmon | #E9967A | 233,150,122 | |
| DarkSeaGreen | #8FBC8F | 143,188,143 | |
| DarkSlateBlue | #483D8B | 72,61,139 | |
| DarkSlateGray | #2F4F4F | 47,79,79 | |
| DarkSlateGrey | #2F4F4F | 47,79,79 | |
| DarkTurquoise | #00CED1 | 0,206,209 | |
| DarkViolet | #9400D3 | 148,0,211 | |
| DeepPink | #FF1493 | 255,20,147 | |
| DeepSkyBlue | #00BFFF | 0,191,255 | |
| DimGray | #696969 | 105,105,105 | |
| DimGrey | #696969 | 105,105,105 | |
| DodgerBlue | #1E90FF | 30,144,255 | |
| FireBrick | #B22222 | 178,34,34 | |
| FloralWhite | #FFFAF0 | 255,250,240 | |
| ForestGreen | #228B22 | 34,139,34 | |
| Fuchsia | #FF00FF | 255,0,255 | |
| Gainsboro | #DCDCDC | 220,220,220 | |
| GhostWhite | #F8F8FF | 248,248,255 | |
| Gold | #FFD700 | 255,215,0 | |
| GoldenRod | #DAA520 | 218,165,32 | |
| Gray | #808080 | 128,128,128 | |
| Green | #008000 | 0,128,0 | |
| GreenYellow | #ADFF2F | 173,255,47 | |
| Grey | #808080 | 128,128,128 | |
| HoneyDew | #F0FFF0 | 240,255,240 | |
| HotPink | #FF69B4 | 255,105,180 | |
| IndianRed | #CD5C5C | 205,92,92 | |
| Indigo | #4B0082 | 75,0,130 | |
| Ivory | #FFFFF0 | 255,255,240 | |
| Khaki | #F0E68C | 240,230,140 | |
| Lavender | #E6E6FA | 230,230,250 | |
| LavenderBlush | #FFF0F5 | 255,240,245 | |
| LawnGreen | #7CFC00 | 124,252,0 | |
| LemonChiffon | #FFFACD | 255,250,205 | |
| LightBlue | #ADD8E6 | 173,216,230 | |
| LightCoral | #F08080 | 240,128,128 | |
| LightCyan | #E0FFFF | 224,255,255 | |
| LightGoldenRodYellow | #FAFAD2 | 250,250,210 | |
| LightGray | #D3D3D3 | 211,211,211 | |
| LightGreen | #90EE90 | 144,238,144 | |
| LightGrey | #D3D3D3 | 211,211,211 | |
| LightPink | #FFB6C1 | 255,182,193 | |
| LightSalmon | #FFA07A | 255,160,122 | |
| LightSeaGreen | #20B2AA | 32,178,170 | |
| LightSkyBlue | #87CEFA | 135,206,250 | |
| LightSlateGray | #778899 | 119,136,153 | |
| LightSlateGrey | #778899 | 119,136,153 | |
| LightSteelBlue | #B0C4DE | 176,196,222 | |
| LightYellow | #FFFFE0 | 255,255,224 | |
| Lime | #00FF00 | 0,255,0 | |
| LimeGreen | #32CD32 | 50,205,50 | |
| Linen | #FAF0E6 | 250,240,230 | |
| Magenta | #FF00FF | 255,0,255 | |
| Maroon | #800000 | 128,0,0 | |
| MediumAquaMarine | #66CDAA | 102,205,170 | |
| MediumBlue | #0000CD | 0,0,205 | |
| MediumOrchid | #BA55D3 | 186,85,211 | |
| MediumPurple | #9370D8 | 147,112,219 | |
| MediumSeaGreen | #3CB371 | 60,179,113 | |
| MediumSlateBlue | #7B68EE | 123,104,238 | |
| MediumSpringGreen | #00FA9A | 0,250,154 | |
| MediumTurquoise | #48D1CC | 72,209,204 | |
| MediumVioletRed | #C71585 | 199,21,133 | |
| MidnightBlue | #191970 | 25,25,112 | |
| MintCream | #F5FFFA | 245,255,250 | |
| MistyRose | #FFE4E1 | 255,228,225 | |
| Moccasin | #FFE4B5 | 255,228,181 | |
| NavajoWhite | #FFDEAD | 255,222,173 | |
| Navy | #000080 | 0,0,128 | |
| OldLace | #FDF5E6 | 253,245,230 | |
| Olive | #808000 | 128,128,0 | |
| OliveDrab | #6B8E23 | 107,142,35 | |
| Orange | #FFA500 | 255,165,0 | |
| OrangeRed | #FF4500 | 255,69,0 | |
| Orchid | #DA70D6 | 218,112,214 | |
| PaleGoldenRod | #EEE8AA | 238,232,170 | |
| PaleGreen | #98FB98 | 152,251,152 | |
| PaleTurquoise | #AFEEEE | 175,238,238 | |
| PaleVioletRed | #D87093 | 219,112,147 | |
| PapayaWhip | #FFEFD5 | 255,239,213 | |
| PeachPuff | #FFDAB9 | 255,218,185 | |
| Peru | #CD853F | 205,133,63 | |
| Pink | #FFC0CB | 255,192,203 | |
| Plum | #DDA0DD | 221,160,221 | |
| PowderBlue | #B0E0E6 | 176,224,230 | |
| Purple | #800080 | 128,0,128 | |
| Red | #FF0000 | 255,0,0 | |
| RosyBrown | #BC8F8F | 188,143,143 | |
| RoyalBlue | #4169E1 | 65,105,225 | |
| SaddleBrown | #8B4513 | 139,69,19 | |
| Salmon | #FA8072 | 250,128,114 | |
| SandyBrown | #F4A460 | 244,164,96 | |
| SeaGreen | #2E8B57 | 46,139,87 | |
| SeaShell | #FFF5EE | 255,245,238 | |
| Sienna | #A0522D | 160,82,45 | |
| Silver | #C0C0C0 | 192,192,192 | |
| SkyBlue | #87CEEB | 135,206,235 | |
| SlateBlue | #6A5ACD | 106,90,205 | |
| SlateGray | #708090 | 112,128,144 | |
| SlateGrey | #708090 | 112,128,144 | |
| Snow | #FFFAFA | 255,250,250 | |
| SpringGreen | #00FF7F | 0,255,127 | |
| SteelBlue | #4682B4 | 70,130,180 | |
| Tan | #D2B48C | 210,180,140 | |
| Teal | #008080 | 0,128,128 | |
| Thistle | #D8BFD8 | 216,191,216 | |
| Tomato | #FF6347 | 255,99,71 | |
| Turquoise | #40E0D0 | 64,224,208 | |
| Violet | #EE82EE | 238,130,238 | |
| Wheat | #F5DEB3 | 245,222,179 | |
| White | #FFFFFF | 255,255,255 | |
| WhiteSmoke | #F5F5F5 | 245,245,245 | |
| Yellow | #FFFF00 | 255,255,0 | |
| YellowGreen | #9ACD32 | 154,205,50 |
* Note that there are a couple of duplicated colour values in the list; aqua and cyan have identical values, for example, as do Fuchsia and Magenta.
Web safe colours
The personal computers of the early 1980s were limited in the number of colours they could display simultaneously, due to the limitations of the display adapters available at the time. During these early years, most graphics cards only supported 8-bit colour, which meant that they were limited to a colour palette of two hundred and fifty-six (2 8) colours.
If an HTML document specified a colour value that did not match any of the colours available from the standard palette, the browser would either resort to dithering (the juxtaposition of pixels of two different colours in order to create the illusion that a third colour is present) or would use whichever colour in the standard palette most closely matched the colour specified by the HTML document.
The only way to ensure that browsers would render HTML documents using the correct colour values was to use only colours that were guaranteed to be available. Consequently, a standard "web-safe" palette was devised. The colours of the web safe palette are specified using an RGB triplet in which each colour component (red, green or blue) takes one of six equally-spaced hexadecimal values (00, 33, 66, 99, cc or ff) or their decimal equivalents (0, 51, 102, 153, 204, 255).
The 256-colour web-safe palette includes two hundred and sixteen standard colours. A further forty places are reserved for any fixed system colours used by the operating system. The use of web-safe colours is no longer necessary, since most personal computers and mobile computing devices can now display millions of colours, even at high resolutions. We present the web safe colour palette below for the sake of completeness.
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99CC | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9933FF | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
Using colour in web pages
Having the ability to use colour in our web pages opens some exciting possibilities. Bear in mind, however, that achieving an end result that is pleasing to the eye is no mean feat; unless you are a graphic designer by trade, and know what you are doing, it's probably a good idea to do some research on current trends in website design and find out what is considered to be good practice when it comes to putting together a colour scheme for your pages.
It is not our intention here to offer advice on the best way to design your website from the point of view of its graphical design aspects. We can however suggest a few things you can try, and some things you should avoid.
First and foremost - and assuming you have the time and the enthusiasm to do so - don't be afraid to experiment. Even if you don't immediately achieve what you set out to do, you will learn something in the process. We strongly recommend, however, that you always back up your work before you make any major changes - just in case.
One very important factor in choosing a colour scheme is the nature of your website and its intended audience. If you are building a website for a company or organisation, there may be a number of corporate design guidelines already in place - not such good news if you are keen to unleash your creative talent; much better news if you (like me) are not particularly design-oriented and just want to get on with putting the pages together.
If you have a relatively free hand in choosing a colour scheme, there are a few ground rules you should consider before you even start:
- Be consistent. Unless you have a very good reason to do otherwise, use the same basic colour scheme for each page on your website. Users should not link to another page on your site and immediately think they are not in Kansas any more because the colour scheme has changed dramatically.
- Choose contrasting background and foreground colours for text. Black text on a white background is always a safe bet. It's Ok if you want to do something a little bit different but remember the golden rule: never choose a background colour that makes the text difficult to read.
- Choose an appropriate dominant colour. The dominant colour is the colour you will use both to give your website its unique character and to draw attention to important features (it should feature in your site's logo, for example). It should also be a colour that appeals to the audience you are trying to reach - you might need to do some research in that respect; blue is often considered a fairly safe choice, purely on the basis that it is (apparently) the favourite colour of nearly two thirds of men and more than a third of women, and it is said to inspire trust. On the other hand, some colour psychologists (?) claim that yellow is the colour of happiness . . .
- Using just one colour in your website might make things a little boring. It's a good idea to use an alternative (but complimentary) colour to accent (i.e. highlight) some of the less important (but still fairly important) features. Choose one or two accent colours that fit in with your dominant colour, that you can use to highlight things like buttons, subheadings, and other noteworthy features.
- Choose an appropriate background colour. Remember the golden rule that whatever background colour you choose should not make text difficult to read. It must also fit in with the rest of your colour scheme, of course.
Choosing the right colour scheme for your website – and choosing colours that work well together - can be tricky if you are not a graphic designer or colour expert. Fortunately, there are plenty of websites out there that offer guidance on this subject. There are also plenty of online colour-matching tools - many of them free to use - that can help you select colours that complement one another.
One approach you could consider taking is to find one or two websites that you really like, and that target the same audience. They will probably give you some ideas about what colours to use, and where - just be careful not to infringe anybody's copyright or trademarks. And remember that you want your website to have its own character and identity - don't just produce a clone of somebody else's website.
Adding colour to your online CV
Let's apply a little of what we have learnt to making our online CV a little more aesthetically pleasing. We're not going to go overboard here - this is after all a fairly serious document and could affect our future career prospects, so our use of colour will of necessity be somewhat conservative. Nevertheless, we can at least use colour to highlight the section headings, and maybe do a bit more besides . . .
If you have not already created your online CV document, you will find the necessary HTML code in the page entitled "A First Web Page". Otherwise, open the cv.html file in your HTML editing program and make the following changes to the code:
-
Add the following style attribute to all of the <h2> tags:
style="color: maroon; -
Replace all of the <hr> tags with the following code:
<hr style="background-color: orange; height: 6px;">
Once you have made the changes, save your work and open the file in a web browser. You should see something like the illustration below. Note that we have removed the borders from the <hr> tags and increased their height, as well as changing their background colour. You can of course use different colours. Play around with the colours until you find something you feel comfortable with.
We have added a touch of colour to the online CV