Say you have a black & white image and want to display it in many different 2-color schemes.
Or you could use the new duotone CSS custom filter I’ve built. You can find the source for the new filter on Github here.
You do need to be using Chrome with shaders enabled here. If you don’t already have shaders enabled (they’re off by default), navigate to chrome://flags, search for “Enable Shaders”, click the Enable link, and restart the browser. Fortunately, if your browser doesn’t support custom filters or you don’t have them enabled, the image will still show up just fine, though it will still be black & white.
The beauty of the duotone custom filter is that the content can really be anything. It doesn’t have to be an image. It can be a combination of images, text, whatever. Unfortunately, video is not supported yet though.
The filter takes two parameters: “black” and “white”. For each of these parameters you pass in what RGB color you want each to map to. For example, if I want to map black to blue, and white to yellow, I would use the following CSS:
-webkit-filter: custom(url(duotone.vs) mix(url(duotone.fs) normal source-atop), 1 1 border-box, black 0 0 255, white 255 255 0);
Putting this into practice...
Click on the black & white color swatches and you should get a color picker popup that will allow you to change the black & white colors individually.
The fun never stops here.Thief image courtesy of Igor Yanovskiy, from The Noun Project