Colour values

Overview

Colour names and values - HTML compliant

Colour names and values - browser friendly (SVG)

Greyscale colour values

Defining a colour using RGB format

Defining a colour using hexadecimal format

Summary example

This reference is designed to assist in defining colours1 in web pages. Theoretically there are 16,777,216 colours in the available palette, although most monitors can only tell the difference between a little over 16,000 of them. Almost certainly the colour you want is among them.

Colour names and values - HTML compliant2

Colour names and values - browser friendly (SVG)3

Greyscale colour values4

Overview - CSS colour values

Strictly speaking, only 17 colours have a literal name value that will work validly in CSS5 style sheets. That means that using any other colour name will show up as an error if the CSS script is checked for well-formedness6 by using an HTML validator such as the one at validator.w3.org/#validate-by-upload and the CSS file validator at jigsaw.w3.org/css-validator/#validate-by-upload. The 17 fully compliant colours are shown above.

Having said that, there is actually a total of 140 colours also listed above that may be referred to explicitly by name and will work regardless in most browsers, despite the fact that these colour names are not in the CSS specification. They are commonly referred to as SVG colours. If you generally use any of the internationalisations of the English language, notice that colour names and the word 'color' follows the American English spelling convention in HTML and CSS. The colours table here is sorted to facilitate easy selection of the required colour.

For convenience, a greyscale colour chart is included.

Other than the limited set of named colours, any colour can be referred to by it's hexadecimal7 value or it's RGB value. Both are alternative ways to give the same result. See below for an explanation and examples of each of these.

Defining a colour using RGB format

All colours are constituted of a mixture of red, green and blue. The amount of red, green and blue in a colour is determined by setting a number between 0 and 255 for each colour component. If there is 0 blue, that's no blue at all. On the other hand, 255 blue is full on. Here is an example of a light grey blue;

rgb(119,136,153)

The resulting displayed colour is mixed from 119 parts of red, 136 parts of green and 153 parts of blue. An alternative way of mixing red, green and blue is to set the percentage of each constituent colour. Here is the same light grey blue again;

rgb(47%,53%,60%)

Notice that any exactly equal amounts of each of the red, green and blue constituents will create a shade of grey.

Defining a colour using hexadecimal format

The hexadecimal colour definition works similarly to the RGB colour definition in that it is a composite of red, green and blue. Each constituent colour value is converted into hexadecimal numbers from 00 to FF. The values are strung together without spaces or commas between each value and are proceeded by the # symbol. Here is an example hexadecimal colour;

#6A5ACD

The # character tells the browser that this is a hex colour value. It is composed of 6A (106) parts red, 5A (90) parts green and CD (205) parts blue. It could just as easily have been written;

rgb(106,90,205)

or

rgb(42%,35%,80%)

Another - and even more compact - hex method of defining colours is to use the alternative single hex digit for each value. This means that there is a maximum range for each constituent colour from 0 to F (that's the same as 0 to 15 in decimal notation). This still gives a total range of colour definitions of 16 x 16 x 16 colours or 4,096 colours in total. An example definition for a bright yellow would be;

#FF0

The browser will understand any of these alternative methods of writing colours values.

Summary example

This example demonstrates all the variant forms of notation that will set the CSS text colour property to light sea green. These all define the red component of a colour in the left most digits, the green component in the middle digits and the blue component in the right most digits.

color: LightSeaGreen; 
color: rgb(032,178,170);
color: rgb(13%,70%,67%);
color: #20B2AA;
color: #20b2aa;
color: #2BB;
color: #2bb;

The percentages in the third method above approximate to the color values in the second method. The 3 digit hex methods are an approximation of the 6 digit hex method, rounding off to the nearest significant digit.

1 This document is written in UK English

2 The seventeen Strictly CSS compliant named colours (with the possible exception of orange) will work in any browser including most legacy browsers.

3 The named colours listed here are, strictly speaking, part of the Scalable Vector Graphics (SVG) specification. Since SVG and XHTML are both (almost) XML compliant, the SVG colours have been implemented for HTML in most current browsers, even though they are not part of the HTML specification. Scalable Vector Graphics (SVG) is an implementation of XML defined by the W3C. It provides a fully scalable description of images and entire page presentations if required.

4 Only significant increments of greyscale are shown here in the Greyscale table. Any colour where the individual RGB red, blue and green have the same value - for example color: rgb(199,199,199) will render as a shade of grey. Since the HTML range for each RGB colour element is 0 to 255, there is a range of 256 greyscale shades.

5 This document conforms to the CSS2 and above specification

6 "Well-formed" script is defined as fully meeting the HTML / CSS specification defined by the W3C. If it is not well-formed, it does not necessarily mean that the web page won't actually work correctly, as long as the inclusions are broadly accepted practice and therefore are supported by all the major browsers. SVG colour literal names are a case in point. And yes, 'well-formedness' is a dreadful word.

7 Hexadecimal uses the base 16 numerals 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. In comparison, the decimal system goes from 0 to 9.