Web Design Help - Colours

A colour value can be specified in any of the following ways (or left empty, in which case it will be the default html colour or the background) :-

  1. a named colour - the table below shows all the recognised named colours,
  2. rgb(rr, gg, bb) - the Red, Green and Blue components specified in decimal, each in the range 0 - 255,
  3. #RRGGBB = a 6-character hex string, where the pairs of hex characters represent the Red, Green and Blue components in the range 00 - ff (decimal 00 - 255),
  4. #RGB = a 3-character hex string, where each hex character represent the Red, Green and Blue components. This is simply a shorthand notation of the 6-character hex string above, where the pair of hex characters are the same,
    eg. #123 is equivalent to #112233

By far the easiest way to choose a colour is to look for it in the table below - if it exists, then you can just copy/paste its name.

If the colour you want is not in the table (or it's not close enough for you), then you can specify the exact colour by it's Red, Green, Blue (RGB) values. To do this you can use any of the other formats - rgb(rr, gg, bb), #RRGGBB or #RGB. Still, this leaves you with the problem of finding out what is the RGB value for the colour you want.

If you are trying to match a colour and you can view it on your screen in some way (pdf, word, image document or web site), then you should be able to take a screen shot (capture the screen as a graphic image) and use an image editor to pick out the colour. Most graphic editors will have some feature that allows you to select a colour (either from an image, or by adjusting the RGB values directly) and display its RGB component values, either in decimal or hex.

For example, on a Microsoft machine, you would do this by :-
1) press the 'Print Screen' key - this will take a copy of the screen,
2) open the 'Paint' program - this can normally be found in Start -> Programs -> Accessories -> Paint,
3) from the 'Edit' menu, select 'Paste' - it may ask you about expanding the image, this is OK,
4) select the 'Pick Color' tool - 3rd down on the left, looks like a pipette,
5) using the 'pipette', click on the area of the image of the colour you want - the colour of that spot should appear in the bottom left corner of paint,
6) from the 'Colors' menu, select 'Edit Colors',
7) at the bottom of that tool, click on 'Define Custom Color>>>' - this will exand the tool and then in the bottom right corner you will see the Red, Green and Blue values in decimal.

Note :- once you are at this point in Paint, you can also drag the mouse around the colour square and up/down the brightness bar (to the right of the colour square) to create any colour you want.

A web site with a colour picker tool (like the one in Paint) is Color picker for html. You can drag the mouse around the colour rainbow area to get approximately the correct colour, then drag the mouse up and down the bar to the right to alter the brightness of the colour.

If you want to stick to the 'web safe' set of colours, take a look at this page - web safe colours.
Note :- There should be no need for you to restrict your web site design to this sub-set of colours, but I mention it here just to be complete. Web safe colours are only useful when viewing web pages on a display with only 256 colours. The majority of computers nowerdays have much more powerful graphic display abilities and will be capable of displaying the full range of RGB (true color - 24 or 32 bit) colours. Even a display set to use 'High Color' (16 bit) should produce any colour you choose.

Another good web site that explains more about colours and HTML is HTML Colours Tutorial.

Note :- in this colour table the text (font or foreground) colour is either black or white and has been selected to give the best contrast against its background.

