Global colors - How to change website colors

Editing and using global colors

Choosing colors for elements on your website is one of the most common tasks. Using Global Colors, it's easy to choose a color palette for your design and apply it to any element without having to set color every time you add a new element to your website.

Global colors are divided into 3 different categories:

Spot colors
Base colors
Custom colors





These categories allow you to define a hierarchy so that the process of applying and editing the color scheme on your website is simple and efficient.

Defining global colors
You can define your color palette for your website in the Design menu on the left side of your screen by selecting the Global colors option. By selecting the swatch next to the color identifier, you can choose the specific color palette you would like to reuse on elements throughout your website. Think of Spot Colors as your main brand colors. To the spot colors, add a light, a regular and a dark version of the same color. Base colors are primarily used as background colors on elements like rows, columns or text. Custom colors are there to provide additional color options if needed.

Using global colors
When styling an element, such as a button, you have quick access to your predefined global colors when assigning colors to different elements. It is important to use the global swatches if the website color(s) change at another time. If you change the swatches in the Global colors menu, it will affect all elements styled with global colors on the website.

Updated on: 12/03/2024