> For the complete documentation index, see [llms.txt](https://docs.cloudimage.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudimage.io/transformations/image-filters/colorize/color-overlay.md).

# Color overlay

To create a color overlay by using **colorize=X\[,Y]**, where **X** is the color of the overlay (hex value or color name) and **Y** is the opacity (`Y=0..1`, default `0.5`).

<mark style="color:green;">**colorize=X\[,Y]**</mark> | <mark style="color:green;">**colourise=X\[,Y]**</mark>

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/mf5s1AeKLknohtFNc1Ho) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                             |
| ![](/files/oHiy8IWtzb1pQL3tnOEL) | <p>Color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;colorize=red,0.85">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>colorize=red,0.85</strong></mark></a></p>                                                                                                  |
| ![](/files/bZTxPY0Npo2K2MxPVdI6) | <p>Desaturate and color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;saturate=-100&#x26;colorize=7af,0.6">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>saturate=-100</strong></mark>&<mark style="color:green;"><strong>colorize=7af,0.6</strong></mark></a></p> |
| ![](/files/v6T76RRp9n2tEZVNKGnf) | <p>Grayscale and color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;gray=1&#x26;colorize=7af,0.6">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark>&<mark style="color:green;"><strong>colorize=7af,0.6</strong></mark></a></p>                |