Skip to main content
Equinusocio
June 22, 2023

Add way to change opacity for color variables alias, fills, strokes, etc

  • June 22, 2023
  • 158 replies
  • 17892 views

When aliasing a color variable to another (img 1), or using it directly on an element (img 2), we should be able to override the opacity without the need to create a variable for each transparency variation:

Cant override opacity in the alias:

CleanShot 2023-06-22 at 10.09.00

Example 2

Cant override the fill opacity:

158 replies

Recep_Kutuk
New Participant
April 17, 2025

+1 This would be a very valuable feature for design system  management!

Recep_Kutuk
New Participant
April 24, 2025

+1 to any suggestion that involves breaking the link between color and opacity.

Melanie_Sorensen1
New Member
April 28, 2025

This is needed for Angular 19 Material components.

Lee_Beth_Kilgore
New Member
May 2, 2025

following… me three (hundred) 🙋🏼

Uhl
Active Member
May 7, 2025

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

Alice_Holm
Active Member
May 27, 2025

+1 This is much needed

Sharon_Taylor
New Member
May 31, 2025

+1 this - definitely need this for the color system

Chris_Gatland
New Participant
June 9, 2025

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

Alex_Karoza
New Member
June 20, 2025

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.

schoon
New Member
July 14, 2025

+1 Also needing this feature