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