plugins - Getting RGBA colour from gutenberg colourpicker

admin管理员组

文章数量:1391951

I'm working on a block that has it's own colour picker. This is working fine and I can see my background colour changing however I'm only able to get the hex value for the colour.

I'm changing the colour as it stands by doing:-

style={{ backgroundColor: `${tint.hex}` }}

Tint is an object returned from the colour picker and I can see that it has a sub object called color that contains rgba values.

How do I get these values and make the backgroundColour use rgba()?

I'm working on a block that has it's own colour picker. This is working fine and I can see my background colour changing however I'm only able to get the hex value for the colour.

I'm changing the colour as it stands by doing:-

style={{ backgroundColor: `${tint.hex}` }}

Tint is an object returned from the colour picker and I can see that it has a sub object called color that contains rgba values.

How do I get these values and make the backgroundColour use rgba()?

• plugins
• block-editor
• variables

Share Improve this question asked Feb 14, 2020 at 0:14 AstridAstrid 12311 silver badge1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

If you mean wpponents.ColorPicker which is based on react-color, then the tint object also contains a rgb property with an object of the RGBA value like {r: 51, g: 51, b: 51, a: 1}.

So in your code, you can use:

style={{ backgroundColor: `rgba(${tint.rgb.r}, ${tint.rgb.g}, ${tint.rgb.b}, ${tint.rgb.a})` }}

And an easy trick to know all the available properties in the color object is by running console.log( tint ).. :)

本文标签： pluginsGetting RGBA colour from gutenberg colourpicker