Duotone

Apply a duotone^* effect to the image.

The parameters are, in order:

• highlight color
• shadow color
• opacity (optional)

Colors can be expressed in any accepted format.
If an opacity is given, a semi-transparent version of the duotone image will be composited with the original image. This way the original colors will be visible under the choosen tones.

Example

Without opacity

Try
Copy
https://caravaggio.now.sh/duotone_7aff62_6b11ca/https://cvg-res.now.sh/family.jpeg

With opacity at 0.6

Try
Copy
https://caravaggio.now.sh/duotone_7aff62_6b11ca_0.6/https://cvg-res.now.sh/family.jpeg

Original

Result
An opacity of 0.6 is used here, so original colors are visible:

Reference

This effect is borrowed by gatsby-plugin-sharp and inspired by articles like duotone in js