# Colors

Although it's possible to jump into Keystone and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.

If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as [Coolors](https://coolors.co/generate), to help with this process.

There are a handful of great resources online that can help guide your color selection process.

{% hint style="info" %}

* [Brand Colors: How to Choose the Perfect Palette](https://looka.com/blog/brand-colors/)
* [Color Psychology: How Color Meanings Affect Your Brand](https://www.oberlo.com/blog/color-psychology-color-meanings)
  {% endhint %}

### FAQs

<details>

<summary>Where can I adjust my color settings?</summary>

1. **Navigate to Theme settings > Colors** - Open your theme by clicking **Customize**
2. Click the **gear icon** (⚙️) in the top-left corner to open **Theme Settings**
3. Scroll down and select **Colors**
4. Modify your color settings (palette, accents, text colors, etc.) as needed
5. Click **Save** to apply your changes

<figure><img src="/files/McGomCTEPP1InQvaM3jv" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>How can I change the accent colors in my theme settings?</summary>

Accent 1-3 represents darker shades of the **Body** color. You can find your Body color within the **Colors** drawer in your **Theme settings** tab. To use an accent color, you can set this within the **Color** settings of most **Section** blocks.

<figure><img src="/files/HTmvxbhLosJTnDhVtAss" alt=""><figcaption><p>Theme settings 'Color' tab</p></figcaption></figure>

<figure><img src="/files/S15ZBcUEpDuVmHx7GW5n" alt=""><figcaption><p>What the setting will look like within a Section</p></figcaption></figure>

</details>

<details>

<summary>How do I change the top bar color on mobile devices?</summary>

Update the Mobile bar to change top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.

<div data-full-width="true"><figure><img src="https://downloads.intercomcdn.com/i/o/1198958900/ccc7f1701938dd7bd6459ecf/shotsnapp-1666801448_626.png?expires=1744398000&#x26;signature=8b6db350fd25f73c4ef8f01b263186ae454c4987bfc6abd25297717fdff45112&#x26;req=dSEuHsB7lYhfWfMW1HO4zUTPeXYqhlRs6OyH1QnljCwSCKS61%2BdJQFEQkj3P%0AAtEp6wWtGLHIt4kkrOA%3D%0A" alt=""><figcaption></figcaption></figure></div>

</details>

### Color settings

These settings will be applied site-wide, affecting all sections and blocks. Changes made here will update the entire website's design uniformly.

<table><thead><tr><th width="350.2943115234375">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background body color</td><td>Controls the main background color for the body of the site. This will also be available in other sections when selecting a color and shown as <strong>Body</strong>.</td></tr><tr><td>Foreground body color</td><td>Defines the primary text color used in the body content. It's best to use a color that contrasts well against <strong>Background body color.</strong></td></tr><tr><td>Foreground body dark color</td><td>Alternative darker text color for body content</td></tr><tr><td>Background primary color</td><td>Sets the background color for primary content areas</td></tr><tr><td>Foreground primary color</td><td>Defines text color used in primary content sections</td></tr><tr><td>Background secondary color</td><td>Sets the background color for secondary content areas</td></tr><tr><td>Foreground secondary color</td><td>Defines text color used in secondary content sections</td></tr><tr><td>Background tertiary color</td><td>Sets the background color for tertiary content areas</td></tr><tr><td>Foreground tertiary color</td><td>Defines text color used in tertiary content sections</td></tr><tr><td>Bar color</td><td>Controls the color of dividing bars or horizontal elements</td></tr><tr><td>Background overlay</td><td>Sets the gradient overlay effect (default is a black gradient)</td></tr><tr><td>Input button style</td><td>Determines button appearance with options for standard, lighter, or darker styling</td></tr></tbody></table>

### Understanding your color schemes

#### Body and Body Neutral:

* Body is the base color.
* Body Neutral is a blend of the Body color and Primary Accent.
* If the Body color is dark, Accent and Shade can instead be lighter shades of the Body color.

#### Accent 1-3 and Shade 1-3:

* Accent 1-3 represents darker shades of the Body color.
* Shade 1-3 also represents darker shades of the Body color but with slight opacity, making them semi-transparent.
* For example, if the background color is black, Accent 1-3 will be lighter shades rather than darker.

#### Primary, Secondary, and Tertiary Colors:

* These colors are directly derived from the color settings.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/keystone/getting-started/theme-settings/colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.