# Colors

![](https://docs-assets.foxecom.app/motrix-theme/be000f42-1ae3-4739-9fb3-fa769147afb7.jpg)

Colors define the visual identity of your storefront. From this section, you can customize your theme's color palette, create reusable color schemes, and adjust the appearance of badges, labels, and other interface elements.

## Palette

<Table widths="30%">
  | Setting     | Description                                                                                                                                 | Option                                  |
  | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
  | **Palette** | The defines your store's base background and text colors.<br /><br />These colors are used as the foundation for the theme's color schemes. | Add a color palette and select a color. |
</Table>

<Hint type="info">
  You can add up to **20 palettes**.
</Hint>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/ee33d112-fa70-4e29-8aaf-724618876109.png" />

  <Figcaption>
    Color palette in color scheme
  </Figcaption>
</Figure>

## Color schemes

<Table widths="30%">
  | Setting     | Description                                                                                                                                                                                     | Option                          |
  | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
  | **Schemes** | **Color schemes** let you create reusable sets of colors for different sections throughout your storefront.<br /><br />You can create, rename, edit, or remove color schemes at any time.<br /> | Add a color scheme and edit it. |
</Table>

<Hint type="info">
  You can add up to **21 schemes**.
</Hint>

Updating a color scheme automatically updates **every section using that scheme**.

![](https://docs-assets.foxecom.app/documentation/073d86dc-2311-452c-ad28-be37b9d1a55a.png)

## Product badge colors

Customize the colors used for different product badges: **New, Hot, Popular, Sale,** and **Sold out** badges

<Table widths="30%">
  | Setting          | Description                                                                      |
  | ---------------- | -------------------------------------------------------------------------------- |
  | **Background**   | Select background color for **New, Hot, Popular, Sale,** and **Sold out** badges |
  | **Text**         | Select text color for **New, Hot, Popular, Sale,** and **Sold out** badges       |
  | **Border color** | Select border color for **Sale,** and **Sold out** badges                        |
</Table>

![](https://docs-assets.foxecom.app/documentation/72f6275f-48df-407b-95c4-63b7278aadca.png)

Badge styles such as border radius and border width are configured separately in [**Appearance**](https://docs.foxecom.com/motrix-theme/theme-settings/appearance#badges-and-sale-badge), while the products assigned to **New**, **Hot**, and **Popular** badges are managed in [**Badges**](https://docs.foxecom.com/motrix-theme/theme-settings/badges#badge-settings).

<Hint type="success" title="Tip">
  Product badge colors are fixed and don't automatically adapt to light or dark color schemes. Make sure there is enough contrast between the badge background and text for good readability.
</Hint>

## Labels

Customize the appearance of label pills displayed on supported cards.

<Table widths="30%">
  | Setting          | Description                        |
  | ---------------- | ---------------------------------- |
  | **Background**   | Select background color for labels |
  | **Text**         | Select text color for labels       |
  | **Border color** | Select border color for labels     |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/88d7685e-6abd-490a-bae1-0ed9f72cedcc.png" />

  <Figcaption>
    A label on image card
  </Figcaption>
</Figure>

## Other colors

<Table widths="30%">
  | Setting                    | Description                                                               | Option         |
  | -------------------------- | ------------------------------------------------------------------------- | -------------- |
  | **Cart bubble background** | The background color of the cart item counter displayed on the cart icon. | Select a color |
  | **Cart bubble text**       | The text color of the cart item counter.                                  | Select a color |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/motrix-theme/6005faef-7f14-4c88-932b-8597363b9704.png" />

  <Figcaption>
    Cart bubble
  </Figcaption>
</Figure>