Site color palette
Weblium editor allows you to create websites fast and easy, and one of the key features that helps you achieve that is a global color palette. The site color palette keeps the design consistent no matter what blocks and elements you add. In other words, it chooses a color automatically for all new elements.
The article below will help you understand how to work with the global site color palette.
The color palette adjusts the color of various elements on the site — for example, buttons, text, or block backgrounds. Most of the elements can be customized manually, but choosing a color palette can save you time and minimize design mistakes.
To change the color palette of the site, go to the editor, click on the Site style icon on the toolbar in the editor:
In the Colors tab, hover over the current site palette and click Edit :
Change the colors in the new window and check which text elements they affect, then click Done :
Light shade in the palette is used mainly for text that is on a dark background, and also as a background for dark elements. For example, a light shade is used for the price in the product cards in the online store or for the color of the hamburger menu icon on a dark background in the mobile version of the site.
Dark shade , on the contrary, is used for the color of the text that is on a light background. It also serves as a background for light elements. For example, it is also used for the color of the hamburger menu icon in the mobile version, but only with a light background.
The main brand color is a unique color that emphasizes the main elements on your site. It can be applied multiple times to maintain the overall design. It is used, for example, for the primary style of the buttons or the color of the price in the product cards on a light background.
Accent colors are used as an additional way to highlight objects on the site. We recommend choosing light and dark accent colors to distribute them evenly throughout the site.
There are some elements on the site the colors of which are set automatically by simply mixing some of the colors in the palette — for example, the description and the titles in the blog, the color of the hover for the sub-items in the menu, etc. You can change them by experimenting with the color palette.
For example, the date in the following blog post has a green shade:
If you take a look at the site palette, there isn't any green shade at all:
Thus, try to change the colors and see what elements on the site they affect. There's always an Undo button right there if you don't like the end result:
If you're experimenting with the colors, you'll notice that if you change the Dark shade in the palette, the date color will change as well:
You can also completely change the current palette of the site by choosing a ready-made option from our gallery:
For the changes to take effect, publish the site.
The article below will help you understand how to work with the global site color palette.
Site color palette
The color palette adjusts the color of various elements on the site — for example, buttons, text, or block backgrounds. Most of the elements can be customized manually, but choosing a color palette can save you time and minimize design mistakes.
To change the color palette of the site, go to the editor, click on the Site style icon on the toolbar in the editor:
In the Colors tab, hover over the current site palette and click Edit :
Change the colors in the new window and check which text elements they affect, then click Done :
Light shade in the palette is used mainly for text that is on a dark background, and also as a background for dark elements. For example, a light shade is used for the price in the product cards in the online store or for the color of the hamburger menu icon on a dark background in the mobile version of the site.
Dark shade , on the contrary, is used for the color of the text that is on a light background. It also serves as a background for light elements. For example, it is also used for the color of the hamburger menu icon in the mobile version, but only with a light background.
The main brand color is a unique color that emphasizes the main elements on your site. It can be applied multiple times to maintain the overall design. It is used, for example, for the primary style of the buttons or the color of the price in the product cards on a light background.
Accent colors are used as an additional way to highlight objects on the site. We recommend choosing light and dark accent colors to distribute them evenly throughout the site.
There are some elements on the site the colors of which are set automatically by simply mixing some of the colors in the palette — for example, the description and the titles in the blog, the color of the hover for the sub-items in the menu, etc. You can change them by experimenting with the color palette.
For example, the date in the following blog post has a green shade:
If you take a look at the site palette, there isn't any green shade at all:
Thus, try to change the colors and see what elements on the site they affect. There's always an Undo button right there if you don't like the end result:
If you're experimenting with the colors, you'll notice that if you change the Dark shade in the palette, the date color will change as well:
You can also completely change the current palette of the site by choosing a ready-made option from our gallery:
For the changes to take effect, publish the site.
Updated on: 12/06/2023
Thank you!