Skip to main content
Solved

How do I apply alpha to color?

  • February 8, 2022
  • 6 replies
  • 5013 views

Frederick_Allen

I am trying to apply an alpha for color, but I can’t figure out how do it. I want to do something like:

node.strokes = [{ type: 'SOLID', color: {r: 0, g: 0, b: 0, a:1} }]

But this gets an error: Error: in set_strokes: Expected “strokes.[0].color” to have type {r: number, g: number, b: number} but got additional property “a”.

Right now I’m using opacity, but this controls the layer opacity not the color’s alpha channel.

Best answer by Frederick_Allen

@tank666 Thank you for you help! This is what I should have done: node.strokes = [{ type: 'SOLID', color: chart.color, opacity: chart.opacity }];

View original

6 replies

tank666
  • 4868 replies
  • February 8, 2022

As you may have noticed in the Plugin API documentation, opacity instead of alpha channel is only used for SolidPaint.

figma.com

Could you share the code where you change the opacity? You are most likely changing the opacity of the node and not the opacity property of the strokes object.


Frederick_Allen

@tank666 Thank you for you help! This is what I should have done: node.strokes = [{ type: 'SOLID', color: chart.color, opacity: chart.opacity }];


macronbell

Transparency is a property outside the color itself, and it’s also known as alpha component, You can’t code transparent as pure RGB (Red-Green-Blue), but you can use the RGBA notation, in which you define the color + alpha channel together:

rgba(red, green, blue, alpha)

Where alpha defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)

color: rgba(255, 0, 0, 0.5); /* 0.5 is the transparency value */

There’s also the HEXA notation ( #RRGGBBAA ) now supported on all major browsers, which is pretty much the same as RGBA color code but using hexadecimal notation instead of decimal. It’s called HEXA ( HEX + Alpha ). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA.

color: #FF000080; /* red at 50% opacity */

Here the FF0000 is the color and 80 is the transparency. Where 80 is the hexadecimal equivalent of 50%.


Dipayan_Mukherjee

Is it possible to get Hexadecimal notation of the color from Figma?


tank666
  • 4868 replies
  • January 4, 2023

No, you need to write your own function that converts Figma’s fill value to HEX.


Dipayan_Mukherjee

Oh, I see. Thanks a lot!


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