When designing your website, choosing the ideal colors is an extremely important decision - colors should be considered as a medium of communication, contributing greatly to the overall attractiveness of your website. Global colors allows you to define a color scheme to your website and apply it to different elements multiple times without having to set the color each time.
1. Why use global colors?
Instead of using a lot of different colors, websites should have a color scheme in which a limited number of colors are used consistently throughout the pages. This will significantly improve the visitors' experience when browsing your pages.
2. Defining global colors
2.1. Where to find global colors?
You can find the Global Colors selector on the left side menu under the Global Styling tab of the editor.
2.2. How to define global colors
By selecting the global colors option, a new menu will open where you can select up to 15 colors to create your color scheme - 3 primary, 3 secondary, 4 base and 5 custom - e.g to define the Primary Spot Color 1, click on the square on the right of the option and then choose the color from the color picker or paste the color hex code on the box. Once you have defined your global colors, don't forget to save by clicking on the Save button.
For the primary colors you should add a light, a regular and a dark version of the same color. This allows you to use these colors across the site for things like hover effects. There are also three secondary colors which you can use in the same way, along with a range of grays for row backgrounds and uses elsewhere. You can also use the custom colors to use less-common colors, if you need to add more.Generally we would suggest sticking to no more than 2 main colors for a website.
2.3. Colors Being Used
It is possible to find a small icon in front of each color, in case that color is being used somewhere on the site. If you hover on top of the icon, the editor will show you a list of places where that color is currently being used on.
3. Using global colors
When styling an element, you can now have quick access to your predefined global colors when attributing colors to different elements.