It is true that Ui/Ux designers don't care much about the struggle FrontEnd devs or Ui integrators face when they code their dreamy designs. As a Ui/Ux designer I confirm but we are learning and trying to improve.

Colors handling, one of the main problems from the list

Recently I started working on a project where I had to implement my own designs. Regardless of the fact that Sass can store all your color variables, but how many colors do you have to store?

What Are Hex/RGB Colors?

The hexadecimal way, is a 6 digit HEX number of three colors represented by two of these digits. We can add another two numbers at the end for the opacity. Also there's the Decimal RGB way which is based on the combination of its three colors and works as a function rgb() unlike the HEX (string).

Here's an example of the white color as HEX & rgb

.white {
color: #ffffff; //HEX
color: rgb(255, 255, 255); //RGB()
}

Then where is the problem with RGB & HEX?

Working with colors that are based on color combinations isn't intuitive, this is not how our mind sees colors. We don't break each colors to three combinations to understand it. Therefore writing our colors this way won't make it easier for us to understand it.

Another potential challenge is maintenance. Sometimes you may need so many color variables especially for all these hover/clicked (dark, light) color shades you have to use. Also, it takes a lot of time to tab between windows to copy past all the hex colors.

The HSL == Hue, Saturation, Lightness

The HSL/HSLA to the Rescue! HSL stands for hue, saturation, and lightness.
HSL works in the same way our brain perceives colors: a color that we can manipulate with lightness and saturation.

In CSS, an HSL color can be expressed using the hsl() function:

color: hsl(33, 80%, 50%);

The first parameter is the hue value, the second parameter is the saturation value, and the third is the lightness value. The function also has another variation: hsla(), which takes the same parameters, with an addition fourth parameter that controls the opacity of the color.

Hue, for our purpose, basically means colour, and starts with red at 0°. Green sits at 120°, and Blue at 270°. The degress indicate the position of the colour on the wheel. You need not add the degree symbol while writing it in CSS.

The best way to understand HSL if you’re not familiar with it is to consult a color wheel.

Saturation specifies the intensity or purity of the chosen colour. This is a percentage scale, from 0% to 100%. 0% means the chosen colour is completely desaturated, and outputs a dull grey, meaning our colour isn’t present in the mix at all. 100% saturation is the chosen colour in its purest form.

Lightness represents the brightness of the chosen colour. Again, like saturation, this is also a percentage scale. 0% lightness is complete darkness, meaning full black. 100% lightness is blinding light, which is pure white.

A Simple Button Using HSL

I won't dive in much into the details how each method works but how you can make the best of it.
First we will make a simple button

$main-colour: hsl(227, 100%, 59%);

/* Base Button*/

.xbtn {
  background-color: black;
  padding: 10px 30px;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  &:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
}

/* Button Style */

.xbtn-main-color {
  background-color: $main-colour;
  color: white;
}

In order to add a hover effect on the button, simply all what you have to do is increase  the value of lightness in your HSL.
To make it automatically, I made a simple function xhover() that gets two values ($colour, $value)

@function xhover($colour, $value) {
  $colour-hue: hue($colour);
  $colour-sat: saturation($colour);
  $colour-light: lightness($colour);

  $color-hover: hsl($colour-hue, $colour-sat, $colour-light + $value);
  
  @return $color-hover;
}

This function takes the color and breaks it to hue, saturation, & lightness, in case your already have your variables set to HEX, you can easily convert them using this function.

After breaking your color to HSL, you can easily change the value of lightness $color-hover: hsl($colour-hue, $colour-sat, $colour-light + $value)

$main-colour: hsl(227, 100%, 59%);

@function xhover($colour, $value) {
  $colour-hue: hue($colour);
  $colour-sat: saturation($colour);
  $colour-light: lightness($colour);

  $color-hover: hsl($colour-hue, $colour-sat, $colour-light + $value);
  
  @return $color-hover;
}

@function xactive($colour, $value) {
  $colour-hue: hue($colour);
  $colour-sat: saturation($colour);
  $colour-light: lightness($colour);

  $color-hover: hsl($colour-hue, $colour-sat, $colour-light - $value);
  
  @return $color-hover;
}

.xbtn {
  background-color: black;
  padding: 10px 30px;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  &:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
}
  .xbtn-main-color {
    background-color: $main-colour;
    color: white;
    &:hover {
     background-color: xhover($main-colour, 10);
    }
    &:active {
      background-color: xactive($main-colour, 10);
    }
  }

You can do the same for click event by subtracting from the lightness value to make it darker
Check this fiddle for full demo

If you have any tips or something to fix, help with don't hesitate to leave it in the comment!

Thank you, for reading 🙏