| home / programming / css_color / 1 |   [next] |
|
|
|
Currently, the World Wide Web Consortium (W3C) is working on enhancements and improvements to CSS with the forthcoming CSS3 specification. Unlike the previous specs, the W3C is working on creating a new spec in a piecemeal fashion, focusing on individual “modules” dealing with a specific issue, like fonts, backgrounds, borders and so on. The idea is to not only make the process of change more public and visible (by posting changes and updates to their Web site), but also to give browser developers a chance to work on future developments prior to them being made official.
One of the CSS3 modules deals with color, and if it is fully adopted, it promises to introduce a number of changes in the ways you can set colors on a Web page.
{color: hsl(0deg, 100%, 50%)} /* red - equivalent to #FF0000 */
{color: hsl(120deg, 100%, 50%)} /* green - equivalent to #00FF00 */
{color: hsl(240deg, 100%, 50%)} /* blue - equivalent to #0000FF */
Once you know where a color value lies on the color wheel, it is a relatively easy thing to tweak the value; making a color more green or blue, for example, de-saturating it, or making it darker or brighter as needed. So, for example, if you wanted to make a particular green lighter or darker, you just have to play with the final value until you get what you want, as you can see in the following code snippet:
{color: hsl(120deg, 100%, 50%)} /* ‘normal’ green */
{color: hsl(120deg, 100%, 25%)} /* a lighter green */
{color: hsl(120deg, 100%, 75%)} /* a darker green */
{color: hsl(120deg, 100%, 100%)} /* lime */
If you change the middle, saturation values, you get lighter or darker pastel-like colors, as you can see from the following code snippet:
{color: hsl(240deg, 3% ,100%)} /* ghost white */
{color: hsl(240deg, 8%, 98%)} /* lavender */
{color: hsl(240deg,78% ,44%)} /* midnight blue */
The prime advantage HSL has over hexadecimal and decimal RGB values is that they more intuitively show how close one color is related to another. For example, the hexadecimal color value for the color name “PowderBlue” is #B0E0E6. The only slightly lighter “LightBlue” color is #ADD8E6. Doing this type of conversion in your head using hexadecimal is almost impossible. Decimal values are slightly better at showing the small difference between these two colors, which are 176,224,230 and 173,216,230 respectively. But you are still trying to mix different values of red and green in order to tweak the type of blue you want. But the HSL values for them – 187deg, 23%, 90% and 195deg, 25%, 90% respectively – best show just how slight the difference is between them, and also provides a better hint as to how to make a given color more or less blue, and how to change its brightness. You are no longer dealing with red and green values, just playing around with different shades of blue, which makes things much easier.
A final word about this: keep in mind that the use of HSL in CSS color properties has not as yet been finalized. Things may end up being different in the final specification, so just consider this a “head’s up” as how you may be able to set HSL color values in the near future.
| home / programming / css_color / 1 | [next] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: June 17, 2003
URL: http://webreference.com/programming/css_color/1
