Color change while keeping gradient

[garrettbernard]

I've been looking for a few hours across the internet, but haven't come up with a great solution yet.

I've got images that include a gradient. I need the ability to change the color, including the gradient color, in real-time to any other color.


to


For instance, I might want to go from green to purple, preserving the gradient. Or brown. Or blue. Or whatever color.

Is there a built-in method or Colorify-ing an image and preserving the gradient as well? (ImageMagick might do it by default but I haven't found any documentation covering it.)

[Bonzo]

Are these the actual images you are talking about; some people start with simplified images and it takes longer to get a suitable answer as the actual images are more complicated.

[garrettbernard]

No, not the actual images. Just wanted to provide an example.

The actual use case will be a layered image that will include one or two layers with a gradient. I'll be using either Python or PHP to grab one layer of the image. Someone viewing the image will be able to customize the color of any layer in the whole image, including the layer with a gradient. It may or may not be a gradient to white. It could be a gradient to transparent. Or it could be a gradient from black to other colors.

When a user has finished changing the color of each layer, I'll export them and print the final product (I work with a digital print shop and this is a way to add customization for our end user to existing works).

[garrettbernard]

I don't work for the company, and this isn't my project, but here's a rough example:
http://www.koroseal.com/digital-projects.php?id=1

As an example, I'd want the ability to change the color of this gradient in the original image (which I'd have saved on file) from orange to blue, in real-time within a web page.

[GeeMack]

As an example, I'd want the ability to change the color of this gradient in the original image (which I'd have saved on file) from orange to blue, in real-time within a web page.

Changing the color of a simple gradient image is trivial using IM. If you actually just want to change your green-white square to a purple-white square, that can be done with a very short command with one operation. To change the color of the gradient in various regions of those final images on that web page could be much more complicated.

At its simplest, if you have a grayscale overlay containing only the gradient areas you want to colorize, and transparent everywhere else, you could easily apply any color to the overlay, then composite it over the original image. But to directly change the color from orange to something else while still in those final images may be impractically difficult.

[fmw42]

If on a Unix-like system, see my script replacecolor at my script link below.

[garrettbernard]

As an example, I'd want the ability to change the color of this gradient in the original image (which I'd have saved on file) from orange to blue, in real-time within a web page.

Changing the color of a simple gradient image is trivial using IM. If you actually just want to change your green-white square to a purple-white square, that can be done with a very short command with one operation. To change the color of the gradient in various regions of those final images on that web page could be much more complicated.

At its simplest, if you have a grayscale overlay containing only the gradient areas you want to colorize, and transparent everywhere else, you could easily apply any color to the overlay, then composite it over the original image. But to directly change the color from orange to something else while still in those final images may be impractically difficult.

They should all be simple gradients (or at least be separated into different layers so they're easy to work with individually), so I think I'll make it work. Thanks a bunch for the answer!

[GeeMack]

They should all be simple gradients (or at least be separated into different layers so they're easy to work with individually), so I think I'll make it work. Thanks a bunch for the answer!

If you have an image with nothing more than regions of a particular color of gradient, you can change the color of the gradient easily with "-modulate 100,100,N", where "N" is a number from 0 to 200. Consider a command like this as an example...

Code: Select all

convert -size 200x200 gradient:blue-white -modulate 100,100,166.6 result.png

The input is a blue-to-white gradient. The result is a red-to-white gradient.

Another effective way to modify the color would be to make a grayscale gradient, select a fill color, and "-tint N" the image. With "-tint" the "N" would be an amount specified as a percentage. Try this command to see how that can work...

Code: Select all

convert -size 200x200 gradient:black-white -fill orange -tint 100 result.png

That actually maintains the black end and white end of the gradient while colorizing the mid-tones.

This page on Color Modifications explains most of your basic options in a pretty understandable way.