|
|
|||
|
|
|
|
|
|
||||
        
|
 |
Chapter 13: Color
Possible CSS3 Color Use
While it is still early to state safely what browsers will support in the upcoming CSS3 specification, some aspects of color support deserve at least a brief mention so as to point at future possibilities.First, the CSS3 specification allows for opacity to be set for elements. This can also be set via a modified color specification indicated by rgba, which adds alpha as a fourth value. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque). Under CSS3, we might use rules like this: em {color: rgba(255,0,0,1);} /* red fully opaque */
Another improvement introduced in CSS3 is the ability to set color in Hue Saturation Lightness (HSL) format. HSL colors are specified as a triple (hue, saturation, lightness). Hue is represented as an angle of the color circle, where red is 0 or 360, green is 120, blue is 240, and the other colors spread in between. Saturation is represented in a percentage, so 0% is no saturation or a shade of gray, while 100% is full saturation of the hue. Lightness is also represented as a percentage value, with 100% lightness being white and 0% lightness being black. A lightness value of 50%, specifying a "normal" value, would be commonly used. Given these specifications, the following CSS rules make sense:strong {color: rgba(0,0,255,0.5);} /* partially transparent green */ .red {color: hsl(0, 100%, 50%); }
While this may seem to be just another way to specify color, the HSL color specification is more intuitive to adjust, and it is generally easier to create variations of colors by keeping the hue the same and adjusting saturation and tint..green {color: hsl(120,100%,50%);} .darkgreen {color: hsl(120,100%,75%);} .lightgreen {color: hsl(120,100%,25%);} .blue {color: hsl(240,100%,50%);} .white {color: hsl(0,0%,100%);} .black {color: hsl(0,0%,0%);} Like the RGB color specification, HSL colors under CSS3 should also support alpha values and are measured by HSLA (hue, saturation, lightness, alpha). For example, .translightgreen {color: hsla(120,100%, 25%, 0.5);}
would specify a semitransparent light-green color.Finally, CSS3 should introduce properties like color-profile, which will allow the specification of an ICC (International Color Consortium) color profile (http://www.color.org). For example, to correct colors for images in the page under CSS3, a rule like img {color-profile: url("http://example.com/profiles/eg.icm"); }
might be employed. The ability to improve color reproduction in browsers has been a long time in coming. The real challenge we see with color on the Web is that, with such a wide variety of viewing environments, the difference between what colors we specify and what actually shows up can be quite large if we are not careful.Next: Practical Web Color
|
 Overview | Chapters | Examples | Resources | Buy the Book! |