By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HSLA Colors

HSLA is a way to write colors that includes an alpha channel in HTML and CSS.

Edited: 2012-02-05 04:39

HSLA stands for Hue, Saturation and Lightness, alpha and is similar to HSL, only it allows the inclusion of an alpha channel. The alpha channel allows to create transparent colors, this is useful when you want a background of an element to be transparent, but not the children of the element.

Transparent colors have many other uses, but one of the main features, is that it avoids the problems caused by using the CSS opacity property.

Possible Values

HSLA takes four values, the first is the Hue, the second is the Saturation, the third is the Lightness, and the fourth is the Alpha. The Hue should be given in degrees, and the Saturation, the Lightness in percentages, and the Alpha in a numeric value between 0 and 1.

HueAccepts a numeric value 0-360. Values beyond that will wrap, so a negative value of -60 will be the same as a value of 300.
SaturationTakes a value from 0% to 100%. A value of 0% creates a gray shade.
LightnessTakes a value from 0% to 100%. A 0% lightness is black, while a 100% lightness is white, and 50% is normal.
AlphaTakes a value from 0 to 1. A value of 0.5 is equal to 50% transparent.

HSLA Example

The code used in the above example is shown below:

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: hsla(240, 100%, 50%, 0.5);width: 150px;height: 150px;top: 25px;left: 25px;">
  </div>
</div>

Brugbart Vision!

See also

  1. Colors in HTML and CSS
  2. RGBA Colors