Colors in CSS3A presentation by Lea Verou

Color formats in CSS2

• Hex format – #RRGGBB• Shorthand hex format - #RGB• rgb() format – rgb(red, green, blue)• Named colors – white, black, beige etc

New color formats in CSS3

• HSL – hsl(hue, saturation, lightness)• CMYK – cmyk(cyan, magenta, yellow, black)• HSLA – hsl(hue, saturation, lightness, alpha)• RGBA – rgba(red, green, blue, alpha)

HSL

• HSL stands for Hue, Saturation, Lightness.• A format that is easier for humans to

understand and manipulate. • HSL makes it much easier to create color

palettes: You just use a color picker for the basic colors of the palette and not for the lighter/darker variants.

CMYK

• CMYK stands for Cyan, Magenta, Yellow, blacK• Easier for most people to understand and manipulate. • Easier to produce good-looking colors• Allows us to define precisely how our colors will get

printed• Graphic designers are already accustomed to it so it

will be easier for them to switch to Web design• Smaller color gamut than RGB• Not supported yet by any browser

RGBA and HSLA

• RGBA and HSLA allow for a fourth parameter – Alpha.

• Alpha defines the transparency of the color – where 1 is fully opaque and 0 is fully transparent.

• This brings a revolution in web design that many designers are still unaware of.

Isn’t opacity enough?

• No! Opacity is very useful but it’s not enough• Opacity allows us to make the whole

container semi-transparent, including it's contents

• RGBA/HSLA allow us to make only the border/background/text color/etc semi transparent which opens up great possibilities in web design

Isn’t opacity enough? Example

Browser support for RGBA/HSLA/HSL

• Mozilla Firefox 3+• Opera 10+ (still in Alpha)• Apple Safari 3+• Google Chrome

RGBA backgrounds: workarounds

• RGBA backgrounds are the easiest ones for compatibility workarounds.

• They are based on the fact that if a browser doesn’t understand RGBA, it ignores the declaration that contains RGBA values completely.

• They are used like this:/* Workarounds here */background: rgba(255,0,80,0.5);

• Important! The declaration that contains the RGBA value should always come after the workarounds.

RGBA backgrounds: workarounds

• IE gradient filter• 1x1 png images:– As external files– Embedded in the CSS via Data URIs

Workaround for IE: Gradient filter

• IE supports a proprietary “extended hex” format in the parameters of some of it’s filters.

• In that format the Alpha parameter is converted to the range 00-FF and concatenated in front of a normal hex value, which results to #AARRGGBB

• We can use the gradient filter to simulate RGBA backgrounds for IE, which looks like this:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);That's equivalent to: background:rgba(0,0,0,0.8);

Problems with the filter workaround

• Filters make the text aliased:

Problems with the filter workaround

Filters are lengthy and add lots of non-standard clutter in

our CSS:-ms-filter:"progid:DXImageTransform.Microsoft.grad

ient(startColorstr=#CC000000,

endColorstr=#CC000000)"; /* For IE8 beta */

filter:progid:DXImageTransform.Microsoft.gradient(

startColorstr=#CC000000, endColorstr=#CC000000);

zoom:1; /* To give the element “layout” */

O_o!!

Problems with the filter

workaround

Doesn't play along well with other workarounds, since it doesn't modify the background of the element.

More problems with the filter workaround

• Filters are slow• Filters are only for IE. What about Firefox 2-,

Opera 9.6-?• To use that method, RGBA values need to be

converted to hex values. Too much of a hassle.

PNGs via Data URIs

• Data URIs allow us to embed a file inside our CSS

• They look like this: background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);

Disadvantages of Data URIs

• IE7- doesn’t support Data URIs, so if we use them, the filter method and all it’s disadvantages should be used as well in order to support IE7-.

• Not easily changeable, you will need a converter of some sort to change the color even a little bit.

• Clutter in our CSS file. Lots of clutter!• The image itself cannot be cached.

Advantages of Data URIs

• Less external http requests = faster website• The png image loads instantly, since it’s

embedded in the CSS file. Not a single glimpse of containers without backgrounds!

External png images

• You don’t need to create them yourself, let PHP do the hard work!

• You can find a script of mine that does exactly that here: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

• It’s used like this:background: url(rgba.php?r=255&g=0&b=80&a=50);orbackground: url(rgba.php?name=white&a=50);

RGBA/HSLA in other CSS properties

• RGBA/HSLA is not only useful for backgrounds! Backgrounds are just the easiest to workaround and the most frequently needed to.

• For solid borders, you can use 2 containers with an appropriate padding and background.

• For text color, in most cases opacity (or the alpha filter for IE) is sufficient.

Detect RGBA via JavaScript

• Try to assign an RGBA value to a CSS property that accepts color values (e.g. color, background-color, border-color etc) on any element .

• If the browser is not RGBA capable, it will do nothing, and may also throw an error (IE)

• Otherwise the value will be applied

RGBA detection: code

function supportsRGBA() {

var elem = document.getElementsByTagName('script')[0],

prevColor = elem.style.color;

try {

elem.style.color = 'rgba(1,5,13,0.44)';

} catch(e) {}

var result = elem.style.color != prevColor;

elem.style.color = prevColor;

return result;

}

RGBA detection: improvements

• Performance: Cache the result• Accuracy: What happens if the element

already has that rgba color?• Completeness: We can detect HSL, HSLA and

CMYK in the exact same way.

Thank you!

You can find me at:• http://leaverou.me• http://twitter.com/LeaVerou• leaverou@fresset.gr