Skip Navigation

Blog » RGB Colours for Beginners

There are different ways to define colours in web design, depending on the language you are writing. This tutorial explains how to define colours correctly.

HTML (version 4 and onwards), XHTML and CSS allow you to use different techniques to specify colours to use within documents.

Colours in XHTML are virtually redundant (really, no colour should ever be specified within an XHTML document, it should be specified through CSS), however it allows for deprecated elements, for example the <b> or <font> tags. Some deprecated elements do allow colour attributes.

The following 16 named colours (and only these names) are valid for HTML 4 and above, XHTML and CSS:

  •        Black (#000000)
  •        Green (#008000)
  •        Silver (#C0C0C0)
  •        Lime (#00FF00)
  •        Gray (#808080)
  •        Olive (#808000)
  •        White (#FFFFFF)
  •        Yellow (#FFFF00)
  •        Maroon (#800000)
  •        Navy (#000080)
  •        Red (#FF0000)
  •        Blue (#0000FF)
  •        Purple (#800080)
  •        Teal (#008080)
  •        Fuchsia (#FF00FF)
  •        Aqua (#00FFFF)

Colours can also be specified in RGB Hex codes in HTML, XHTML and CSS. RGB Hex codes are six digit hexadecimal numbers (hexadecimal numbers being made up of the digit 0-9 and letters A-F, A representing 10 as a single digit, through to F representing 15). They are made up of three pairs, each of which when translated to decimal will equal a value between 0 and 255 (00 to FF). An example colour would be "#FF9933". The first pair of digits refers to the amount of red in a colour ("FF"), the second the amount of green ("99"), and the last pair the amount of blue("33"). These numbers must always be prefixed with a hash symbol (#). Please see this [url=http://www.addedbytes.com/Resources/Colour_Chart/]RGB Hex Colour Chart[/url] for a list of web-safe colour codes, with examples (web-safe colours are those that should look the same across all systems, and should avoid issues with AOL's image-caching systems).

CSS allows further methods of defining colours. However, these will not work in HTML or XHTML.

The first of these is useful for saving yourself a few bytes in your CSS files. RGB Hex codes can be abbreviated to three digits. This is possible where each of the three pairs of a colour code consist of two of the same digit. In our example above, "#FF9933", the three pairs are all made of a two identical digits, so that can be abbreviated to "#F93". You still need the hash symbol, and this can only be done when all three of the pairs are made up of two identical digits.

You can also define colours in decimal form in CSS. This is quite useful if you have trouble working with hexadecimal definitions. The syntax for using decimal colour definitions in CSS is:

* { color: rgb(255, 153, 51); }

This will set the colour of all elements on a page to the decimal equivalent of "#FF9933". The "amount" of each of the three colours - red, green and blue - is defined as a number between 0 and 255 in this definition. For those of you who were wondering, here are values of hexadecimal numbers converted to decimal:

  • FF - 255
  • EE - 238
  • DD - 221
  • CC - 204
  • BB - 187
  • AA - 170
  • 99 - 153
  • 88 - 136
  • 77 - 119
  • 66 - 102
  • 55 - 85
  • 44 - 68
  • 33 - 51
  • 22 - 34
  • 11 - 17
  • 00 - 0

Last, you can define CSS colours as percentages in RGB, rather than in decimal or hexadecimal numbers. All you need do is add the percent sign (%) after the number you wish to use, in the same piece of code you use for decimal colour definitions:

* { color: rgb(100%, 60%, 200%); }

Hexadecimal numbers convert into percentages like so:

  • FF - 100%
  • EE - 93%
  • DD - 87%
  • CC - 80%
  • BB - 73%
  • AA - 67%
  • 99 - 60%
  • 88 - 53%
  • 77 - 47%
  • 66 - 40%
  • 55 - 33%
  • 44 - 27%
  • 33 - 20%
  • 22 - 13%
  • 11 - 7%
  • 00 - 0%

In instances where a colour is defined that is outside the possible range of numbers allowed (eg 0-255 in decimal), numbers will be assumed to be equal to the maximum allows. For example, a colour of "rgb(500,0,0)" will be equivalent to "rgb(255,0,0)".

Personally, I try to always use the standard hexadecimal code for defining colours, as that has been the convention on the web for so long, and that is the only convention that works across all the languages in use on the web.


comments powered by Disqus