# Colors

You can change the **Colors** of elements across your store, including general colors, header colors, footer colors, and product colors.

In the theme editor, click the **Theme settings** icon, then click to open the **Colors** tab.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Theme colors</strong></mark></td><td>Set colors for sitewide elements.</td><td><a href="#theme-colors">#theme-colors</a></td></tr><tr><td><mark style="color:blue;"><strong>Section color schemes</strong></mark></td><td>Create custom sets of colors that you can apply to sections across your site.</td><td><a href="#color-schemes">#color-schemes</a></td></tr></tbody></table>

{% hint style="info" %}
We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
{% endhint %}

![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-1b060e576c1b5770c313b1f362af847d68e4fa1a%2Ftheme-settings-colors.png?alt=media)

## Theme colors

***

&#x20;

### General

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background on all pages including the home page. Appears in sections that have no background color set.</td></tr><tr><td><mark style="color:blue;">Links</mark></td><td>All links added to rich text blocks.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All headings, subheadings, and body text. The Header and Logo text are set separately.</td></tr><tr><td><mark style="color:blue;">Lines and borders</mark></td><td>All lines and borders that appear between or within sections.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Small design elements, such as borders, used for Accent headings and icons.</td></tr><tr><td><mark style="color:blue;">Accent contrasting color</mark></td><td>An alternate color for accent headings and elements.</td></tr></tbody></table>

### Image overlay

<table><thead><tr><th width="173">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td><p>The text and headings that overlay images.</p><p><br>In section settings, you can override the theme colors with custom section colors.</p></td></tr><tr><td><mark style="color:blue;">Tint</mark></td><td>The overlay color applied on top of images. <br><br>In section settings, you can change the tint opacity, use a gradient style, or turn off the overlay. You can also override the theme colors with custom section colors.</td></tr></tbody></table>

### Header

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>The color of all menu links, icons, borders, and additional text in the Header.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the Header bar.</td></tr><tr><td><mark style="color:blue;">Cart dot</mark></td><td>The notification icon when the cart has an item.</td></tr><tr><td><mark style="color:blue;">Cart dot text</mark></td><td>The text in the cart dot that represents the number of cart items.</td></tr><tr><td><mark style="color:blue;">Search field background</mark></td><td>The background of the search field and filter dropdown of the search bar.</td></tr><tr><td><mark style="color:blue;">Search field border</mark></td><td>The border between the filter dropdown and search field of the search bar.</td></tr><tr><td><mark style="color:blue;">Search field text</mark></td><td>The text of the filter dropdown and input text of the search bar.</td></tr><tr><td><mark style="color:blue;">Search field submit button</mark></td><td>Select the color of the submit button: either Use primary button colors or Match search field.</td></tr></tbody></table>

### Menu

These color settings apply when the **Header** section has a **Desktop layout** set to one of the **Menu below the logo** options.

<table><thead><tr><th width="212">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>The color of all menu links, icons, borders, and additional text in the Header.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the menu.</td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="213">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button background</mark></td><td>The background of solid-color buttons.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>The text used for the button label.</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button background</mark></td><td>The background of solid-color buttons.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>The text used for the button label.</td></tr></tbody></table>

#### Floating action buttons

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button background</mark></td><td>All button backgrounds for Solid button styles.<br><br>Button style options are included in button block settings per section.</td></tr><tr><td><mark style="color:blue;">Button foreground</mark></td><td>All button text for Solid button styles.<br><br>Button style options are included in button block settings per section.</td></tr></tbody></table>

#### Forms

These colors apply to newsletter sign-ups, contact forms, and

<table><thead><tr><th width="169">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Input text</mark></td><td>The text entered in form fields.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the form.</td></tr></tbody></table>

#### Products

<table><thead><tr><th width="193">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Sale price</mark></td><td>Sale prices listed beneath products with "compare at price."</td></tr><tr><td><mark style="color:blue;">Rating star</mark></td><td>Rating stars in the app block.</td></tr><tr><td><mark style="color:blue;">In stock</mark></td><td>The "In stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Low in stock</mark></td><td>The "Low stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Out of stock</mark></td><td>The "Out of stock" label for the Stock level indicator.</td></tr></tbody></table>

