HSLA colors
Let's go back for a moment to the HSLA color we used in our mask.
In fact, we could use color in any format. HEXA or RGBA color will work just as well. However, I recommend that you always use HSLA colors, because it is the easiest to adjust them when creating a design. We will learn more about this in future lessons.
HSLA stands for Hue, Saturation, Lightness, and Alpha. It is a way to represent colors in CSS.
-
Hue (H): This is a degree on the color wheel from 0 to 360. 0 (or 360) is red, 120 is green, and 240 is blue. So, you can select a base color by moving around the color wheel.
-
Saturation (S): This is a percentage value, 0% means a shade of gray (no color - achromatic), and 100% is the full color.
-
Lightness (L): Also a percentage; 0% lightness is black, 100% lightness is white, and 50% lightness is "normal."
-
Alpha (A): This is an optional parameter that defines the opacity of the color. It's a number between 0.0 (completely transparent) and 1.0 (completely opaque).
Pay particular attention to the 4. point - the last hsla color parameter
defines opacity. By manipulating it, you can increase or decrease the
intensity of the color and thus the
0.6, but if you increase it, for example,
0.9 becomes very dark, and up to 0.1 it becomes
very light.
hsla(0, 0%, 0%, 0.1)
hsla(0, 0%, 0%, 0.9)
hsla(0, 0%, 0%, 0.0) - fully transparent
hsla(0, 0%, 0%, 1.0) - fully opaque
Changing color of the mask
By manipulating hsla code you can change not only the
intensity, but also the color itself.
hsla(217, 88%, 50%, 0.6)
hsla(277, 98%, 61%, 0.6)
hsla(144, 100%, 35%, 0.6)
hsla(350, 94%, 58%, 0.6)
hsla(0, 0%, 98%, 0.6)
hsla(195, 83%, 61%, 0.6)
You can even set a fancy gradient as a mask, but you need to use it as an inline CSS:
<div
class="relative w-full overflow-hidden rounded-lg bg-cover bg-no-repeat">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background: linear-gradient(
45deg,
hsla(169, 84.5%, 52%, 0.7),
hsla(263, 87.7%, 44.7%, 0.7) 100%
);
"></div>
</div>
Note: You can easily transform a HEX or RGB color to HSL or vice versa with our Color Schemes Generator.
About author
Michal Szymanski
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.