hsla

Extends the hsl (hue, saturation, lightness) color model to include an alpha (opacity) value which determines how translucent it is.

Compatibility

hsla(H,S,L,a) Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+ iOS 3.2+ Android 2.1+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 3.2+Android 2.1+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

Can be used anywhere where color values are possible like background, border or color. Functions almost different than in Photoshop. The given example corresponds to a 30% opaque yellow.

background: hsla(1 56, 2 100%, 3 50%, 4 0.3)

  1. The color value (hue). Ranges from 0 to 360 which both times is red.
  2. The saturation of the color. Ranges from 0% to 100% where 0% is the fully desaturated color thus 50% grey. 100% represents the fully saturated color.
  3. The lightness of the color. Also ranges from 0% to 100%. Only 50% represents the real color value set at 1. More than 50% is a lighter tint, less is a darker tint. So in contrast to Photoshop 100% is not the real color value but pure white. 0% is black here and there however. The given example would be 100% in Photoshop.
  4. The alpha value. 0 stands for fully transparent and 1 for opaque (solid). The zero before the comma can be omitted.

Examples

70% opaque, white tinted green

background: hsla(1 120, 2 100%, 3 75%, 4 0.7)

1 Color value of 120. 2 100% saturation. Would be 50% in Photoshop. 3 75% lightness (100% in Photoshop). 4 70% opaque.

80% opaque, 50% saturated red

background: hsla(1 349, 2 50%, 3 50%, 4 0.8)

1 Color value of 3 49.250% saturation (67% in Photoshop).3 50% lightness (75% in Photoshop).4 80% opaque.

Further reading

For more info see the W3C site and the site at MDN (including compatibility info for older browser versions).

rgba

Extends the rgb (red, green, blue) color model to include an alpha (opacity) value which determines how translucent it is.

Compatibility

rgba(R,G,B,a) Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+ iOS 3.2+ Android 2.1+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 3.2+Android 2.1+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

Can be used anywhere where color values are possible like background, border or color. The given example corresponds to 50% transparent violet.

background: rgba(1 98, 2 33, 3 129, 4 0.5)

  1. The color value of red. 0 stands for 0% and 255 for 100% addition of red.
  2. The color value of green. 0 stands for 0% and 255 for 100% addition of green.
  3. The color value of blue. 0 stands for 0% and 255 for 100% addition of blue.
  4. The alpha value. 0 stands for fully transparent and 1 for opaque (solid). The zero before the comma can be omitted.

Examples

20% opaque orange

background: rgba(1 255, 2 127, 3 0, 4 0.2)

1 100% red. 2 50% green. 3 0% blue. 4 20% opaque.

80% opaque blue given in percentages

The percent sign must not be omitted if 0.

background: rgba(1 0%, 2 0%, 3 100%, 4 0.8)

1 0% red. 2 0% green. 3 100% blue. 4 80% opaque.

Further reading

For more info see the W3C site and the site at MDN (including compatibility info for older browser versions).

opacity

Sets the transparency of an element, that is how much the background shines through. In contrast to rgba it changes the transparency of the whole element instead of just the color.

Compatibility

opacity Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+ iOS 3.2+ Android 2.1+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 3.2+Android 2.1+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

opacity: 1 0.1

1 Sets the element to an opacity of 0.1 (10%). 0 stands for fully transparent and 1 for opaque (solid). The zero before the comma can be omitted.

Examples

60% opaque element

opacity: 1 0.6

1 The element is 60% opaque.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).