Trying to calculate the Pixastic color adjust values from a hex or RGB color

I've inherited a small web application that has a feature where the user can select a color from a dropdown, then a portion of an image is colorized.

The colorization happens via a Javascript library called Pixastic.

Pixastic loads an image into a canvas element, the processes the image using its Pixastic coloradjust function.

In my case, the image being processed is a transparent PNG with black/gray outlines. The end result is that only the black/gray outlines get colorized.

But here's the tricky part.

The Pixastic coloradjust function doesn't just take a hex or RGB color. It takes a set of adjustment parementers which adjust the red, green, and blue channels. Each adjustment value can be a decimal number from -1 to 1.

The coloradjust function basically works like this:

Let r be the red channel adjustment value.
Multiple r * 255 and let the result be redVal
Loop over each pixel in the image
Add redVal to the red value of the pixel (redPixel)
If redVal + redPixel < 0, then set the pixel to 0
If redVal + redPixel > 255, then set the pixel to 255
Otherwise, set the pixel to redVal + redPixel *Do the same thing for the green and blue channels.

If it helps, here's the actual code of the coloradjust function.

I have a list of existing colors and adjustment values.

My task is to add some new colors to the app but I'm completely stuck on figuring out how to calculate the color adjustment values for PIxastic given a hex color.

There doesn't seem to be any correlation between the existing hex colors and adjustment values so I'm afraid the existing adjustment values were someone figured out manually.

Here are a few example colors from the existing system:

#603314
- Red color adjust -0.1
- Green color adjust -0.5
- Blue color adjust -0.3
#82bad4
- Red color adjust 0.2
- Green color adjust 0.4
- Blue color adjust 0.4

Given all of the above, how can I figure out the color adjustment values for a new hex color like #cc9e3c?

Solution

I've taken a shot at creating some functions to return red, green and blue scale, the way the problem is described. However, none of my calculations match the examples, so I am guessing that I do not understand the question fully. Nonetheless...

function redScale(colorInput) {return parseInt(colorInput.substring(1,3),16)/255 * 2 - 1;}
function grnScale(colorInput) {return parseInt(colorInput.substring(3,5),16)/255 * 2 - 1;}
function bluScale(colorInput) {return parseInt(colorInput.substring(5,7),16)/255 * 2 - 1;}

The substring method grabs the two digit hex value from the colorInput string. After I have the two-digit hex string, I convert it to decimal using parseInt. Divide it by 255, to get it to a scale from 0 to 1. Since the scale goes from -1 to 1 (a length of 2), you multiply it by 2 (to get a scale of 0 to 2), and then subtract 1, yielding a scale of -1 to 1. */

var colorInput = "#603314";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "#82bad4";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "cc9e3c";
rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);

document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS);