Hello DEV community. I am working with Gatsby.js and a using the image optimization features which are really cool. I am have come across something called duotone which inside the childImageSharp properties of a fluid container. For example, part of my GraphQL query

mainImage {
              sharp: childImageSharp {
                fluid(
                  maxWidth: 100
                  maxHeight: 100
                  duotone: { shadow: "#95ADE9", highlight: "#AFC4D8" }
                ) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }

Is anyone an expert on DUOTONE, I want a quick way to see how my images would look with different DUOTONE styles, similar to a CSS color picker, but for DUOTONE.

Any suggestions?