# 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="/files/WOMDiuxPAbAqf9PraUGe" 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>


---

# 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://nextsky.gitbook.io/purity-theme/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.