Color

Submitted by Alan on Sat, 04/25/2009 - 18:31

Examines the sRGB Color model and it's application in web design. Handy table of the browser-safe palette.

[][][][][][][][][][][][][][][][][][][][][][][][][][]

The standard color model used on the Internet is RGB, which consists of a set of three values from 0 (zero) to 255 in decimal notation, or 0 - ff in hexadecimal (frequently mis-spelt as 'hexidecimal') notation. One of these values is for red, one is for green, and one is for blue - thus:

#RRGGBB

where RR, GG, BB are the hexadecimal digits specifying the Red, Green, and Blue values of the color. The colors you create depend on the mixture of these three colors, which are indicated by their respective numerical values. Zero indicates the absence of a particular color; 255 indicates the strongest use of a color. For example,

  • RED is: 255 0 0 in decimal, or #ff0000 in hexadecimal.
  • GREEN is: 0 255 0 in decimal, or #00ff00 in hexadecimal.
  • BLUE is: 0 0 255 in decimal, or #0000ff in hexadecimal.

Colors can also be specified by name, including the 16 widely understood color names: aqua, black, blue, gray, fuchsia, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette.

Color names and sRGB values
 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"

Setting Page Attributes: Changing a Background Color

Once you determine the hexadecimal value for the color you want, you must enter the hexadecimal value into your HTML. For example, to change your background color to magenta, immediately inside your beginning <body> tag, type: bgcolor="#ff00ff" (or use CSS). 

 
<body   background = "/Images/margin.gif"
	bgcolor = "#ffffff"
	text	= "#000000"
	link	= "blue"
	vlink   = "purple"
	alink   = "red"
	>
Notes:
  • the hexadecimal color values are preceded by a pound sign (#);
  • there are no spaces between the three RGB hexadecimal values;
  • the pound sign and hexadecimal color values are situated within double- quotes.
  • The background attributes pecfies the URL of an image to be tiled across the document window before anything else is rendered.
  • The text attribute is used to control the color of all the normal text in the document. This basically consists of all text that is not specially colored to indicate a link. The format of text is the same as that of bgcolor.
  • vlink (typically blue) stands for visited link, and
  • alink (typically purple) stands for active link. Again the format for these attributes is the same as that for bgcolor and text.
  • bgcolor: this attribute allows the user to specify a solid background color. If a background file specified in the Background attribute cannot be found, the color specified by the bgcolor tag will be used. This bgcolor will also be used if the user has auto load images off. This bgcolor will also be used as a table border color on Netscape for Windows.

Color Palettes

GIF images include color palettes, or predefined sets of as many as 256 colors, which define which colors they will use. There are two types of palettes -- an adaptive palette, using the colors already in the image, or a system palette, using a computer platform's preset group of 256 colors. Adaptive palettes usually give the best results when the image is viewed on a monitor that has thousands or millions of colors.

Browser-safe Colors

Many browsers have a pre-defined set of colors, or color table that they use to display images in HTML pages. If a color used in an image is not found in the color table, the software will either substitute a color from the color table which is similar to the color specified in the image, or it will dither the colors to approximate the desired color. A color which is "dithered" will appear to be made up of pixels of two colors, which blend together visually to approximate the desired color.