HSLA Colors – CSS3

As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value, which sets the Opacity (via the Alpha channel) of the element.

At the time of writing, only Safari 3 and the Firefox 3 beta support the HSLA style of color declaration.

An example:

 

<div style="background-color: hsla(0,100%,50%,0.2);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></div> <div style="background-color: hsla(0,100%,50%,0.6);"></div> <div style="background-color: hsla(0,100%,50%,0.8);"></div> <div style="background-color: hsla(0,100%,50%,1);"></div>

 

<div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(246,143,142);"></div> <div style="background-color: rgb(249,95,94);"></div> <div style="background-color: rgb(252,47,47);"></div> <div style="background-color: rgb(255,0,0);"></div>

A fuller explanation of HSLA colors can be found in the W3C CSS3 Color Candidate Recommendation.

Advertisements
Comments
  1. HSLA Colors CSS3 is very useful tip for Web Designing. i am following your blog mishilpatel.wordpress.com.
    you have very good tutorial for css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s