Journal

Live blogging Standards.Next: RGB, HSL and Transparency in CSS3

November 20, 2009 | Posted by Jeffrey Barke | Add a Comment

Molly Holzschlag

RGB: Additive synthesis

Red, Green, Blue: Add colors to get result color. In print world, subtractive. Remove color to get result. R + G + B = white

RGB color notation

RGB in percentage values or RGB in integer values. Not equivalent; so don't use both (mix in a single rule)!

NOT rgb (60, 100, 50%);

Firefox and Opera will ignore the incorrect rule. Safari and IE (5–now) will attempt to correct and end up with a severely washed-out result.

HSL color

Hue, saturation and lightness. Easier and more intuitive way to get to colors we want as designers. Value from 1–360, then adjust saturation and lightness.

• Hue value comes first, using the hue's angle on the color wheel as represented by an integer.
• Saturation comes next, using the percentage of saturation you'd like
• Lightness is next, using the percentage of lightness you' like

HSL advantages

• Not CRT specific
• Easier, more intuitive to work with
• Working with a set of colors allows for easy palette creation
• Reduces errors
• Reduces dependency on charts and other value lookup tools

As adjust saturation, lightness, base-hue remains the same.

RGBA and HSLA

Alpha transparency for both RGB and HSLA.

Notation is the same in both. a value is alpha transparency from 0–1.

Allows for fully opaque to fully transparent.

hsla(0, 100%, 50%, .25)

Supported by Firefox, Webkit and Opera.

Questions/Answers

A: Best article out there on HSLA is Wikipedia. Useful to have the color wheel.

Q: Why is a value decimal instead of percentage?

A: Not sure. No one remembers a discussion about it.

Q: Is this part of the spec?

A: Yes. It is all part of the CSS3 color module.

Spread the Love