Named HTML Colours and their Hex Strings
aliceblue
#F0F8FF 		antiquewhite
#FAEBD7 		aqua
#00FFFF 		aquamarine
#7FFFD4
azure
#F0FFFF 		beige
#F5F5DC 		bisque
#FFE4C4 		black
#000000
blanchedalmond
#FFEBCD 		blue
#0000FF 		blueviolet
#8A2BE2 		brown
#A52A2A
burlywood
#DEB887 		cadetblue
#5F9EA0 		chartreuse
#7FFF00 		chocolate
#D2691E
coral
#FF7F50 		cornflowerblue
#6495ED 		cornsilk
#FFF8DC 		crimson
#DC143C
cyan
#00FFFF 		darkblue
#00008B 		darkcyan
#008B8B 		darkgoldenrod
#B8860B
darkgray
#A9A9A9 		darkgreen
#006400 		darkkhaki
#BDB76B 		darkmagenta
#8B008B
darkolivegreen
#556B2F 		darkorange
#FF8C00 		darkorchid
#9932CC 		darkred
#8B0000
darksalmon
#E9967A 		darkseagreen
#8FBC8B 		darkslateblue
#483D8B 		darkslategray
#2F4F4F
darkturquoise
#00CED1 		darkviolet
#9400D3 		deeppink
#FF1493 		deepskyblue
#00BFFF
dimgray
#696969 		dodgerblue
#1E90FF 		firebrick
#B22222 		floralwhite
#FFFAF0
forestgreen
#228B22 		fuchsia
#FF00FF 		gainsboro
#DCDCDC 		ghostwhite
#F8F8FF
gold
#FFD700 		goldenrod
#DAA520 		gray
#808080 		green
#008000
greenyellow
#ADFF2F 		honeydew
#F0FFF0 		hotpink
#FF69B4 		indianred
#CD5C5C
indigo
#4B0082 		ivor
#FFFFF0 		khaki
#F0E68C 		lavender
#E6E6FA
lavenderblush
#FFF0F5 		lawngreen
#7CFC00 		lemonchiffon
#FFFACD 		lightblue
#ADD8E6
lightcoral
#F08080 		lightcyan
#E0FFFF 		lightgoldenrodyellow
#FAFAD2 		lightgreen
#90EE90
lightgray
#D3D3D3 		lightpink
#FFB6C1 		lightsalmon
#FFA07A 		lightseagreen
#20B2AA
lightskyblue
#87CEFA 		lightslategray
#778899 		lightsteelblue
#B0C4DE 		lightyellow
#FFFFE0
lime
#00FF00 		limegreen
#32CD32 		linen
#FAF0E6 		magenta
#FF00FF
maroon
#800000 		mediumaquamarine
#66CDAA 		mediumblue
#0000CD 		mediumorchid
#BA55D3
mediumpurple
#9370DB 		mediumseagreen
#3CB371 		mediumslateblue
#7B68EE 		mediumspringgreen
#00FA9A
mediumturquoise
#48D1CC 		mediumvioletred
#C71585 		midnightblue
#191970 		mintcream
#F5FFFA
mistyrose
#FFE4E1 		moccasin
#FFE4B5 		navajowhite
#FFDEAD 		navy
#000080
oldlace
#FDF5E6 		olive
#808000 		olivedrab
#6B8E23 		orange
#FFA500
orangered
#FF4500 		orchid
#DA70D6 		palegoldenrod
#EEE8AA 		palegreen
#98FB98
paleturquoise
#AFEEEE 		palevioletred
#DB7093 		papayawhip
#FFEFD5 		peachpuff
#FFDAB9
peru
#CD853F 		pink
#FFC0CB 		plum
#DDA0DD 		powderblue
#B0E0E6
purple
#800080 		red
#FF0000 		rosybrown
#BC8F8F 		royalblue
#4169E1
saddlebrown
#8B4513 		salmon
#FA8072 		sandybrown
#F4A460 		seagreen
#2E8B57
seashell
#FFF5EE 		sienna
#A0522D 		silver
#C0C0C0 		skyblue
#87CEEB
slateblue
#6A5ACD 		slategray
#708090 		snow
#FFFAFA 		springgreen
#00FF7F
steelblue
#4682B4 		tan
#D2B48C 		teal
#008080 		thistle
#D8BFD8
tomato
#FF6347 		turquoise
#40E0D0 		violet
#EE82EE 		wheat
#F5DEB3
white
#FFFFFF 		whitesmoke
#F5F5F5 		yellow
#FFFF00 		yellowgreen
#9ACD32

Powered by