bevacqua / js

:art: A JavaScript Quality Guide
https://ponyfoo.com
MIT License
2.93k stars 502 forks source link

Can I mix colors by using js? #53

Open CWDll opened 1 year ago

CWDll commented 1 year ago

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,

MadhavKhera1 commented 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]

sachinggsingh commented 2 months ago

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.