Use the Colour Picker

Colour Picker is an editing feature that enables you to customise the colour scheme of text, background, and other elements. You may select a colour from the colour palette, enter a HEX or RGB value, or even design your own gradient. Recent colours can help you maintain a consistent colour scheme and a professional appearance on your site.

How to Use the Colour Picker

Want to change colours on your site but don’t know where to start? No worries! Here’s a dead-simple guide to using the colour picker to update things like text, backgrounds, and overlays, whether it’s a solid colour or a fancy gradient.

Step 1: Choose Where You’re Adding Colour

You can apply colour to:

• Text
• Backgrounds (like rows, columns, or sections)
• Buttons
• Overlays on images

Just click on the thing you want to colour, and the colour picker will pop up.

Step 2: Pick Your Style

You’ve got two options:

• Single Colour – a plain, solid colour (easy)
• Gradient – blends two colours together (bit fancy)

To use Single Colour:

• Pick from the Recent Colours (already used on your site)
• Or click “Choose another colour” to pick a new one
• You can enter a HEX or RGB code, or use the eyedropper to grab a colour from anywhere on your site

To use Gradient:

• Click the dropdown above the colour palette and choose “Gradient”
• Pick two colours to blend
• Set the direction (left to right, top to bottom, etc.)
• Want a circle effect? Choose “Centre” for radial gradient

Note: Gradients only work for backgrounds and image overlays, and not text.

Step 3: Use Theme Colours (Optional but Awesome)

Theme Colours let you save your brand colours so everything stays consistent. When you link widgets (like buttons or headings) to Theme Colours:

• Changing the colour in the theme settings automatically updates everything linked to it. Magic!

To do this, go to the Theme tab > Colours and set up your palette. See more info about Theme Colours here.

Step 4: Save Your Favourite Colours

Found a colour you love? Save it!

• In the colour picker, go to Saved Colours
• Click the “+” to save it
• Right-click any saved colour to delete it
  You can save up to 48 colours in there.

Step 5: Use Recent Colours

The Recent Colours tab shows you colours you've already used on your site. It makes matching things quick and easy.

Step 6: Control Opacity (Transparency)

Use the opacity slider to make things more see-through or bold.  Slide it left for more transparency, right for more solid colour.

Step 7: Text Contrast Checker (For Accessibility)

When choosing text colours, the system checks if your colour choice has enough contrast against the background, so it's easy to read.

You’ll see labels like AA or AAA, which just mean:

• AAA = super clear
• AA = good enough
• Fail = hard to read

This won’t work if:

• Your text has more than one colour
• Your background is an image or a gradient

Few Things to Remember:



• Gradients don’t work on text. Only backgrounds
• If you switch from colour to image (or vice versa), your settings for the other one will be lost
• If you apply a gradient to buttons, it can override individual styles. Just reselect the button colour if needed.

That’s it! It’s not meant to be complicated. Once you play around with it a bit, it becomes second nature.