Setting Global Colors In Global, Page & Element Options
Once you have set the colors on your Global Color Palette, you can begin to set them across your site. Anywhere you find a color picker, you will find a globe icon to access the global palette colors. As you can see in the example in the screenshot below, there is a globe icon at the end of the Primary Color option. To connect the primary color to a color from the Global Color Palette, simply click on the globe, and the Global Color Palette will appear, as in screenshot two.
In the final screenshot, the option has been tied to Color 4 on the Global Color Palette. As you can see, the globe icon becomes blue when a global color has been assigned to an option.
So what this does is not just make the Primary Color blue, but ties it to whatever color is selected in that Color 4 spot. So if that color is then updated, the Primary Color would be updated, as well as any option in the website that pulls the Primary Color.
The significance of this feature is easy to underestimate. Once color options across the site are tied to Global Palette colors, it takes only one change to a color in the Global Color Palette for that change to ripple throughout the entire website, allowing you to change the appearance of the site very quickly and efficiently.
Advanced Global Palette Color Options
When setting a Global Palette Color, there are also some advanced options available. These will not be needed by most users however. These options, accessed by the sliders icon at the right of the dialog when adding a global color, offer Hue, Saturation, Luminance and Alpha options. With this, you can manipulate the existing global color, from the starting point of the chosen global color values. To undertsand HSLA color options, visit this site.