Colors can make or break a design, there are many ways to go about creating palettes and all that good stuff.
Let's take a look at HSL(a) and RGB(a).
The hsl() and hsla() CSS functional notations set the color in HSL/HSLa formats, and they look like this:
background-color: hsl(10, 20%, 30%); background-color: hsla(10, 20%, 30%, .5);
HSL stands for Hue, Saturation, and Lightness (or Luminance). The a stands for Alpha, which is the alpha channel, with which we declare the transparency of the color.
The hsl() function supports three or four values separated by commas. The first value is the hue, which is the base color. This is declared with a unitless number. This number represents an angle in degrees (10 = 10º) in the color wheel from 0 to 360. So, 0 and 360 are Red, 90 is Yellow-Green, 180 is Cyan, and 270 is Blue-Magenta.
The second value is the saturation, which is basically the amount of the base color. This is declared with a percentage value. 0% means there...