{"id":6764,"date":"2023-04-19T20:21:39","date_gmt":"2023-04-19T20:21:39","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=6764"},"modified":"2026-04-22T16:52:18","modified_gmt":"2026-04-22T16:52:18","password":"","slug":"customize-design-library-color-palette","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/customize-design-library-color-palette\/","title":{"rendered":"How to customize the design library color palette"},"content":{"rendered":"\n<p>The Kadence Design Library offers a color palette. This palette consists of a light color, a dark color, and a highlight color. If you use the Kadence Theme, these colors are set in your customizer settings. If you do not use the Kadence Theme, you must add code to your website that defines these variables. <br><br>For Kadence Theme users, you can go to your Customizer &gt; Colors &amp; Fonts &gt; Colors. Here, you can adjust your color palette. <br><\/p>\n\n\n\n<p>The <strong>Light Color<\/strong>&nbsp;is defined by the ninth color,<strong>&nbsp;var(&#8211;global-palette9)<\/strong><br>The<strong> Dark Color&nbsp;<\/strong>is determined by&nbsp;the third color, <strong>var(&#8211;global-palette3)<\/strong><br>The <strong>Highlight Color&nbsp;<\/strong>is determined by the first color,&nbsp;<strong>var(&#8211;global-palette1)<\/strong><br><\/p>\n\n\n<style>.kb-row-layout-id6764_0e33e4-84 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id6764_0e33e4-84 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id6764_0e33e4-84 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-3xl, 6.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id6764_0e33e4-84 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id6764_0e33e4-84 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id6764_0e33e4-84 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id6764_0e33e4-84 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle\">\n<style>.kadence-column6764_d06729-25 > .kt-inside-inner-col{display:flex;}.kadence-column6764_d06729-25 > .kt-inside-inner-col,.kadence-column6764_d06729-25 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column6764_d06729-25 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}.kadence-column6764_d06729-25 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column6764_d06729-25{align-self:flex-end;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}.kadence-column6764_d06729-25 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column6764_d06729-25{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column6764_d06729-25{align-self:flex-end;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}}@media all and (max-width: 1024px){.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column6764_d06729-25{align-self:flex-end;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}.kadence-column6764_d06729-25 > .kt-inside-inner-col{flex-direction:column;justify-content:flex-end;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column6764_d06729-25\"><div class=\"kt-inside-inner-col\"><style>.kb-image6764_ca3554-d9.kb-image-is-ratio-size, .kb-image6764_ca3554-d9 .kb-image-is-ratio-size{max-width:357px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image6764_ca3554-d9.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image6764_ca3554-d9 .kb-image-is-ratio-size{align-self:unset;}.kb-image6764_ca3554-d9 figure{max-width:357px;}.kb-image6764_ca3554-d9 .image-is-svg, .kb-image6764_ca3554-d9 .image-is-svg img{width:100%;}.kb-image6764_ca3554-d9 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image6764_ca3554-d9\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"582\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/colorsa-updated.jpeg\" alt=\"colorsa-updated\" class=\"kb-img wp-image-7955\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/colorsa-updated.jpeg 614w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/colorsa-updated-300x284.jpeg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/colorsa-updated-360x341.jpeg 360w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column6764_a87f7a-62 > .kt-inside-inner-col,.kadence-column6764_a87f7a-62 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column6764_a87f7a-62 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column6764_a87f7a-62 > .kt-inside-inner-col{flex-direction:column;}.kadence-column6764_a87f7a-62 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column6764_a87f7a-62 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column6764_a87f7a-62{position:relative;}@media all and (max-width: 1024px){.kadence-column6764_a87f7a-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column6764_a87f7a-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column6764_a87f7a-62\"><div class=\"kt-inside-inner-col\"><style>.kb-image6764_11fe1b-c3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image6764_11fe1b-c3\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1801\" height=\"896\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated.jpeg\" alt=\"Design Libary style palette updated\" class=\"kb-img wp-image-7927\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated.jpeg 1801w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated-300x149.jpeg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated-1024x509.jpeg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated-768x382.jpeg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated-360x179.jpeg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/04\/Design-Libary-style-palette-updated-1536x764.jpeg 1536w\" sizes=\"auto, (max-width: 1801px) 100vw, 1801px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Other Theme Instructions<\/h3>\n\n\n\n<p>If you use a different theme, you will not have a built-in way to pre-define these colors. However, you can use custom code to insert these values manually onto your website. You can use the Code Snippets plugin to add code snippets to your website. You can add this code to the functions.php file using a child theme.<\/p>\n\n\n\n<p>The following code adds the Kadence Color Palette variables to your website. You can customize these colors by changing the color code for each variable. You will notice there are multiple instances of each variable. Please change the color for each example so the code works.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function custom_global_colors_kadence( $global_colors ) {\n    $global_colors = array(\n        '--global-palette1' =&gt; '#2c6dff',\n        '--global-palette2' =&gt; '#074ef3',\n        '--global-palette3' =&gt; '#1b202c',\n        '--global-palette4' =&gt; '#2f3749',\n        '--global-palette5' =&gt; '#4a5566',\n        '--global-palette6' =&gt; '#717f98',\n        '--global-palette7' =&gt; '#eef2f5',\n        '--global-palette8' =&gt; '#f8f9fd',\n        '--global-palette9' =&gt; '#ffffff',\n    );\n    return $global_colors;\n}\nadd_filter( 'kadence_blocks_pattern_global_colors', 'custom_global_colors_kadence' );<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The Kadence Design Library offers a color palette. This palette consists of a light color, a dark color, and a highlight color. If you use the Kadence Theme, these colors are set in your customizer settings. If you do not use the Kadence Theme, you must add code to your website that defines these variables&#8230;.<\/p>\n","protected":false},"author":148263,"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":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-6764","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":304,"total_views":"6741","reactions":{"happy":"0","normal":"0","sad":"1"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"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":417,"label":"Block Tutorials"}],"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\/6764","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\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=6764"}],"version-history":[{"count":12,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/6764\/revisions"}],"predecessor-version":[{"id":8061,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/6764\/revisions\/8061"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=6764"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=6764"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=6764"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=6764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}