Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

Defining Color

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
name (one of 16) 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>

red fish

#RRGGBB 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>

blue fish

rgb(R,G,B) 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

rgb(R%,G%,B%) 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

#RGB 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

name (one of 147) 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>

Dessert

hsl(H,S%,L%) 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>

The River

rgba(R,G,B,a) or rgba(R%,G%,B%,a) 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

hsla(H,S%,L%,a) 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>

Seney Stretch

 Sponsor 
Coupon Codes save you money! You can find and use codes to get discounts on many purchases. See the big list of coupon codes on my site, where you'll find hundreds of special codes, from merchants of all kinds--books, music, clothing, supplies, and more!
 
Save this page to any social bookmarking site! Share · Search · Market · Directory
2013-04-10 · John December · Contact · Terms of Use © December Communications, Inc.