# Colors

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Ffx6HsOs5fzJYfEMrCVCG%2FFox-BG%20Light%20(5).jpg?alt=media&#x26;token=f970fa12-2aae-4578-9974-0cc4325c90d7" alt=""><figcaption></figcaption></figure>

One of the most important components of designing a visually appealing, functional, and accessible theme is color.

Not only does a well-designed color system reinforce a merchant’s branding, but it also has the power to enhance and improve user experiences.

## How to access Colors settings

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**.
2. Locate **Colors**.
3. Manage your **Schemes** and other element colors.
4. Click **Save**.
   {% endhint %}

## Color schemes

### What is a color scheme?

A color scheme is a set of coordinated colors used across different elements of your store.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FflXXlA97dmTX3mpC6jUb%2Fimage.png?alt=media&#x26;token=278c362d-96a4-4349-a74a-611f756fef51" alt=""><figcaption></figcaption></figure>

In the Pebble theme, a color scheme can control:

* **Background**
* **Background secondary**
* **Text**
* **Subtext**
* **Border**
* **Sale price**
* **Primary button**
* **Secondary button**
* **Inputs (form fields)**
* **Swatches (color swatch borders)**
* **Notifications (Success, Error, Warning, Info, Out of Stock)**
* **Progress bar**

You can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store, using a color scheme picker.

### Apply your color scheme

After defining your schemes, you can assign them using the **Color scheme** picker inside section/block settings.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FAzGvEQl2es5KtODpJGal%2Fimage.png?alt=media&#x26;token=a46f6ee5-0d0d-477d-b24e-037c2fb02fb4" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The color scheme picker is only available in sections/blocks that support custom color schemes.
{% endhint %}

## Other element colors

### Badges

The Pebble theme allows you to fully customize the appearance of product badges.

Available badges:

* **New badge**
* **Hot badge**
* **Popular badge**
* **Sale badge**
* **Sold out badge**

For each badge type, you can set:

* **Background color**
* **Text color**

{% hint style="info" %}
To add custom badges to your store, go to **Theme settings >** [Product badges](https://docs.foxecom.com/pebble-theme/theme-settings/product-badges).
{% endhint %}

### Other colors

The Pebble theme also includes additional standalone color controls, such as:

* **Cart bubble background**

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3Kd1zQi4tQzyJAQUaetB%2Fimage.png?alt=media&#x26;token=bcc47aaa-411d-4108-ae6b-79d911d1e7dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQfcgrMesIdI4yY6Hrhgm%2Fimage.png?alt=media&#x26;token=35f76a35-bc61-4c8e-bdfd-f72208951624" alt=""><figcaption></figcaption></figure>
