A WebStorm live template to generate CSS variables for a color definition with hsla() function

webstorm-live-template-hsla-color.css

--color-$name$-h: $h$;
--color-$name$-s: $s$;
--color-$name$-l: $l$;
--color-$name$-hsl: var(--color-$name$-h), var(--color-$name$-s), var(--color-$name$-l);
--color-$name$: hsl(var(--color-$name$-hsl));
$END$

How to add live template: https://www.jetbrains.com/help/webstorm/creating-and-editing-live-templates.html

The template above requires this list of variables:

Edit Template Variables

Name	Expression	Default value	Skip if defined
name		"name"
h		"0"
s		"100%"
l			"50%"

Bind the template to CSS files > Declaration block (context)