> For the complete documentation index, see [llms.txt](https://help.freewebstore.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.freewebstore.com/design/theme-editor/colors.md).

# Colors

A step-by-step guide detailing how to change your free online store theme colors from within your Freewebstore Control Panel.

Colours are a big part of your branding. Pick the right palette and your store will look every bit as polished as the big online shops.

On the new design system you change your store's colours in the **Website Theme** editor. Your four brand colours are used across every block, so one change restyles your whole store.

{% hint style="info" %}
Using one of our older designs? See [Older designs](#older-designs) at the bottom of this page.
{% endhint %}

### Change your colours

1. Log in to your Freewebstore Control Panel.
2. Go to **Design > Website Theme**.
3. Click **Design** on the left, then **Colours**.
4. Under **Design palette**, click a colour to change it. The panel shows where that colour is used and whether text on it is easy to read.
5. Your store preview updates as you go. When you're happy, click **Save** at the top of the screen.

Changed your mind? Click **Discard** instead of Save to go back to your saved colours.

{% hint style="warning" %}
**Can't save?**

We won't save colours that make text hard to read. If a colour and the text on it don't have enough contrast, you'll see a message naming them. Choose a darker or lighter shade and try again.
{% endhint %}

### Pick a ready-made palette

1. Go to **Design > Website Theme**, then click **Design** and **Colours**.
2. Under **Suggested palettes**, click a palette. All four brand colours change at once. Each palette is already balanced for contrast.
3. Click **Save**.

Your Brand Kit colours appear first, under **From your brand kit**.

### Use your Brand Kit colours

Changing the colours in your Brand Kit does not change the colours on your store. To bring your store into line with your Brand Kit:

1. Go to **Design > Website Theme**, then click **Design** and **Brand kit**.
2. Click **Preview these colours on your store**. (This button only appears when your store's colours are different from your Brand Kit.)
3. Check the preview, then click **Save** to keep them, or **Discard** to go back.

### Light or dark look

To change your store's overall look, such as a dark background with light text, click **Design**, then **Theme**, and pick one of the ready-made looks. This takes effect straight away; your brand colours stay the same. On some designs this option is called **Dark mode** instead, with an **Enable dark mode** switch.

### Older designs

If your store still uses one of our older designs:

1. Go to **Design > Theme Editor**.
2. Click **Design** in the top right of the editor and choose **Colors**.
3. To change your own colours, click **Edit** next to **Your Color Palette**, adjust the colours and click **Save**.
4. To use a ready-made palette, click **Select** on one of the **Popular Color Palettes** and click **Save**.

To reset your colours, select the first palette in the list, which is your design's original colours, and click **Save**.