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

{% 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 %}

## Color schemes

***

A **color scheme** consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes.

* Customize and create new color schemes in theme settings
* Apply color schemes to sections in section settings

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FC2YYSxTvRZP0IHXcvULI%2Fcolor-schemes.png?alt=media&#x26;token=f1e6b865-9809-41b8-99b8-3068caf87427" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FxYNzC2rmcI5ZGGyDONTD%2Fcolor-scheme-settings.png?alt=media&#x26;token=06795cd8-c66c-4ee5-99ec-16a1146e2ea6" alt=""><figcaption></figcaption></figure></div>

### Edit and add color schemes

***

In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme.

#### Color scheme options

Every color scheme has the following color options.

<table><thead><tr><th width="192">General colors</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the section, which spans the full height and width.</td></tr><tr><td><mark style="color:blue;">Background gradient</mark></td><td>Some sections can use a gradient background instead of a solid color background.<br><br>You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All text included in the section.</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>Special design elements in sections</td></tr><tr><td><mark style="color:blue;">Accent foreground</mark></td><td>Text or icons that overlay accent elements</td></tr><tr><td><strong>Buttons</strong></td><td></td></tr><tr><td><mark style="color:blue;">Solid buttons</mark></td><td>The background and text colors for buttons with solid style</td></tr><tr><td><mark style="color:blue;">Outline buttons</mark></td><td>The background, text, and border colors for buttons with outline style</td></tr><tr><td><mark style="color:blue;">Buttons with icon</mark></td><td>The background and foreground colors for buttons with icons</td></tr></tbody></table>

> Note: Solid and Outline button styles use the **Accent** and **Accent foreground** colors as the hover colors.

## Popovers, Modals, and Drawers

***

Select a color scheme to apply to **Popovers, Modals,** and **Drawers**.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Popovers and modals</mark></td><td>Select a color scheme for popups and modals, such as popups and information popups.</td></tr><tr><td><mark style="color:blue;">Drawers</mark></td><td>Select a color scheme for menus and cart drawers.</td></tr></tbody></table>

## Products

***

Select colors for elements used in product listings and product pages.

<table><thead><tr><th width="180">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Sale</mark></td><td>The 'Sale' badge on product cards.</td></tr><tr><td><mark style="color:blue;">Sold out</mark></td><td>The 'Sold out' badge on product cards.</td></tr><tr><td><mark style="color:blue;">Low inventory</mark></td><td>The low inventory message on product cards.</td></tr><tr><td><mark style="color:blue;">In stock</mark></td><td>The 'In stock' text on product cards.</td></tr></tbody></table>

## Notifications

***

Select colors for notification messages in forms.

<table><thead><tr><th width="184">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Success</mark></td><td>Success messages for forms.</td></tr><tr><td><mark style="color:blue;">Error</mark></td><td>Error messages for forms.</td></tr></tbody></table>