color

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+

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

  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

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), which is represented by a color wheel. Ranges from 0 to 360 which both times is red. 120 is green, 240 is blue – so yellow is at 60, cyan at 180 and magenta at 300.
  • 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.
Example
Inspect me!?

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.
Example
Inspect me!?

80% opaque, 50% saturated red

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

  • 1 Color value of 349.
  • 2 50% saturation (67% in Photoshop).
  • 3 50% lightness (75% in Photoshop).
  • 4 80% opaque.
Example
Inspect me!?

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+

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

  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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+

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

  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

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.
Example
Inspect me!?

Examples

60% opaque element

opacity: 1 0.6

  • 1 The element is 60% opaque.
Example
Inspect me!?

Further reading

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

x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • http://www.backpack-hiking-backpacking.info salomon mens hiking

    I nosing about the web, doing a search on salomon mens hiking on Bing Wednesday, and I found your site del.icio.us poetry. Really liked it. websurfer@wrs-web.com

    • http://www.css3files.com Christian Krammer

      These must be the coincidences of life … :) Glad that you found css3files.com.

  • http://fiendishmasterplan.com/ Chad Lundgren

    Hi Christian,

    I noticed a typo in the hsla description. Hue for both hsl and hsla accepts up to 360 (which is synonymous with 0).

    http://www.w3.org/TR/css3-color/#hsl-color

    • http://www.css3files.com Christian Krammer

      Thank you for the tip Chad! I oriented too much on Photoshop instead of looking at the specs, sorry.

  • http://jostephenson21.tripod.com/ Alicante Airport

    I think you will want to add a twitter icon to your blog. I just bookmarked this url, but I had to complete it by hand. Simply my 2 cents.

    • http://www.css3files.com Christian Krammer

      What exactly do you mean? I have a general Twitter icon at the top of the page and a specific for very page/post at the bottom.

  • http://www.devoth.com Łukasz Mazurek

    Hi Christian,

    Very useful reference, adding this to my bookmarks!

    I wrote a simple color calculator that helps with converting hex to rgb(a), hope you’ll find it useful. It generates CSS 3 ready code:
    http://hex2rgba.devoth.com

    Cheers

    • http://www.css3files.com Christian Krammer

      Great tool you have, Łukasz. It will surely be helpful at writing color values.

  • Hikaru Harada

    Hello, Christian. Thanks to Very Cool reference!
    You made my day. :-)

  • mukesh dutt

    thnks for description about css3 properties…