Skip to main content
Question

Solid colour HEX value shows incorrect linear gradient values in dev mode.

  • January 28, 2025
  • 5 replies
  • 51 views

Rutuparna

[Bug] Whenever there are multiple colour values associated with an element (HEX), it shows wrong values when viewing in the Dev mode. For example - A button has 3 background colour values and 2 are hidden. (#F6F6F6, #1A1A1A, #002AB6).

When viewing in the Dev mode it shows “background: linear-gradient(0deg, #F6F6F6 0%, #F6F6F6 100%), #1A1A1A; #002AB6;” Instead of just “background: #F6F6F6; #1A1A1A; #002AB6;”.

 

 

5 replies

Celine_D
Figmate
  • Community Support
  • 3424 replies
  • January 28, 2025

Hey ​@Rutuparna , thank you for reporting this issue!

After reviewing the details, it looks like the issue might be related to how the colors are being displayed in Dev Mode.

After checking with the engineering team, they confirm that gradient syntax is correctly applied when multiple colors are used. (In order to blend multiple colours together, in CSS you need to turn them into this gradient format.)

 

Still, we’d like to clarify a few things. Hidden colors should be filtered out in Dev Mode. However, if hidden colors are still showing up in your case, this could be worth further investigation. 

  • In your screenshot, it’s only showing the 2 non-hidden colours, and shows correct gradient syntax.
  • But, in your description, it look like 3 colours are being shown and 1 colour is listed without the gradient syntax. If possible, could you share a screenshot that shows this behavior?

Rutuparna
  • Author
  • New Member
  • 2 replies
  • January 29, 2025
Celine_D wrote:

Hey ​@Rutuparna , thank you for reporting this issue!

After reviewing the details, it looks like the issue might be related to how the colors are being displayed in Dev Mode.

After checking with the engineering team, they confirm that gradient syntax is correctly applied when multiple colors are used. (In order to blend multiple colours together, in CSS you need to turn them into this gradient format.)

 

Still, we’d like to clarify a few things. Hidden colors should be filtered out in Dev Mode. However, if hidden colors are still showing up in your case, this could be worth further investigation. 

  • In your screenshot, it’s only showing the 2 non-hidden colours, and shows correct gradient syntax.
  • But, in your description, it look like 3 colours are being shown and 1 colour is listed without the gradient syntax. If possible, could you share a screenshot that shows this behavior?

Hi Celine, thank you for your response. But the problem is, it converts single hex value to a gradient value in dev mode whereas it’s just a solid colour. In the above example it converts solid red colour into a linear gradient instead.


Celine_D
Figmate
  • Community Support
  • 3424 replies
  • January 29, 2025

Thanks for the details! Our team would like to investigate it further.
Can you please share here a link of your file (or, if you can just create a file with nothing else but a rectangle showing the issue) and share edit access to the file with support-share@figma.com as an Editor? (You won’t be charged for this)

This will help us to look more in details. Thank you! 


Rutuparna
  • Author
  • New Member
  • 2 replies
  • February 4, 2025
Celine_D wrote:

Thanks for the details! Our team would like to investigate it further.
Can you please share here a link of your file (or, if you can just create a file with nothing else but a rectangle showing the issue) and share edit access to the file with support-share@figma.com as an Editor? (You won’t be charged for this)

This will help us to look more in details. Thank you! 

I have draft view only link: https://www.figma.com/design/JizV5o1JuL2VshzHkLFXiU/Background-Colour-Issue?node-id=0-1&t=sGNrUX8vnB2c1E4U-1


Celine_D
Figmate
  • Community Support
  • 3424 replies
  • February 4, 2025

Thank you for sharing the URL of the file!
Please also share edit access to the file with support-share@figma.com as an Editor. We need access to the file in order to investigate it. More guidance here: Share files and protoypes.
Thank you!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings