Colour Picker
Last updated
Last updated
The Cwicly Colour picker is an advanced precision tool designed to make colour management easier.
It associates a standard donut type colour picker with other features designed to save time and open up a scope of possibilities.
Select a suitable block.
In the Primary or Design tab of the Block Inspector, open the Colours tab.
Click the colour chip next to the property to which you wish to add or adjust a colour or gradient (Link, Background, Text, Overlay).
The Colour modal is now visible.
Click the "X" icon or click away to close the Colour modal.
The Selection Area allows you to adjust and select desired colour values.
It can be manipulated by dragging the circle with the mouse.
Open the Colour modal.
Click and drag the donut to find a suitable colour.
The selected colour is automatically applied to the canvas.
An eyedropper Tool is available to make it easy to sample colours from your canvas and then re-use as required, in the background, text etc.
Open the Colour modal.
Click the eyedropper icon to activate the eyedropper.
Locate and click the required colour on the canvas.
HSL and RGB sliders are available to meticulously select the exact shade.
A "Toggle Sliders" toggle is available to display the SL(Saturation and Lightness) or GB(Green Blue) if required.
By default, only the Hue slider of the HSL process is displayed.
In addition, the a(alpha) channel is displayed by default under the H(or R) slider.
Most of the time the Hue(H) slider is all that is required if you are working with HSL.
Depending on your needs, additional sliders are easily toggled on.
When the "dot" has no colour, you are in default HSL mode
Open the Colour modal.
Click the "dot" between the Eyedropper and the Sliders.
Additional sliders are now be visible.
By default, the Hue(H) slider is displayed above the Alpha slider as it is a time-saver method and convenient to use if you want to avoid colour theory.
Open the Colour modal.
By default, the Hue Slider is displayed under the Selection Area.
Slide to find the required Hue.
By default, the Alpha slider is displayed under the H(SL) or R(GB) slider to allow you to adjust opacity.
Cwicly Colour Management allows you to work with one of two Colour Systems, HSLa or RBGa.
By default, the HSLa system is displayed.
It is easy to switch between the two systems.
Open the Colour modal.
Locate the 3 Value Input Fields next to the Hex field.
Hover over any Value Input Field.
Click the label.
This will switch from one system to the other.
The Hex field displays the six-digit hexadecimal code.
Open the Colour modal.
Find the Hex field next to the Value Input Fields.
The Colour can be reset from the Hex field.
Open the Colour modal.
Click the "X" icon next to the Hex code to reset.
The Value Input Fields display the colour values for HSL or RGB depending on the current Colour system.
The fourth Value Input Field displays the alpha value (between 0 and 1).
Open the Colour modal.
Find the Value Input Fields next to the Hex field.
These display the current colour values.
The colour and alpha values can be adjusted directly from the fields.
To ensure accessible colour pairing, the contrast checker displays, when available:
A preview of your current pairing, an accessibility rating with visual guidance, the contrast ratio.
The Current Pairing field displays your current background colour and text colour.
This allows you to visualise what your colour choices will look like without having to waste time switching back and forth.
Open the Colour modal.
Locate the Current Pairing field which displays your current background colour and text colour.
The Accessibility Rating is there as a guide to ensure that viewers who cannot see the full colour spectrum are able to read the text. WCAG (Web Content Accessibility Guidelines)
Open the Colour modal.
Locate the Accessibility Rating.
The field displays the current Accessibility Rating.
The Contrast Ratio displays the current colour/contrast ratio which should be over 4.5.
Open the Colour modal.
Locate the Contrast Ratio
The current colour/contrast ratio is displayed.
The four default Global Colours and any other colours you have added are available at the bottom of the palette.
Once you have added Folders, your global colours will be divided into Folders. Uncategorised Global Colours will be visible by default.
Global Colours cannot be removed directly from the Colour Picker. To remove a Global Colour, navigate to the Colours tab in the Global Styles tab of the Block Inspector.
Select a block.
Open the Colour Picker.
Navigate to "Global" at the bottom of the modal.
Select the required colour you wish to add.
Click the "+" icon to add the new global colour.
