{"id":5035,"date":"2023-06-15T12:48:28","date_gmt":"2023-06-15T18:48:28","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=5035"},"modified":"2023-07-21T09:40:32","modified_gmt":"2023-07-21T14:40:32","slug":"color-wordpress-block-themes","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/","title":{"rendered":"Exploring Color in WordPress Block Themes"},"content":{"rendered":"\n<p>Colors serve as more than just decorative elements; they are functional tools that play a crucial role in website design. By breathing life into a site, colors enhance its visual appeal and shape its overall mood.<\/p>\n\n\n\n<p>Thanks to the WordPress site editor and block themes, working with colors has become more accessible. These intuitive tools empower website builders to implement various color palettes and effortlessly craft visually striking, user-friendly websites.<\/p>\n\n\n\n<p>Let\u2019s dive into the world of colors, gradients, and duotone filters and discover how they can transform your WordPress website-building experience.<\/p>\n\n\n\n<p><em><em>Feel free to watch the video version of this article or continue reading.<\/em><\/em><\/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=\"Colors, Gradients, and Duotones in WordPress Block Themes\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/vmN4bgXAz28?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><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-7a03825d wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#settings\">Color Settings<\/a><\/li>\n\n\n\n<li><a href=\"#palette\">Color Palette<\/a><\/li>\n\n\n\n<li><a href=\"#gradients\">Gradients<\/a><\/li>\n\n\n\n<li><a href=\"#duotone\">Duotone Filters<\/a><\/li>\n\n\n\n<li><a href=\"#variations\">Style Variations<\/a><\/li>\n\n\n\n<li><a href=\"#accessibility\">Accessibility and Contrast<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"settings\" style=\"margin-top:40px\">Color Settings<\/h2>\n\n\n\n<p>WordPress offers a convenient feature within <code>theme.json<\/code> that enables the customization of color elements, including palette, gradient, and duotone filters. By utilizing this functionality, users can effortlessly adjust the visual appearance of their website.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-string\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">\"color\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"custom\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"customDuotone\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"customGradient\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"defaultDuotone\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"defaultGradients\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"defaultPalette\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Below is an explanation what each of these settings allow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>custom<\/code> : This setting determines whether or not custom colors are available for use in the editor.<\/li>\n\n\n\n<li><code>customDuotone<\/code>: This setting determines whether or not custom duotone filters are available for use in the editor.<\/li>\n\n\n\n<li><code>customGradient<\/code>: This setting determines whether or not custom gradients  are available for use in the editor.<\/li>\n\n\n\n<li><code>defaultDuotone<\/code>: This setting determines whether or not the default WordPress duotone filters are available for use in the editor.<\/li>\n\n\n\n<li><code>defaultGradients<\/code>: This setting determines whether or not the default WordPress gradients are available for use in the editor.<\/li>\n\n\n\n<li><code>defaultPalette<\/code>: This setting determines whether or not the default WordPress palette is available for use in the editor.<\/li>\n<\/ul>\n\n\n\n<p>While it is recommended to keep these options enabled (\u201ctrue\u201d), there may be scenarios where a builder or agency wishes to restrict the client\u2019s color customization capabilities. In such cases, setting these options to \u201cfalse\u201d is advisable to ensure a more controlled and consistent design approach.<\/p>\n\n\n\n<p>This is one of many ways to <a href=\"https:\/\/wpengine.com\/builders\/curate-editor-experience-wordpress\/\">curate the WordPress editor<\/a> and can help create a more custom experience for site owners and maintainers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"palette\" style=\"margin-top:40px\">Color Palette<\/h2>\n\n\n\n<p>Implementing a color palette in a block theme is a straightforward process. The&nbsp;<a href=\"https:\/\/frostwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Frost theme<\/a>&nbsp;defines five custom colors: Base, Contrast, Primary, Secondary, and Neutral. Below is the code snippet utilized to register these colors in the <code>theme.json<\/code> file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-string\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">\"color\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"palette\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#ffffff\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Base\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"base\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#000000\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Contrast\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"contrast\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#0000ff\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Primary\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"primary\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#000099\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Secondary\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"secondary\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#eeeeee\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Neutral\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"neutral\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>By using this code snippet, the Frost theme becomes even better. It registers the specified color palette within the <code>theme.json<\/code> file, ensuring a consistent and visually appealing look for the website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gradients\" style=\"margin-top:40px\"><strong>WordPress Gradients<\/strong><\/h2>\n\n\n\n<p>Color gradients are a design technique that smoothly transitions from one color to another. They are commonly used in various design elements, including backgrounds, images, and user interfaces, to add depth, movement, or visual interest.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/wordpress-gradient-frost-theme-1024x1008.jpg\" alt=\"Example of a gradient background seen int he Frost WordPress theme.\" class=\"wp-image-5361\" width=\"640\" height=\"630\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/wordpress-gradient-frost-theme-1024x1008.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/wordpress-gradient-frost-theme-300x295.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/wordpress-gradient-frost-theme-768x756.jpg 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/wordpress-gradient-frost-theme.jpg 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-tiny-font-size\" style=\"margin-top:10px\">Example of a gradient background seen in the Frost WordPress theme.<\/p>\n\n\n\n<p>In the WordPress Block Editor, you can select from a range of default core gradients. Alternatively, you can customize the gradients specifically for your theme by overriding the default options. This allows you to <a href=\"https:\/\/cssgradient.io\/\">generate patterns<\/a> that align precisely with your design requirements, ensuring a cohesive and visually appealing website.<\/p>\n\n\n\n<p>Carolina Nymark\u2019s&nbsp;<a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/#h-gradients\" target=\"_blank\" rel=\"noreferrer noopener\">comprehensive guide on gradients<\/a>&nbsp;is an invaluable resource in&nbsp;<a href=\"https:\/\/fullsiteediting.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Full Site Editing<\/a>. Her lesson on <code>theme.json<\/code> color options provides a detailed and insightful overview of incorporating gradients into your website design.<\/p>\n\n\n\n<p>Her expertise and guidance enable you to understand and leverage gradients effectively. By incorporating gradients to their full potential, you can create visually stunning and harmonious designs for your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:40px\">Add Custom Gradient via Theme.json<\/h3>\n\n\n\n<p>With the introduction of <code>theme.json<\/code>, builders can now define custom gradients within the Block Editor. This empowers you to create unique and personalized gradient options for your website. Here\u2019s an example of the code needed to add a custom gradient named \u201cTiffany to Royal\u201d:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"version\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"color\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"customGradient\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"gradients\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Tiffany to Royal\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"tiffany-royal\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"gradient\"<\/span>: <span class=\"hljs-string\">\"linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t],\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-extra-margin\">Below is a group block with the custom gradient applied to the background:<\/p>\n\n\n\n<p class=\"has-mirage-color has-tiffany-royal-gradient-background has-text-color has-background has-small-font-size\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">&#8211;wp&#8211;preset&#8211;tiffany-to-royal<br>linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:40px\">Core Blocks That Include Gradient Backgrounds<\/h3>\n\n\n\n<p><em>Button, code, column, columns, comment author name, comment content, comment date, comment edit link, comment reply link, comment, comments next page, comments page numbers, comments pagination, comments previous page, comments title, file, gallery, group, heading, latest posts, list, media &amp; text, next page, no results, page numbers, pagination, paragraph, post author, post author biography, post author name, post comments count, post comments form, post date, post excerpt, post template, post terms, post title, preformatted, previous page, pullquote, query title, quote, read more, search, separator, site tagline, site title, social icons, table, table of contents, and verse. Additionally, the cover block supports gradients as overlays. (<a href=\"https:\/\/fullsiteediting.com\/block-support\/color\/#h-gradients\" target=\"_blank\" rel=\"noreferrer noopener\">source<\/a>)<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"duotone\" style=\"margin-top:40px\">Duotone Filters<\/h2>\n\n\n\n<p>Have you ever encountered a captivating photo on a website and wondered how it achieved that stunning effect? Well, they employed a duotone filter to&nbsp;<a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\" target=\"_blank\" rel=\"noreferrer noopener\">create that desired look<\/a>. Duotone filters are a powerful tool for producing visually striking images with high contrast and vibrant colors, instantly adding intrigue and drama.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Are you looking for a subtle <a href=\"https:\/\/twitter.com\/hashtag\/WordPress?src=hash&amp;ref_src=twsrc%5Etfw\">#WordPress<\/a> upgrade? Consider duotone filters. When served elegantly, they can provide an unexpected design lift. Curious? Watch the video demo below. <a href=\"https:\/\/twitter.com\/hashtag\/DesignTips?src=hash&amp;ref_src=twsrc%5Etfw\">#DesignTips<\/a> <a href=\"https:\/\/t.co\/VUc9WuOksK\">pic.twitter.com\/VUc9WuOksK<\/a><\/p>&mdash; Brian Gardner (@bgardner) <a href=\"https:\/\/twitter.com\/bgardner\/status\/1668997714367922177?ref_src=twsrc%5Etfw\">June 14, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Let\u2019s take the Frost theme as an example, which includes three distinctive duotone filters: Black and White, Primary and White, and Secondary and White. The following code snippet showcases how these filters are implemented in the <code>theme.json<\/code> file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-string\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">\"color\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"duotone\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Black and White\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"black-and-white\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"colors\"<\/span>: &#91; <span class=\"hljs-string\">\"#000000\"<\/span>, <span class=\"hljs-string\">\"#ffffff\"<\/span> ]\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Primary and White\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"primary-and-white\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"colors\"<\/span>: &#91; <span class=\"hljs-string\">\"#0000ff\"<\/span>, <span class=\"hljs-string\">\"#ffffff\"<\/span> ]\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Secondary and White\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"slug\"<\/span>: <span class=\"hljs-string\">\"secondary-and-white\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">\"colors\"<\/span>: &#91; <span class=\"hljs-string\">\"#000099\"<\/span>, <span class=\"hljs-string\">\"#ffffff\"<\/span> ]\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Utilizing this code within your theme.json file allows you to seamlessly apply these duotone filters\u2014such as Black and White, Primary and White, and Secondary and White\u2014providing your images with stunning visual effects. The result is a remarkable enhancement of contrast and color intensity, infusing your website with an added visual appeal.<\/p>\n\n\n\n<p>Below are images that have the Frost duotone filters applied:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-black-white.jpg\" alt=\"Ugmonk Workstation\" class=\"wp-image-5324\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-black-white.jpg 1280w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-black-white-300x188.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-black-white-1024x640.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-black-white-768x480.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-tiny-font-size\" style=\"margin-top:10px\">Image with Black and White duotone filter applied in Frost.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-primary-white.jpg\" alt=\"Ugmonk Workstation\" class=\"wp-image-5325\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-primary-white.jpg 1280w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-primary-white-300x188.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-primary-white-1024x640.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-primary-white-768x480.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-tiny-font-size\" style=\"margin-top:10px\">Image with Primary and White duotone filter applied in Frost.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-secondary-white.jpg\" alt=\"Ugmonk Workstation\" class=\"wp-image-5326\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-secondary-white.jpg 1280w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-secondary-white-300x188.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-secondary-white-1024x640.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/duotone-secondary-white-768x480.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-tiny-font-size\" style=\"margin-top:10px\">Image with Secondary and White duotone filter applied in Frost.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"variations\" style=\"margin-top:40px\">Style Variations<\/h2>\n\n\n\n<p>Style variations have emerged as a fresh perspective that enriches global styles, fully amplifying the capabilities of Full Site Editing and <a href=\"https:\/\/wpengine.com\/builders\/block-wordpress-themes\/\">block themes<\/a>.<\/p>\n\n\n\n<p>Imagine Full Site Editing as your whimsical playground\u2014a world free from the complexities of code where you have the power to transform colors, shuffle headers around, or even craft a unique site from the ground up.<\/p>\n\n\n\n<p>Style variations sparkle like distinctive shades in a vibrant palette. They empower theme authors to provide a unique aura on the parent theme, opening up new aesthetic possibilities. It\u2019s similar to child themes but with a strategic revamp of the journey and framework to reach that point.<\/p>\n\n\n\n<p>The most <a href=\"https:\/\/wpengine.com\/builders\/frost-wordpress-theme\/\">recent update to Frost<\/a> brings a remarkable array of style variations, offering users even greater flexibility and customization options. In addition, the new color palette includes eight distinct and eye-catching variations: Blue, Graphite, Green, Magenta, Orange, Purple, Red, and Teal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:40px\">Frost Style Variations<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-4 is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5175\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue.jpg\" alt=\"Frost - Blue Style Variation\" class=\"wp-image-5175\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-blue-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5176\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite.jpg\" alt=\"Frost - Graphite Style Variation\" class=\"wp-image-5176\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-graphite-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5177\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green.jpg\" alt=\"Frost - Green Style Variation\" class=\"wp-image-5177\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-green-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5178\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta.jpg\" alt=\"Frost - Magenta Style Variation\" class=\"wp-image-5178\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-magenta-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5179\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange.jpg\" alt=\"Frost - Orange Style Variation\" class=\"wp-image-5179\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-orange-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5180\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple.jpg\" alt=\"Frost - Purple Style Variation\" class=\"wp-image-5180\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-purple-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5181\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red.jpg\" alt=\"Frost - Red Style Variation\" class=\"wp-image-5181\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-red-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1200\" data-id=\"5182\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal.jpg\" alt=\"Frost - Teal Style Variation\" class=\"wp-image-5182\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal-300x300.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal-1024x1024.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal-150x150.jpg 150w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/frost-style-variation-teal-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>The guiding light of this endeavor? Prioritizing extendability for developers and users makes the entire process as user-friendly and dynamic as possible. It\u2019s a vibrant synergy of flexibility and user-centric design, creating a more colorful and engaging digital landscape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility\" style=\"margin-top:40px\">Accessibility and Contrast<\/h2>\n\n\n\n<p>Color contrast plays a crucial role in the accessibility of a website. It refers to the distinction in brightness or luminance between the foreground and background colors of visual elements like text or images.<\/p>\n\n\n\n<p>Ensuring sufficient color contrast is vital for accessibility because it enables individuals with visual impairments, including color blindness or low vision, to perceive and comprehend the content on a website or application. The recommended contrast ratio for text is a minimum of 4.5:1, while larger text should have a ratio of at least 3:1.<\/p>\n\n\n\n<p>In line with accessibility guidelines,&nbsp;<a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/design\/use-of-color\/#color-contrast\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress adheres<\/a>&nbsp;to the \u201cAA\u201d level of the Web Content Accessibility Guidelines (WCAG). Tools like the&nbsp;<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebAIM Contrast Checker<\/a>&nbsp;provide a user-friendly way to assess the contrast between two colors using the RGB hexadecimal format to facilitate builders in testing contrast ratios. These tools ensure that the chosen color combinations meet the required accessibility standards, promoting inclusivity and a positive user experience for all visitors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"margin-top:40px\">Conclusion<\/h2>\n\n\n\n<p>Colors are the magic ingredients to bring your website to life, setting the mood and defining the user experience. WordPress (and Frost) has your back if you\u2019re a freelancer or agency keen to dabble in custom colors, gradients, and duotone filters. It allows you to experiment and implement unique color designs, turning any website into a visual treat.<\/p>\n\n\n\n<p>Don\u2019t stop here, though. Consider learning how to craft your own base WordPress theme for client sites. Check out <a href=\"https:\/\/wpengine.com\/builders\/base-wordpress-theme\/\">How (and Why) to Build a Base WordPress Theme<\/a>. It\u2019s a comprehensive guide that will elevate your website-building journey, allowing you to offer your clients even more personalized and creative solutions.<\/p>\n\n\n\n<p>Remember, the world of website design is colorful and exciting, and with WordPress, you\u2019re always just a few clicks away from creating something extraordinary. Happy building<\/p>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-8604be1d4aa4bc46a3d5b3108dd68fec has-global-padding is-layout-constrained wp-container-core-group-is-layout-9b866ece wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#000099;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-75880670 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:152px\"><svg fill=\"none\" viewBox=\"0 0 153 30\" aria-label=\"Frost logo\"><path fill=\"currentColor\" d=\"M46.605 29V5h3.943v24h-3.943Zm2.709-10.286v-3.6H61.52v3.6H49.314Zm0-10.114V5h12.789v3.6H49.314Zm20.134 10.217V15.56h6.069c1.211 0 2.148-.309 2.811-.926.686-.64 1.029-1.52 1.029-2.64 0-1.005-.332-1.851-.995-2.537-.662-.686-1.6-1.028-2.811-1.028h-6.103V5h6.274c1.509 0 2.835.309 3.978.926 1.142.594 2.022 1.417 2.64 2.468.64 1.029.96 2.206.96 3.532 0 1.394-.32 2.605-.96 3.634-.618 1.028-1.498 1.829-2.64 2.4-1.143.571-2.47.857-3.978.857h-6.274ZM66.74 29V5h3.942v24H66.74Zm13.165 0-8.4-10.423 3.669-1.337L84.877 29h-4.972Zm19.348.343c-1.715 0-3.315-.32-4.8-.96a12.422 12.422 0 0 1-3.909-2.64c-1.12-1.143-2-2.457-2.64-3.943-.617-1.509-.926-3.12-.926-4.834 0-1.715.309-3.315.926-4.8a12.72 12.72 0 0 1 2.606-3.909 11.793 11.793 0 0 1 3.874-2.64c1.486-.64 3.086-.96 4.8-.96s3.303.32 4.766.96a11.706 11.706 0 0 1 3.908 2.64 11.864 11.864 0 0 1 2.606 3.943c.64 1.486.96 3.086.96 4.8s-.32 3.326-.96 4.834a11.954 11.954 0 0 1-2.606 3.909c-1.097 1.12-2.388 2-3.874 2.64-1.463.64-3.04.96-4.731.96Zm-.069-3.772c1.623 0 3.04-.365 4.251-1.097a7.612 7.612 0 0 0 2.88-3.017c.709-1.303 1.063-2.8 1.063-4.491 0-1.258-.205-2.4-.617-3.429a7.625 7.625 0 0 0-1.68-2.709 7.356 7.356 0 0 0-2.606-1.782c-.982-.412-2.08-.617-3.291-.617-1.6 0-3.017.365-4.251 1.097-1.212.708-2.172 1.703-2.88 2.982-.686 1.28-1.029 2.766-1.029 4.458 0 1.257.194 2.422.583 3.497.411 1.051.971 1.954 1.68 2.708a8.006 8.006 0 0 0 2.606 1.783c1.005.412 2.103.617 3.291.617Zm23.047 3.772c-1.897 0-3.509-.343-4.834-1.029-1.326-.686-2.515-1.691-3.566-3.017l2.674-2.674c.663.96 1.452 1.714 2.366 2.263.914.525 2.08.788 3.497.788 1.326 0 2.377-.274 3.154-.823.8-.548 1.2-1.302 1.2-2.262 0-.8-.205-1.452-.617-1.955-.411-.503-.96-.914-1.646-1.234a13.279 13.279 0 0 0-2.228-.891c-.8-.275-1.612-.572-2.434-.892-.8-.343-1.543-.766-2.229-1.268-.663-.503-1.2-1.155-1.611-1.955-.412-.8-.618-1.817-.618-3.051 0-1.417.343-2.617 1.029-3.6.709-1.006 1.657-1.772 2.846-2.297 1.188-.526 2.514-.789 3.977-.789 1.577 0 2.983.309 4.217.926 1.257.617 2.274 1.406 3.051 2.366l-2.674 2.674c-.686-.777-1.406-1.349-2.16-1.714-.731-.389-1.577-.583-2.537-.583-1.189 0-2.126.24-2.811.72-.663.48-.995 1.154-.995 2.023 0 .731.206 1.325.617 1.782.412.435.949.812 1.612 1.132a30.47 30.47 0 0 0 2.228.857c.823.274 1.635.583 2.435.926a8.744 8.744 0 0 1 2.228 1.337c.686.525 1.235 1.211 1.646 2.057.411.846.617 1.909.617 3.189 0 2.148-.766 3.851-2.297 5.108-1.509 1.257-3.554 1.886-6.137 1.886ZM140.307 29V5.686h3.943V29h-3.943ZM132.49 8.6V5h19.577v3.6H132.49ZM14.286.714 28.57 29.286H0L14.286.714ZM28.571 10.238l9.524 19.048h-4.762L26.19 15l2.381-4.762Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-9cfa9a5a\" style=\"line-height:1.5\">The ultimate WordPress theme <br>for website builders.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b315634e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/frost-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Colors serve as more than just decorative elements; they are functional tools that play a crucial role in website design. By breathing life into a site, colors enhance its visual [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":4448,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Exploring Color in WordPress Block Themes - Builders<\/title>\n<meta name=\"description\" content=\"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring Color in WordPress Block Themes - Builders\" \/>\n<meta property=\"og:description\" content=\"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-15T18:48:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-21T14:40:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/og-color-wordpress-block-themes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Gardner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/og-color-wordpress-block-themes.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Gardner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/\"},\"author\":{\"name\":\"Brian Gardner\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\"},\"headline\":\"Exploring Color in WordPress Block Themes\",\"datePublished\":\"2023-06-15T18:48:28+00:00\",\"dateModified\":\"2023-07-21T14:40:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/\"},\"wordCount\":1451,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/wordpress-colors-gradients.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/\",\"name\":\"Exploring Color in WordPress Block Themes - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/wordpress-colors-gradients.jpg\",\"datePublished\":\"2023-06-15T18:48:28+00:00\",\"dateModified\":\"2023-07-21T14:40:32+00:00\",\"description\":\"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/wordpress-colors-gradients.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/wordpress-colors-gradients.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"WordPress Colors, Gradients, Duotone Filters\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/color-wordpress-block-themes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Exploring Color in WordPress Block Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\",\"name\":\"Brian Gardner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"caption\":\"Brian Gardner\"},\"description\":\"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.\",\"sameAs\":[\"https:\\\/\\\/briangardner.com\\\/\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Exploring Color in WordPress Block Themes - Builders","description":"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/","og_locale":"en_US","og_type":"article","og_title":"Exploring Color in WordPress Block Themes - Builders","og_description":"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.","og_url":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/","og_site_name":"Builders","article_published_time":"2023-06-15T18:48:28+00:00","article_modified_time":"2023-07-21T14:40:32+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/og-color-wordpress-block-themes.jpg","type":"image\/jpeg"}],"author":"Brian Gardner","twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/06\/og-color-wordpress-block-themes.jpg","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Brian Gardner","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/"},"author":{"name":"Brian Gardner","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e"},"headline":"Exploring Color in WordPress Block Themes","datePublished":"2023-06-15T18:48:28+00:00","dateModified":"2023-07-21T14:40:32+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/"},"wordCount":1451,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/wordpress-colors-gradients.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/","url":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/","name":"Exploring Color in WordPress Block Themes - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/wordpress-colors-gradients.jpg","datePublished":"2023-06-15T18:48:28+00:00","dateModified":"2023-07-21T14:40:32+00:00","description":"Let\u2019s dive into the world of colors, gradients, and duotone filers and discover how they can transform your WordPress website-building experience.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/wordpress-colors-gradients.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/wordpress-colors-gradients.jpg","width":1920,"height":1080,"caption":"WordPress Colors, Gradients, Duotone Filters"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/color-wordpress-block-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Exploring Color in WordPress Block Themes"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e","name":"Brian Gardner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","caption":"Brian Gardner"},"description":"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.","sameAs":["https:\/\/briangardner.com\/"],"url":"https:\/\/wpengine.com\/builders\/author\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=5035"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5035\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4448"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=5035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=5035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=5035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}