Scribd
Upload
26 views7 pages

HSL Color HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views7 pages

HSL Color HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML HSL and HSLA Colors

❮ PreviousNext ❯

HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values


In HTML, a color can be specified using hue, saturation, and lightness (HSL) in
the form:

hsl(hue, saturation, lightness)


Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the


full color.

Lightness is also a percentage value. 0% is black, and 100% is white.

Experiment by mixing the HSL values below:

hsl(0, 100%, 50%)

HUE

SATURATION

100%
LIGHTNESS

50%
Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)


Try it Yourself »

Saturation
Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray.

50% is 50% gray, but you can still see the color.

0% is completely gray; you can no longer see the color.


Example

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)


Try it Yourself »

ADVERTISEMENT

Lightness
The lightness of a color can be described as how much light you want to give
the color, where 0% means no light (black), 50% means 50% light (neither dark
nor light), and 100% means full lightness (white).

Example
hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)


Try it Yourself »

Shades of Gray
Shades of gray are often defined by setting the hue and saturation to 0, and
adjusting the lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 20%)


hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)


Try it Yourself »

HSLA Color Values


HSLA color values are an extension of HSL color values, with an Alpha channel -
which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):

Experiment by mixing the HSLA values below:

hsla(0, 100%, 50%, 0.5)


HUE

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5
Example

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)


Try it Yourself »
Exercise?
Which one of the follwoing color values will reult in a black color?

hsl(0, 100%, 0%)

hsl(0, 0, 100%)

hsl(0, 100%, 100%)

You might also like