TW Elements - HSLA colors. Free UI/UX design course

HSLA colours

Let's go back for a moment to the HSLA colour we used in our mask.

Note: 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 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.0) - fully transparent

hsla(0, 0%, 0%, 1.0) - fully opaque

Changing colour of the Mask

By manipulating hsla code you can change not only the intensity, but also the color itself.

You can even set a fancy gradient as a mask, but you need to use it as an inline CSS:

HTML:

<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 Colour Schemes Generator.