CODEWITHSUNDEEP
javascriptrgbhtml5-canvas
Q_Mlilo
Q_Mlilo

Reputation: 1787

RGB manipulation formulas

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.

Upvotes: 2

Views: 2230

Answers (2)

Peter O.
Peter O.

Reputation: 32878

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.

Upvotes: 1

TheBrain
TheBrain

Reputation: 5608

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

Upvotes: 5

Related Questions