Specifying Colors


Color can be specified in may ways. The English language and all other languages has words for the most common colors; for example, "red," "blue," and "brown." If you tell someone that your house is red, your listener gets a general idea about the color of your house, but many different shades of red can be described as "red."

Another way to describe a certain color is to use numbers. Paint manufacturers often provide sets of numbered color swatches so that you can ask for paint that is "blue number 216," for example. On computer screens, the most common way to specify a color is to give an RGB value, which specifies the mixture of red, green, and blue. However, this, too, is an imprecise way to select colors because the result depends on the type of screen you have and how much light is in the room in which the monitor is located.

A third way to specify a color is to refer to the color of something else. For example, you may want the color of your curtains to be the same as the color of your sofa. A more relevant example for a style sheet is to set the text color of a document to be the same as a system color (for example, the foreground color of the user's window system).

CSS allows you to specify colors using all these methods. A small number of color names and system colors are defined, and other colors can be specified as RGB values.

Color Names

CSS 2.1 predefines 16 color names: aqua (a light greenish blue, sometimes called cyan), black, blue, fuchsia (light purple/pink), gray, green, lime (light green), maroon (dark red), navy (dark blue), olive, purple, red, silver (light gray), teal (blue-green), yellow, white, and orange (which was added in CSS 2.1).

Figure 10.1 shows samples of all the predefined colors. The exact same colors are also used in HTML. Note that colors onscreen look different on paper; keep this in mind when selecting your colors. If you plan to print your page on paper, some of the colors you choose for screen display may surprise you once they're printed. If this book was specifically about color, we would have tried for a better match and the book would have been more expensive....

Figure 10.1. Samples of the 17 predefined colors in CSS 2.1.


Here is a simple example of a style sheet that sets the color and background using the color names:

 BODY {   color: black;   background: yellow; } 

The predefined color names are easy to use for those who write style sheets in a simple text editor. More advanced tools allow designers to graphically select colors that are then turned into RGB colors.

RGB Colors

Computer monitors commonly use the RGB color model to display color. In addition to RGB, a few other color models could have been used. One of them is the HSB (Hue Saturation Brightness) model, which is often used by artists because it is similar to how artists mix colors. Another is CMYK (Cyan Magenta Yellow Black), which is a color model commonly used by professional printers. We chose the RGB model because it represents how color is displayed on a color video monitor. Red, green, and blue light is mixed in specified proportions to represent colors on the monitor.

In the RGB color model, each of the three colors is represented by a value between 0 and 100%, where 100% represents the maximum brightness of a color. The values are arranged as a triplet, where the first number represents red, the second green, and the last blue. Black is represented as the triplet (0, 0, 0) zero amounts of all three colors and white by (100%, 100%, 100%) 100% of all three colors. Every triplet with equal amounts of each color is a shade of gray. For example, (90%, 90%, 90%) is a light gray, while (40%, 40%, 40%) is a dark gray. When the values are not equal, it is often difficult to predict what the color looks like. That (100%, 0, 0) is red is not too hard to see. But, that a color with the values (65%, 16%, 16%) is a shade of brown is not so obvious.

As you know, computers work best with bytes. A byte can contain a number from 0 to 255, so when working onscreen, it is usual to remap the RGB percentage values to values within the range of 0, inclusive, to 255, inclusive. Thus, 100% remaps to 255. White, then, remaps as (255, 255, 255), red remaps to (255, 0, 0), and the brown we mentioned in the previous paragraph remaps to (165, 42, 42).

Because each color is represented by 3 bytes, each a value between 0 and 255, the number of potential available colors is 16,777,216; that is, 256 x 256 x 256. These are usually enough colors for most applications. Unfortunately, many monitors don't have enough memory to store 3 bytes for every pixel, particularly when it is not uncommon for a million pixels to be on a screen. So, monitors play tricks (which we won't go into) in their efforts to display as many colors as possible. This usually means that, although potentially you can use all 16,777,216 colors, you cannot use them all at the same time. Many monitors have a limit of 256 colors that can be displayed at any given time, although a 65,536-color limit is becoming more common.

This limit may not seem important when you work with a style sheet because you usually will specify only a handful of colors. However, a typical HTML document also contains images, which may use up colors quickly. There is actually little you can do to ensure the desired color is available on the user's monitor. You can only hope that the browser takes care that if the exact color is not available (which it often isn't), at least one that is close is available.

The RGB values of CSSI are called sRGB (standard-RGB). sRGB is a "color space" that ensures that all colors specified in CSS are exactly defined. This means that the computer that displays the document knows exactly what colors are specified in the style sheet and all Web devices should be able to display the exact color. As previously noted, however, limitations in computer hardware make this a difficult promise to fulfill. An article* describes the technical details of the sRGB system.

* M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta: A Standard Default Color Space for the Internet sRGB. Available from http://www.w3.org/Graphics/Color/sRGB


To specify an RGB color in CSS, three values a triplet must be provided. That can be done by using any of three methods. We've already discussed the first two. The one you use is a matter of taste because they all produce the same result:

  1. Percentages For example, a color specification such as rgb(100%, 35.5%, 10%) specifies a maximum amount (100%) of red light, 35.5% of green light, and 10% of the blue light. The result is a deep orange red:

  2. Numbers in the range of 0 to 255 Thus rgb(255, 91, 26) should be the same color as rgb(100%, 35.5%, 10%) in the percentage example.

  3. Hexadecimal numbers For example, #FF5B1A, which produces the same shade of red as in (1) and (2).

In either the first or second method, if you enter a value that is outside the acceptable range (for example, 125% in method one or 300 in method two), the value will be "clipped." That is, the errant value is reduced to the maximum value allowed by the Web device. Because different devices have different ranges (for example, a color printer is different from a computer screen), you need to avoid values outside the acceptable range.

The third method for specifying a color needs more explanation. You use the same numbers as with the second method, 0 to 255, but you write them as a single hexadecimal number preceded by a hash mark (#); for example, #FF5B1A, which produces the same color red as rgb(100%, 35.5%, 10%) and rgb(255, 91, 26). This notation is not very intuitive, but is included because it is also used in HTML. The hexadecimal notation can be written in two variations that use either three or six hexadecimal digits. The three-digit form defines the same color as the six-digit form does but with all digits doubled; that is, #A84 is the same color as #AA8844.

System Colors

CSS2 introduced the concept of system colors. System colors aren't real colors; instead, they are pointers to colors defined elsewhere in the computer that displays the document. For example, the system color Background refers to the background color of the user's desktop.

System colors are not widely used on the Web and there is a proposal to remove them from future version of CSS. We therefore do not recommend using them in your style sheets. For reference purposes, the system colors are listed in Appendix C, "System colors."

Hexadecimal Numbers

The relation between hexadecimal and normal decimal numbers is as follows: the digits 0 to 9 stand for themselves, the letters A to F mean A=10, B=11, C=12, D=13, E=14 and F=15. In a group of two hexadecimal digits, the first one is multiplied by 16 and added to the second. For example: 11 (= 1 x 16 + 1) = 17. Some more examples:

  • A7 = 10 x 16 + 7 = 167

  • FF = 15 x 16 + 15 = 255

  • 22 = 2 x 16 + 2 = 34

  • 5B = 5 x 16 + 11 = 91

  • 1A = 1 x 16 + 10 = 26

We can apply this to color values:

  • #FF5B1A = rgb(255, 91, 26), since FF=255, 5B=91 and 1A=26

  • #CEAA13 = rgb(206, 176, 19)




Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net