How To Use The Global Color Palette In Avada

Color management is an integral part of designing and maintaining your website design and branding. This is why we constantly improve our color features in Avada to allow you to manage your color settings with ease. The latest innovation, released with 7.6, is a revised Global Color Palette, which can be used to define a palette of colors, which can then be tied to various global, page and element options on your website, allowing for quick updating of the entire site』s color scheme. Continue reading below to learn about the new color options.,Setting The Global Color PaletteThe Color Palette was originally added back in Avada 6.0, but with Avada 7.6, it has had a major overhaul. It』s a completely different beast now, and does a lot more than just set a color palette. For existing sites, this feature might be overlooked, but where it comes into its own is on a new site, or a freshly imported prebuilt site.
When starting a website, this is the place to go to initially set your site colors. You can find the Color Palette in the Global Options, under Color. There is a palette of eight inital colors, which for best results, you should set from lightest to darkest. Generally, you will set your white and bright tones, then your primary and accent colors, and then your greys or dark tones, as illustrated below. If needed, you can also add extra colors to the palette, by clicking on Add New Color.,Setting Global Colors In Global, Page & Element OptionsOnce 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 OptionsWhen 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.
View the How To Use The Color Picker Doc here