Mesmerizing photos often use duotone filters, blending two contrasting colors for a dynamic, high-contrast effect. This adds instant intrigue and drama. With WordPress, incorporating duotone filters is easy, enhancing visuals and motivating your audience effortlessly.

Block themes such as Powder leverage this capability, making it easy for users to add duotone filters to any image on their website.

Below is the code used to define duotone filters in theme.json:

{
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#4d179a", "#ffffff" ],
					"name": "Primary and White",
					"slug": "primary-and-white"
				},
				{
					"colors": [ "#7f22fe", "#ffffff" ],
					"name": "Secondary and White",
					"slug": "secondary-and-white"
				},
				{
					"colors": [ "#000000", "#ffffff" ],
					"name": "Contrast and White",
					"slug": "contrast-and-white"
				},
				{
					"colors": [ "#000000", "#c4b4ff" ],
					"name": "Contrast and Tertiary",
					"slug": "contrast-and-tertiary"
				},
				{
					"colors": [ "#000000", "#ede9fe" ],
					"name": "Contrast and Quaternary",
					"slug": "contrast-and-quaternary"
				}
			]
		}
	}
}

Duotone Filter Examples

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

Original Image

Image with Primary and White Duotone Filter

Image with Secondary and White Duotone Filter

Image with Contrast and White Duotone Filter

Image with Contrast and Tertiary Duotone Filter

Image with Contrast and Quaternary 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,
		}
	}
}