{"id":868,"date":"2019-10-21T15:40:19","date_gmt":"2019-10-21T15:40:19","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=868"},"modified":"2026-09-02T10:43:35","modified_gmt":"2026-09-02T07:43:35","slug":"colors","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/colors\/","title":{"rendered":"Colors"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Blocksy&#8217;s color system lets you define a reusable <strong>Global Color Palette<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To access these options, navigate to <strong>Customiser \u2192 General Options \u2192 Colors<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screen-Recording-2023-05-08-at-19.45.24.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Managing the Global Color Palette and adding additional colors.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Global Color Palette<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Global Color Palette<\/strong> 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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a6657&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a6657\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/composite-colours-scaled.jpg\" alt=\"Global Color Palette management options in Blocksy\" class=\"wp-image-6992\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Managing predefined and custom color palettes.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Managing Palette Presets<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy includes a collection of predefined palettes that can be used as a starting point or adapted to match your own branding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>three-dot menu<\/strong> next to the Global Color Palette and select <strong>Color Palettes<\/strong> to browse the available presets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also save your current configuration as a reusable custom palette. Once your colors are configured, open the same menu and select <strong>Save Palette<\/strong>. Saved configurations are available from the <strong>Custom<\/strong> section of the palette manager.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading has-palette-color-8-color has-text-color has-link-color wp-elements-1\">Suggested Palette Roles<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color 1<\/strong> &#8211; primary brand or accent color.<\/li>\n\n\n\n<li><strong>Color 2<\/strong> &#8211; secondary accent or hover color.<\/li>\n\n\n\n<li><strong>Color 3<\/strong> &#8211; primary body text color.<\/li>\n\n\n\n<li><strong>Color 4<\/strong> &#8211; headings and prominent text.<\/li>\n\n\n\n<li><strong>Color 5<\/strong> &#8211; borders and separators.<\/li>\n\n\n\n<li><strong>Color 6<\/strong> &#8211; subtle section backgrounds.<\/li>\n\n\n\n<li><strong>Color 7<\/strong> &#8211; primary site background.<\/li>\n\n\n\n<li><strong>Color 8<\/strong> &#8211; light contrasting backgrounds or surfaces.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Palette Color Picker<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Selecting any palette swatch opens Blocksy&#8217;s color picker, where you can fine-tune the color visually or enter an exact value.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a7796&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a7796\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2056\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2025-02-18-at-20.01.57.png\" alt=\"Blocksy Global Color Palette color picker\" class=\"wp-image-12678\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Editing an individual palette color.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Picker<\/strong> &#8211; adjust the selected color using the main color field and hue controls.<\/li>\n\n\n\n<li><strong>Custom Name<\/strong> &#8211; assign a descriptive name to the palette color so it is easier to identify throughout the Customiser and supported editors.<\/li>\n\n\n\n<li><strong>HEX Value<\/strong> &#8211; copy the exact hexadecimal value of the selected color.<\/li>\n\n\n\n<li><strong>CSS Variable<\/strong> &#8211; copy the CSS variable associated with the palette color for use in custom styling.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Additional Colors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If the default palette does not contain enough color slots for your design, you can extend it with additional colors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>three-dot menu<\/strong> and select <strong>Add New Color<\/strong>. The new color becomes part of the global palette and can be configured in the same way as the original swatches.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a7fba&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a7fba\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2023-05-08-at-19.57.39.png\" alt=\"Additional colors added to the Blocksy Global Color Palette\" class=\"wp-image-6997\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Extending the palette with additional colors.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Additional palette colors are also exposed to the WordPress block editor and supported integrations, allowing them to be reused throughout your page content.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a85ca&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a85ca\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2023-05-08-at-19.58.58.png\" alt=\"Blocksy palette colors available inside the WordPress block editor\" class=\"wp-image-6998\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Global palette colors available inside the WordPress block editor.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Global Colors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Global Colors<\/strong> 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.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a8d29&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a8d29\" class=\"wp-block-image size-full is-resized has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2022-07-07-at-15.02.39.png\" alt=\"Global Colors options in Blocksy\" class=\"wp-image-5249\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Global color assignments in the Customiser.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li><strong>Base Text<\/strong> &#8211; defines the default color used for body text.<\/li>\n\n\n\n<li><strong>Links<\/strong> &#8211; controls the normal and hover colors used by links.<\/li>\n\n\n\n<li><strong>Text Selection<\/strong> &#8211; defines the colors used when visitors select text on the page.<\/li>\n\n\n\n<li><strong>All Headings (H1 &#8211; H6)<\/strong> &#8211; applies a shared color to all heading levels.<\/li>\n\n\n\n<li><strong>Individual Heading Levels<\/strong> &#8211; lets you override the shared heading color independently for H1, H2, H3 and the remaining supported heading levels.<\/li>\n\n\n\n<li><strong>Site Background<\/strong> &#8211; controls the site&#8217;s primary background color or background configuration.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Global colors are defaults, not restrictions<\/strong><br>Elements throughout Blocksy can still expose their own color settings under their respective <strong>Design<\/strong> tabs. These local settings can override the global color assignment when a particular section needs a different treatment.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Using the Palette in Editors and Builders<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Developer Resources<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy&#8217;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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f866a9e50&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f866a9e50\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2023-05-08-at-20.07.08.png\" alt=\"Using a CSS variable inside a Blocksy color picker\" class=\"wp-image-7001\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Referencing a custom CSS variable from a Blocksy color control.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a color variable defined under <strong>Customiser \u2192 Additional CSS<\/strong> can then be reused in supported color fields with the standard <code>var(--variable-name)<\/code> syntax.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you prefer a visual walkthrough, the video below explains how Blocksy&#8217;s Global Color Palette system works and how it can be used throughout your website.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Understanding the Colour Palette System | Blocksy Customisation\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/eX-5EjhmLTI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Understanding the Color Palette System | Blocksy Customisation<\/figcaption><\/figure>\n\n\n<ul class=\"docs-related-resources\"><li><a href=\"https:\/\/creativethemes.com\/blocksy\/video-tutorials\/shorts\/quickly-change-the-colour-scheme\/\" target=\"_blank\"><figure><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/short-colour-scheme-scaled.jpg\" class=\"cover\" . width=\"100%\" \/><svg width=\"50\" height=\"50\" viewBox=\"0 0 80 80\">\n\t\t\t\t\t\t<circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#1b62f6\"\/>\n\t\t\t\t\t\t<path d=\"M51.3 38.6 33.9 28.2c-.2-.1-.4-.2-.7-.2-.7 0-1.2.6-1.2 1.2v21.5c0 .7.6 1.3 1.2 1.3.3 0 .5-.1.7-.2l17.4-10.3c.4-.3.7-.9.7-1.4 0-.7-.3-1.2-.7-1.5z\" fill=\"#ffffff\"\/>\n\t\t\t\t\t<\/svg><\/figure><span class=\"item-title\">Quickly Change the Color Scheme<br \/>\n<\/span><\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-868","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":10,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/868\/revisions"}],"predecessor-version":[{"id":15127,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/868\/revisions\/15127"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=868"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}