<p>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 <a href="https://en.wikipedia.org/wiki/YCbCr#YCbCr" rel="nofollow noreferrer">conversion from RGB to YCbCr</a> 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.</p>

CC BY-SA 3.0
2017-07-15T21:12:39.003Z
2017-07-15T21:12:39.003Z
user1118321
<p>Very often, the <a href="https://en.wikipedia.org/wiki/Lab_color_space" rel="nofollow noreferrer">Lab</a> color space is used, since it is close to how humans perceive color. As to which distance to apply: This <a href="https://en.wikipedia.org/wiki/Color_difference#LAB_Delta_E" rel="nofollow noreferrer">wikipedia article</a> mentions a Delta E distance of 1.0 for a just noticeable difference. There are a lot of different formulas resulting in different thresholds.</p>

CC BY-SA 3.0
2017-07-15T09:51:23.973Z
2017-07-15T09:51:23.973Z
JustABit
<p>To change particular colors in an image, generally you multiply the RGB by a transformation matrix. Image manipulation programs such as gimp &amp; 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 <code>#00f</code> blue into <code>#ffd</code> pale yellow. </p>

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

CC BY-SA 3.0
2017-06-29T06:24:35.323Z
OK, made the edit.
Escher
CC BY-SA 3.0
2017-06-29T08:58:03.953Z
Is it understandable now?
Escher
CC BY-SA 3.0
2017-06-29T14:11:30.473Z
Yes, it's way more clear.
Julien Guertault
<transformations><algorithm><color>
Color transform algorithm (that also works on saturation and value/lightness)?
Escher
# Color transform algorithm (that also works on saturation and value/lightness)?

(Asked by: username_0 on 2017-06-28)

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?

**Tags:** transformations, algorithm, color

> **Comments:**
> **username_0**: OK, made the edit.  
> **username_0**: Is it understandable now?  
> **username_1**: Yes, it's way more clear.  

---

## 2 answers

### Answer by username_2 on 2017-07-15. Score: 1

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](https://en.wikipedia.org/wiki/YCbCr#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.


---

### Answer by username_3 on 2017-07-15. Score: 1

Very often, the [Lab](https://en.wikipedia.org/wiki/Lab_color_space) color space is used, since it is close to how humans perceive color. As to which distance to apply: This [wikipedia article](https://en.wikipedia.org/wiki/Color_difference#LAB_Delta_E) mentions a Delta E distance of 1.0 for a just noticeable difference. There are a lot of different formulas resulting in different thresholds.


---

