Color Settings


Color management is an integral part of designing and maintaining your website design and branding. This is why we have improved our color selector feature to allow you to manage your color settings with ease. We’ve added a simple transparency slider that allows you to set a transparent or semi-transparent color for different elements such as backgrounds, dividers, borders, and the like. Continue reading below to learn about the new color selector.

IMPORTANT NOTE: This feature is only available in Avada version 4.0 or higher

How To Use The Color Selector

Step 1 – Decide which color option you would like to adjust. For this example, let’s look at the ‘Button Gradient Top Color’ option located in the Avada > Options > Avada Builder Elements > Button section.

Step 2 – To bring up the color selector, click the ‘Select Color’ button.

Step 3 – Drag the circle, illustrated as A, with your mouse over the spectrum to choose a color. If you have a particular color in mind, you can instead add the unique hexadecimal code in field provided, illustrated as B. For example, #000000

Step 4 – Control the saturation of the spectrum by moving the first slider on the right up or down, illustrated as C. The lower the slider, the less saturated the colors.

Step 5 – Control the transparency of your chosen color by moving the rightmost slider up or down, illustrated as D. Adding transparency converts the hexadecimal to RGBA.

Step 6 – Press the ‘Default’ button to revert the color back to the default color.

IMPORTANT NOTE: Options like font and icon colors do not accept transparent settings.