Colour Picker

The Cwicly Colour Picker has been designed to make your life easier.
It associates a standard donut type colour picker with several other features designed to save time and open up a scope of possibilities.
Open Colour Picker
To open the Colour Picker
  1. 1.
    Select a block
  2. 2.
    Open the Colours tab (Primary or Design tab)
  3. 3.
    Click the relevant circle to which you want to apply a colour or gradient (Link, Background, Text, Overlay)
  4. 4.
    This will open the Colour Picker
Close Colour Picker
  1. 1.
    Click away to close

The Triadic Palette

The Triadic Palette is located directly above the colour picker and is made up of four columns and four rows.


The first row of the palette displays four shades of the colour chosen in the colour picker.

Triadic Colour Scheme

Under each shade, in the following three rows, are displayed the triadic colour schemes for different shade.
These are based on contrasting shades that are situated at equal distances on the colour wheel and give a palette that is interesting and vivacious.
You can inspire yourself with these colour combinations to build your site.
Here is an example of a Triadic colour scheme with the colour wheel.

Colour Picker

The colour picker allows you to adjust and select desired colour values.
It can be manipulated by dragging the circle with the mouse.
It has an effect on the colour palette above.

Eyedropper Tool

Under the colour picker you will find the Eyedropper Tool.
The Eyedropper Tool allows you to sample a colour from a given image and then re-use it as required, in the background, text etc.

Selected Colour and Code Reference

Next to the Eyedropper Tool is a clickable square of the current colour and Code reference.
To Copy the selected colour to clipboard, simply click on the square and it will be automatically copied.

Contrast Checker

Next to the Colour Reference is a Contrast Checker that compares the contrast between the background and any other colour on the background such as text to assure the user that the chosen colour combination is compatible with WCAG (Web Content Accessibility Guidelines).
The Image shows the two colours being compared with an accessibility score next to it. If the contrast is satisfactory, a green tick will be shown.
If not, a red exclamation mark will be shown.

Colour Systems

The Cwicly Colour Picker allows you to work with one of two Colour Systems, HSLa or RBGa.
You can simply change between the two systems by clicking either HSLA or RBGA on the left hand side.


HSLA stands for Hue-Saturation-Lightness-Alpha and is a more modern and intuitive approach to colour selection than RBGa.
HSLA uses hue to define the colour and allows you to adjust saturation and lightness once you have chosen the desired hue.
The “a” allows you to adjust opacity.


RGBa stands for Red-Green-Blue-alpha. RGBis a system for representing the colours to be used on a computer display.
Red, green, and blue can be combined in various proportions to obtain any colour in the visible spectrum.
The “a” allows you to adjust opacity.

Global Colours

This is where you can see your Global Colours.
You can add more Global Colours directly from here by clicking the "+" sign.
This will save the current colour as a Global Colour.
Add a Global Colour
  1. 1.
    Select a block
  2. 2.
    Open the Colour Picker
  3. 3.
    Find the Global Colours at the bottom.
  4. 4.
    Click a colour to exchange or click the "+" sign to add the current colour.