Question

I have 2 colors: 1 dynamically set and another that’s always white 0.5 alpha. I want to calculate the resulting white color as if it was drawn on top of the dynamic color using Overlay blend mode.

I’m aware that Overlay combines Multiply and Screen blend modes.

Multiply blend mode’s formula is:

Result Color = (Top Color) * (Bottom Color) /255

While Screen blend mode’s is:

Result Color = 255 - [((255 - Top Color)*(255 - Bottom Color))/255]

How do I calculate the resulting color for the Overlay blend mode?

Is there a UIColor extension class out there that does this out of the box?

Answer 1

There are two part of formula:

First part: If Lower Layer Value > 127.5, then do the following –

Value Unit = (255-Lower Layer Value)/127.5

Min Value = Lower Layer Value – (255-Lower Layer Value)

Overlay = (Upper Layer Value * Value Unit) + Min Value

Second part: If Lower Layer Value < 127.5, then do the following –

Value Unit=Lower Layer Value/127.5

Overlay = Upper Layer Value * Value Unit

From the formual we can see that the final result is much depend on the upper layer value. If the upper layer value is higher(lighter), then the final result is more likely to be lighter.

From here.