Duotone Filters

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": [ "#ffffff", "#ffffff" ],
					"name": "White and White",
					"slug": "white-and-white"
				},
				{
					"colors": [ "#0a0a0a", "#ffffff" ],
					"name": "Contrast and White",
					"slug": "contrast-and-white"
				},
				{
					"colors": [ "#4c1d95", "#ffffff" ],
					"name": "Primary and White",
					"slug": "primary-and-white"
				},
				{
					"colors": [ "#6d28d9", "#ffffff" ],
					"name": "Secondary and White",
					"slug": "secondary-and-white"
				},
				{
					"colors": [ "#8b5cf6", "#ffffff" ],
					"name": "Tertiary and White",
					"slug": "tertiary-and-white"
				}
			]
		}
	}
}

Duotone Filter Examples

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

Original Image

Image with Contrast and White Duotone Filter

Image with Primary and White Duotone Filter

Image with Secondary and White Duotone Filter

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