How to use HubSpot's Color field in custom modules

    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.

    HubSpot has a Color tag available to you using HubL or on custom modules:

    HubSpot custom module color field

    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

    Print out an RGBA value

    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, 2019

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    New call-to-action

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    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.