{"id":9095,"date":"2025-06-26T12:45:05","date_gmt":"2025-06-26T09:45:05","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?p=9095"},"modified":"2025-07-28T11:41:51","modified_gmt":"2025-07-28T08:41:51","slug":"color-palette-in-wordpress","status":"publish","type":"post","link":"https:\/\/creativethemes.com\/blocksy\/blog\/color-palette-in-wordpress\/","title":{"rendered":"How to Create a Highly Effective Color Palette in WordPress"},"content":{"rendered":"\n<p>These days, most WordPress themes make it easy to build a color palette with built-in options and visual pickers. But creating one that\u2019s actually effective, consistent, and accessible across devices? That\u2019s the hard part.<\/p>\n\n\n\n<p>In this tutorial, we\u2019ll look into how to create a highly effective color palette in WordPress that you can reuse anywhere on your site and that works with any type of content you may want to publish. To do so, we\u2019ll use our stellar Blocksy theme, which gives you access to all of its color features in the <a href=\"https:\/\/wordpress.org\/themes\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">free version<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"key-takeaways\"><strong>Key Takeaways:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blocksy\u2019s free version provides reusable, extensible, and fully customizable global color palettes directly from the Customizer.<\/li>\n\n\n\n<li>You can start with 12 pre-designed palettes or create unlimited custom ones suited to your brand.<\/li>\n\n\n\n<li>Update and manage colors across headers, buttons, text, and background from one place\u2014no CSS needed.<\/li>\n\n\n\n<li>Blocksy palettes are accessible in Gutenberg, Elementor, and other major page builders, ensuring design consistency.<\/li>\n\n\n\n<li>Includes actionable guidance on color contrast, color blindness, and testing your palette across devices and modes.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#key-takeaways\">Key Takeaways:<\/a><\/li><li><a href=\"#what-does-a-highly-effective-color-palette-in-word-press-look-like\">What Does a Highly Effective Color Palette in WordPress Look Like?<\/a><\/li><li><a href=\"#prerequisites\">Prerequisites<\/a><\/li><li><a href=\"#1-open-the-colors-panel-in-the-customizer\">1. Open the Colors Panel in the Customizer<\/a><\/li><li><a href=\"#2-choose-a-pre-designed-color-palette\">2. Choose a Pre-Designed Blocksy Color Palette<\/a><\/li><li><a href=\"#3-add-new-colors-to-your-palette\">3. Add New Colors to Your Palette<\/a><\/li><li><a href=\"#4-define-the-colors-of-your-global-elements\">4. Define the Colors of Your Global Elements<\/a><\/li><li><a href=\"#5-access-your-color-palette-from-other-parts-of-the-customizer\">5. Access Your Color Palette from Other Parts of the Customizer<\/a><\/li><li><a href=\"#6-color-your-blocks-and-page-elements\">6. Color Your Blocks and Page Elements<\/a><\/li><li><a href=\"#practical-tips-for-choosing-effective-colors\">Practical Tips for Choosing Effective Colors<\/a><\/li><li><a href=\"#faq-word-press-color-palettes\">FAQ: WordPress Color Palettes<\/a><\/li><li><a href=\"#next-steps\">Next Steps<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-does-a-highly-effective-color-palette-in-word-press-look-like\">What Does a Highly Effective Color Palette in WordPress Look Like?<\/h2>\n\n\n\n<p>Your website&#8217;s color palette plays a crucial role in achieving a professional appearance. Whether you&#8217;re designing for <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-sites\/nonprofit-templates\/\">non-profit websites<\/a> or <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-sites\/blog-templates\/\">personal blogs<\/a>, your theme largely determines the color scheme, with each theme offering its own unique approach to this essential task.<\/p>\n\n\n\n<p>Your theme may:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>give you access to detailed color options in the WordPress Customizer<\/li>\n\n\n\n<li>include just some basic color options in the Customizer, e.g. let you change the primary colors of your site<\/li>\n\n\n\n<li>come with its own preset color palette that you can\u2019t change from the settings, so you need to use CSS to modify the colors<\/li>\n<\/ul>\n\n\n\n<p>The existence and popularity of <a href=\"https:\/\/wordpress.org\/plugins\/search\/color\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">color plugins<\/a> prove that users often need more color options and a better manageable color system than what their theme provides them with.<\/p>\n\n\n\n<p>However, the separation of concerns principle*, which WordPress is built around, still suggests that color should be managed by the theme rather than a plugin.<\/p>\n\n\n\n<p style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><em>*<strong>Separation of concerns (SoC)<\/strong> is a frequently used software design principle that says that different tasks (i.e. concerns) should be separated into architecturally distinct sections within a software program. In WordPress, this means that the theme should be responsible for the presentation while plugins should be responsible for the extra functionality added beyond the core features, and overlaps between the two should be avoided as much as possible.<\/em><\/p>\n\n\n\n<p>In an ideal world, your WordPress theme would provide you with detailed but easy-to-use color options that, together, form an integrated color system, which is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>reusable<\/strong> so you can easily access your color palette anywhere on your site<\/li>\n\n\n\n<li><strong>inspirational<\/strong> so you get a selection of professionally designed color palettes to work with instead of being left alone with \u2018unlimited\u2019** options<\/li>\n\n\n\n<li><strong>flexible<\/strong> so you can save, modify, and delete your color palettes, but at the same time, you can also easily return to the default options<\/li>\n\n\n\n<li><strong>comprehensive<\/strong> so you can easily access your palette to change the colors of any element on your site<\/li>\n\n\n\n<li><strong>extensible<\/strong> so you can enhance your existing palettes with new colors<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-plain\"><em>** In reality, the <\/em><a href=\"https:\/\/www.rapidtables.com\/web\/color\/color-picker.html\" rel=\"nofollow noopener\" target=\"_blank\"><em>HTML color picker<\/em><\/a><em>, also used in WordPress, gives you access to ~16.7 million colors, which is the total number of all colors in the sRGB (standard red-green-blue) color space \u2014 precisely 256*256*256 = 16,777,216, which is far from unlimited.<\/em><\/p>\n\n\n\n<p>Luckily, this ideal world of color does exist in the universe of WordPress \u2014 and it\u2019s called Blocksy. Below, we\u2019ll see how you can use its advanced color system to create a highly effective color palette in WordPress.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a13af9c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a13af9c\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1233\" height=\"1038\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/color-palette-presets-preview.png\" alt=\"Color Palette Presets in the Colors panel of the Blocksy WordPress theme\" class=\"wp-image-9342\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\"><strong>Image:<\/strong> Some of Blocksy&#8217;s professionally designed color palettes<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>To follow through this tutorial, you need:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>a working WordPress install:\n<ul class=\"wp-block-list\">\n<li>on a live domain<\/li>\n\n\n\n<li>on a local web server (a.k.a. localhost) that you can install on your computer using a software application such as <a href=\"https:\/\/www.apachefriends.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">XAMPP<\/a> or <a href=\"https:\/\/www.mamp.info\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MAMP<\/a><\/li>\n\n\n\n<li>in a WordPress sandbox such as <a href=\"https:\/\/instawp.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">InstaWP<\/a> or <a href=\"https:\/\/wpsandbox.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WPSandbox<\/a> (this is the quickest solution; you can set it up in a minute or two for free)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>the <a href=\"https:\/\/wordpress.org\/themes\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">free Blocksy theme<\/a> installed and activated on the WordPress site<\/li>\n\n\n\n<li>Blocksy&#8217;s free <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-site\/renovation\/\">Renovation starter<\/a> site that you can import from the Blocksy dashboard once the theme is activated<\/li>\n<\/ol>\n\n\n\n<p>Now, let\u2019s see in detail how to create, edit, and manage color palettes in WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-open-the-colors-panel-in-the-customizer\">1. Open the Colors Panel in the Customizer<\/h2>\n\n\n\n<p>Blocksy\u2019s global color palette options are located in the <strong>Colors<\/strong> panel in the WordPress Customizer.&nbsp;<\/p>\n\n\n\n<p>To open it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>either click the <strong>Customize<\/strong> link in the <strong>Color Options<\/strong> section of your Blocksy dashboard <em>(see the screenshot below)<\/em><\/li>\n\n\n\n<li>or navigate manually to <strong>Appearance &gt; Customize &gt; General Options &gt; Colors<\/strong><\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a13ba0a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a13ba0a\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1041\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/01-color-options-location.png\" alt=\"Location of the Color Options shortcut in the Blocksy dashboard\" class=\"wp-image-9286\" style=\"width:750px;height:auto\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-choose-a-pre-designed-color-palette\">2. Choose a Pre-Designed Blocksy Color Palette<\/h2>\n\n\n\n<p>Blocksy provides you with multiple professionally designed color palettes to help you get started. You can use them as-is or customize them to match your brand <em>(see <a href=\"#3-add-new-colors-to-your-palette\">Step 3<\/a>)<\/em>.<\/p>\n\n\n\n<p>There are two types of pre-designed color palettes in Blocksy:<\/p>\n\n\n\n<ol style=\"list-style-type:lower-roman\" class=\"wp-block-list\">\n<li>each starter site comes with its own color palette (accessible after you import a starter site)<\/li>\n\n\n\n<li>it comes with 12 pre-defined color palettes that are accessible to every user<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-use-the-color-palette-of-your-starter-site\">i. Use the Color Palette of Your Starter Site<\/h3>\n\n\n\n<p>When you import a <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-sites\/\" data-type=\"link\" data-id=\"https:\/\/creativethemes.com\/blocksy\/starter-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">starter site<\/a>, it automatically adds its pre-designed color palette to the <strong>Global Color Palette<\/strong> option in the <strong>Colors<\/strong> panel.<\/p>\n\n\n\n<p>For example, here&#8217;s the powerful orange-beige color palette of the Renovation starter site:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a13d3c9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a13d3c9\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"945\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/02-renovation-color-palette.png\" alt=\"The default global color palette of the Renovation starter site\" class=\"wp-image-9288\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>If you\u2019re happy with the colors, click the three dots icon to open the utility menu, then select the <strong>Save Palette <\/strong>option to save the palette as is:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a140968&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a140968\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"841\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/03-save-palette-option.png\" alt=\"Save Palette option of the Global Color Palette section in the WordPress Customizer\" class=\"wp-image-9289\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>Now, if you click the <strong>Color Palettes<\/strong> option in the utility menu, you&#8217;ll see the color palette under the <strong>Custom<\/strong> tab of the <strong>Color Palette Presets<\/strong> modal.<\/p>\n\n\n\n<p>You can always find the original color palette of your starter site here in case you later change the palette or colors:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a141b35&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a141b35\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/04-custom-color-palettes.png\" alt=\"The Custom tab of the Color Palette Presets modal with the saved custom palette\" class=\"wp-image-9290\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ii-enable-one-of-the-pre-defined-color-palettes\">ii. Enable One of the Pre-Defined Color Palettes<\/h3>\n\n\n\n<p>Blocksy comes with 12 pre-defined color palettes that you can access from the <strong>Color Palette Presets<\/strong> modal under the <strong>Predefined<\/strong> tab.<\/p>\n\n\n\n<p>The pre-defined palettes mostly cover the <a href=\"https:\/\/www.adobe.com\/creativecloud\/design\/discover\/secondary-colors.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">primary\/secondary\/tertiary colors<\/a>, including blue, green, orange, brown, purple, red, yellow, and more:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a142bc7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a142bc7\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/05-predefined-color-palettes.png\" alt=\"The Predefined tab of the Color Palette Presets modal\" class=\"wp-image-9292\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>If you select any of the pre-defined palettes, the new colors will instantly appear in the live view of the Customizer.<\/p>\n\n\n\n<p>In case you\u2019re happy with the colors, you can leave the palette as is. If you think there\u2019s still room for improvement, move on to the next step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-add-new-colors-to-your-palette\">3. Add New Colors to Your Palette<\/h2>\n\n\n\n<p>There are two ways to add new colors to your active palette in Blocksy.&nbsp;You can:<\/p>\n\n\n\n<ol style=\"list-style-type:lower-roman\" class=\"wp-block-list\">\n<li>enhance the palette with new color swatches <em>(in this way, you can keep the original colors)<\/em><\/li>\n\n\n\n<li>update the default swatches with new colors<\/li>\n<\/ol>\n\n\n\n<p>You can also combine the two techniques above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-enhance-your-color-palette-with-new-colors\">i. Enhance Your Color Palette with New Colors<\/h3>\n\n\n\n<p>To add extra colors to your palette, click the three dots icon and select the <strong>Add New Color<\/strong> option:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14353c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14353c\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/06-add-new-color-to-palette.png\" alt=\"Add New Color option in the Colors panel\" class=\"wp-image-9294\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>A new color swatch will appear under the default ones. Click into it, and a color picker will show up on the screen.&nbsp;<\/p>\n\n\n\n<p>Pick the color you want to add, and Blocksy will automatically fill in the new swatch with the new color:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a144c03&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a144c03\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/07-color-picker-behind-swatch.png\" alt=\"Color picker and settings opened from a color swatch\" class=\"wp-image-9295\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>You can add as many extra colors as you want. If you\u2019re not sure about how to enhance your existing color palette, you can use a color tool such as <a href=\"https:\/\/www.colorhexa.com\/ec6a2b\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ColorHexa<\/a>, which shows various color schemes for each color (you only need to copy over the <a href=\"https:\/\/www.w3schools.com\/css\/css_colors_hex.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">hex code<\/a> of the color).<\/p>\n\n\n\n<p>For example, below, I added the complementary and split complementary colors of the primary orange color:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a145574&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a145574\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/08-custom-palette-with-extra-colors.png\" alt=\"Three custom colors added to the global color palette\" class=\"wp-image-9296\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>When you\u2019ve added all the extra colors you wanted to your palette, click the <strong>Save Palette<\/strong> option.<\/p>\n\n\n\n<p>As you can see below, now we have two custom color palettes in the <strong>Color Palette Presets<\/strong> modal:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a146b29&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a146b29\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/09-two-custom-color-palettes.png\" alt=\"Two custom color palettes saved\" class=\"wp-image-9297\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p><span id=\"docs-internal-guid-eace940f-7fff-e39e-2148-3615c8813791\" style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline\">With Blocksy, you can save as many custom color palettes as you want. You can delete a custom palette by hovering your cursor over the top-right corner of the palette and clicking the little bin icon that appears on hover.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ii-update-the-default-swatches-with-new-colors\">ii. Update the Default Swatches with New Colors<\/h3>\n\n\n\n<p>If you don\u2019t want to enhance your palettes with new swatches but would rather update the default ones, simply click into the swatch you want to change and add the new color using the color picker:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a147351&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a147351\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/10_replace_first_swatch.png\" alt=\"First color swatch replaced in the Global Color Palette\" class=\"wp-image-9298\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>As you can see in the screenshot above, the new color has been automatically added to the <strong>Links<\/strong> and <strong>Text Selection<\/strong> fields. This is because Blocksy assigns a color from your palette to each global element by default \u2014 however, you can change the default color assignments if you want to <em>(we\u2019ll see how to do so in <a href=\"#4-define-the-colors-of-your-global-elements\">Step 4<\/a>)<\/em>.<\/p>\n\n\n\n<p>Another thing that you may have noticed is that the text color of the <em>\u2018<\/em><strong><em>Making<\/em><\/strong><em> your vision become <\/em><strong><em>a reality<\/em><\/strong><em>\u2019<\/em> headline in the hero section has changed too. This is because the belonging heading block assigns the first color of the palette to the highlighted text. As soon as you update a color in the palette, Blocksy recolors all the elements assigned to it <em>(we\u2019ll see how to use the color palette in the block editor in <a href=\"#6-color-your-blocks-and-page-elements\">Step 6<\/a>)<\/em>.<\/p>\n\n\n\n<p>When you\u2019re done updating your color palette, click the <strong>Save Palette<\/strong> option. As you can see below, now we have three custom color palettes:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a147ab7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a147ab7\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/11-three-custom-color-palettes.png\" alt=\"Three custom color palettes saved\" class=\"wp-image-9299\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"useful-tip-return-to-the-default-color-palette\">Useful Tip: Return to the Default Color Palette<\/h3>\n\n\n\n<p>Any time you get stuck with your color configuration and want to return to the default palette, click the little blue dot icon shown left to the <strong>Global Color Palette<\/strong> option.<\/p>\n\n\n\n<p>This is, in fact, an Undo button that lets you undo all the changes<strong> <\/strong><em>(Blocksy shows this handy Undo icon next to each of its Customizer settings)<\/em>:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a149a05&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a149a05\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"505\" height=\"407\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/12-return-to-default-palette.png\" alt=\"Undo icon in the Colors panel in the WordPress Customizer\" class=\"wp-image-9300\" style=\"width:350px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>The default palette is <strong>Palette #1<\/strong> from the <strong>Predefined<\/strong> tab of the <strong>Color Palette Presets<\/strong> modal. The global color palette is updated as soon as you click the Undo icon:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14a10f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14a10f\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"411\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/13-default-color-palette.png\" alt=\"Default Global Color Palette in the Colors panel in the WordPress Customizer\" class=\"wp-image-9301\" style=\"width:350px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-define-the-colors-of-your-global-elements\">4. Define the Colors of Your Global Elements<\/h2>\n\n\n\n<p>You can find the <strong>Global Colors<\/strong> options below the <strong>Global Color Palette <\/strong>section in the <strong>Colors<\/strong> panel.&nbsp;<\/p>\n\n\n\n<p>These options cover the most frequently used elements on a typical WordPress site, including the base text, links, text selections, borders, and headings (H1 &#8211; H6), as well as the background of the site.<\/p>\n\n\n\n<p>Blocksy automatically assigns a starting color to each element. For example, \u2018Color 1\u2019 is used for the background of the Text Selection setting:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14a791&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14a791\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/14-text-selection-default-swatch.png\" alt=\"Color options for the text selection background\" class=\"wp-image-9302\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>Since your color palette shows up under the color picker, you can replace the initial text selection background color with another one from your palette with a single click.<\/p>\n\n\n\n<p>As soon as you click the color you want to use, the updated text selection background color will appear in the live view of the Customizer <em>(note that you need to highlight some text to see how the text selection changes)<\/em>:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14ad38&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14ad38\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/15-text-selection-swatch-replaced.png\" alt=\"Assigning a new color to the text selection background\" class=\"wp-image-9304\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>If you don\u2019t want to use a color from your palette, you can also use the color picker to assign another color to the element <em>(however, we do recommend that you save all the colors you use on your site for future access)<\/em>:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14b24e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14b24e\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/16-text-selection-omitting-palette.png\" alt=\"Assigning a random color to the text selection background\" class=\"wp-image-9305\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-access-your-color-palette-from-other-parts-of-the-customizer\">5. Access Your Color Palette from Other Parts of the Customizer<\/h2>\n\n\n\n<p>You can access your color palette from any color setting of the Customizer, too. In this way, you don\u2019t have to copy-paste hex codes if you want to change the colors of the header, footer, sidebar, blog posts, pages, buttons, and other elements of your WordPress site.<\/p>\n\n\n\n<p>Let\u2019s see a few examples of how the color palette appears in other parts of the Customizer. The workflow is the same as before: you click into the color you want to change, and when the color options appear on the screen, you choose another color from your palette (or use the color picker).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-1-change-the-title-font-color-of-your-blog-archive-page\">Example 1: Change the Title Font Color of Your Blog Archive Page<\/h3>\n\n\n\n<p>If you go to the <strong>Post Types &gt; Blog Posts &gt; Card Options &gt; Design<\/strong> panel in the Customizer, you can update the colors of each element that appears on your blog archive page such as the title font:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14c8ed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14c8ed\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/17-blog-card-options-title-font-colors.png\" alt=\"Title font colors in Blog Card Options\" class=\"wp-image-9306\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-2-update-the-background-color-of-your-offcanvas-menu\">Example 2: Update the Background Color of Your Offcanvas Menu<\/h3>\n\n\n\n<p>Your color palette is also available for every element in the header and footer builders.<\/p>\n\n\n\n<p>In the screenshot below, you can see how you can change the background color of your offcanvas menu using your color palette:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14d1e1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14d1e1\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/18-offcanvas-header-background-color.png\" alt=\"Background color in the Offcanvas Header panel\" class=\"wp-image-9307\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-3-recolor-your-buttons\">Example 3: Recolor Your Buttons<\/h3>\n\n\n\n<p>Blocksy assigns the first color of your palette to the background color of your buttons by default.<\/p>\n\n\n\n<p>You can change it by going to <strong>General Options &gt; General &gt; Buttons &gt; Design<\/strong> and choosing another color from your palette:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14d875&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14d875\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/19-button-background-color-swatches.png\" alt=\"Background color in the Buttons panel in the WordPress Customizer\" class=\"wp-image-9308\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-color-your-blocks-and-page-elements\">6. Color Your Blocks and Page Elements<\/h2>\n\n\n\n<p>Your color palette is also accessible from the block editor and the <a href=\"https:\/\/creativethemes.com\/blocksy\/recommendations\/\" target=\"_blank\" rel=\"noreferrer noopener\">page builders supported by Blocksy<\/a> (i.e. Elementor, Beaver Builder, Brizy, and Zion Builder).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-use-your-color-palette-in-the-word-press-block-editor\">i. Use Your Color Palette in the WordPress Block Editor<\/h3>\n\n\n\n<p>In the block editor, Blocksy shows both your custom color palette (under the <strong>THEME<\/strong> heading) and the default colors of the Gutenberg editor (under the <strong>DEFAULT<\/strong> heading).<\/p>\n\n\n\n<p>For example, here\u2019s how you can change the colors of the paragraph block (the color palette shows up in every block where it\u2019s applicable):<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14f7a2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14f7a2\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/20-gutenberg-paragraph-block-colors.png\" alt=\"Active color palette shown inside a paragraph block in the Gutenberg editor\" class=\"wp-image-9309\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>In addition to the default Gutenberg blocks, Blocksy also supports third-party block plugins such as <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Stackable<\/a>.<\/p>\n\n\n\n<p>For example, the pages of the Renovation starter site are built with Stackable. If you open the <strong>Home<\/strong> page (<strong>Pages &gt; All Pages &gt; Home<\/strong>) and click into a Stackable block, you can access both your custom color palette and the default Gutenberg colors:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a14fff5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a14fff5\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/21-stackable-block-color-palette.png\" alt=\"Global color palette shown inside a Stackable heading block\n\" class=\"wp-image-9310\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ii-access-your-color-palette-from-elementor\">ii. Access Your WordPress Color Palette from Elementor<\/h3>\n\n\n\n<p>Your global color palettes also show up in the user interfaces of the supported page builder plugins. <\/p>\n\n\n\n<p>For example, here\u2019s how it appears in the design settings of the Button element in <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor<\/a>:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e941a150782&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e941a150782\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/01\/22-elementor-button-color-palette.png\" alt=\"Global color palette shown for the Button element in the page builder interface of the Elementor plugin\" class=\"wp-image-9311\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"practical-tips-for-choosing-effective-colors\">Practical Tips for Choosing Effective Colors<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Your color palette should reflect your brand\u2019s personality and values<\/li>\n\n\n\n<li>Research color psychology to understand how colors influence emotions and decisions. For example:\n<ul class=\"wp-block-list\">\n<li class=\"has-palette-color-1-color has-text-color has-link-color wp-elements-3c5f68679c6649d71fc3a07a877dbbd3\"><strong>Blue<\/strong>&nbsp;conveys trust and professionalism.<\/li>\n\n\n\n<li class=\"has-luminous-vivid-amber-color has-text-color has-link-color wp-elements-48386fcd1dff5f79ab07d8d897ec29af\"><strong>Yellow<\/strong>&nbsp;evokes optimism and creativity.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Make sure your text and background colors have enough contrast to be easily readable for all users, including those with visual impairments.<\/li>\n\n\n\n<li>Use tools like the&nbsp;WebAIM&nbsp;Contrast&nbsp;Checker&nbsp;to test contrast ratios and ensure compliance with&nbsp;<strong>WCAG (Web Content Accessibility Guidelines)<\/strong>.<\/li>\n\n\n\n<li>Avoid color combinations that may be hard to distinguish for color-blind users, such as red and green.<\/li>\n\n\n\n<li>Colors can appear different on various screens due to differences in display settings and lighting. Test your palette.<\/li>\n\n\n\n<li>Consider how colors appear in light mode and dark mode, especially if your site offers both.<\/li>\n\n\n\n<li>Stick to a core palette of 4-6 colors:\n<ul class=\"wp-block-list\">\n<li><strong>Primary Colors<\/strong>: Used most frequently (e.g., for buttons and headers).<\/li>\n\n\n\n<li><strong>Secondary Colors<\/strong>: Used for accents and highlights.<\/li>\n\n\n\n<li><strong>Neutral Colors<\/strong>: are commonly used for backgrounds and text (e.g., white, gray, black).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Avoid using too many colors<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th><strong>Blocksy Theme<\/strong><\/th><th><strong>Default WordPress Themes<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>Custom Global Color Palettes<\/strong><\/td><td>Yes \u2013 Unlimited palettes with presets<\/td><td>Limited color palette wordpress or none<\/td><\/tr><tr><td><strong>Access to Color Picker<\/strong><\/td><td>Full access in Customizer and editor<\/td><td>Only basic options or CSS needed<\/td><\/tr><tr><td><strong>Reusable Colors Across Site<\/strong><\/td><td>Integrated into Gutenberg, Elementor, etc.<\/td><td>Manual application required<\/td><\/tr><tr><td><strong>Predefined Color Schemes<\/strong><\/td><td>12 professional palettes + starter palettes<\/td><td>Few, often uneditable<\/td><\/tr><tr><td><strong>Assign Colors to Global Elements<\/strong><\/td><td>Text, background, links, buttons, etc.<\/td><td>Often only headings or links<\/td><\/tr><tr><td><strong>Dark Mode &amp; Contrast Awareness<\/strong><\/td><td>Easy to implement with Blocksy tools<\/td><td>Requires custom setup or plugins<\/td><\/tr><tr><td><strong>Extensibility &amp; Custom Colors<\/strong><\/td><td>Add\/delete\/update swatches dynamically<\/td><td>Typically not supported<\/td><\/tr><tr><td><strong>User Experience<\/strong><\/td><td>Intuitive visual control for non-coders<\/td><td>Often requires theme code editing<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-word-press-color-palettes\">FAQ: WordPress Color Palettes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Can I save multiple color palettes in WordPress?<\/strong><\/h3>\n\n\n\n<p>Yes, using themes like Blocksy, you can create and save multiple custom color palettes directly in the Customizer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How do I apply my global color palette to individual elements?<\/strong><\/h3>\n\n\n\n<p>Once set, your global color palette becomes available in all Customizer sections and supported page builders, allowing you to apply consistent colors to headers, buttons, backgrounds, and text with a few clicks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What\u2019s the difference between theme color settings and plugin-based color tools?<\/strong><\/h3>\n\n\n\n<p>Theme-based color settings manage visual presentation as part of WordPress best practices, while plugins add extra functionality. Relying on theme settings ensures better performance and design consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Is Blocksy&#8217;s color system available in the free version?<\/strong><\/h3>\n\n\n\n<p>Yes, all global color palette features described in the article, including custom palette saving and assignment, are available in Blocksy\u2019s free version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Can I reset my color palette to default if I make a mistake?<\/strong><\/h3>\n\n\n\n<p>Yes. Blocksy includes a one-click undo icon next to each color setting in the Customizer, allowing you to revert to the default palette easily.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next Steps<\/h2>\n\n\n\n<p>In this tutorial, we looked into how to create a highly effective color palette in WordPress using the reusable, inspirational, flexible, comprehensive, and extensible color system of our <a href=\"https:\/\/wordpress.org\/themes\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">free Blocksy theme<\/a>.<\/p>\n\n\n\n<p>To get started with smart color management in WordPress, install and activate Blocksy, <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/general\/install-demo-contents\/\" target=\"_blank\" rel=\"noreferrer noopener\">import a starter site<\/a>, open the color options \u2014 then immerse yourself in the world of color.<\/p>\n\n\n\n<p>Learn how to <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/create-transparent-header-wordpress\/\">easily create transparent headers with Blocksy<\/a> in our guide.<\/p>\n\n\n\n<p>In our next tutorial about WordPress and color, we&#8217;ll look into how to add dark mode, including a separate dark mode color palette, to your WordPress site. Stay tuned.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These days, most WordPress themes make it easy to build a color palette with built-in options and visual pickers. But creating one that\u2019s actually effective, consistent, and accessible across devices? That\u2019s the hard part. In this tutorial, we\u2019ll look into how to create a highly effective color palette in WordPress that you can reuse anywhere [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":9426,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-9095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/9095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=9095"}],"version-history":[{"count":129,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/9095\/revisions"}],"predecessor-version":[{"id":13747,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/9095\/revisions\/13747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/9426"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=9095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/categories?post=9095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/tags?post=9095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}