The Color Picker is found throughout Avada, in Global options, Page options and Element options. This is the primary tool for selecting colors throughout the site, and it’s important to understand how it functions. Let’s have a look.
At the very top is a color indicator. If there is no hexadecimal value present beside it, it indicates that the color value is coming from global options. 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 in to that position on the Global Color Palette and affords you a powerful way to update colors across your site. See the How To Use The Global Color Palette for more detailed information on this powerful aspect of the Color Picker.
Saturation and Opacity
The Saturation and Opacity Sliders are also very powerful. If you reduce the Saturation slider, your colors will become more pastel. If you reduce the saturation to zero, then your color picker will only display tones, from white to pure black and everywhere in between.
If instead, you reduce the Opacity Slider, the Hexadecimal code will be replaced by an RGBA value. This value notates the Red, Green and Blue values of the color, as well as the Alpha value (opacity). This makes the color picker very powerful indeed, and in this way, you can choose from millions of colors for your website.