Is there any way to use a “Color Style” in a gradient? I know I can make a “Color Style” that is a gradient, but I want to create a solid color that can be used both in solid fills and gradient fills.
7 Likes
Ive noticed this issue has been closed and wondered if there has been a solution or new tool I’m not aware of.
The original issue…
Need:
Figma doesn’t allow to use of color styles for gradients. this is very non-scalable and creates issues when the user wants to bulk change the color of gradients.
Proposal:
Give an option to create a gradient-based on color styles and the option to see and alter the colors from outside of the element your selecting (from the “Selection Colors” section
I would also find this very beneficial .
Continuing the discussion from Create gradients based on color styles:
6 Likes
Hey @Martin_Hill, unfortunately - no solution yet 
. The only solution is to create a color style from a gradient but that cause a lot of limitations on using the gradients
1 Like
Thats a shame 
Any ideas how we can get this up voted.
@Martin_Hill I think the only way is to post it on different forums
1 Like
Just, so not closing the circle on a design system
Not only that, but color styles should be nestable. For an example: I can create a color style that uses multiple colors. One base color and one darken color on 20% opacity. That would be wonderful to automatically make darker/lighter shades of my primary color.
Gradients are similar to this since they are colors composed by other colors and I’d love to have a gradient with my primary to secondary for an example.
2 Likes
This would save so much time and should make design systems more complete…
I do think it would be really helpful, as the way we create gradients today is basically using hex-codes from the colors that we already use in our palette. Would also propose to add gradients with more options, that can be used as a style. Would love to enter where color 1, 2, 3 etc. is placed (in % - like illustrator) as well as gradient rotation (in deg).
6 Likes
Using color stops and toggling between hex, HSB, RGB, HSL, etc. is really clunky… it would be so much faster to create gradients if we could use saved color styles. Please make this happen, Figma!
Also it causes messiness when selecting a frame and viewing the “selected colors” panel in the right sidebar. Seeing all of these un-saved colors being used is counter productive to using a design system.
Every few months I come back to the forum hoping there’s been movement on this issue but still nothing. Has there been any official response from a Figma team member? This is a really annoying issue that has such a straight-forward solution, I can’t believe it still hasn’t been resolved.
1 Like
I’m very surprised too that gradients based on color styles are still not implemented.
Every time we change a style color we have to go through hundreds of gradients manually to change them. This is such a no-go for a professional tool and I really hope this is going to be implemented soon.
1 Like
Would be great to implement this. It would solve the problem of gradient colors not being able to be editable globally and also make the initial selection much easier
The color picker is in even a worse situation considering this request. The predefined color styles are hidden under the “library” tab with the latest update, and are unavailable when applying a gradient. So, let’s say you want to create a gradient that’s made of two color styles, you first have to create two rectangles filled with the desired colors in your design system and you have to use the color picker on these rectangles to create your gradient.
Since Figma is now focusing on the developers side, I will try to define what’s needed, in terms of CSS (and a little bit of SCSS)
:root {
--color-1: #ff0000;
--color-2: #0000ff;
}
Let’s say these are the colors in our design system. everything else will be defined by these variables and will automatically change when these values change.
.foo {
background: linear-gradient(to bottom, var(--color-1), rgba(var(--color-2), 0.5));
}
Which should look like:
And in the color picker,
-
if we want to use a custom color it can be like this:
-
if we want to use a color style from the library, it can be like this:
Please think about this 
15 Likes
Keeping this alive because I thought this would be a fairly obvious feature.
1 Like
Any updates regarding this topic from Figma? I agree this is quite hard maintaining for design systems, where you need to create a lot of unnecessary styles just to have them as gradients.
Love the idea @Recep_Kutuk mocked up!
1 Like
This is a must-have feature. Please implement it.
any updates?
this good. 
1 Like
Hey all what is the status of this? Something like what @Recep_Kutuk suggested back in Jun 21 would be rad.