Why Do Stacked Semi-Transparent Boxes Produce Different Colors Depending on the Order?

Order Dependence of Semi-Transparent Box Color

By stacking two semi-transparent boxes of different colors, one would expect to obtain the same color regardless of the order of stacking. However, experiments show a surprising phenomenon: the final color varies depending on the order in which the boxes are arranged.

The Color Illusion

This phenomenon occurs because the superposition of two semi-transparent layers affects the perception of color. In the first case, when the blue box is placed on top of the red box, the color observed is a muted purple. This is because the opacity of the blue box reduces the intensity of the red color, allowing only 25% of its brilliance to show through.

However, when the order is reversed, the resulting color is a brighter pink. This is because the opacity of the red box has a greater impact on the blue color, reducing its intensity to 25%, while allowing 50% of the red color to show through.

Achieving Consistent Color

To eliminate this order dependence, it is necessary to ensure that the proportion of each color remains consistent, regardless of the stacking order. This can be achieved by adjusting the opacity levels of each layer.

For example, consider the following scenario:

• Top layer opacity (blue box): 0.25
• Bottom layer opacity (red box): 0.333

Under this arrangement, the proportion of each color remains at 25%, regardless of the stacking order. When the blue box is on top, the color observed is a light purple (25% blue, 75% transparent). When the red box is on top, the color observed is also a light purple (25% red, 75% transparent).

The above is the detailed content of Why Do Stacked Semi-Transparent Boxes Produce Different Colors Depending on the Order?. For more information, please follow other related articles on the PHP Chinese website!