#### Product inventory status

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">In stock</mark></td><td>The "In stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Low in stock</mark></td><td>The "Low stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Out of stock</mark></td><td>The "Out of stock" label for the Stock level indicator.</td></tr></tbody></table>

#### Free shipping bar

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Below 100%</mark></td><td>The progress bar when cart value is below the threshold for free shipping.</td></tr><tr><td><mark style="color:blue;">100%</mark></td><td>The progress bar when cart value meets or exceeds the threshold for free shipping</td></tr></tbody></table>

#### Popups and drawers

<table><thead><tr><th width="219">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>All headings, subheadings, and body text.</td></tr><tr><td><mark style="color:blue;">Links</mark></td><td>All links added to rich text blocks.</td></tr><tr><td><mark style="color:blue;">Sale price</mark></td><td>Sale prices listed by cart items.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the popup or drawer.</td></tr><tr><td><mark style="color:blue;">Alternate background</mark></td><td>Secondary background areas within the popup or drawer.</td></tr><tr><td><mark style="color:blue;">Forms</mark></td><td>The input text and backgrounds of sign-up forms and in-cart fields or forms. Choose to Use default form colors or make elements Transparent.</td></tr></tbody></table>

#### Footer

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>All menu links and text in the Footer.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the Footer.</td></tr></tbody></table>

## Color schemes

***

Color schemes allow you to rapidly design sections with default and automated color sets that are consistent with your branding.

A color scheme consists of a set of colors that are applied to your sections. You can choose to use a color scheme **based on your theme colors** or a **custom color scheme.**

Alternatively, you can use **custom color overrides** if you do not want to use color schemes for your section.

### Based on theme colors

You can choose to use your **Default** theme colors or one of four **variant color schemes** that automatically apply alternate colors based on your default theme colors.

There are four variant color schemes: **Inverse**, **Soft**, **Accent**, or **Sale**.

<table data-header-hidden><thead><tr><th width="187"></th><th></th></tr></thead><tbody><tr><td><mark style="color:blue;">Default</mark></td><td>Use colors selected in your theme settings.</td></tr><tr><td><mark style="color:blue;">Inverse</mark></td><td>Swap the default Background and Text colors.</td></tr><tr><td><mark style="color:blue;">Soft</mark></td><td>Apply a mix of the default Text and Background colors to the background.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Apply the default Accent color to the background and the Accent contrasting color to foreground elements.</td></tr><tr><td><mark style="color:blue;">Sale</mark></td><td>Apply default Background color to foreground and Sale price color to background.</td></tr></tbody></table>

### Custom color schemes

You can choose to use a **custom color scheme**. Go to your theme settings to select colors for **Color scheme 1** and **Color scheme 2.**

In the section settings, you can select one of these color schemes to use.

<table><thead><tr><th width="222">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a color for the heading and text.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a color for the background of the section or block.</td></tr></tbody></table>

## Custom color overrides

***

In section or block settings, choose to use custom colors instead of the default or color scheme settings.

<table><thead><tr><th width="207">Setting</th><th></th></tr></thead><tbody><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td><p>Check this option to apply custom colors to the section. </p><p></p><p>These colors will override the color scheme.</p></td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td><p>Select a custom color for the heading and text. </p><p></p><p>This setting applies only if the Override with custom colors option is enabled.</p></td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td><p>Select a custom color for the section or block background. </p><p></p><p>This setting applies only if the Override with custom colors option is enabled.</p></td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Theme settings](https://help.fluorescent.co/cornerstone/theme-styles/theme-settings)\
> [Preset styles](https://help.fluorescent.co/cornerstone/theme-styles/style-presets)\
> [Fonts](https://help.fluorescent.co/cornerstone/theme-styles/fonts)\
> [Animation](https://help.fluorescent.co/cornerstone/theme-styles/animation)