CSS colors

 

for quick results, use the named colors

When the World Wide Web Consortium finalized the standard for Cascading Style Sheets, they included 16 named colors. These colors were previously defined in HTML and correspond to the 16 VGA colors on a PC. It is worth memorizing them because in most case, when designing a simple web page you are unlikely to need any others. Here are the 16 colors, together with their RGB hexadecimal values:

	black	#000000			silver	#C0C0C0
	gray	#808080			white	#FFFFFF
	maroon	#800000			red	#FF0000
	purple	#800080			fuchsia	#FF00FF
	green	#000800			lime	#00FF00
	olive	#808000			yellow	#FFFF00
	navy	#000080			blue	#0000FF
	teal	#008080			aqua	#00FFFF

Certain browsers support many other named colors, but because these do not adhere to the specification they should be avoided and the full, hexadecimal value used instead. So, to apply color to an element, you might do something a bit like this:

h1.disgusting {
    background-color: lime;
    color: red;
}

Below are the awful style rules in action:

This is hideous

the 216-color palette

Beyond the 16 named colors is the so-called browser-safe palette. Most computers can now display thousands, or even millions of colors. Older computers and other devices such as cellular phones may not support so many colors. Almost all of these devices will support 256 colors. When trying to display something that is not one of these special colors, a device will often resort to some sort of mix between two colors that approximate the one specified. You get a kind of "speckled" effect called dithering that is rather unpleasant. By using the 216 colors of the browser-safe palette, you can eliminate this effect. The reason there are 216 available colors and not 256 is that the major operating systems reserve the remaining colors for their own use, but not the same colors.

The 216-color palette uses 6, evenly-spaced graduations of red, green and blue and their combinations. The colors are created from red, green and blue that have been restricted to the hexadecimal values of 00, 33, 66, 99, cc and ff.

	FFFFFF		FFFFCC		FFFF99		FFFF66		FFFF33		FFFF00
	CCFFFF		CCFFCC		CCFF99		CCFF66		CCFF33		CCFF00
	99FFFF		99FFCC		99FF99		99FF66		99FF33		99FF00
	66FFFF		66FFCC		66FF99		66FF66		66FF33		66FF00
	33FFFF		33FFCC		33FF99		33FF66		33FF33		33FF00
	00FFFF		00FFCC		00FF99		00FF66		00FF33		00FF00
	FFCCFF		FFCCCC		FFCC99		FFCC66		FFCC33		FFCC00
	CCCCFF		CCCCCC		CCCC99		CCCC66		CCCC33		CCCC00
	99CCFF		99CCCC		99CC99		99CC66		99CC33		99CC00
	66CCFF		66CCCC		66CC99		66CC66		66CC33		66CC00
	33CCFF		33CCCC		33CC99		33CC66		33CC33		33CC00
	00CCFF		00CCCC		00CC99		00CC66		00CC33		00CC00
	FF99FF		FF99CC		FF9999		FF9966		FF9933		FF9900
	CC99FF		CC99CC		CC9999		CC9966		CC9933		CC9900
	9999FF		9999CC		999999		999966		999933		999900
	6699FF		6699CC		669999		669966		669933		669900
	3399FF		3399CC		339999		339966		339933		339900
	0099FF		0099CC		009999		009966		009933		009900
	FF66FF		FF66CC		FF6699		FF6666		FF6633		FF6600
	CC66FF		CC66CC		CC6699		CC6666		CC6633		CC6600
	9966FF		9966CC		996699		996666		996633		996600
	6666FF		6666CC		666699		666666		666633		666600
	3366FF		3366CC		336699		336666		336633		336600
	0066FF		0066CC		006699		006666		006633		006600
	FF33FF		FF33CC		FF3399		FF3366		FF3333		FF3300
	CC33FF		CC33CC		CC3399		CC3366		CC3333		CC3300
	9933FF		9933CC		993399		993366		993333		993300
	6633FF		6633CC		663399		663366		663333		663300
	3333FF		3333CC		333399		333366		333333		333300
	0033FF		0033CC		003399		003366		003333		003300
	FF00FF		FF00CC		FF0099		FF0066		FF0033		FF0000
	CC00FF		CC00CC		CC0099		CC0066		CC0033		CC0000
	9900FF		9900CC		990099		990066		990033		990000
	6600FF		6600CC		660099		660066		660033		660000
	3300FF		3300CC		330099		330066		330033		330000
	0000FF		0000CC		000099		000066		000033		000000

You can specify hexadecimal values in shorthand. For example, the color #6633CC can be written as #63C instead. It is also perfectly okay to specify the hexadecimal letters in lowercase, so it would be #63c instead. I would actually recommend this in case it becomes important with future, case-sensitive versions of CSS.

information resource

The section on colors in the Cascading Style Sheet specification goes into greater detail about ways you can specify colors in a style sheet. Visibone specializes in supplying color tools and charts. Visicheck has a useful tool for checking to see if images on your website are posing problems for people with forms of color-blindness. Thank you for reading.