10 : Color and Opacity


  • Figure 10-1: The effect of differing opacity values on three identical elements.
  • Figure 10-2: Comparing opacity and RGBA.
  • Figure 10-3: RGBA applied to different properties.
  • Figure 10-5: A demonstration of the currentColor color value keyword.

Browser Support

Chrome Firefox Safari IE
opacity Yes Yes Yes Yes
RGBA values Yes Yes Yes Yes
HSL values Yes Yes Yes Yes
HSLA values Yes Yes Yes Yes
currentColor value Yes Yes Yes Yes

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.