> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/paragraph-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/paragraph-user-documentation/custom-settings/background-colors.md).

# Background Colors

**Paragraph** supports customizing **Background Color** of the Hero section and the rest of the website.

The theme provides two CSS variables specifically designed to control the background colors of different sections:

1. `--hero-background-color`: This variable sets the background color for the hero section. 
2. `--main-background-color`: This variable is used to define the main background color for the rest of the website, providing a consistent look and feel throughout the pages.

## To customize:

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click <mark style="color:green;">**Open**</mark>
3. In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

   ```html
   <style>
       :root {
           --hero-background-color: #1A3939;
           --main-background-color: #F5F6F7;
       }
   </style>
   ```

   <figure><img src="/files/vIUU6NK22lFbDYibflin" alt=""><figcaption></figcaption></figure>
4. Click **Save**