Page 1 of 1
Color change while keeping gradient
Posted: 2017-08-04T07:36:44-07:00
by 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.)
Re: Color change while keeping gradient
Posted: 2017-08-04T07:41:44-07:00
by 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.
Re: Color change while keeping gradient
Posted: 2017-08-04T07:46:29-07:00
by 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).
Re: Color change while keeping gradient
Posted: 2017-08-04T07:49:52-07:00
by 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.
Re: Color change while keeping gradient
Posted: 2017-08-04T08:54:20-07:00
by GeeMack
garrettbernard wrote: ↑2017-08-04T07:49:52-07:00As 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.
Re: Color change while keeping gradient
Posted: 2017-08-04T09:45:01-07:00
by fmw42
If on a Unix-like system, see my script replacecolor at my script link below.
Re: Color change while keeping gradient
Posted: 2017-08-04T10:39:49-07:00
by garrettbernard
GeeMack wrote: ↑2017-08-04T08:54:20-07:00
garrettbernard wrote: ↑2017-08-04T07:49:52-07:00As 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!
Re: Color change while keeping gradient
Posted: 2017-08-04T12:43:35-07:00
by GeeMack
garrettbernard wrote: ↑2017-08-04T10:39:49-07:00They 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.