Color management is an integral part of designing and maintaining your website design and branding. To help with this, Avada offfers 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.
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 colours can be renamed to whatever you like.
IMPORTANT NOTE: There is a palette of eight inital colors, which for best results, should be set from lightest to darkest. Generally, you set your white and bright tones, then your primary and accent colors, and then your greys or dark tones, as illustrated below. The Setup Wizard analyses your colour palette for contrast and luminance order, but the general idea is that you match Color 4 with Color 8, and Color 5 with Color 1 in your designs, to maximise contrast on your site.
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.
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.
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.