Learn how to change the general colors of your website.

Using the 'Global colors' option in the SiteDu.de Website builder allows you to maintain a consistent appearance for all elements, enabling you to globally change colors in your project and quickly adjust the template to your preferences.

Please, only change the colors here, if you know what you are doing. Your changes affect the whole website. If you are looking for input for nice color palettes, look at this great website:[https://colorhunt.co/](https://colorhunt.co/)

## Color palette styles

Color palettes are created automatically when a new page is created. The color palette is changed by clicking on the current palette and selecting another color palette, while the color in the palettes is changed according to the****"Edit existing color"**** section.

![](https://help.webwave.me/lib/dkwr2z/2024-02-29_14-22-lt79fuky.png)

### Available Global Page colors

The following page colors are available by default:

****Brand****

|||
<colgroup><col /><col /></colgroup>|:---|:---|
|****Element****|****State/edit****|
|Button|Normal state|
|Add to shopping cart|Normal state|
|View shop cart|Normal state|
|Login|\-|
|Website|Normal state; Active state|
|Blogsfeed|Read more/Text color|
|Formularz|Normal state/Send button|

****Secondary****

|||
<colgroup><col /><col /></colgroup>|:---|:---|
|****Element****|****State/edit****|
|button|Hover|
|Add to shopping cart|Hover|
|View shop cart|Hover|
|Website menu|Hover|
|Form|Hover/Send button|
|Blogsfeed(edit)||
|Data|Text color|
|Single article|Border|
|Pagination|Selected pagination index(background)|
|Pagination|Pagination index|

****Neutral 1****

Neutral color 1 is responsible for the color of text styles. You can edit these styles in the["Text style"](https://help.webwave.me/text-style---automatic-change-of-a-text-and-header-style) tab.

|||
<colgroup><col /><col /></colgroup>|:---|:---|
|****Element****|****State/edit****|
|Extensive text|Text color|
|Header|Text color|
|Counter|Text color|
|Website menu|Text color - without state|
|Blogfeed(edit)||
|Header|Text color|
|Content|Text color|
|Form(edit)||
|Inputs|Border/Color|

****Neutral 2****

|||
<colgroup><col /><col /></colgroup>|:---|:---|
|Blogfeed||
|Pagination|Selected pagination index/Text color|
|Form(edit)||
|Inputs|Background color|

## Manage your colors

Want to assign a color other than the base color to an element? You can have as many user colors as you want, you can add them, delete them and edit their name.

### Adding your own color  
![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-04-lg6g0223.png)

### Edit an existing color

To edit the color of an existing color, click on the preview of that color and select the appropriate color using the color palette or HEX code.  
  
![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-06-lg6fz7e1.png)

### Edit color name  
![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-05-lg6fyfb0.png)

### ****Color Removal****  
![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-05_1-lg6g0dxq.png)

## How to assign a color to an element

Instead of a history of recently used and favorite colors, you now have page colors that you can assign to several elements and globally modify their color in the****"Global colors"**** tab if necessary.

Assigning a particular color to an element is very simple:

****Graphic elements:****

![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-15-lg6gayy3.png)

****Text elements:****

![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-17-lg6gd258.png)

The selected page color will be marked with a white dot.

****ATTENTION!**** When you change the page color in an element, the element will inherit the new color and react to its change.

## Connecting page colors to existing elements

Do you have a site, or are you using a template and would like to change the layout? Take advantage of the****"Connect to elements"**** option. This feature allows you to locate and change the color (globally) of elements that have the same color as the selected page color.

![](https://help.webwave.me/lib/dkwr2z/Kolory-strony-en-lg6h0fw4.gif)

****Attention!****That we can use a pipette to set the same color (only works in chrome).

![](https://help.webwave.me/lib/dkwr2z/2023-04-07_13-17_1-lg6gezp3.png)

We click this icon, then hover over the selected element from which we want to acquire the color. After acquiring the color, we click****"Ok"****.

Global Colors

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?