This chapter is from the book
This chapter is from the book
This chapter is from the book
Basic Colors
The following color units (<color>) define several different ways to designate solid colors and can be used for properties like text color, background-color, and border-color.
#rrggbb or #rgb
In hexadecimal notation, colors are represented by three sets of hexadecimal values (base-16), with the first set representing the red (r) value, the second representing the green (g) value, and the next representing the blue (b) value based on how displays add light to create the colors you see. A value of #000000 represents no light (black), #ffffff represents the most light (white), and #ff0000 represents only red light (bright red).
body { background-color: #999; } /* middle gray */
#rgb is a shorthand for #rrggbb, which is available to use when the two r characters match, the two g characters match, and the two b characters match (#a3b is equivalent to #aa33bb).
rgb(r,g,b)
You can also define RGB colors using decimal notation (sometimes called functional notation) along the same 256-step range (0 to 255) that the hexadecimal values represented. Each value can also be defined as a percentage of that 256-step range.
body { background-color: rgb(153,153,153); } /* middle
gray */
body { background-color: rgb(60%,60%,60%); } /* middle
gray */
hsl(h,s,l)
The hue-saturation-lightness color scheme offers a way to look at the color wheel that can be more intuitive when working with colors of a similar hue or tonality. Hue (h) is a number from 0 to 360 representing a radial position on the color wheel (0 or 360=red, 120=green, 240=blue). Saturation (s) is a percentage value from 0 to 100 percent with values closer to 0 percent approaching desaturated, or gray. Lightness (l) is again a percentage value from 0 to 100 percent, where 0 percent is black and 100 percent is white.
.error { border-color: hsl(0, 75%, 38%); } /* a muted red */
A chart of HSL colors in the CSS3 Color Module specification (http://www.w3.org/TR/css3-color/#hsl-examples) illustrates how the three scales work together to create colors.
Color Keywords
The HTML 4 specification defined the following 16 color keywords and their corresponding hex values: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Keywords are case insensitive and are not placed between quotes.
body { color: red; }
Several (131 to be exact) more commonly supported color keywords, such as pink, plum, deepskyblue, and firebrick, originally defined in the SVG specification, were added in CSS3, bringing the number of color keywords to 147.