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.

  1. 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.

  2. Saturation (S): This is a percentage value, 0% means a shade of gray (no color - achromatic), and 100% is the full color.

  3. Lightness (L): Also a percentage; 0% lightness is black, 100% lightness is white, and 50% lightness is "normal."

  4. 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 The closer to 1, the darker it is, and the closer to 0, the brighter. Now it's 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:

Note: You can easily transform a HEX or RGB color to HSL or vice versa with our Color Schemes Generator.

John Doe

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.