Blocksy’s color system lets you define a reusable Global Color Palette and apply those colors consistently throughout your website. Updating a palette color can automatically update every supported element that references it, making site-wide design changes much easier to manage.
The same palette is also available inside the WordPress block editor and supported third-party builders and block plugins, helping you maintain a consistent visual system across both Blocksy and your page content.
To access these options, navigate to Customiser → General Options → Colors.
Quick Look
Granular Controls
Global Color Palette
The Global Color Palette provides the central set of colors used throughout Blocksy. Instead of entering the same color value repeatedly, you can reference a palette color wherever it is supported and manage that color from one place.
Managing Palette Presets
Blocksy includes a collection of predefined palettes that can be used as a starting point or adapted to match your own branding.
Open the three-dot menu next to the Global Color Palette and select Color Palettes to browse the available presets.
You can also save your current configuration as a reusable custom palette. Once your colors are configured, open the same menu and select Save Palette. Saved configurations are available from the Custom section of the palette manager.
Suggested Palette Roles
There is no requirement to use each palette position for a particular purpose, but the following structure provides a useful starting point for keeping your design organised:
- Color 1 – primary brand or accent color.
- Color 2 – secondary accent or hover color.
- Color 3 – primary body text color.
- Color 4 – headings and prominent text.
- Color 5 – borders and separators.
- Color 6 – subtle section backgrounds.
- Color 7 – primary site background.
- Color 8 – light contrasting backgrounds or surfaces.
Palette Color Picker
Selecting any palette swatch opens Blocksy’s color picker, where you can fine-tune the color visually or enter an exact value.
- Visual Picker – adjust the selected color using the main color field and hue controls.
- Custom Name – assign a descriptive name to the palette color so it is easier to identify throughout the Customiser and supported editors.
- HEX Value – copy the exact hexadecimal value of the selected color.
- CSS Variable – copy the CSS variable associated with the palette color for use in custom styling.
Adding Additional Colors
If the default palette does not contain enough color slots for your design, you can extend it with additional colors.
Open the three-dot menu and select Add New Color. The new color becomes part of the global palette and can be configured in the same way as the original swatches.
Additional palette colors are also exposed to the WordPress block editor and supported integrations, allowing them to be reused throughout your page content.
Global Colors
The Global Colors section connects your palette to common site-wide elements. This lets you define a consistent default appearance while still retaining the ability to override individual elements elsewhere.
- Base Text – defines the default color used for body text.
- Links – controls the normal and hover colors used by links.
- Text Selection – defines the colors used when visitors select text on the page.
- All Headings (H1 – H6) – applies a shared color to all heading levels.
- Individual Heading Levels – lets you override the shared heading color independently for H1, H2, H3 and the remaining supported heading levels.
- Site Background – controls the site’s primary background color or background configuration.
Global colors are defaults, not restrictions
Elements throughout Blocksy can still expose their own color settings under their respective Design tabs. These local settings can override the global color assignment when a particular section needs a different treatment.
Using the Palette in Editors and Builders
Blocksy makes the Global Color Palette available inside the WordPress block editor, including supported third-party block plugins such as Stackable. This lets you select the same reusable colors when styling your page content.
The palette is also integrated with supported page builders such as Elementor, allowing colors defined in Blocksy to be reused without manually copying their values into each design tool.
Developer Resources
Blocksy’s Customiser color controls support CSS variables. This makes it possible to define reusable color values in custom CSS and reference those variables directly from supported Blocksy color pickers.
For example, a color variable defined under Customiser → Additional CSS can then be reused in supported color fields with the standard var(--variable-name) syntax.
Video Tutorial
If you prefer a visual walkthrough, the video below explains how Blocksy’s Global Color Palette system works and how it can be used throughout your website.
