Difficulty Level: Advanced. This post assumes a strong understanding of HubSpot tools and technical knowledge. Insutructions are given as guidelines and may require additional customisation.
Last Updated: September 26, 2019
HubSpot has a Color tag available to you using HubL or on custom modules:
It lets a user pick a colour in the page editor that you can then apply to any element: a background, fonts, buttons... etc. When you copy the snippet, you're given both the colour (in RGB) and the opacity (as a percentage). So something like this:
{% raw %}{{ module.color_field.color }}
{{ module.color_field.opacity }}
prints out the following:
#ffffff 100
If you would like to use an RGBA colour you can do so by using the convert_rgb HubL filter on the colour and dividing the opacity by 100. So something like this:
rgba({{ module.color_field.color|convert_rgb }}, {{ module.color_field.opacity/100 }})
prints out the following:
rgba(255, 255, 255, 1.0)
Written by: Stephanie O'Gay Garcia Last Updated: September 26, 2019I'd appreciate if you could take a moment to let me know how I can improve this article.
Hi! 👋 I'm a freelance HubSpot Website Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.
HubSpot is a full suite of Marketing, Sales and Services tools. Learn more here.
Note: as a HubSpot affiliate I will earn commission if you decide HubSpot's the right software for you! :)