Pixaven Blog

Introducing Duotone — Our New Artistic Filter

Introducing Duotone — Our New Artistic Filter

Our latest addition to the vast array of high-performance filters we offer via the Pixaven API is Duotone - an extremely artistic way of mapping two colors onto the darks and lights of an image. Due to its versality and ease of use, we think Duotone will be a great addition to our platform.

What is Duotone

Duotone (sometimes also called Split-Tone) takes two, usually contrasting, input colors and maps them onto the darks and lights of the grayscaled image. The resulting image is then reproduced using only the shades of the two input colors creating a truly striking effect.

Possible uses

Brought back to the mainstream by Spotify in 2015 and exploding in popularity in 2019, this filter is often used to bring a consistancy to the look and feel of visuals coming from different sources and vendors. After treating them with Duotone, images will look as if they were produced by the same designer or production studio.

Another great use of Duotone is large backgrounds of hero headers. By mapping darker variants of your brand’s main palette all the elements of the header will blend together seamlessly.

While Duotone filter can be applied to any input image, the best candidates for split-toning are visuals with lots of contrast or with a solid background.

How to use Duotone with Pixaven API

To give your images a proper Duotone treatment simply add duotone to the stack of filters within the filter hash. This effect expects two input colors as hex-encoded strings in RGB or RRGGBB format. Those colors will than be mapped to the light and dark areas of the input image.

We have updated our Image Filtering docs with a complete Duotone documentation.

{
    "filter": {
        "duotone": {
            "light": "6AFF7F",
            "dark": "00007E"
        }
    }
}

Here’s a quick example of how to use Duotone from within our Node integration:

const Pixaven = require("pixaven");

/**
* Instantiate `pix`
*/

const pix = new Pixaven("your-api-key");

/**
* Provide a publicly available image URL with fetch(string) method
* and apply duotone filter
*/

pix
    .fetch("https://www.website.com/image.jpg")
    .filter({
        duotone: {
            light: "6AFF7F",
            dark: "00007E"
        }
    })
    .toJSON((err, meta) => {
        if (err) {
            return console.log(err);
        }
    });

Duotone, as any other operation in the Pixaven API, can be easily combined with other filters and operations. Say we’d like to resize the input image to a maximum width of 960px, increase contrast and sharpness and apply Duotone effect using a pair of warm colors. Our JSON request would look like so:

{
    "resize": {
        "width": 960
    },
    "adjust": {
        "contrast": 2.5,
        "unsharp": 1.5
    },
    "filter": {
        "duotone": {
            "light": "FF7C01",
            "dark": "2D0456"
        }
    }
}
Example result of combining Duotone with other parameters
Source image credit: Tamara Bellis on Unsplash

Should you have questions about Duotone or requests for other features do not hesitate to contact us anytime.

About the author

Przemek Matylla is the Founder and CEO of Pixaven currently living in Berlin. You can follow him on Twitter or connect with him on LinkedIn.