Define colors using the Hue-Saturation-Lightness-Alpha model (HSLA) with CSS

---

<p>To define colors using the Hue-Saturation-Lightness model (HSL) with Opacity, use the hsla() CSS method.</p><h2>Example</h2><p>You can try to run the following code to implement the hsla() function in CSS</p><p><a class="demo" href="http://tpcg.io/o6uODv" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;h1 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:hsl(0,100%,50%); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;h2 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:hsl(192,89%,48%); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;p { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:hsla(290,100%,50%,0.3); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Red Background&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Blue Background&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;This is demo text!&lt;/p&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Define colors using the Hue-Saturation-Lightness model (HSL) with CSS
• Define colors using the Red-Green-Blue-Alpha model (RGBA) with CSS
• Define colors using the Red-Green-Blue model (RGB) with CSS
• Define the CSS Box Model
• PyTorch – Randomly change the brightness, contrast, saturation and hue of an image
• Usage of hsla() CSS function
• CSS Alpha Channel filter
• Adjusting the Saturation of Images using CSS3
• Define skew transforms along with x axis using CSS
• Define skew transforms along with y axis using CSS
• Define a Cubic Bezier curve using CSS
• How to change bullet colors for lists with CSS?
• Convert the colors of the object to 256 shades of gray with CSS
• Applying Hue Rotation on Image using CSS3
• CSS3 HSLA color property