How to use Opacity in the Custom Module Color Picker
SOLVE
I was about to post this as a question as it took me a while to figure out (). Since I couldn't find any documentation I figure I'll share for anyone who might look for this in the future.
EDIT: Opacity for a background element will apply to children as well so the below is great for text but not background colours... Any alternatives would be great!
<div style="background: rgba({{ widget_data.my_color.color|convert_rgb }}, .5)"></div>
In custom modules you can use a "Color" field which allows users to pick a colour and opacity.
If this field is named background_color, for example, it gives you the following snippets:
Colour: {{ module.background_colour.color }} with the output #c82929
Opacity: {{ module.background_colour.opacity }} with the output 32
In CSS, opacity takes values from 0.0 - 1.0 so I wasn't sure how to fit in the "32" value (one it got to 0.100 it didn't like that at all) so I finally figured I could use calc and math to divide the number by 100.
How to use Opacity in the Custom Module Color Picker
SOLVE
I was stuggling with a similar issue and thanks to this post I ended up with a hybrid. I didn't want to add any code and wanted to change the background colour and have anoption for opacity. I found a way by combining a choice field with a number field. Thought I would share in case someone else finds it helpful.
How to use Opacity in the Custom Module Color Picker
SOLVE
Thanks @tjoyce! Those both work too. The only problem now is that I want to use it for a background-color and using "opacity" dims the opacity for everything in my container (not just the background colour).
So RGBA would be great... maybe it's an Ideas forum suggestion?
Stephanie O'Gay Garcia HubSpot Design / Development / Automation