Working With Color Options In Avada

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.

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.

You can add more colors to the inital color palette of eight colors by clicking on the Add new Color button at the bottom of the Color Palette. You can name them as you want, and you can delete them at any time with the trash icon next to the color. Just note, you can’t delete any of the colors in the initial palette. It’s designed for 8 colors or tones. As you can see in the screenshot above, the general idea is ist to set one or two colors, and the remaining places can be filled with a variety of tones, from white to black. You don’t have to use all the colors in the color palette, but there will always be at least 8 color places.

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.

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.

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.

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.