Dolda2000
Dolda2000

Reputation: 25855

Commutative color blending

I'm not sure if SO is the right site to ask this question on, but can't think of any other that would be an obvious better fit.

I currently have a piece of UI with icons in a list. To (as an overview) indicate some states on the items in question, I highlight them in certain colors. In order to draw the items with a certain highlight color, I use the following simple blending formula:

Where D is the final (destination) color, H is the highlight color, S is the source color from the icon, and the subscripts indicate color components, A being alpha and x ranging over R, G and B. In other words, I blend the RGB components to an extent determined by the highlight color's alpha value, and simply use the source alpha component directly for output alpha (in order to preserve antialiased edges and whatnot).

Rarely, though, but nevertheless sometimes, perhaps two or three of these states are present on a single item. In this case, I simply blend all the highlight colors, each after another. This works well enough, but it bothers me that the blending formula isn't commutative. In other words, if the states are processed in different orders, slightly different colors result. It's really not the end of the world or anything, but it bothers me nevertheless.

Technically, I guess I could enforce some consistent ordering on the states just to make the combined highlight colors come out the same each time, but that seems like such an ugly solution, especially since there isn't really any natural ordering among them. Which, finally, brings me to my question:

Is there any blending formula which achieves some similar (though, of course, not identical) visual result to this one but that is actually commutative? I haven't been able to think of one, but that obviously doesn't mean there isn't one.

Upvotes: 1

Views: 424

Answers (1)

Gene
Gene

Reputation: 46990

It's totally empirical, but you can just generalize your current technique. If you have N highlights, use

       (H_A1 H_X1 + ... + H_AN H_XN) + (N - H_A1 - ... H_AN) S_X
D_X = -----------------------------------------------------------
                                  N
D_A = S_A

Upvotes: 2

Related Questions