View source for CSS3/Color/HSLA

<div style='float: right;background: white;border:1px dashed black;padding: 1ex;margin-left: 1ex;'>

* [[CSS3/Color|Color]]
** [[CSS3/Color#.3Ccolor.3E_Values|<color> Values]]
***[[CSS3/Color/Basic_color_keywords|Basic color keywords]]
***[[CSS3/Color/RGB|RGB]]
***[[CSS3/Color/RGBA|RGBA]]
***[[CSS3/Color/transparent|transparent]]
***[[CSS3/Color/HSL|HSL]]
***[[CSS3/Color/HSLA|HSLA]]
***[[CSS3/Color/Extended_color_keywords|Extended color keywords]]
***[[CSS3/Color/currentColor|currentColor]]

</div>

= HSLA(Hue-Saturation-Lightness-Alpha) =
Just as the ‘rgb()’ functional notation has the ‘rgba()’ alpha counterpart, the ‘hsl()’ functional notation has the ‘hsla()’ alpha counterpart.


== The format of the HSL Value ==

*<code>hsla(H,S,L,A)</code><br />The format of an HSLA color value in the functional notation is ‘hsla(’ followed by the hue in degrees, saturation and lightness as a percentage, and an [[CSS3/Color/opacity#alphavalue|<alphavalue>]], followed by ‘)’. White space characters are allowed around the numerical values. 


== Example ==
<table class="filehistory" style="line-height: 1.5em;">
  <tr>
    <th>Alpha</th><th>hsla(H,S,L,A)</th><th>Color</th><th>&nbsp;</th>
  </tr>
  <tr>
    <td>0.0</td><td>hsla(0, 100%, 50%, 0.0)</td><td style="background-color: hsla(0, 100%, 50%, 0.0);">&nbsp;</td><td>fully transparent</td>
  </tr>
  <tr>
    <td>0.2</td><td>hsla(0, 100%, 50%, 0.2)</td><td style="background-color: hsla(0, 100%, 50%, 0.2);">&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
    <td>0.4</td><td>hsla(0, 100%, 50%, 0.4)</td><td style="background-color: hsla(0, 100%, 50%, 0.4);">&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
    <td>0.6</td><td>hsla(0, 100%, 50%, 0.6)</td><td style="background-color: hsla(0, 100%, 50%, 0.6);">&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
    <td>0.8</td><td>hsla(0, 100%, 50%, 0.8)</td><td style="background-color: hsla(0, 100%, 50%, 0.8);">&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
    <td>1.0</td><td>hsla(0, 100%, 50%, 1.0)</td><td style="background-color: hsla(0, 100%, 50%, 1.0);">&nbsp;</td><td>fully opaque</td>
  </tr>
</table>


== CSS Reference ==
The CSS Color Module Level 3 specification defines the HSLA color values in [http://www.w3.org/TR/css3-color/#hsla-color 4.2.5. HSLA color values].