Colors In CSS3

43 %
57 %
Information about Colors In CSS3

Published on March 15, 2009

Author: LeaVerou



The presentation for my yesterday's session at MediaCampAthens.

Colors in CSS3 A 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.grad ient(startColorstr=#CC000000, endColorstr=#CC 000000); 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: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!!

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

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: 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);

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 =; try { = 'rgba(1,5,13,0.44)'; } catch(e) {} var result = != prevColor; = 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: • • •

#rrggbb presentations

Add a comment

Related presentations

Related pages

CSS Colors - W3Schools

... EM Converter CSS Colors CSS Color Values CSS Default Values CSS3 Browser ... along with different text colors): For a full overview of CSS colors, ...
Read more

CSS3 Colors - W3Schools

CSS3 Colors. CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors; HSL colors; HSLA colors; opacity
Read more

RGBA colors - CSS3 . Info

CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha.
Read more

CSS3 Color Names - CSS Portal

The following table displays all the colors in the CSS3 Color Specifications, currently there is 147 colors, Represented by 17 basic colors, with 130 ...
Read more


CSS3 color - RGB(A) & HSL(A) Farbnamen, Angaben in Hexadecimal, RGB, RGB(A), HSL, HSL(A), all diese Angaben sind heute im täglichen Einsatz anzutreffen.
Read more

Web colors - Wikipedia, the free encyclopedia

Web colors are colors used in displaying web pages, ... The list of web "X11 colors" from the CSS3 specification, along with their hexadecimal and decimal ...
Read more

CSS3 module: Color

Working draft to give CSS finer control of reproducibility and accuracy of colors. [Not final specification]
Read more

CSS Color Module Level 3

Deprecated. In addition to being able to assign color keyword values to text, backgrounds, etc., CSS2 allowed authors to specify colors in a ...
Read more

Ultimate CSS Gradient Generator -

Ultimate CSS Gradient Generator. ... many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, ...
Read more


A list of colour names in CSS. Home; Yellow; Cyan; Green; Red; Blue; Purple; Pink; Orange; Gray; White
Read more