Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Open
  • Close
  • Selection Area
  • Eyedropper
  • Toggle Sliders
  • Toggle on SL or GB.
  • Hue Slider
  • Alpha(a) Slider
  • Switch Colour Systems
  • Hex
  • Reset Colour
  • Value Input Fields
  • Contrast Checker
  • Current Pairing
  • Accessibility Rating
  • Contrast Ratio
  • Global Colours
  • Add

Was this helpful?

  1. Cwicly

Colour Picker

Last updated 1 year ago

Was this helpful?

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.

Open

  • 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.

Close

  • Click the "X" icon or click away to close the Colour modal.

Selection Area

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.

Eyedropper

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.

Toggle Sliders

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.

Toggle on SL or GB.

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.

Hue Slider

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.

Alpha(a) Slider

By default, the Alpha slider is displayed under the H(SL) or R(GB) slider to allow you to adjust opacity.

Switch Colour Systems

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.

Hex

The Hex field displays the six-digit hexadecimal code.

  • Open the Colour modal.

  • Find the Hex field next to the Value Input Fields.

Reset Colour

The Colour can be reset from the Hex field.

  • Open the Colour modal.

  • Click the "X" icon next to the Hex code to reset.

Value Input Fields

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.

Contrast Checker

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.

Current Pairing

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.

Accessibility Rating

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.

Contrast Ratio

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.

Global Colours

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.

Add

  • 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.

⚡
Global Colours