HTML and CSS Reference
In-Depth Information
images and other content. (What exactly does “burlywood” look like? And yes, that is a
supported color keyword!)
Color is used in several CSS properties but is most common for setting background
and foreground colors. Backgrounds will be covered later in this chapter, so let's first
look closer at foreground colors. Foreground colors (for the textual content on a page)
are defined using the color property, which is part of the CSS Color Module Level 3.
This module is one of the few in CSS3 that is now at W3C Recommendation status. It's
a small module, defining color and another property, opacity . In addition to hexa-
decimal notation, there are other notation systems that can be used in color, which we'll
get into next.
Functional notation syntax
Instead of specifying a hexadecimal value, there is another syntax that can be used called
functional notation . In this form of syntax, the command rgb(R, G, B) is used,
where the “R, G, B” are replaced with either the decimal representation or, perhaps
more useful, the percentage of a particular color component. So for example, whereas
magenta could be written in either of the following hexadecimal notation forms:
p { color: #ff00ff; }
p { color: #f0f; }
using functional notation this could be rewritten as this:
p { color: rgb( 255, 0, 255 ); }
p { color: rgb( 100%, 0% , 100% ); }
Functional notation isn't new in CSS3, but the next form of it is: Hue, Saturation,
Lightness (HSL).
Hue, saturation, lightness
HSL functional notation uses the form hsl( H, S, L, ) , where “H, S, L” repres-
ents the hue, saturation, and lightness of a color. Before going further with the syntax,
you'll need to understand what exactly HSL means.
In an RGB color system, adjusting each of the components of a color to arrive at a
shade or tint (darker or lighter version of the same color) is a rather unintuitive process,
particularly for inexperienced developers. Depending on the color, more than one of the
three RGB components may need to be increased or decreased to achieve a proper shade
or tint of the color. Imagine a bright yellow color composed of red and green. A dark-
er yellow cannot be created by only reducing the red component, because that will just
Search WWH ::




Custom Search