Working With Color Options In Avada

Last Update: April 12, 2024

Color management is an integral part of designing and maintaining your website design and branding. To help with this, Avada offers advanced and streamlined color options to help you manage your color settings with ease.

It all starts with the Global Color Palette, which is 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 color options in Avada, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

Setting The Global Color Palette

The best place to set your global color palette is when setting up your website with the Avada Setup Wizard. If you are choosing a Prebuilt site, the color palette will be set for you. See the Color section of the Avada Setup Wizard document for more details on this process, but regardless of whether you have used the Setup Wizard to set the initial global colors, you can find them at Global Options > Colors.

You can also add extra colors to the palette, by clicking on Add New Color, and your colors can be renamed to whatever you like.

Global Color Palette

Setting Global Colors In Global, Page & Element Options

Once you have set the colors in 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.

Primary Color > Standard Color
Primary Color > Set Global Color
Primary Color > Global Color Set

So what this does is not just make the Primary Color blue, but ties it to whatever color is selected in that Color 4 position. 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 options, accessed by the sliders icon at the right of the dialog when adding a global color, offer the ability for Hue, Saturation, Luminance (or Lightness) and Alpha value adjustments. 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.

Global Color Palette > Advanced options

Setting Non Global Colors

You can of course, also just use the standard color picker to add a color to an Element. The main benefit with using Global Colors is that they are then very easy to update across the entire site, just like Typography sets.

But if you click on the circle of color in a color option, the standar color picker appears and you can add a color that is not connected to Global Options. See the How To Use The Color Picker doc, linked below, for full information on how that tool works.