Duotone Filters

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 website.

The following code defines the available duotone filters in theme.json:

{
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#000000", "#ffffff" ],
					"name": "Black and White",
					"slug": "black-and-white"
				},
				{
					"colors": [ "#aa6600", "#ffffff" ],
					"name": "Accent and White",
					"slug": "accent-and-white"
				}
			]
		}
	}
}

Duotone Filter Examples

Here are some examples of an image with duotone filters applied:

Original Image

Image with Black / White Duotone Filter

Image with Accent / White Duotone Filter

WordPress Duotone Filters

WordPress core registers its own set of duotone filters, using highly opinionated colors. The following code disables them in theme.json:

{
	"settings": {
		"color": {
			"defaultDuotone": false,
		}
	}
}