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
  • Global Background
  • Select
  • Add
  • Reorder
  • Remove
  • Apply Global Colours to selected blocks
  • 11-stop Palette
  • Additional Information
  • Customise
  • Folders
  • Colour tab
  • Palette tab
  • Modifiers tab

Was this helpful?

  1. 🌐Global Styles
  2. Global Styles

Global Colours

Last updated 1 year ago

Was this helpful?

Globally manage your colours with a professional colour picker, personalised variables, an exclusive 11-stop palette generator, dynamic colour modification, live colour editing, convenient folders, contrast checking, and a sleek dark mode customiser.

This allows you to create a unified colour palette across your entire website, but also perform adjustments across the board.

Global colour management takes place in the Global Styles colours tab where you can visualise and manage your global colours.

By default, Cwicly provides four standard colours.

You cannot remove the four initial global colour chips. However you can change the base colours to the colours you require.

Open

The Global Styles colours tab is located in the Block Inspector.

  • Open the Global Styles tab in the Block Inspector.

  • Open the Colours tab.

Global Background

You can apply a global background colour from the Colours tab.

  • In the Block Inspector, open the Global Styles tab.

  • Open the Colours tab.

  • Click the Background chip to open the Colour modal.

  • Select required background colour.

Select

You can personalise the 4 base colour chips to suit your requirements.

  • In the Block Inspector, open the Global Styles tab.

  • Open the Colours tab.

  • Click a base colour chip and select the colour you require.

Add

The Add New Global Colour property allows you to add new global colours.

  • In the Block Inspector, open the Global Styles tab.

  • Open the Colours tab.

  • Next to Global Colours, click the "+" icon.

  • Click the newly created chip.

  • Select a colour.

  • If you wish to add additional global colours, click the "+" icon.

  • Click the new chip and select a suitable colour.

Reorder

To organise your global colours, use the reorder property

  • Drag and drop a colour to reorder.

Remove

Global colours that you have added can be permanently removed. The initial 4 global colour chips cannot be removed.

  • In the Block Inspector, open the Global Styles tab.

  • Open the Colours tab.

  • To remove a colour, hover and click the bin icon.

Apply Global Colours to selected blocks

Global Colours can be applied to any selected block (text, background, link etc).

Global colours are located at the bottom of the colour picker. They are arranged identically to their disposition in the global styles tab.

  • Select block to which you wish to add Global Colours.

  • In the colours tab, click the text, background, link colour picker depending on the element to which you wish to apply a global colour.

  • The Global Colours are visible at the bottom of the colour picker.

  • Click on the Global Colour you wish to apply.

11-stop Palette

Palette tab

Transform your website’s colour scheme with unmatched ease and speed. Palettes and dynamic colour variations are intelligently linked to their core colours. As your base colours evolve, so does every connected variation and palette. Play around and visualise different combinations in an instant without the fear of breaking something.

Above Global Base colours, palettes and dynamic colour variations are organised according to their base colour, starting with the 11-stop palette, followed by the dynamic colour variations.

Additional Information

If you hover over an 11 point palette, additional relative information about the colour will be displayed.

  • In the Block Inspector, find Global Colours in the Colours tab of the Global Styles tab.

  • Find the 11 point palette you wish more information about.

  • Hover over a specific colour.

  • Additional information relative to the specified colour will be displayed.

Customise

You can customise a specific colour in the 11-stop generated palette.

  • Open the Colours tab in the Global Styles tab.

  • In the Block Inspector, find the 11-stop palette you wish to customise.

  • Click a specific colour to open the Global Colour modal.

  • Modify accordingly.

Folders

Folders are provided so that you can organise your colour schemes and save you time looking for the colour combinations you require.

Folders

Colour tab

The Colour tab regroups the base settings for a global colour.

You have the option to specify a colour for both light and dark modes.

Colour tab

Palette tab

The Palette tab allows you to generate and customise an 11 point palette.

Palette tab

Modifiers tab

The Modifiers tab allows you to build dynamic colour variations on the base colour.

Modifiers tab