Removing R from RGB Color

Question

Is there a way to remove the red channel of an RGB pixel in a way such that in the resulting picture the red color goes to white not to black? I need to distinguish between red color and blue/black color, but in different light the RGB value varies. If I simply remove the R channel, darker red colors become black and I want the opposite result.

Thanks!

Sadly, no. Setting R to 255 makes everything appear like red, even blue/black pixels are hardly differentiated from red color. — Zdravko Donev
What is the expected output for pure red, yellow, and magenta? And orange and purple? — Joni
If you simply want to distinguish between Red and Blue/Black, why not just look at the relative values of the R channel vs. the Blue channel? Possibly using something like an R/B or R-B measure? — ffledgling
I need to differentiate between blue(shades)/black(shades) and red(shades)/white, so If there is a way to aggrandize the blue and black colors shades it would be the perfect solution or vice versa, to decrease.the blue and black colors. — Zdravko Donev

Unknown Unknown · Accepted Answer · 2016-06-27T20:32:25

If I understand you correctly -

You need to normalize the red channel value and then use it as a mixing value:

mix = R / 255

Then mix white with the normal color minus the red channel using the mix factor:

     Original-red    White
R' = 0             + 255 * mix
G' = G * (1 - mix) + 255 * mix
B' = B * (1 - mix) + 255 * mix

Just notice it will kill the yellow and magenta colors as well as these of course uses the red channel, and the more red the more white is mixed in.

You should be able to get around this using the CMYK color-model, or a combination of both, so you can separate out all the main components. Then override the mix with f.ex. the yellow/magenta components from CMYK.

The mixing process should be the same as described though.

Conceptual demo

var ctx = c.getContext("2d");
var img = new Image;
img.onload = function() {
  c.width = img.width;
  c.height = img.height;
  ctx.drawImage(this, 0, 0);

  var idata = ctx.getImageData(0,0,c.width,c.height),
      data = idata.data, len = data.length, i, mix;
 
  /* mix = R / 255
     R = 0             + 255 * mix
     G = G * (1 - mix) + 255 * mix
     B = B * (1 - mix) + 255 * mix
  */
  for(i = 0; i < len; i+= 4) {
    mix = data[i] / 255;                           // mix using red
    data[i  ] = 255 * mix;                         // red channel
    data[i+1] = data[i+1] * (1 - mix) + 255 * mix; // green channel
    data[i+2] = data[i+2] * (1 - mix) + 255 * mix; // blue channel
  }
  ctx.putImageData(idata,0,0);
};
img.crossOrigin = "";
img.src = "//i.imgur.com/ptOPQZx.png";
document.body.appendChild(img)

<h4>Red removed + to white</h4><canvas id=c></canvas><h4>Original:</h4>

Removing R from RGB Color

1 Answers

Conceptual demo