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()?

1 Answer 1


If you mean wp.components.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 ).. :)

  • 1
    Sally I had to tweak a couple of things (like make my attribute an object so it can have a default rgba). That aside your answer was correct and it solved my issue! :)
    – Astrid
    Feb 14, 2020 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.