The ways you can define colors have been greatly expanded with CSS3: you can now also use CSS functions to apply colors in the common formats RGB (red, green, and blue), RGBA (red, green, blue, and alpha), HSL (hue, saturation, and luminance), and HSLA (hue, saturation, luminance, and alpha). The alpha value specifies a color’s transparency, which allows elements underneath to show through.
To define a color with the hsl
function, you must first choose a value for the hue between 0 and 359
from a color wheel. Any higher color numbers simply wrap around to the
beginning again, so the value of 0 is red, and so are the values 360 and
720.
In a color wheel, the primary colors of red, green, and blue are separated by 120 degrees, so that pure red is 0, green is 120, and blue is 240. The numbers between these values represent shades comprising different proportions of the primary colors on either side.
Next you need the saturation level, which is a value between 0 and 100 percent. This specifies how washed out or vibrant a color will appear. The saturation values commence in the center of the wheel with a mid-gray color (a saturation of 0 percent) and then become more and more vivid as they progress toward the outer edge (a saturation of 100 percent).
All that’s left then is for you to decide how bright you want the color to be, by choosing a luminance value of between 0 and 100 percent. A value of 50% for the luminance gives the fullest, brightest color, and decreasing the value (down to a minimum of 0%) results in making it darker until it displays as black. Increasing the value (up to a maximum of 100%) results in it getting lighter until it shows as white. You can visualize this as if you are mixing levels of either black or white into the color.
Therefore, for example, to choose a fully saturated yellow color with standard brightness, you would use a declaration such as this:
color:hsl(60, 100%, 50%);
Or, for a darker blue color, you might use a declaration such as:
color:hsl(240, 100%, 40%);
You can also use this (and all other CSS color functions) with any
property that expects a color, such as background-color and so on.
To provide even further control over how colors will appear, you
can use the hsla function, supplying
it with a fourth (or alpha) level for a color, which is a floating-point
value between 0 and 1. A value of 0 specifies that the color is totally
transparent, while 1 means it is
fully opaque.
Here’s how you would choose a fully saturated yellow color with standard brightness and 30 percent opacity:
color:hsla(60, 100%, 50%, 0.3);
Or, for a fully saturated but lighter blue color with 82 percent opacity, you might use this declaration:
color:hsla(240, 100%, 60%, 0.82);
You will probably be more familiar with using the RGB system of
selecting a color, as it’s similar to using the #nnnnnn and
#nnn color
formats. For example, to apply a yellow color to a property you can use
either of the following declarations (the first supporting sixteen
million colors, and the second four thousand):
color:#ffff00; color:#ff0;
You can also use the CSS rgb
function to achieve the same result, but you use decimal numbers instead
of hexadecimal (where 255 decimal is
ff hexadecimal):
color:rgb(255, 255, 0);
But even better than that, you don’t even have to think in amounts of up to 256 anymore, because you can specify percentage values, like this:
color:rgb(100%, 100%, 0);
In fact, you can now get very close to a desired color by simply thinking about its primary colors. For example, green and blue make cyan, so to create a color close to cyan, but with more blue in it than green, you could make a good first guess at 0% red, 40% green, and 60% blue, and try a declaration such as this:
color:rgb(0%, 60%, 40%);
Like the hsla function, the
rgba function supports a fourth
(alpha) argument, so you can, for example, apply the previous cyan-like
color with an opacity of 40 percent by using a declaration such as
this:
color:rgba(0%, 60%, 40%, 0.4);
The opacity property provides
the same alpha control as the hsla
and rgba functions, but lets you
modify an object’s opacity (or transparency, if you prefer) separately
from its color.
To use it, apply a declaration such as the following to an element (which in this example sets the opacity to 25 percent—or 75 percent transparent):
opacity:0.25;