DUOTONE

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?

Comments

[Alvaro Montoro]

I don't know about duotone or Gatsby, and I know that this is not related to the question itself, but adding the #help tag could make people find your question faster. Also, you can format the code block using three backticks (`) instead of only one (that way it the code would be easier to read, and maybe easier to help you too.)