Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can I mix colors by using js? #53

Open
CWDll opened this issue Mar 13, 2023 · 3 comments
Open

Can I mix colors by using js? #53

CWDll opened this issue Mar 13, 2023 · 3 comments

Comments

@CWDll
Copy link

CWDll commented Mar 13, 2023

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,

@CWDll CWDll changed the title Can u Can I mix colors by using js? Mar 13, 2023
@MadhavKhera1
Copy link

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
Copy link

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.

@Shivamxeric
Copy link

i will solve u want

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants