{"id":1772,"date":"2019-11-01T23:12:34","date_gmt":"2019-11-01T23:12:34","guid":{"rendered":"https:\/\/www.kadenceblocks.com\/?post_type=ht_kb&#038;p=1772"},"modified":"2025-01-24T17:45:39","modified_gmt":"2025-01-24T17:45:39","password":"","slug":"how-to-define-a-color-palette-with-kadence-blocks","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/how-to-define-a-color-palette-with-kadence-blocks\/","title":{"rendered":"How to define a color Palette with Kadence Blocks"},"content":{"rendered":"\n<p>Gutenburg has a default color palette which most themes will override with their own custom colors. For example, when editing in the paragraph block this color palette would look something like the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/11\/Screen-Shot-2019-11-01-at-6.04.22-PM.png\" alt=\"\" class=\"wp-image-1773\" style=\"width:400px\" \/><\/figure>\n\n\n\n<p>But let&#8217;s say you want to change this to be the colors you set for your website. You can do that through the Kadence Blocks controls. First, click on the Kadence Blocks logo icon in the top right corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/11\/Screen-Shot-2019-11-01-at-6.06.47-PM.png\" alt=\"\" class=\"wp-image-1774\" style=\"width:500px\" \/><\/figure>\n\n\n\n<p>Next, you will see the color palette and there you can click the &#8220;add color&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/11\/Screen-Shot-2019-11-01-at-6.07.27-PM.png\" alt=\"\" class=\"wp-image-1775\" style=\"width:500px\" \/><\/figure>\n\n\n\n<p>Once you&#8217;ve added a color (you can add as many as you want to use) you can turn off the theme colors so only your palette would show using the &#8220;Use only Kadence Blocks Colors?&#8221; switch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/11\/Screen-Shot-2019-11-01-at-6.10.41-PM.png\" alt=\"\" class=\"wp-image-1776\" style=\"width:400px\" \/><\/figure>\n\n\n\n<p>Now reload your page and once you open the paragraph block again you will see your new color palette instead of the theme or Gutenberg default.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/11\/Screen-Shot-2019-11-01-at-6.12.21-PM.png\" alt=\"\" class=\"wp-image-1777\" style=\"width:400px\" \/><\/figure>\n\n\n\n<p><strong>Important Note<\/strong>: This feature is designed to give users <strong>quick access<\/strong> to a wider range of colors beyond the predefined theme palette. Unlike theme-defined colors, these additional colors are <span style=\"text-decoration: underline\">not intended<\/span> to function as variables, meaning the blocks using these colors won&#8217;t dynamically update when changes are made to the palette.<\/p>\n\n\n\n<p><strong>When Is It Best to Use This Feature?<\/strong><\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items1772_a45329-04:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items1772_a45329-04 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items1772_a45329-04 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items1772_a45329-04 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items1772_a45329-04 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items1772_a45329-04 kt-svg-icon-list-columns-1 alignnone kt-list-icon-aligntop\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-1772_47e731-8e .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-1772_47e731-8e\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Use it for pages or posts that don\u2019t require consistent updates, such as one-time event pages, seasonal promotions, or campaign microsites.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-1772_62d1d9-c2 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-1772_62d1d9-c2\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Add shades or complementary tones that support your main palette for a richer design without altering the core branding colors.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p><strong>Best Practice:<\/strong> Since these additional colors don\u2019t update dynamically if you change the theme palette, reserve them for elements that are unlikely to need updates or that can stand alone as a unique design for a particular context. For consistent branding and easier global updates, rely on the theme-defined palette whenever possible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenburg has a default color palette which most themes will override with their own custom colors. For example, when editing in the paragraph block this color palette would look something like the image below: But let&#8217;s say you want to change this to be the colors you set for your website. You can do that&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[411],"doc_tag":[],"knowledge_base":[7],"class_list":["post-1772","docs","type-docs","status-publish","hentry","doc_category-blocks-start","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":305,"total_views":"8664","reactions":{"happy":"0","normal":"2","sad":"0"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Getting Started","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/blocks-start\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":411,"label":"Getting Started"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":4,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1772\/revisions"}],"predecessor-version":[{"id":10737,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1772\/revisions\/10737"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=1772"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=1772"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}