Open CWDll opened 1 year ago
Here are some ways to mix two or three different colors to a single color in JavaScript : 1: Mixing two RGB color vectors to get resultant. 2: Adding Colours (Colors) Together like Paint (Blue + Yellow = Green, etc) 3: Combine two RGBA colors with JavaScript Example // Fast and easy way to combine (additive mode) two RGBA colors with JavaScript. // [red, green, blue, alpha] based on these maximul values [255, 255, 255, 1]. var base = [69, 109, 160, 1]; var added = [61, 47, 82, 0.8];
var mix = []; mix[3] = 1 - (1 - added[3]) (1 - base[3]); // alpha mix[0] = Math.round((added[0] added[3] / mix[3]) + (base[0] base[3] (1 - added[3]) / mix[3])); // red mix[1] = Math.round((added[1] added[3] / mix[3]) + (base[1] base[3] (1 - added[3]) / mix[3])); // green mix[2] = Math.round((added[2] added[3] / mix[3]) + (base[2] base[3] (1 - added[3]) / mix[3])); // blue
// Will return [63, 59, 98, 1]
When working with colors in JavaScript, they are typically represented in formats like:
Hexadecimal (e.g., #ff0000 for red) RGB (e.g., rgb(255, 0, 0) for red) HSL (Hue, Saturation, Lightness)
Usually, mixing colors requires you to extract and manipulate the individual RGB components. However, this can be clumsy if you want to mix multiple colors without getting into the details of color component calculations. We can instead take benefits of the Canvas API to make this process easier.
I want to mix two or three colors to one color. I don’t care about color components(Using r,g,b or other things)
If there is any way to do this, please let me know! thanks,