# How to create background color changable module.

**URL:** <https://community.hubspot.com/t/how-to-create-background-color-changable-module/87702>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [August 17, 2023, 9:48am UTC](https://community.hubspot.com/t/how-to-create-background-color-changable-module/87702 "2023-08-17T09:48:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MHussain8](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mhussain8/32/198394_2.png) [@MHussain8](https://community.hubspot.com/u/MHussain8)\
**Post date:** [August 17, 2023, 9:48am UTC](https://community.hubspot.com/t/how-to-create-background-color-changable-module/87702/1 "2023-08-17T09:48:25Z")

</div>

I am creating module۔ a module with changeable background color

---

<div class="post-metadata">

**Author:** ![ModuleMaestro](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/modulemaestro/32/32546_2.png) [@ModuleMaestro](https://community.hubspot.com/u/ModuleMaestro)\
**Post date:** [August 18, 2023, 12:17pm UTC](https://community.hubspot.com/t/how-to-create-background-color-changable-module/87702/2 "2023-08-18T12:17:59Z")

</div>

Hi @MHussain8,

You can make use of [style fields](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields-overview#style-fields) in your module choosing to add a [color field](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields#color) into the style fields. Whether you add this into the Style fields section or just the regular fields section on the right hand side when building out the module, you will need to reference that field’s value in your code to take advantage of this.

So with a simple example of you creating a color field for the module with the HubL variable name **background\_color** , your code might look something like:

```lia-code-sample
{% set background_color = module.background_color.color %}

<style>

.your-class {

background-color: {{background_color}};

}

</style>

```

This will apply the color from the module’s color picker to the background-color of any element with class=“your-class”. Let me know if this helps or if you had something else in mind here when you mentioned changeable background color 🙂