The chart below summarizes how you can define colors in HTML attributes and in Cascading Style Sheets as shown in The Color Spot. This chart uses color terms that you can review if you are unfamiliar with them.
The need to define color became apparent early in the development of HTML. As a first step, a set of 16 color names and a notation for defining color by six hexadecimal digits were established. With Cascading Style Sheets (CSS) work, more ways of defining color have come into play, including another set of named colors.
The most reliable way to specify a color in HTML or style sheets remains the hexadecimal code. This is because any Web browser, even an old one, is extremely likely to recognize the hexadecimal notation as a color code. Some Web browsers may not recognize the newer notations used to define color or the most recent set of named colors. Outside of the standard color names, there are a wide variety of names used for colors.
The numeric value of the color code you use can range over any value within the constraints of its definition. So, for example, with the six-digit hexadecimal (base 16) color code, you could use any one of 166 = 16,777,216 values for a color.
A chart of color swatches with descriptive names showing the color code can help you choose colors that are recognized by name or interesting for some reason. A variety of charts at The Color Spot help you look at and compare related colors and color notations, and you can see how to prepare color schemes using shades of these colors. You could also use interactive tools you can use to mix your own color swatches: Swatch Control, Color Scheme Maker, Hue Stepper, Hex Stepper, Chooser, or Picker.
|Shorthand||Color Definition||Used by Application||Browser Support||Example Use||Example Appearance|
|One of the sixteen color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.||HTML 3.2, HTML 4.01, CSS1, CSS2, CSS current work||Internet Explorer, Mozilla, etc.||<h3 style="color:red">red fish</h3>|
|a six-digit hexadecimal representation; starts with # and followed by three pairs of hexadecimal digits, each pair defining the red, green, and blue values.||HTML 3.2, HTML 4.01, CSS1, CSS2, CSS current work||Internet Explorer, Mozilla, etc.||<h3 style="color:#104E8B">blue fish</h3>|
|a decimal representation; where R, G, and, B are decimal values of the red, green, and blue values in the range 0 to 255.||CSS1, CSS2, CSS current work||Internet Explorer, Mozilla||<h3 style="color:rgb(176,48,96)">The New Maroons</h3>|
The New Maroons
|a percentage representation; where R, G, and B are the percent values of the red, green, and blue values in the range 0 to 100.||CSS1, CSS2, CSS current work||Internet Explorer, Mozilla||<h3 style="color:rgb(50%,90%,80%)">Now is the time</h3>|
Now is the time
|a three-digit hexadecimal representation, where each digit is repeated once to expand to the six-digit hexadecimal color #RRGGBB.||CSS1, CSS2, CSS current work||Internet Explorer, Mozilla||<h3 style="color:#ace">Now is the place</h3>||
Now is the place
|One of the 147 color names defined by the Scalable Vector Graphics (SVG) Specification.||CSS current work||Internet Explorer (most), Mozilla (all)||<h3 style="color:chocolate">Dessert</h3>|
||Hue, saturation, light method: H is the hue measured in degrees of the color circle (red = 0°; green = 120°; blue = 240°). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal')||CSS current work||Mozilla, Google Chrome||<p style="background-color: hsl(125,50%,80%)">The River</p>||
|adds an alpha, a, specifing the opacity of the color, giving a RGBA decimal and RGBA percent specification; a = 0 = transparent; a = 1 = opaque.||CSS current work||Mozilla, Google Chrome||<p style="background-color: rgba(101,252,203,0.5)">Nick stood up</p>||
Nick stood up
||adds an alpha, a, specifing the opacity of the color to the HSL specification, giving a hsla(H,S%,L%,a) code; a = 0 = transparent; a = 1 = opaque.||CSS current work||Mozilla, Google Chrome||<p style="background-color: hsla(125,50%,80%,0.5)">Seney Stretch</p>||