How to use HSLA Values In CSS
Using HSLA values involves specifying colors in the HSL (Hue, Saturation, Lightness) color model with an additional alpha channel for adjusting opacity, providing flexibility for color adjustments in the HSL color space.
Syntax:
:root {
--customColor: hsla(0, 100%, 50%, 0.5); /* Hue: 0 (red), Saturation: 100%, Lightness: 50%, 50% opacity */
}
.element {
background-color: var(--customColor);
}
Example: Illustration of the opacity to a color variable in CSS by using the HSLA.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RGBA Example</title> <style> :root { --myColor: hsla(120, 100%, 50%, 0.5); --myColor2: hsla(295, 100%, 50%, 0.5); } body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; } .colored-box { width: 600px; height: 400px; background-color: rgb(0, 255, 34); display: flex; align-items: center; justify-content: center; } .colored-box:hover { background-color: var(--myColor); } .inside-box { width: 200px; height: 200px; background-color: rgb(255, 0, 234); } .inside-box:hover { background-color: var(--myColor2); } </style></head><body> <div class="colored-box"> <div class="inside-box"></div> </div></body></html> |
Output:
How to Apply Opacity to a Color Variable in CSS ?
To adjust opacity, we can use RGBA (Red, Green, Blue, Alpha) or HSLA (Hue, Saturation, Lightness, Alpha) values. By defining a color variable with an alpha value, we can dynamically control the transparency of elements in our stylesheets. Opacity is the attribute that controls the transparency of an element.
Table of Content
- Using RGBA Values
- Using HSLA Values
- Using Opacity Property