How to multiply two colors in javascript? - Stack Overflow

admin管理员组

文章数量:1200965

The given parameters are r,g,b of two colors.

How can I multiply them? (Like blending mode->multiply in Photoshop)

Example:

color1:0,255,255

color2:255,255,0

multiplied:0,255,0

The given parameters are r,g,b of two colors.

How can I multiply them? (Like blending mode->multiply in Photoshop)

Example:

color1:0,255,255

color2:255,255,0

multiplied:0,255,0

• javascript
• colors
• html5-canvas

Share Improve this question Follow asked Aug 27, 2012 at 14:02 user669677user669677 3

• u have to use matrix multiplication for that – Nikhil D Commented Aug 27, 2012 at 14:05
• Please show us your code to give us an impression of the data structure you struggle with. Or do you ask for the multiply operator *? – Bergi Commented Aug 27, 2012 at 14:05
• I don't know the method of this effect. – user669677 Commented Aug 27, 2012 at 14:06

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 9

Based on the simple multiply formula, here is a javascript function that should work for RGB:

function multiply(rgb1, rgb2) {
    var result = [],
        i = 0;
    for( ; i < rgb1.length; i++ ) {
        ​result.push(Math.floor(rgb1[i] * rgb2[i] / 255));
    }
    return result;
}​

Using modern JavaScript:

const multiply = (rgb1, rgb2) => rgb1.map((c, i) => Math.floor(c * rgb2[i] / 255))

Here is a fiddle using background colors you can play with: http://jsfiddle.net/unrLC/

Here's the formula for multiplying colors (as well as other blend mode formulas).

Formula: Result Color = (Top Color) * (Bottom Color) /255

You can implement this very easily in JavaScript.

var newRed = red1 * red2 / 255;
var newGreen = green1 * green2 / 255;
var newBlue = blue1 * blue2 / 255;

You translate the color components to a value between 0 and 1, then it's simple multiplication. Thanslate the result back to the range 0 to 255:

0, 255, 255  ->  0, 1, 1
255, 255, 0  ->  1, 1, 0

0*1 = 0, 1*1 = 1, 1*0 = 0

0, 1, 0  ->  0, 255, 0

I guess the aim is to multiply color ranges from 0 to 255. Reduce them to a range of [0, 1], multiply them, and expand them again:

color_new = ( (color_1 / 255) * (color_2 / 255) ) * 255
color_new = color_1 * color_2 / 255

本文标签： How to multiply two colors in javascriptStack Overflow