RGB manipulation formulas

Question

I have been experimenting with the HTML5 canvas api and have written a script that creates black and white images from color images.

The formula for RGB to grayscale that I'm using is: r * 0.2989 + g * 0.5870 + b * 0.1140

I would like to know if anyone knows of any more formulas for manipulating images through RGB values.

possible duplicate of [Converting RGB to grayscale/intensity](http://stackoverflow.com/questions/687261/converting-rgb-to-grayscale-intensity) — Tomasz Nurkiewicz, Jul 13 '11 at 11:33
Actually this question is broader than that. It's asking for ways to change the colors of images in general. — Peter O., Jul 13 '11 at 11:37

score 5 · Accepted Answer · answered Jul 13 '11 at 11:56

here are some

// ADD
c = Math.min( 255, Math.max( 0, c0 + c1 ) )
// SUBTRACT
c = Math.max( 0, c0 - c1 )
// MULTIPLY
c = Math.floor( ( c1 * c0 ) / 0xff )
// SCREEN
c = 255 - Math.floor( ( 255 - c0 ) * ( 255 - c1 ) / 255 )
// LIGHTEN
c = c0 > c1 ? c0 : c1
// DARKEN
c = c0 < c1 ? c0 : c1
// DIFFERENCE
c = c0 > c1 ? c0 - c1 : c1 - c0
// INVERT ( no influence from c1 )
c = 255 - c0
// OVERLAY
c = c0 < 128 ? Math.floor( ( c1 * c0 ) / 127 ) : 255 - Math.ceil( ( 255 - c0 ) * ( 255 - c1 ) / 127 )
// HARDLIGHT
c = c1 < 128 ? Math.floor( ( c1 * c0 ) / 127 ) : 255 - Math.ceil( ( 255 - c0 ) * ( 255 - c1 ) / 127 )

where c0 and c1 are color decimal values and c is the output value

Peter O. · Answer 2 · 2017-05-24T19:35:36.373

Here is a way to darken an image:

 (r*0.5) + (g*0.5) + (b*0.5)

There are several other ways to manipulate RGB colors, such as thresholding, swapping color channels, showing only the red, green, or blue color channels, inverting colors, as well as contrast and brightness, among many others. Searching the Web with those keywords can reveal other ways to change an image's colors. This question explains how to make tints or shades of existing colors. Note in particular the remark about linear RGB and gamma correction.

RGB manipulation formulas

2 Answers2