If have often met frustration when using CSS variables when I need to make variations of colours. Especially when trying to add a semi-transparent version of a colour I already have defined in my variables. The most common solution is to defined a variable with the alpha value.
:root {
--primary: hsl(55, 92%, 95%);
--primary-transparent: hsla(55, 92%, 95%, 0.5);
}
.my-class {
background: var(--primary);
}
.overlay {
background: var(--primary-transparent);
}
This works, but it can be difficult at scale. If the one colour changes, then we need to update the hsl values in two places. As a nifty alternative, you can define just the values in your variale and then use the variable within your CSS colour function.
:root {
--primary: 55, 92%, 95%;
}
.my-class {
background: hsl(var(--primary));
}
.overlay {
background: hsla(var(--primary), 0.5);
}
This is especially amazing when using colours for gradients or overlays. You simply define the base colour and then modify the alpha as needed.
:root {
--primary: 55, 92%, 95%;
}
.gradient {
background: linear-gradient(
to bottom,
hsla(var(--primary), 0.5) 0%,
hsla(var(--primary), 0.7) 40%,
hsla(var(--primary), 0.9) 100%
);
}