# Colors

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.

<Hint type="success">

**Steps:**

1. In the theme editor (**Customize**), click **Theme settings.**
2. Select **Colors**
3. Manage your **Schemes** and other element colors.
4. **Save** the changes.

</Hint>

## Color schemes

### What is a color scheme?

A color scheme is a set of visually compatible colors that applies to the following elements:

* Accent&#x20;
* Border
* Text (Heading and Body text)
* Background
* Primary button
* Secondary button
* Form field
* Product sale price
* Tooltip

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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_MwVGGUFH.png)

### Apply your color scheme

After defining your color scheme in the theme settings, you can assign a color scheme using the color scheme picker in the section settings.&#x20;

The color scheme picker is available only in certain sections and general theme settings.

![image](https://docs-assets.foxecom.app/hyper-theme/image_uJlhHlPA.png)

## Other element colors

### Badges

To change the text color and background color of the badges.

![image](https://docs-assets.foxecom.app/hyper-theme/image_bbO9kAf7.png)

<Hint type="info">

To add custom badges to your store, go to **Theme settings >** [Product badges](https://docs.foxecom.com/hyper-theme/theme-settings/product-badges).

</Hint>

### Other colors

To change the background color of the **Cart bubble background** and **Keyboard focus**.

![image](https://docs-assets.foxecom.app/hyper-theme/image_N9gzWJYh.png)

![image](https://docs-assets.foxecom.app/hyper-theme/image_RCV75BKy.png)