Percepção colorida de caixas semi-translúteis empilhadas

Quando duas caixas semi-translúcidas são empilhadas no que são as cores percebidas de que as camadas combinadas diferem com base em que forem a ordem que se acalmam. Para entender a razão por trás desse fenômeno, vamos nos aprofundar no conceito de opacidade no CSS. No exemplo dado, o CSS para as caixas semi-translúteis define a opacidade como 0,5, indicando que cada camada tem uma transparência de 50%. Isso ocorre porque a transparência de 50% da camada superior permite que metade da cor da camada inferior seja exibida. Essa mudança nas proporções resulta em uma cor percebida diferente. No exemplo fornecido, isso pode ser alcançado ajustando os valores de opacidade da seguinte forma:

para a camada interna (contendo a cor sólida):

opacidade: 0.25;

para a camada externa (contendo a semi-trransparent): 0,333;

Com esses ajustes, ambas as camadas terão a mesma força de cor 25%, resultando na mesma cor percebida, independentemente da ordem em que estão empilhados.