---
title: Colors
description: "In the Color settings page, you can modify the color settings for your website. There are several groups of settings: Change the Color Settings Base colors…"
---

[Skip to content](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#main-content)

English

Show submenu for translations

[![punchmark-logo-horizontal-white](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/punchmark-logo-horizontal-white.png?width=225&height=38&name=punchmark-logo-horizontal-white.png)](https://academy.punchmark.com/knowledge?hsLang=en)

- [Website](https://www.punchmark.com/)
- [News](https://www.punchmark.com/news)
- [Support](https://www.punchmark.com/contact-support)
- [In the Loupe](https://www.punchmark.com/loupe)

Open main navigation

Close main navigation

- [Website](https://www.punchmark.com/)
- [News](https://www.punchmark.com/news)
- [Support](https://www.punchmark.com/contact-support)
- [In the Loupe](https://www.punchmark.com/loupe)
- English
  
  Show submenu for translations
- Go to punchmark.com

 Go to punchmark.com

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Punchmark Knowledge Base](https://help.punchmark.com/knowledgebase?hsLang=en)
2. [hidden WIP](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en)
3. [Design](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en#design)

# Colors

In the Color settings page, you can modify the color settings for your website. There are several groups of settings:

- [Change the Color Settings](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#Colors-ChangetheColorSettings)
- [Base colors](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#Colors-Basecolors)
- [Background color](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#Colors-Backgroundcolor)
- [Light and Dark Colors](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#Colors-LightandDarkColors)
- [Response Colors](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/7110657#Colors-ResponseColors)

## Change the Color Settings

Follow these steps to access the style settings for the website colors:

1. Login to SiteManager. 
2. In the menu, click to expand the **Design** settings (see the figure below).
3. Click the **COLORS** item to display the footer settings in the main panel.

![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/7176193-0306d3fc69.jpg)

There are several groups of logo properties:

- Base colors
- Background color
- Light and dark colors
- Response colors

The sections below explain how to change each of these settings.

## Base colors

Change the settings for the colors that will be used throughout your website theme:

- **Primary brand color**: Choose a color from the color picker. You can also enter the hex color code into the **Primary Brand Color** field.
- **Secondary brand color**: Choose a color from the color picker. You can also enter the hex color code into the **Secondary Brand Color** field.
- **Default Element brand color**: Choose a color from the color picker. You can also enter the hex color code into the **Default Element Color** field.

![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/6979596-7a44d3a67b.jpg)

## Background color

Set the background type and background color for your website.

- **Background type**: From the drop-down, choose the type of color that you want for your website background.
- **Background color**: Choose a color from the color picker. You can also enter the hex color code into the **Background Color** field.

![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/7241737-37f7fd9c03.jpg)

## Light and Dark Colors

Set the colors that your theme considers to be white and black. Often, pure black is not used as it has a tendency to overpower the other colors and attract too much attention as it is “unnatural.” You may wish to use a dark grey instead.

- **Light color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Light Color** field.
- **Dark color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Dark Color** field.

![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/7143442-86c2e65855.jpg)

## Response Colors

Set the colors that indicate responses to various user actions. Try to use simple colors, as illustrated below, that denote the nature of the response. For example, try not to use red for your “success” color, as most users will interpret that as something gone wrong.

- **Success color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Success Color** field.
- **Danger color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Danger Color** field.
- **Warning color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Warning Color** field.
- **Info color**: Choose a colorfrom the color picker. You can also enter the hex color code into the **Info Color** field.

![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/7405569-26e0981ab0.jpg)

- [Default HubSpot Blog](https://blog.punchmark.com/blog)

[![pm-symbol-blue](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/pm-symbol-blue.png?width=40&height=45&name=pm-symbol-blue.png "pm-symbol-blue")](https://academy.punchmark.com/knowledge?hsLang=en)

Punchmark Resource Center

<https://www.facebook.com/punchmark> <https://www.instagram.com/punchmarkwebsites/> <https://open.spotify.com/show/1IBgfY1m1GIDkkF5N8Dn8F?go=1&sp_cid=0869f391274eb7a313244a8b2a29e059&utm_source=embed_player_p&utm_medium=desktop&nd=1&dlsi=44933130a20a4bcc>

Copyright © 2026, Punchmark