# Colors

The **Colors** settings in your theme allow you to customize and harmonize the look of your online store by assigning specific colors to various elements. This ensures a cohesive visual experience across all sections of your theme while aligning with your brand identity.

{% hint style="info" %}
**Note***: Colors can be applied to sections throughout your online store using the Color scheme setting. To effectively use **Color scheme**, refer to the explanation below.*
{% endhint %}

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

<figure><img src="/files/ta5rcv8GFTVxjtomH3ds" alt=""><figcaption></figcaption></figure>

### **1. General:**

These settings determine the default colors for text, headings, links, and the page background.

* **Heading:** Customize the color of all headings across sections for consistency.
* **Text:** Select the color for body text in all sections.
* **Page background:** Defines the body background color of the theme.
* **Text link:** Allows you to assign a distinct color to all hyperlinks.

### **2. Buttons:**

These settings let you define the appearance of buttons across the theme:

* **Button label:** Choose the text color for buttons.
* **Button background:** Assign a background color to buttons.
* **Outline button:** Select a color for the button outline.

### **3. Color scheme overview**

Color schemes are predefined groupings of colors that can be applied to sections for quick and cohesive styling. The Color scheme options are available in certain sections, blocks, and general theme settings.

#### **Color scheme options:**

**a. Default:**&#x20;

Uses the colors defined in **General** and **Buttons** settings for the section's elements.

*➝  The colors configured in **General** and **Buttons** settings will be applied to all sections when the **"Default"** option is selected in the **Color scheme** setting for a section.*

**b. Accent 1, Accent 2, Accent 3 (Primary colors):**

* These schemes are typically associated with bold, darker colors. Assigned to sections for strong visual emphasis.
* **Settings:**
  * **Foreground:** Sets the text and foreground element color for sections using a Primary color scheme.
  * **Accent 1, Accent 2, Accent 3:** Specifies the background color for sections assigned to these schemes.
  * **Gradient**: Each accent color can be enhanced with a gradient effect instead of a solid color.

**c. Background 1, Background 2, Background 3 (Secondary colors):**

* These schemes are typically associated with lighter, softer tones. Ideal for backgrounds and areas needing subtle contrast.
* **Settings:**
  * **Foreground:** Defines the color for text and foreground elements in sections using a Secondary color scheme.
  * **Background 1, Background 2, Background 3:** Determines the background color for sections assigned to these schemes.
  * **Gradient**: Similar to Primary colors, you can apply gradients to Secondary colors for a modern effect.

{% hint style="success" %}
After you define your color scheme in your theme settings, you can assign a color scheme using the Color scheme setting in your theme's sections and blocks.
{% endhint %}

<details>

<summary>How to apply a color scheme to the section?</summary>

* Go to theme editor → Select a section. (eg: Rich text)
* Look for the color scheme setting. The setting is usually located at the end of a section’s settings panel, after all main settings.

<figure><img src="/files/wckiOvoOLW3fSgEW7xlP" alt=""><figcaption></figcaption></figure>

* Choose from **None, Accent 1-2-3, or Background 1-2-3**.
* Click **Save** to apply the changes.

</details>

By leveraging these comprehensive color settings, you can fully customize your theme’s visual identity while ensuring consistency and brand alignment. The flexibility offered by Primary and Secondary color schemes, combined with gradient options, ensures a modern and engaging design throughout your store.


---

# 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://help.byinspiredlabs.com/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.