--- title: How to use HubSpot's Color field in custom modules description: You can use HubSpot's color HubL tag or the colour field on custom modules to add editable colours to your code. image: https://www.stephanieogaygarcia.com/hubfs/HubSpot%20CMS%20Development/HubSpot%20custom%20module%20color%20field.jpg --- [Skip to Content](https://www.stephanieogaygarcia.com/hubspot-website-development/how-to-use-hubspots-color-field-in-custom-modules#main-content) [![Stephanie O'Gay Garcia](https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg "Stephanie O'Gay Garcia")](https://www.stephanieogaygarcia.com/) Open Navigation - [About](https://www.stephanieogaygarcia.com/about) - [Services](https://www.stephanieogaygarcia.com/services) - [Products](https://www.stephanieogaygarcia.com/shop) - [Work](https://www.stephanieogaygarcia.com/portfolio-work) - [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development) - [Contact](https://www.stephanieogaygarcia.com/contact) - [About](https://www.stephanieogaygarcia.com/about) - [Services](https://www.stephanieogaygarcia.com/services) - [Products](https://www.stephanieogaygarcia.com/shop) - [Work](https://www.stephanieogaygarcia.com/portfolio-work) - [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development) - [Contact](https://www.stephanieogaygarcia.com/contact) [HubSpot Sprocket Icon HubSpot Website Development ](https://www.stephanieogaygarcia.com/hubspot-website-development) [custom modules](https://www.stephanieogaygarcia.com/hubspot-website-development/tag/custom-modules) # How to use HubSpot's Color field in custom modules Technical Difficulty: Advanced Written by [ Stephanie O'Gay Garcia ](https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia) First Published: September 26, 2019 Last Updated: September 26, 2019 ⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! *(Last updated: September 26, 2019)* HubSpot has [a Color tag](https://designers.hubspot.com/docs/hubl/hubl-supported-tags#color) available to you using HubL or on custom modules: ![HubSpot custom module color field](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/HubSpot%20custom%20module%20color%20field.jpg?width=300&name=HubSpot%20custom%20module%20color%20field.jpg) 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](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#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) If you found this helpful, buy me a coffee! ❤️ ←  Previous Article [How do I migrate my website to HubSpot?](https://www.stephanieogaygarcia.com/hubspot-website-development/how-do-i-migrate-my-website-to-hubspot) Next Article  → [Exclude a blog topic from a list of blog posts on HubSpot](https://www.stephanieogaygarcia.com/hubspot-website-development/exclude-a-blog-topic-from-a-list-of-blog-posts-on-hubspot) Contact ## Get help from a HubSpot CMS Expert - Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules - Technical support and guidance on the HubSpot CMS [ Tell me about your project ](https://www.stephanieogaygarcia.com/project-details) ##### Contact Need help with a HubSpot CMS project? Get in touch! [Email](mailto:stephanie@stephanieogaygarcia.com) | [Contact](https://www.stephanieogaygarcia.com/contact) ##### About - [ About ](https://www.stephanieogaygarcia.com/about) - [ Portfolio ](https://www.stephanieogaygarcia.com/portfolio-work) - [ LinkedIn ](https://www.linkedin.com/in/stephanieogaygarcia/) - [ Facebook ](https://www.facebook.com/stephanieogaygarcia) - [ Instagram ](https://www.instagram.com/stephanieogaygarcia/) ##### Services - [ HubSpot Website Development ](https://www.stephanieogaygarcia.com/services/hubspot-website-development) - [ HubSpot CMS Technical Support ](https://www.stephanieogaygarcia.com/services/hubspot-cms-technical-support) - [ Custom HubSpot CMS Themes ](https://www.stephanieogaygarcia.com/custom-hubspot-cms-hub-themes) - [ Pricing ](https://www.stephanieogaygarcia.com/services#pricing) ##### Latest Articles - [How to add an llms.txt page to your HubSpot website](https://www.stephanieogaygarcia.com/hubspot-website-development/add-an-llmstxt-page-to-your-hubspot-website) - [Switch an existing HubSpot custom module from global to local](https://www.stephanieogaygarcia.com/hubspot-website-development/switch-an-existing-hubspot-custom-module-from-global-to-local) - [Overriding HubSpot's new forms styling from theme settings](https://www.stephanieogaygarcia.com/hubspot-website-development/overriding-hubspots-new-forms-styling-from-theme-settings) - [All Articles](https://www.stephanieogaygarcia.com/hubspot-website-development) --- Copyright © 2018 - 2026 Stephanie O'Gay Garcia. All Rights Reserved. Freelance HubSpot CMS Developer based in Toronto, Canada 🇨🇦 [Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service) | [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use) | [Privacy](https://www.stephanieogaygarcia.com/privacy-policy) | [Cookies](https://www.stephanieogaygarcia.com/cookie-policy) | [LLMs](https://www.stephanieogaygarcia.com/llms.txt) Scroll to Top ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#person", "@type" : "Person", "description" : "Freelance HubSpot CMS Developer specializing in custom HubSpot website development, themes, templates, and bespoke modules for small–mid sized B2B and SaaS companies.", "image" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg", "jobTitle" : "Freelance HubSpot CMS Developer", "knowsAbout" : [ "HubSpot CMS", "HubSpot themes", "HubSpot templates", "HubSpot modules", "HubDB", "Website migrations to HubSpot CMS", "Figma to HubSpot implementation" ], "name" : "Stephanie O'Gay Garcia", "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ], "url" : "https://www.stephanieogaygarcia.com/", "worksFor" : { "@id" : "https://www.stephanieogaygarcia.com/#organization" } } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#organization", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "IE", "addressLocality" : "Dublin", "postalCode" : "A94" }, "contactPoint" : { "@type" : "ContactPoint", "areaServed" : "Worldwide", "availableLanguage" : [ "en", "es" ], "contactType" : "sales", "email" : "stephanie@stephanieogaygarcia.com" }, "description" : "Portfolio and business site of freelance HubSpot CMS Developer Stephanie O'Gay Garcia, based in Dublin, Ireland.", "logo" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg", "name" : "Stephanie O'Gay Garcia", "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ], "url" : "https://www.stephanieogaygarcia.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.stephanieogaygarcia.com/#website", "@type" : "WebSite", "name" : "Stephanie O’Gay Garcia – Freelance HubSpot CMS Developer", "publisher" : { "@id" : "https://www.stephanieogaygarcia.com/#organization" }, "url" : "https://www.stephanieogaygarcia.com/" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Stephanie O'Gay Garcia", "url" : "https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia" }, "dateModified" : "2019-09-26T15:36:17.322Z", "datePublished" : "2019-09-26T15:35:48.000Z", "headline" : "How to use HubSpot's Color field in custom modules", "mainEntityOfPage" : { "@id" : "https://www.stephanieogaygarcia.com/hubspot-website-development/how-to-use-hubspots-color-field-in-custom-modules", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg" } } } ```