# 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="https://3532170026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8sXwSf3sLGWt80kGN8d9%2Fuploads%2FPHYsYjjx0jhmbCpLYF4w%2Fimage.png?alt=media&#x26;token=6f84b472-e8f6-4d97-8d87-d643f637b3ad" 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="https://3532170026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8sXwSf3sLGWt80kGN8d9%2Fuploads%2F2GA2DVhAMlGDVMHPQ55f%2Fimage.png?alt=media&#x26;token=6c136f6d-ff66-4d2b-9654-4118f07982ba" alt=""><figcaption><p>Theme settings 'Color' tab</p></figcaption></figure>

<figure><img src="https://3532170026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8sXwSf3sLGWt80kGN8d9%2Fuploads%2FYKo2mSeIbTeaIuveBA5a%2Fimage.png?alt=media&#x26;token=6b668d93-9507-4b3a-914c-13d5ffbb053f" 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&#x20;

#### 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.