HSLA Color System

Get two dark color and two light color of original color in hsla(h,s,l,a).

Hue

[hue]°

Colors are arranged in a circle of 360°.

Saturation

[saturation]%

How full of color should your color be? Zero is gray and 100% is full color

Lightness

[lightness]%

How bright should your color be? 0% is black and 100% is white.

Alpha

[alpha]

How transparent do you want your color to be? 1 = no transparency, 0 = fully transparent.
1 = fully opaque, 0 = not opaque.

USE AS CSS

.darkest {
    background-color: hsla([hue], [saturation]%, [Math.round(Math.max(lightness*.5, 0))]%, [alpha]);
}
.darker {
    background-color: hsla([hue], [saturation]%, [Math.round(Math.max(lightness*.8, 0))]%, [alpha]);
}
.color {
    background-color: hsla([hue], [saturation]%, [lightness]%, [alpha]);
}
.lighter {
    background-color: hsla([hue], [saturation]%, [Math.round(Math.min(lightness*1.2, 100))]%, [alpha]);
}
.lightest {
    background-color: hsla([hue], [saturation]%, [Math.round(Math.min(lightness*1.5, 100))]%, [alpha]);
}

This tool used under this Licence