This article is also available in:

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.

To change the color palette of your website, open the editor and click on the Website styles icon in the control panel:

In the Colors section, you can go to the ready-made presets and choose one of them:

... or manually edit your site's palette by clicking on it:

Tip: You can also edit the palette via the palette library by clicking on your site's current palette there.

In the new window, you can edit the five available shades:

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)

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.

Updated on: 09/22/2025

Was this article helpful?

Thank you!