The Color Picker is found throughout Avada, in various Global, Page, and Element options. This is the primary tool for selecting colors throughout your site, and it’s important to understand how to access it and how it functions. Let’s have a look.

When you first go to any specific color option, it can look differently, depending on its state and whether it has default values.

If in that specific instance, the option is connected to a Global Color, the Globe icon with be blue, and the option will have a grey background.

If the option is not connected to a Global Color in the specific instance, but has a default color coming from the global options, there will be no text in the option, but there will be a color in the color indicator (the circle of color), and the default value will be listed in the description.

If a hexadecimal or RGBA value has been already set, the value will show in the option, and the color will display in the color indicator.

Finally, if no value has been set and there is no default value, then all areas will be empty.

To access the standard color picker, just click on the Color indicator at the left (the circle of color). If a Global Color has previously been set, this then disconnects any global color position and changes the value to a hexadecimal code.

At the very top is a color indicator. If there is no hexadecimal value present beside it, it indicates that the color value is either empty or coming from the global option defaults. If there is a hexadecimal code or a global color, it indicates that it has been added in this instance of the color picker. You can generate hexadecimal codes in graphics programs like Photoshop, and on many websites online.

While it’s an accurate way of selecting colors, you don’t have to enter a hexadecimal code. You can also just drag the hue selector around in the color field, and manipulate the range with the saturation slider and alternatively, the opacity slider. See below for more information on these sliders.

On the right-hand side is the Global Color Palette icon. This is the recommended way of adding colors in Avada. If you click this, you can assign a specific color from any one of the colors on the Global Color Palette. This ties it into that position on the Global Color Palette and affords you a powerful way to update colors across your site. See the Working With Color Options in Avada for more detailed information on this powerful aspect of the Color Picker.