# 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                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2F6Ysk6CghIdtbmDIGLtEr%2Fmountains.jpg?alt=media\&token=185efafb-b6ea-4b60-91ad-59085bffe121)         | <p>Original image:<br><a href="https://fdocs.filerobot.com/docs/mountains.jpg?w=400">/docs/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FnMh1BlKNUClebtVxPMqB%2Fmountains%20\(1\).jpg?alt=media\&token=5ab47be1-a0c1-4153-b8b8-c94b87966fa3) | <p>By default, the image is desaturated first:<br><a href="https://fdocs.filerobot.com/docs/mountains.jpg?w=400&#x26;duotone=000080,ffff00">/docs/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00</strong></mark></a></p>                                                                                |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2Fou98x8sJ9b1j3NeESFz2%2Fmountains%20\(2\).jpg?alt=media\&token=2b260c2a-4f98-4170-9eec-c4e49c317a33) | <p>If you prefer, you can convert to grayscale instead:<br><a href="https://fdocs.filerobot.com/docs/mountains.jpg?w=400&#x26;duotone=000080,ffff00&#x26;gray=1">/docs/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> |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2F1zc00AvddAuthBStin58%2Fmountains%20\(3\).jpg?alt=media\&token=73224631-cb6d-49f5-a77a-4dc6b4b5589c) | <p>60% opacity (0.6) of the filter:<br><a href="https://fdocs.filerobot.com/docs/mountains.jpg?w=400&#x26;duotone=000080,ffff00,0.6">/docs/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>                                                                                   |