CODEWITHSUNDEEP
javascriptcsswebcolors
FK-
FK-

Reputation: 1572

Subtract colors

I will try to explain my question with an example:

  1. Let's say we have a background colored in a shade of red (easy to find out - color picker)
  2. There is a semi-transparent element in front. It is colored blue but appears to be purple.
  3. Again the resulting purple shade is easy to find but is there a wayt to find/compute the semi transparent blue shade?

Given: rgb(100,0,0) + x = rgb(100,0,100)

Find: x = rgba(0,0,100,0.5)

My actual case:

Background:rgb(147,150,72), Element rgb(44,100,62)

background foreground

This is partially solved in this question for the sole case of white backgrounds, I am actually looking for a more general solution. I have tried to adapt the javascript code but I don't really understand how it is done or if a general solution is even possible. I might be able to code it myself is someone understand how it works and tells me. (if solved I will post solution here of course)

Links:

Upvotes: 1

Views: 1626

Answers (1)

Lazzaro
Lazzaro

Reputation: 189

A general exact solution is not existent.

As stated in the answer you linked to

C = X * a + Y * (a-1)

is the formula to calculate the color channel C out of the colors X and Y, while a is the alpha value of X.

So, when you try to find out the color + alpha channel, you have to solve this equation 3 times (once for each color). Each of those equation does have 2 unknowns.

So without requiring additional conditions (e.g. the one mentioned in your second link) to apply, there is an infinite amount of different solutions (or in the specific case of one byte per color channel, up to 256).

While determining one exact solution is impossible, you can, of course, determine one or more possible solutions, with the following way:

X = C/a - Y + Y/a // Formula from above solved for X

So the possible solutions are

r3 = r2/a - r1 + r1/a    
g3 = g2/a - g1 + g1/a
b3 = b2/a - b1 + b1/a

with

  • rgb(r1, g1, b1) being the background color,
  • rgb(r2, g2, b2) being the mixed color
  • and rgba(r3, g3, b3, a) being the color that was painted on the background.

If you now select a so, that none of r3, g3 and b3 are below 0 or above 255, you get a valid solution.

Upvotes: 2

Related Questions