The presentation for my yesterday's session at MediaCampAthens.

1. Colors in CSS3
A presentation by Lea Verou

2. Color formats in CSS2
• Hex format – #RRGGBB
• Shorthand hex format - #RGB
• rgb() format – rgb(red, green, blue)
• Named colors – white, black, beige etc

3. 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)

4. 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.

5. 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 

6. 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.

7. 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

8. Isn’t opacity enough? Example

9. Browser support for
RGBA/HSLA/HSL
• Mozilla Firefox 3+
• Opera 10+ (still in Alpha)
• Apple Safari 3+
• Google Chrome

10. 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.

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

12. 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.grad
ient(startColorstr=#CC000000, endColorstr=#CC
000000);
That's equivalent to: background:rgba(0,0,0,0.8);

13. Problems with the filter workaround
• Filters make the text aliased:

14. Problems with the filter workaround
Filters are lengthy and add lots of non-standard clutter in
our CSS:
-ms-filter:quot;progid:DXImageTransform.Microsoft.grad
ient(startColorstr=#CC000000, endColorstr=#CC000000)
quot;; /* For IE8 beta */
filter:progid:DXImageTransform.Microsoft.gradient(st
artColorstr=#CC000000, endColorstr=#CC000000);
zoom:1; /* To give the element “layout” */
O_o!!

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

16. 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.

17. 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,
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA
fFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/w
D/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7
DMAAAAASUVORK5CYII=);

18. 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.

19. 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!

20. 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);
or
background: url(rgba.php?name=white&a=50);

21. 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.

22. 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

23. 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;
}

24. 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.

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