How to use the colour picker

The Colour Picker is used to select and adjust colour values throughout the EE Builder user interface, such as backgrounds, buttons, text, and links. You can also adjust opacity, saturation, and save your favourite colour presets.

Opacity

The opacity slider, located on the right-hand side, utilizes the RGBa alpha channel (rgba(red, green, blue, alpha)). As you adjust the opacity, the hex color value (#ffffff) will update to reflect the corresponding RGBa value (rgba(255,255,255,0.8)). Alternatively, you can manually enter custom RGBa values in the input field at the top of the color picker.

Saturation

Adjust the colour saturation using the slider at the bottom. Saturation refers to the intensity or vibrancy of a colour. Here's how it works:

- 100% saturation: Pure, vibrant colour with no grey tone.

- 50% saturation: A balance of colour and grey, with the colour still visible.

- 0% saturation: Completely grey, with no discernible colour.

Add colour manually

To create a colour preset in EE Builder:

1. Open EE Builder on your page or post and click on any colour setting for a row, column, or module to open the Colour Picker.

2. Select a colour or enter a hex or RGBA value. You can also type or paste in a colour code. #1 in the screenshot below.

3. Click the "+" symbol in the top-right corner of the Colour Picker to save the colour as a preset. #2 in the screenshot below.

4. To view and manage your saved colour presets, click "Colur Presets" at the bottom of the Colour Picker. #3 in the screenshot below.