{"id":6705,"date":"2026-07-12T12:15:46","date_gmt":"2026-07-12T19:15:46","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6705"},"modified":"2026-08-01T15:01:18","modified_gmt":"2026-08-01T22:01:18","slug":"duotone-filters","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/duotone-filters\/","title":{"rendered":"Duotone Filters"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Duotone filters transform images by blending highlights and shadows with two colors. They can be used to create visual consistency, reinforce brand identity, or introduce emphasis without additional graphics.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Suede includes a curated set of duotone filters that integrate seamlessly with the WordPress editor, making it easy to apply consistent treatments to images throughout your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following code defines the available duotone filters in <strong>theme.json<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": &#91;\n\t\t\t\t{\n\t\t\t\t\t\"colors\": &#91; \"#000000\", \"#ffffff\" ],\n\t\t\t\t\t\"name\": \"Black and White\",\n\t\t\t\t\t\"slug\": \"black-and-white\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"colors\": &#91; \"#aa6600\", \"#ffffff\" ],\n\t\t\t\t\t\"name\": \"Accent and White\",\n\t\t\t\t\t\"slug\": \"accent-and-white\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Duotone Filter Examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some examples of an image with duotone filters applied:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Original Image<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1280\" src=\"https:\/\/briangardner.com\/suede\/wp-content\/uploads\/sites\/2\/aspen-mountain-home.webp\" alt=\"Aspen mountain home\" class=\"wp-image-6446\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Image with Black \/ White Duotone Filter<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-black-and-white\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1280\" src=\"https:\/\/briangardner.com\/suede\/wp-content\/uploads\/sites\/2\/aspen-mountain-home.webp\" alt=\"Aspen mountain home\" class=\"wp-image-6446\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Image with Accent \/ White Duotone Filter<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-accent-and-white\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1280\" src=\"https:\/\/briangardner.com\/suede\/wp-content\/uploads\/sites\/2\/aspen-mountain-home.webp\" alt=\"Aspen mountain home\" class=\"wp-image-6446\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">WordPress Duotone Filters<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress core registers its own set of duotone filters, using highly opinionated colors. The following code disables them in <strong>theme.json<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"defaultDuotone\": false,\n\t\t}\n\t}\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Duotone filters transform images by blending highlights and shadows with two colors. They can be used to create visual consistency, reinforce brand identity, or introduce emphasis without additional graphics. Suede includes a curated set of duotone filters that integrate seamlessly with the WordPress editor, making it easy to apply consistent treatments to images throughout your [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Duotone Filters \u2013 Brian Gardner","simple_seo_seo_description":"Explore the duotone filters included with Suede and learn how they create consistent, expressive image treatments in WordPress.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6705","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6705"}],"version-history":[{"count":1,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6705\/revisions"}],"predecessor-version":[{"id":6706,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6705\/revisions\/6706"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}