+1 This would be a very valuable feature for design system management!
+1 to any suggestion that involves breaking the link between color and opacity.
This is needed for Angular 19 Material components.
following… me three (hundred) 🙋🏼
+1 Just started using variables and while they’re great, it feels incomplete without this. Any solid color system needs to support defining variants relative to a base color.
+1 This is much needed
+1 this - definitely need this for the color system
+1 from me. Not having separation of transparency and colour variables is going to cause me lots of extra work, and will result in a messy design system that’s hard to manage.
Or even better, allow modification of any values based on the original variable.
For example, changing Hue in HSL or Alpha in CSS.
With LAB+LCH/OKLCH color systems supporting updates, it will be HUGE!
It can change the way people think about color.
For other variables, it will also be beneficial; for example, to dynamically align inner and outer border radii.
+1 Also needing this feature
Does anyone have any sort of workaround? Most of my components use a background color on the base frame. I would have to rebuild my entire design system, or 10x the number of variables I have while losing the ability to reference the root color. How is this not addressed or supported?
+1 - Would love to have tokens for opacity independent of tokens for color
+1. It would allow for so much more flexibility. Would be amazing to be able to pair set opacity tokens WITH color tokens
+1
Need this ASAP.
Any news about this? Still desperately need this!
FYI 😊
+1 here. We just started using variables for color while merging/simplifying color themes. Looking and not finding that feature was kind of a let down. :)
Same issue.
The only workaround I could find was to create a gradient of the same variable and then it lets you add opacity to it. But that’s still not a viable solution. It’s been over a year since the first request was posted. Please can we add opacity to a variable!
Screenshot 1: Gradient fill with opacity applied
Screenshot 2: Gradient setup using the same variable added twice
So, it’s happening finally ???
For all ppl out there apparently you can make a Linear gradient with the same color and them add a transparency on the side panel :P
For all ppl out there apparently you can make a Linear gradient with the same color and them add a transparency on the side panel :P
But what’s the point? Consider this: The most convenient use case (for me at least) is selecting a component and clicking on “Selection colors” option to change necessary colors easily. There’s no work around to enable this.
Any updates on this? The absence of this feature is messing with my projects for over 2 years now.
Hey @Henrik_Andersen, thanks for the feedback!
@Alok is correct that this is currently expected behavior. I updated your topic for clarity, and we’ll pass this onto our team for future improvement.
Be sure to also vote up top! ☝️ Our teams use votes to gauge overall interest and prioritize.
For all ppl out there apparently you can make a Linear gradient with the same color and them add a transparency on the side panel :P
I’m using this work around for a few small edge cases - thanks for pointing it out.
I cannot wait for a future where I can build a cascading color system that let’s me change the root values and everything just adapts.
Kinda insane we’re still here asking for this in 2026.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
