Marusya's School Notes

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - the alpha parameter defines the opacity for a color. The syntax to for 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 (fully opaque):

HTML file:	Displayed by browser:
<body> <h3>By changing only the alpha:</h3> <div style="background: hsla(0, 100%, 50%, 0.0);">This is hsla (0, 100%, 50%, 0.0);</div> <div style="background: hsla(0, 100%, 50%, 0.1);">This is hsla (0, 100%, 50%, 0.1);</div> <div style="background: hsla(0, 100%, 50%, 0.2);">This is hsla (0, 100%, 50%, 0.2);</div> <div style="background: hsla(0, 100%, 50%, 0.3);">This is hsla (0, 100%, 50%, 0.3);</div> <div style="background: hsla(0, 100%, 50%, 0.4);">This is hsla (0, 100%, 50%, 0.4);</div> <div style="background: hsla(0, 100%, 50%, 0.5);">This is hsla (0, 100%, 50%, 0.5);</div> <div style="background: hsla(0, 100%, 50%, 0.6);">This is hsla (0, 100%, 50%, 0.6);</div> <div style="background: hsla(0, 100%, 50%, 0.7);">This is hsla (0, 100%, 50%, 0.7);</div> <div style="background: hsla(0, 100%, 50%, 0.8);">This is hsla (0, 100%, 50%, 0.8);</div> <div style="background: hsla(0, 100%, 50%, 0.9);">This is hsla (0, 100%, 50%, 0.9);</div> <div style="background: hsla(0, 100%, 50%, 1.0);">This is hsla (0, 100%, 50%, 1.0);</div> <h3>By changing only the hue with the alpha set to 0.3:</h3> <div style="background: hsla(60, 100%, 50%, 0.3);">This is hsla (60, 100%, 50%, 0.3);</div> <div style="background: hsla(120, 100%, 50%, 0.3);">This is hsla (120, 100%, 50%, 0.3);</div> <div style="background: hsla(180, 100%, 50%, 0.3);">This is hsla (180, 100%, 50%, 0.3);</div> <div style="background: hsla(235, 100%, 50%, 0.3);">This is hsla (235, 100%, 50%, 0.3);</div> <div style="background: hsla(290, 100%, 50%, 0.3);">This is hsla (290, 100%, 50%, 0.3);</div> <div style="background: hsla(340, 100%, 50%, 0.3);">This is hsla (340, 100%, 50%, 0.3);</div> </body>	By changing only the alpha: This is hsla (0, 100%, 50%, 0.0); This is hsla (0, 100%, 50%, 0.1); This is hsla (0, 100%, 50%, 0.2); This is hsla (0, 100%, 50%, 0.3); This is hsla (0, 100%, 50%, 0.4); This is hsla (0, 100%, 50%, 0.5); This is hsla (0, 100%, 50%, 0.6); This is hsla (0, 100%, 50%, 0.7); This is hsla (0, 100%, 50%, 0.8); This is hsla (0, 100%, 50%, 0.9); This is hsla (0, 100%, 50%, 1.0); By changing only the hue with the alpha set to 0.3: This is hsla (60, 100%, 50%, 0.3); This is hsla (120, 100%, 50%, 0.3); This is hsla (180, 100%, 50%, 0.3); This is hsla (235, 100%, 50%, 0.3); This is hsla (290, 100%, 50%, 0.3); This is hsla (340, 100%, 50%, 0.3);

HTML file:

Displayed by browser:

<body>
<h3>By changing only the alpha:</h3>

<div style="background: hsla(0, 100%, 50%, 0.0);">This is hsla (0, 100%, 50%, 0.0);</div>
<div style="background: hsla(0, 100%, 50%, 0.1);">This is hsla (0, 100%, 50%, 0.1);</div>
<div style="background: hsla(0, 100%, 50%, 0.2);">This is hsla (0, 100%, 50%, 0.2);</div>
<div style="background: hsla(0, 100%, 50%, 0.3);">This is hsla (0, 100%, 50%, 0.3);</div>
<div style="background: hsla(0, 100%, 50%, 0.4);">This is hsla (0, 100%, 50%, 0.4);</div>
<div style="background: hsla(0, 100%, 50%, 0.5);">This is hsla (0, 100%, 50%, 0.5);</div>
<div style="background: hsla(0, 100%, 50%, 0.6);">This is hsla (0, 100%, 50%, 0.6);</div>
<div style="background: hsla(0, 100%, 50%, 0.7);">This is hsla (0, 100%, 50%, 0.7);</div>
<div style="background: hsla(0, 100%, 50%, 0.8);">This is hsla (0, 100%, 50%, 0.8);</div>
<div style="background: hsla(0, 100%, 50%, 0.9);">This is hsla (0, 100%, 50%, 0.9);</div>
<div style="background: hsla(0, 100%, 50%, 1.0);">This is hsla (0, 100%, 50%, 1.0);</div>

<h3>By changing only the hue with the alpha set to 0.3:</h3>

<div style="background: hsla(60, 100%, 50%, 0.3);">This is hsla (60, 100%, 50%, 0.3);</div>
<div style="background: hsla(120, 100%, 50%, 0.3);">This is hsla (120, 100%, 50%, 0.3);</div>
<div style="background: hsla(180, 100%, 50%, 0.3);">This is hsla (180, 100%, 50%, 0.3);</div>
<div style="background: hsla(235, 100%, 50%, 0.3);">This is hsla (235, 100%, 50%, 0.3);</div>
<div style="background: hsla(290, 100%, 50%, 0.3);">This is hsla (290, 100%, 50%, 0.3);</div>
<div style="background: hsla(340, 100%, 50%, 0.3);">This is hsla (340, 100%, 50%, 0.3);</div>
</body>

By changing only the alpha:

This is hsla (0, 100%, 50%, 0.0);

This is hsla (0, 100%, 50%, 0.1);

This is hsla (0, 100%, 50%, 0.2);

This is hsla (0, 100%, 50%, 0.3);

This is hsla (0, 100%, 50%, 0.4);

This is hsla (0, 100%, 50%, 0.5);

This is hsla (0, 100%, 50%, 0.6);

This is hsla (0, 100%, 50%, 0.7);

This is hsla (0, 100%, 50%, 0.8);

This is hsla (0, 100%, 50%, 0.9);

This is hsla (0, 100%, 50%, 1.0);

By changing only the hue with the alpha set to 0.3:

This is hsla (60, 100%, 50%, 0.3);

This is hsla (120, 100%, 50%, 0.3);

This is hsla (180, 100%, 50%, 0.3);

This is hsla (235, 100%, 50%, 0.3);

This is hsla (290, 100%, 50%, 0.3);

This is hsla (340, 100%, 50%, 0.3);