Color transform algorithm (that also works on saturation and value/lightness)?

Question

To change particular colors in an image, generally you multiply the RGB by a transformation matrix. Image manipulation programs such as gimp & photoshop have a selective color change function that allows a user to convert pixels within a certain "distance" to the original color in some color space to a new color. Eg, changing #00f blue into #ffd pale yellow.

I'm trying to implement such a function in a <canvas>. What color space and distance definition do these algorithms typically use, and then how do they compute the transformation matrix?

Answer 1

Very often, the Lab color space is used, since it is close to how humans perceive color. As to which distance to apply: This wikipedia article mentions a Delta E distance of 1.0 for a just noticeable difference. There are a lot of different formulas resulting in different thresholds.

Answer 2

I find the hue/saturation or luminance/chrominance spaces to be fairly easy to work in. They follow our intuitive sense of how color works, even if they're not as scientifically accurate as Lab is. The conversion from RGB to YCbCr is a simple matrix multiply. Working in YCbCr would allow you to do things like keep luminance constant while changing hue and/or saturation. You can think of saturation as the distance of the color from the luminance axis (so just the magnitude of CbCr = sqrt(Cb x Cb + Cr x Cr)). The hue is the angle the color point makes with the x-axis when projected onto the CbCr plane. (So you can use atan2(Cr, Cb).) Once you've modified your values, converting back to RGB is another matrix multiply.