---
title: Correct background color style snippet in HubL
description: Learn how to correctly apply background color in HubL for HubSpot CMS development with this quick and easy snippet guide.
image: https://htmlcodingshop.com/hubfs/color-hubl.png
---

[Skip to content](https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl#main-content)

[![HTML CODING SHOP](https://htmlcodingshop.com/hs-fs/hubfs/dark_logo_transparent_background.png?width=250&height=91&name=dark_logo_transparent_background.png)](https://www.htmlcodingshop.com)

- [About](https://htmlcodingshop.com/about-us)
- [Website Services](https://htmlcodingshop.com/our-services)
- [Training Services](https://htmlcodingshop.com/development-training-services)
- [Blog](https://htmlcodingshop.com/blog)

Open main navigation

Close main navigation

- [About](https://htmlcodingshop.com/about-us)
- [Website Services](https://htmlcodingshop.com/our-services)
- [Training Services](https://htmlcodingshop.com/development-training-services)
- [Blog](https://htmlcodingshop.com/blog)
- [Let's Work Together!](https://htmlcodingshop.com/contact)

[Let's Work Together!](https://htmlcodingshop.com/contact)

[All posts](https://htmlcodingshop.com/blog/all)

 June 17, 2025

# Correct background color style snippet in HubL

![Picture of Amy Andrews](https://app.hubspot.com/settings/avatar/873fb91005d44fb16fea067876878764) By  [Amy Andrews](https://htmlcodingshop.com/blog/author/amy-andrews)  ·   1 minute read

## I get frustrated when I copy a style code snippet and I am given:

`{{ module.style.background_color.color }} {{ module.style.background_color.opacity }}`

 

When the correct code is:

`{% if module.style.background_color.color %} style="background-color: rgba({{ module.style.background_color.color|convert_rgb }}, {{ module.style.background_color.opacity / 100 }});`

 

Try it today! I use this a lot and it should be easier ;-) Always use if statements around your field codes!

Share: [facebook-f icon](http://www.facebook.com/share.php?u=https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl) [twitter icon](https://twitter.com/intent/tweet?url=https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl) [envelope icon](mailto:?body=https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl)

## Related posts

[![HubL code to show the most recent blog post listing with matching tags](https://htmlcodingshop.com/hubfs/raw_assets/public/@marketplace/Drive_Web_Studio/Generator_Free/images/img-blog-card-default.png)](https://htmlcodingshop.com/blog/hubl-code-to-show-the-most-recent-blog-post-listing-with-matching-tags)

[HubSpot CMS Development](https://htmlcodingshop.com/blog/tag/hubspot-cms-development)

### [HubL code to show the most recent blog post listing with matching tags](https://htmlcodingshop.com/blog/hubl-code-to-show-the-most-recent-blog-post-listing-with-matching-tags)

[![HubL code for showing a topic name in your header within HubSpot CMS templates](https://htmlcodingshop.com/hubfs/raw_assets/public/@marketplace/Drive_Web_Studio/Generator_Free/images/img-blog-card-default.png)](https://htmlcodingshop.com/blog/hubl-code-for-showing-a-topic-name-in-your-header-within-hubspot-cms-templates)

[HubSpot CMS Code Example](https://htmlcodingshop.com/blog/tag/hubspot-cms-code-example)

### [HubL code for showing a topic name in your header within HubSpot CMS templates](https://htmlcodingshop.com/blog/hubl-code-for-showing-a-topic-name-in-your-header-within-hubspot-cms-templates)

[![Should I use HubSpot CMS for my website?](https://htmlcodingshop.com/hubfs/raw_assets/public/@marketplace/Drive_Web_Studio/Generator_Free/images/img-blog-card-default.png)](https://htmlcodingshop.com/blog/should-i-use-hubspot-cms-for-my-website)

[Website Development](https://htmlcodingshop.com/blog/tag/website-development)

### [Should I use HubSpot CMS for my website?](https://htmlcodingshop.com/blog/should-i-use-hubspot-cms-for-my-website)

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://htmlcodingshop.com/#localbusiness",
  "@type" : "LocalBusiness",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "US",
    "addressLocality" : "Vestal",
    "addressRegion" : "NY",
    "postalCode" : "13850",
    "streetAddress" : "232 Noyes Rd"
  },
  "geo" : {
    "@type" : "GeoCoordinates",
    "latitude" : "42.1018166",
    "longitude" : "-75.9241859"
  },
  "image" : "https://htmlcodingshop.com/hubfs/dark_logo_transparent_background.png",
  "logo" : {
    "@id" : "https://htmlcodingshop.com/#logo",
    "@type" : "ImageObject",
    "url" : "https://f.hubspotusercontent10.net/hubfs/20661769/dark_logo_transparent_background.png"
  },
  "name" : "Amy Andrews",
  "openingHoursSpecification" : [ {
    "@type" : "OpeningHoursSpecification",
    "closes" : "17:00",
    "dayOfWeek" : [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" ],
    "opens" : "08:00"
  } ],
  "sameAs" : [ "https://www.linkedin.com/company/html-coding-shop" ],
  "telephone" : "",
  "url" : "https://htmlcodingshop.com"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://htmlcodingshop.com/#website",
  "@type" : "WebSite",
  "name" : "Amy Andrews",
  "publisher" : {
    "@id" : "https://htmlcodingshop.com/#localbusiness"
  },
  "url" : "https://htmlcodingshop.com"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl/#webpage",
  "@type" : "WebPage",
  "about" : {
    "@id" : "https://htmlcodingshop.com/#localbusiness"
  },
  "description" : "Learn how to correctly apply background color in HubL for HubSpot CMS development with this quick and easy snippet guide.",
  "image" : "https://20661769.fs1.hubspotusercontent-na1.net/hubfs/20661769/color-hubl.png",
  "isPartOf" : {
    "@id" : "https://htmlcodingshop.com/#website"
  },
  "name" : "Correct background color style snippet in HubL",
  "url" : "https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Amy Andrews",
    "url" : "https://htmlcodingshop.com/blog/author/amy-andrews"
  },
  "dateModified" : "2025-06-17T18:59:48.000Z",
  "datePublished" : "2025-06-17T18:57:04.000Z",
  "headline" : "Correct background color style snippet in HubL",
  "image" : [ "https://htmlcodingshop.com/hubfs/color-hubl.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://htmlcodingshop.com/hubfs/dark_logo_transparent_background.png"
    },
    "name" : "HTML Coding Shop"
  }
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "Article",
  "author" : {
    "@type" : "Person",
    "name" : [ "Amy Andrews" ],
    "url" : "https://htmlcodingshop.com/blog/author/amy-andrews"
  },
  "datePublished" : "2025-06-17T18:57:04+0000",
  "description" : "Learn how to correctly apply background color in HubL for HubSpot CMS development with this quick and easy snippet guide.",
  "headline" : "Correct background color style snippet in HubL",
  "image" : "https://20661769.fs1.hubspotusercontent-na1.net/hubfs/20661769/color-hubl.png",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://f.hubspotusercontent10.net/hubfs/20661769/dark_logo_transparent_background.png"
    },
    "name" : "Amy Andrews"
  },
  "url" : "https://htmlcodingshop.com/blog/correct-background-color-snippet-for-hubl"
}
```