Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS hsla() Function

The hsla function returns a color based on hue, saturation, lightness, and alpha.

The alpha value specifies the color's opacity or transparency.

This function can be used by any property that requires a color value.

Example

#

An element with a background color calculated by the hsla function.

An hsla background color
<style>
  .hsla-example {
    padding: 30px;
    background-color: hsla(9, 65%, 90%, 50%);
  }
</style>

<div class="hsla-example">An hsla background color</div>

Syntax

hsla(hue, saturation, lightness, alpha);

Values

#

Value Description
hue An angle in the color wheel; 0 or 360 represents red, 120 is green, 240 is blue.
saturation Color saturation; 0% is a shade of gray and 100% is full color.
lightness Color lightness; 0% is dark, 50% is normal, and 100% is light.
alpha Color opacity or transparency between 0 (transparent) to 1 (opaque).

Browser support

This table shows when hsla support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
9.0 Mar 2011
Opera
9.5 Jun 2008
Safari
3.1 Mar 2008

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides