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
![Ugmonk workstation with iMac](https://powderwp.com/wp-content/uploads/dutone-filters.jpg)
Image with Contrast and White Duotone Filter
![Ugmonk workstation with iMac](https://powderwp.com/wp-content/uploads/dutone-filters.jpg)
Image with Primary and White Duotone Filter
![Ugmonk workstation with iMac](https://powderwp.com/wp-content/uploads/dutone-filters.jpg)
Image with Secondary and White Duotone Filter
![Ugmonk workstation with iMac](https://powderwp.com/wp-content/uploads/dutone-filters.jpg)
Image with Tertiary and White Duotone Filter
![Ugmonk workstation with iMac](https://powderwp.com/wp-content/uploads/dutone-filters.jpg)
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,
}
}
}