> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Site color palette



The Weblium editor allows you to create websites quickly and easily. One of the most significant advantages that helps in this process is the global color palette of the website. The website palette automatically selects the appropriate color regardless of which block or element you add, and helps to keep the website design consistent. 

The article below will help you understand how the color palette works.

# Site color palette

The color palette is responsible for the color of various elements on the site — for example, text in contact form fields, dates in blog posts, or product prices. In general, most elements can also be customized manually, but selecting a color palette will help you save time and minimize design mistakes. 

1. To change the color palette of your website, open the editor and click on the **Website styles** icon in the control panel:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/kolorova-palitra-saitu-angl-1_1hojdk1.png)
2. In the **Colors** section, you can go to the ready-made presets and choose one of them:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/kolorova-palitra-saitu-angl-2_1aah1kg.png)
... or manually edit your site's palette by clicking on it:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/kolorova-palitra-saitu-angl-3_1gerdpm.png)
| ${color}[#1aa900](Tip:) You can also edit the palette via the palette library by clicking on your site's current palette there.

3. In the new window, you can edit the five available shades:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/kolorova-palitra-saitu-angl-4_1gxy4b8.png)
### Brand color

This is a unique color that highlights the main elements on your website. It can be used repeatedly to maintain a consistent design. By default, it is used in the following elements:

* for the **price of a product** if it is on a light background
* for the **price range** field and **checkbox fields** in product filters

### Accent colors

These are used as an additional way to highlight objects on the website. You can choose light and dark accent colors and then distribute them evenly throughout the website. By default, they are used in the following elements: 

* text frame in the **Countdown** element (Dark accent)

### Background and text

**Light base** is mainly used for elements on a dark background, as well as a background for dark elements. 

**Dark base**, on the other hand, is used for colors of elements on a light background. 

By default, they are used in the following elements: 

* for the separator and text expansion icon in the **Accordion** element (depending on the background)
* for text in the **Countdown** element (depending on the background)
* location name in the **Map** element (Dark base)
* for **product price**, if it is on a dark background (Light base)
* for the **product name** (depending on the background)
* in the `wireframe-series-3-process` block for the connecting line between points (depending on the background)
* for texts in product **filters** (depending on the background)
* for the **Text Rotator** element (Dark base)

||| ${color}[#f97700](Important:) there are also elements whose color is selected automatically; it may depend on the selected template, font preset, or palette preset. 

For the changes to take effect, don't forget to [publish your site.](/en-us/article/publishing-a-site-tgxmch/)