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

CSSWeb DevelopmentFront End Technology

<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="" 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>
Updated on 06-Jul-2020 08:23:59