# Colors

Here, we utilize Shopify's latest color schemes as a robust tool. Color schemes within themes allow you to organize elements and their corresponding colors for merchants. The capacity to craft multiple schemes offers flexibility in storefront design. When designing, emphasize consistent elements and areas where merchants can effortlessly personalize colors.

You can read more about color schemes [here](https://shopify.dev/docs/themes/best-practices/design/color-system#color-schemes).

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FdewPv23fE5pwBWkLjWbS%2FScreenshot_108.png?alt=media&#x26;token=c57af5c0-f74a-4f80-aed6-c74cd2b895e9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: **Color Scheme 1** is a global style preset that applies to both theme sections and content pages, ensuring consistent design across the entire site.
{% endhint %}

### Color scheme settings

#### Background

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Background</strong></td><td>This setting is for defining the background color of the section or element.</td></tr></tbody></table>

#### General

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Use this setting to define the color of normal body text across sections and content areas.</td></tr><tr><td><strong>Heading</strong></td><td>Use this setting to define the color of heading text, such as titles and section headings.</td></tr><tr><td><strong>Border</strong></td><td>Use this setting to define the color of borders applied to elements such as buttons, cards, and section dividers.</td></tr></tbody></table>

#### Fill button

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Background</strong></td><td>Use this setting to define the background color of primary buttons across the section, including key actions like Add to Cart or Submit.</td></tr><tr><td><strong>Text</strong></td><td>Customize the button's label color.</td></tr><tr><td><strong>Background hover</strong></td><td>Define the background color that appears when users hover over the buttons.</td></tr><tr><td><strong>Text hover</strong></td><td>Customize the text color that appears when users hover over primary buttons</td></tr></tbody></table>

#### Outline button

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Define the default text color for outline-style buttons.</td></tr><tr><td><strong>Border</strong></td><td>Customize the border color for outline-style buttons.</td></tr></tbody></table>