Using the Colour Picker

Overview

Colour Picker is the function of your editor that lets you manage colour scheme of text, background, overlays and more. You can choose a colour from the colour palette, input a HEX or RGB value or even create a custom gradient. Recent colours feature will help you keep your colour scheme consistent and maintain a professional look and feel on your Site.

Guide

When working with the Colour Picker, you have the following options:

colorpicker1_en-US.png

Colour style

Before you pick the colour scheme, you need to choose where you want to use single colour or a gradient.

If you are using single colour option, you can pick a colour from Recent colours tab or jump to Choose another colour.

Gradient background will be an available option for row, column and widget backgrounds and image overlays. To apply a gradient, make sure to:

  • Pick 2 colours of the gradient stops
    • You can reverse the colours to adjust the stops positioning
  • Choose gradient direction
    • Centre option will generate radial gradient
    • Side options will create linear gradient

Recent colours

When picking a colour, the recent colours menu shows a sample of colours that were recently used in your Site. This allows you to quickly pick colours that are already on your Site.

Choose another colour

Select a colour's hue using the colour palette on the right or the colour panel. Alternatively, you can enter the HEX or RGB value of the colour you want in text box below the vertical colour gradient.

Opacity

The opacity slider determines the transparency of an element. Keep in mind that as you reduce an element's opacity, whatever is behind it (background image or colour) will begin to blend with that element.

Things to consider

  • Gradient is not available for text elements, so you will not see it in a Colour Picker for text elements in widgets design editor of Global Design tab.
  • When working with backgrounds, switching between Colour and Image will set the settings on the previous option to null. To give an example, if you were using a colour and changed the setting to Image, any colour or gradient settings will be removed.