# Duotone

Create a duotone effect by using **duotone=C1,C2\[,Y]**, where **C1** and **C2** are the colors for the duotone (hex value or color name) and **Y** is the opacity (`Y=0..1`, default`1`).

<mark style="color:green;">**duotone=C1,C2\[,Y]**</mark>

| Preview                                                                                                                               | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/8NlvXaFowNVODEHHaofB/image.png" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/AmbRvmRTKbYCfXrUE7DO/image.png" alt="" data-size="original"> | <p>By default, the image is desaturated first:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00</strong></mark></a></p>                                                                                |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/0yI4ar6d9KxpyfCR2lJ0/image.png" alt="" data-size="original"> | <p>If you prefer, you can convert to grayscale instead:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00&#x26;gray=1">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/clGf0h4TWuTxny8ARlKs/image.png" alt="" data-size="original"> | <p>60% opacity (0.6) of the filter:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00,0.6">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00,0.6</strong></mark></a></p>                                                                                   |